It’s a never ending challenge these days to maximise performance of your website and get it loaded on the visitor’s device in as little time as possible; 1 or 2 seconds is what Google expects and is almost demanding of us with their ‘mobile first’ approach.
The ‘mobile first’ makes perfect sense since, looking at a lot of website’s analytics, clearly the majority of visitors are using their mobile phones more than a laptop or desktop computer.
Not all trends are worthy of your efforts
Some of the things Google’s mobile speed test recommend include:
- Ensure text remains visible during webfont load. That means leveraging the font-display CSS feature to ensure text is user-visible while webfonts are loading.
- Defer Unused CSS. Style sheets containing unused CSS can signiﬁcantly increase the time users wait before content appears on their screen. Delete unnecessary CSS.
- Serve Images in Next-Gen Formats. Encoding your images in JPEG 2000, JPEG XR, and WebP will load faster and consume less mobile phone data. Serve a fallback PNG or JPEG image for other browser support.
- Eliminate Render-Blocking Resources. Resources for page styling and functionality are delaying visibility of primary content on the page. Deliver critical JS/CSS inline and defer all non-critical JS/styles.
I really have my doubts about this…
Is sub 2 second load time really achievable? Really?
Yes. Certainly. But you have to be selective about the suggestions you pay any attention to. Image formats are something you might as well leave alone for now.
Google refers to JPEG 2000 as if it’s something everyone can export their images as and as if everyone uses them. They don’t. Even PhotoShop doesn’t give the option to export as JPEG 2K out of the box and that surely says a lot about the failed adoption of ‘the new way of making images’!
Next-Gen Image Formats suggested by Google’s developer tools are not widely supported by current web browsers!
In test results, Google offers advice to use 3 types of ‘Next Gen image formats; WebP, JPEG 2000 and JPEG XR WebP, JPEG 2000 and JPEG XR provide links to see if they are universally compatible (with browsers). The summary; they’re not. Take a look for yourself;
Here’s how incompatible those 3 file types are currently (the red areas mean that browser does not support the file type).
Based on that, I think we should all stick to compressed JPEGs and PNGs for the time being.
And what about the ‘eliminating render-blocking resources‘? Do you even know what that means?
What on earth does render blocking resource even mean?
Render blocking resources are things within your website that the page can’t load without so it delays the page rendering on the user’s browser. So let’s say you a CSS file that has to load in order for text to appear on your page, the text can’t appear until that CSS file has been received and if that file takes an extra second to deliver from the server to the user’s browser, it slows down (blocks) the rendering of the whole page.
Here’s the thing, and the reason I called this post the ‘Catch-22 of Website Load Speed‘; Google itself is often the render blocking resource!
Google fonts are used on millions of websites and they have to be delivered from Google before the page can render. Google also has analytics code and a JS file it has to load millions of times, again, from the Google servers.
Meanwhile, Google tells us our websites need to load in a couple of seconds to be given brownie points in the search results. Hence the catch-22.