Part two of two
In my last blog, I discussed how Google updated its page speed insights and thus creating chaos throughout the land. There has been more than a few complaints from web designers about the new metrics. And since I’m only an amateur designer, I turned to our Russian about what may be wrong with the insights, why everyone is in a panic, and what we really should be using to gauge our site speeds.
Wendy Lindars: What’s wrong with Google’s new page speed insights analytics?
Kevin Fisher: There is nothing really wrong about it. The problem is Google seems to have chosen to take the approach of auditing all of the optimization methods you could use that would possibly improve the loading time on your site. While that is all well and good, not all of the suggested optimizations are always feasible, or even advisable, for reasons unrelated to page speed, such as browser support. For every developer and every site, the most important thing is really about finding the perfect balance between speed and performance, compatibility, user experience, creativity, flexibility, and scalability. While tools like Page Speed Insights can be very useful — and you can and should use the recommendations to aim for the best possible speed score — it’s also important to remember that it is ultimately not worth chasing after a few extra points on Google’s page speed analysis. This is especially true if it is going to result in less engaging user experience or worse cross-browser compatibility.
For everyone out there who has been actively optimizing their sites and making regular updates to improve performance, even if your site was achieving a perfect score of 100 on both desktop and mobile prior to the update, and it’s not anymore, there might be good reasons to ignore Google’s recommendations, at least for a while. But there may also be a few extra valuable insights that will help you to squeeze a bit better performance out of your site on mobile, and every little bit helps.
As an example, one of the new “Opportunities” that Google’s assessment points out, which will likely be the case for every site that exists, is to “serve images in next-gen formats.” If you’re wondering why your score dropped, this is most likely to be at least one of the reasons. If we dig into that a little deeper, we see that Google recommends using JPEG 2000 or JPEG XR to replace traditional JPEG images, and WebP to replace JPEG or PNG images:
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.
There’s just one problem there. Browser support for JPEG 2000 is virtually non-existent unless you only plan on serving your site to only Apple users. So that’s out. Browser support for JPEG XR is arguably worse, given that it’s currently only supported on IE11, Edge and Mobile IE, which collectively make up about 5% of global browser usage. WebP, on the other hand, looks much more promising concerning browser support, but still lacks support from some popular browsers such as Firefox and Safari.
Overall the ideal solution would be to implement WebP support with a fallback to JPEG/PNG, in preparation for improved browser support that’s likely to come in the near future. But keep in mind that no matter how much it improves your score right now, your real-world page load improvements, if any, will be mostly dependent on whether your user base leans heavily towards one browser or another. In other words, if you simply dropped a few points due to this “Opportunity,” it’s not exactly an emergency to pour hours of development into it, but it is something that you should consider implementing in the interest of ongoing improvement.
WL: Is there any page speed tool out there that we should be using over others?
KF: In my opinion, the best approach is always to take a look at all of the options and information, and then assess what makes the most sense and will give you the most performance gains without sacrificing any other important aspects of your site. GTMetrix.com is another excellent tool for developers to see where they can put more focus to improve their site performance. It uses both PageSpeed and YSlow (Yahoo’s page speed metrics) to provide a more comprehensive report of your site optimization.
Recommended for You
Webcast, January 16th: The Latest in Growth Hacking: Link Retargeting
Before the update to Google’s Page Speed Insights tool, GTMetrix.com already used its own customized version of PageSpeed, which offered a much more detailed analysis and was, therefore, more difficult to score highly under, let alone achieve a perfect 100% score. While it was relatively easy to reach 100% optimization from Google, many people in the industry always considered it a “unicorn” and came up with a lot of excuses to not even try. I personally think that is the wrong approach. Even if it is near impossible to hit that perfect score, there’s nothing at all wrong with attempting to. In the end, even if you don’t hit it, if you’re going about it the right way, all of that effort is only going to lead to improved performance, which is something you should always pursue while maintaining a good balance, of course.
On the other hand, I don’t know of very many sites out there that were ever hitting a perfect 100% score on GTMetrix.com, especially not sites with heavy graphical elements and video. Ours happens to be one of them, and I think that says a lot about the importance of pursuing such improvements regularly and aggressively.
To add perspective, GTMetrix.com also provides a list of the top 1,000 sites in the world and their performance stats.
WL: Is it possible to follow every suggestion Google gives for speed? Why or why not?
KF: I would say that it’s not so much about what’s “possible,” but rather what’s feasible and what’s worth it. Again, it’s all about balance. I’ll take a site that scores a 95% but works in every browser and has a better conversion rate than a site that scores a 100% but fails in some popular browsers and delivers a poorer user experience, or is not as aesthetically pleasing. In all likelihood, for most users, both sites are still going to load somewhere within that 1-second range depending on a lot of outside factors, and if you’re comparing a 5% optimization improvement to a 10% conversion improvement, that’s an easy choice every time.
That doesn’t mean that the site that is converting 10% more shouldn’t aspire to improve their optimization if they can find a way to do that without compromising everything that makes their website a better converter, then they will be that much better than they were before.
WL: Is there anything that someone who doesn’t have the web development skills can do to optimize their site?
KF: The biggest thing that can have a huge impact that the average person can easily do is image optimization. Images account for about 64% of all website delivered content, that’s huge. Usually, the number one contributing factor to a terrible optimization score is non-optimized images and/or unnecessarily large images.
There are so many simple, free online tools that will compress your images flawlessly for web use, such as TinyPNG and Optimizilla. GTMetrix.com even gives you a link to download the optimized version of each image that doesn’t meet their compression standard after you scan your site.
WL: Is there anything you feel Google missed in its insights report? Any important components?
KF: It is somewhat surprising with their added emphasis on image formats, that there was no recommendation of using SVGs (Scalable Vector Graphics) in place of PNGs for transparency and other effects. SVGs are vastly superior in many ways and can be delivered inline without requiring an additional request. They can also be more easily manipulated and scaled to any size without loss in quality on the fly. A very big contributing factor to slow load times is the number of resources the browser has to request and load individually. Replacing a significant amount of your graphics with SVGs can drastically reduce that number and significantly boost your page speed. Also, since you can directly manipulate the graphics through CSS and JS, you don’t need to load multiple versions for simple things like different color icons, etc.
