Page Jump / Shifiting in webpages

Hi,

I made a site and its jumping / shifting from left to right when the page loads. I tried all sorts of thing to stop that happening but its happening no matter what I do, can anyone please help me determine as to why that is happening and how can I stop it ?

The website is at: http://heriotsguesthouse.co.uk/index.php

Just goto “Our Rooms” menu and click on any link, you will see that when you click it shifts / jumps, maybe it will not happen on first time loading but when you go back to same pages again then you will notice the jump / shift.

Please help to resolve.

Thanks.

Before looking at your site I assumed it was due to a vertical scroll bar but that is not the problem.

I do not know how you have written your php code but I had a similar problem a few years ago and I now include the content into a sort of template. You can see when the page is visited more than once it is ok. This will be due to the page being cached.
So I assume your page calls the layout every time and the images need time to load. With my method I have the page layout/background the same for every page and just include the text and photos relevant to that page. I also have a navigation system where the links depend on the page name which also makes it easier to add remove pages.

I suppose all those different style sheets and Javascriipts do not help either. Google for a webpage load speed analyser and see what it reports.

I didn’t really see a page jump but I would hazard a guess that on a slower connection you might see a shift in page position as the content is redrawn and the vertical scrollbar gets filled on.

Maybe try adding the following and see if it fixes anything.

html {
    overflow-y: scroll; 
}

I would call it more of a “flicker”.

So you mean its normal ???

Did you try the code I gave you to see if we are talking about the same thing?

All pages have to load and usually load progressively so there will always be a certain amount of re-jigging as the page loads. It is important to add height and width attributes to your images to aid the browser in allocating space (applying in css is no help here) as that will stop some page jumps.

However, pages that are fluid or based on content width will always move around a little as the browser works out what goes where.

Hi,

Yes i did, it did fix the pahe shift issue but now it would first load the header, then stop then load the rest of the content but shifting got improved in chrome and IE but remained in Firefox. Weird. Also I tried page speed test as recommended by Rubble but the pages seems to be well under and took only 0.5 sec to load.

As for the images they are optimzied but you could be correct, i have to do col-6 or something like that for the images so browser can load them up accordingly. Right now i am not putting any width height due to responsive thing.

I will try.

Thanks.

It doesn’t affect responsiveness as that is handled in the CSS. The image should still have its correct height and width attributes in the html but the css will over-ride it. The browsers needs to know the image aspect ratio before it can make it responsive anyway which it can find from the image attributes when present. Otherwise it all has to wait until the image is loaded and cached.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.