Drastic difference in Mobile score on pages that load the same way

[David Kyle]

Hello

I am trying to solve an issue with a website I am working.

The root page has mobile score of 93.  I have all my css in a common footer file.  
All sub pages have a mobile score of 79. It states the issue is two render blocking CSS files.
"Approximately 68% of the above-the-fold content on your page could be rendered without waiting for the following resources to load."

This is simply not true. The footer file include is the last thing called in the html, just like the root page with a score of 93.

These pages load in a snap.  3rd party tools consistently show less than a one second load time. 

The only difference between the root and the subpages in question are:

1) the root page has a slider, the sub pages do not

2) the sub pages have a contact form, the root page does not.

The desktop version of all pages have similarly good scores, 93-95. 

Does anyone have an idea on why this might be happening?
I've worked really hard on making this site fast, and it's frustrating to see other sites that physically take much longer to load receive a higher mobile score.

Thanks
David

[Rick Steinwand]

You don't understand what render blocking means. You have css required to render the visible portion of the top of the page, yet you're loading it last. You should put your css in the head OR inline critical css (css required to render the visible portion) and then load the rest of the css after page load. You're bucking the established norm, without finishing the job.

https://www.sitelocity.com/critical-path-css-generator

https://github.com/filamentgroup/loadCSS

[David Kyle]

Hi Rick

 

Thanks for the reply.  You're absolutely correct. I don't understand what render blocking really means.

This site is a template I purchased.  CSS was originally in the head. When it was, the score was bad on both Desktop and Mobile.  When I moved it to the footer, that improved the score, and so I took that as CSS being at the head was the issue.

Thank you for the resources.  I will research and hopefully figure out what I need to do to fix it.

David Kyle

 

[Rick Steinwand]

Render blocking means your page can't be updated until the file finishes loading. Scripts and stylesheets can both affect appearance and have to load before the page can be displayed.