It is mildly frustrating to see your page running smoothly, but still have an average (or below average) PageSpeed Insights (PSI) score. If you don’t know what that is, it is a performance report of your page by Google. It takes both field and lab data of your site, scores it according to a matrix, then gives you suggestions on how to improve that page. PSI scores are usually taken as a sign of how well your page runs, and how fast it tackles its various processes.
The ideal PSI score is 100, of course, but reaching that score is an uphill battle that, honestly, is not worth it. See, as your score goes up, the resources required to achieve them starts to outweigh the results they bring. With this, it is much better to aim for a score that marks your store’s optimized peak performance.
Don’t fret too much about a low score, though. The way Google conducts their analysis is quite different from how your users experience your site. Meaning: it fails to consider some important nuances we deal with in Magento development. Despite this, Google PageSpeed Insights still gives relevant recommendations that can help improve your page. It would be a waste if we, as developers, let this information go to waste.
Without further ado, here are five things you can do to improve your PSI score:
1. Prioritize Mobile Over Desktop
Over the years, mobile users have increased exponentially in number. As a result, mobile devices are responsible for over 49% of all internet traffic. With this, Google has shifted their algorithms to prioritize the mobile version of your site.
Unfortunately, when you hire Magento 2 developers most of them tend to overlook the mobile version of their page. In fact, if you compare your desktop PSI score with your mobile PSI score, chances are that your mobile score, to put it gently, sucks. And that does nothing for your PSI score, or your mobile users.
Take time to revisit and rewrite your page design and Magento mobile optimization. Make sure it works just as well on mobile as on desktop. Some of the things you might want to reconsider: your text compression, your images sizes (more on images in the listing below) and your webfont load.
Text compression (making your text smaller or larger, as needed) is done via three main tools, namely: deflate, gzip, and brotli. Out of these, brotli is the most ideal to use, as it offers a better compression ratio, and better compression/decompression speeds. For mobiles, with their weaker CPUs, this means content is packed and unpacked faster.
Webfont load, though it doesn’t change your PSI score, will significantly improve perceived optimization. Using swap in your CSS font-display will easily speed up your text rendering.
2. Shorten Your Codes
Easy to say, hard to do. It will require you to rethink and restructure your whole Magento 2 code, unfortunately. But, fear not, it’s not as bad as you think.
First step: Reorder your code. Keep the most important processes at the top. These are the things that users will see at your first screen, so make sure your codes reflect that—what needs to load first must be coded first.
As much as possible, move your CSS and JavaScript codes to the end of your code. These files take too much time to process, especially if you have a lot of styles for them. Make sure that they won’t clutter up your code and slow down your page.
Also, don’t forget to minify your CSS and JS files. It takes all of one minute to do so, and will do wonders for your render speed.
Second step: Shorten your HTML code. After deciding which parts of your code are important, shortening your HTML code is much easier. Combine processes that can be combined and lessen the depth your DOM tree elements and the number of children per element.
Another thing, avoid redirecting as much as possible. Any new redirect will automatically make your page slow down. It creates clutter and blocks your critical rendering path (more on this later).
3. Clean Up Your Trash
This is something most developers overlook. Remember that good Magento store management entails having and meeting a very high housekeeping standard.
This is relatively easy to do. Just delete CSS and JS files that are irrelevant to your code, as well as unnecessary HTML codes. Review your third party materials, and remove those that are unoptimized or replace them with better ones.
Additionally, don’t forget to utilize your cache. Setting a very short cache expiration for rarely changing files is a waste. Take advantage of your users’ local cache, and remove the need to reload your files every time they access your page. Having a strong Content Delivery Network (CDN) is something that will help you in this endeavour.
4. Fix Your Images
Images are probably the largest files on your Magento store. They always take up the most time to load, especially when the users’ CPU power isn’t that strong. It’s up to you to optimize your store images and make sure that they don’t impede on your page.
The best thing to do is to change your image formats. New image formats, like JPEG 2000, JPEG XR, or WebP, have superior image compression compared to the standard JPEG file. Aside from this, tinifying your PNGs are essential, as they take up the most space on your site.
Another thing to consider is your image sizes. Don’t use large high resolution images for a 30×30 pixel photo. Find appropriately sized images that will be easier to compress but will not sacrifice its quality.
For both of these, having a solid CDN will make things easier for you. Most CDNs have image optimization that will do these tasks for you, so if you have one, you’re already a step ahead.
Lazy loading, of course, is a staple for image-heavy sites. It helps prioritize which parts of your code to load and which to leave for later.
5. Preload Your Material
Critical Render Chain and Critical Request Chain have similar logics. They both help prioritize which parts of your code should be loaded first, depending on how the user interacts with your page. With this in mind, make sure that you defer as many files as you can, and preload all the relevant files needed for your users’ typical next step.
Doing this will not only help your perceived and actual optimization, but it will also prevent unnecessary clutter in your critical render and request chains.
