Forum Moderators: Robert Charlton & goodroi

Message Too Old, No Replies

Fixing Google's "jumpy" page load... before and after

         

smallcompany

4:20 am on Feb 25, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Since recently I started paying more attention to optimizing sites for mobile and for speed as well. I started using Google's PageSpeed Insights and following instructions from there.
After addressing the two issues listed below the best I could:

- Prioritize visible content
- Eliminate render-blocking JavaScript and CSS in above-the-fold content

I found my site showing kind of text skeleton first and then getting into its shape. In order to fix that, I'm supposed to figure what's needed to load first for the above the fold. I am still working on this, but am little doubtful as my site is in container(s) which reach below the fold. In addition how do I "divide" jQuery or whatever else is being used?

Anyhow, as going through this experience, and also being a heavy user of Google AdWords, I have just figured why Google did what made me "hate" AdWords interface since some years ago.

Whenever they did the last big change, one of the biggest culprits I found was that each AdWords page would take some time to load in a rather awkward way. As I would just set my mouse pointer and click onto a certain link, that part of the page would suddenly move so my link would be moved a bit as well. Since day one I found this soooooo frustrating. And yes, I have 25Mbps Internet connection so no Internet connection speed issue should be blamed. The site is simply "jumpy" and forget clicking onto links as soon as you see them.

My point by using an example of AdWords is that Google, in order to make the site load in the way they determined to be the best for speed and usefulness, actually screwed up and made the site less useful and frustrating.
What is even worse is that they, by having tools like PageSpeed work in the way they do, push other people make same mistakes.

Put it simple - seeing how the page is being rendered in your browser is rather distracting. I would rather have blank page until it gets loaded - properly.

Fortunately I'm in charge, and I'll end up with whatever I think be the best for visitors of my sites, not with what Google's or any other "blind" tool says.

Cheers!

lucy24

8:19 am on Feb 25, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I found my site showing kind of text skeleton first and then getting into its shape.

That's the effect of deferred CSS. Now personally I think g### is misguided on this point: If you're loading up a page and at first you just get the bare-html "skeleton" you're liable to think there is something wrong with the site. I'd just ignore this category of complaint and concentrate on the really practical ones, like @media rules looking at viewport width.

I would rather have blank page until it gets loaded - properly.

Same here. And that's speaking as a user.

One thing you can do is keep your number of external stylesheets to a minimum. I'd say an absolute ceiling of three; one or two is obviously better. I used to amuse myself by counting <link rel = "stylesheet" lines in <head> sections. On, ahem, other people's sites. But when the total number got to be over THIRTY, it just wasn't fun any more.

Robert Charlton

8:42 am on Feb 25, 2015 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



This may be overly broad, but I was just reminded at how bad CNN is, if anyone wants to see if it fits the proposed model.

CNN has two external stylesheets, depending on how you count them... but two for all browsers except IE8, OR two if IE8.

It's seemed to me that a lot of large news sites have loading problems. I've always assumed it was their ad networks. I've never looked into the problem as closely as smallcompany has.

toidi

1:06 pm on Feb 25, 2015 (gmt 0)

10+ Year Member Top Contributors Of The Month



Put it simple - seeing how the page is being rendered in your browser is rather distracting. I would rather have blank page until it gets loaded - properly. 


I agree and disagree. While i find it very annoying to watch a page load, i can see that the page is actually loading and take the time to wait. However, when i see a blank screen for any length of time, my finger starts to quiver wanting to hit the back button. A blank screen looks like a broken link, so having something happening while the page is loading might prevent users from backing out prematurely.

rish3

1:46 pm on Feb 25, 2015 (gmt 0)

10+ Year Member Top Contributors Of The Month



If you haven't heard the term before, this is usually called "FOUC" or "Flash of Unstyled Content". I bring it up because it's useful as a search term if you want to see how other people are dealing with it.