I’m trying to improve my Google Page Speed score. Currently 51/100 for mobile and 83/100 for desktop.
One of the issues is “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. The two items where this is applicable is my minified CSS file and an external Google font file. Is there anything I can do to fix this?
More generally, any feedback / suggestions on how I can improve my Google Page Speed Score.
My site: http://www.backpackerjobboard.com.au/
Thanks!
2
Answers
Please,Minify your html,js and css files.and also reduce the image size as much you can.
use this for minify css:
http://cssminifier.com/
Optimising “Render-Blocking” elements is more about perceived load time as opposed to maximising pagespeed.
For CSS, this involves inlining CSS for your critical css. This is often referred to as ‘Above-the-fold’ content, though that terminology is incorrect – Critical CSS involves base styles, layout (i.e. grid system) etc.
Here is a Critical CSS Generator available online (and on GitHub):
http://jonassebastianohlsson.com/criticalpathcssgenerator/
The reason why you do this is to ensure that the most important styles of your page load with the HTML, and the added file size to HTML should be negligible with gzipped web pages.
The other Rendering issue is with Google Fonts, which is very common. Ignore Google’s Advice on this; what it recommends is to place the Google Fonts in the footer.
A better way is to simply generate the web-font yourself using a tool like Font Squirrel Webfont Generator to save the HTTPS Request to Google (which causes a traffic jam in loading your assets.)
However, The Pagespeed Tool is neglecting the main reason your webpage speed suffers: You have 68 HTTP Requests. About a third of these are JS fles, which should be either aggregated into one .js file or using a library like Lab.js to defer js* rendering to reduce HTTP Requests for these files.
*If you use a blocking/loading library like Lab.js, you would have to inline critical Javascript within script tags in your HTML or exclude key js files from being deferred.
As for the Mobile Score, the Google Pagespeed tool is misreading your website as mobile unfriendly. Testing this on another internal page your score is ~74 for mobile.
This is probably due to it timing out and thinking the whole page is rendered or something like that – when using tools like these always do more than one page because they can make mistakes.
Most of your mobile issues would be fixed by inlining your css and deferring your Javascript.
P.S. Don’t get too obsessed with the score, most of the things that take marks against you are minor (i.e. less than 5%) adjustments for images, css etc.