For a lot of online store owners, Google PageSpeed Insights is a special tool.
The kind you really want to rank high on and the kind everyone has heard about at least a few times.
That’s why a lot of the store owners demand from their developer teams that they optimize specifically for the Google PageSpeed score.
Google PageSpeed’s popularity is logical but kind of disappointing at the same time.
On the one hand, there are so many powerful alternatives to this tool on the market – WebPageTest, GtMetrix, and Pingdom are considered the gold standard for performance measurement.
In comparison, Google PageSpeed is a simple guideline tool and can’t be used for adequate speed measurement.
WebPageTest has a similar grading system as Google PageSpeed but at the same time gives a more technical overview of the issues.
Nevertheless, most online store owners will know and care about Google PageSpeed score and not much else.
We also want to set our focus on mobile Google PageSpeed score since it’s way harder to improve and there are in general more misconceptions surrounding mobile optimization as well.
In our article, we would like to give you a better explanation of what Google PageSpeed score exactly is and how you should tailor your mobile store version to its liking without compromising user experience.
Also Read: How To Optimize Your Product Pages For Higher Conversions
Making Sense of Google PageSpeed Insights
Google PageSpeed Insights is not a performance measurement tool.
Why? Because Google said they built a performance optimization tool, not a performance measurement tool. Do you see the difference here?
Google PageSpeed Insights will not measure your speed.
It can give you smart advice on how to boost your performance.
But building your whole optimization strategy on its score is a bad idea for a number of reasons:
- Google PageSpeed score varies from run to run and you can’t do anything about it,
- the score is just a number, it’s not a real measurement tool that uses seconds, number of requests, or megabytes transferred to gauge your speed. You can’t use it to measure speed reliably,
- Google PageSpeed will lower your score if it detects third-party tools that it thinks are bad for store performance, regardless of your actual website speed,
- Google PageSpeed compares websites between one another only giving the best score to the top 2% of all sites.This means you can’t get the best score unless you pour in massive resources in order to get into that tiny 2% percentile (and somehow manage to stay there!),
- even slow stores can get a high score and fast stores can rank average.Why? Because Google uses a wide set of web optimization best practices to assess your store.This means that if your store is fast but does not adhere to Google’s best practices, it will rank lower than a slower store that specifically optimizes for Google PageSpeed guidelines,
- Google PageSpeed only sees your frontend and doesn’t know a whole lot about the backend.This means that you get lopsided recommendations that only revolve around the frontend of the store.Any performance-related issues that might stem from the backend get ignored. Nothing really you can do about it, though. Just keep this info in mind.
With this idea that Google PageSpeed is a good measurement tool off the table, let’s find out what Google PageSpeed Insights really is.
How To Improve Mobile Google PageSpeed Score
Google PageSpeed is a complex set of tools that uses data from the Chrome User Experience Report and Google Lighthouse Audits to create its own assessment of your store.
It values speed more than anything else – which means if you really want a high mobile score, get ready to make compromises and accept tradeoffs.
After we established the limitations and purpose of Google PageSpeed for Magento, let’s take a look at how it can actually help us improve your mobile user experience.
Also Read: Ecommerce Product Image Optimization Examples To Boost Conversions
First things first, though. In order to understand what Google PageSpeed can show you about mobile optimization you need to know how mobile experience is actually different from desktop:
- the mobile phone features a smaller screen and ~70% less raw CPU and RAM capacity – which means it is slower by default,
- most of the time mobile phones experience spotty or slow Internet connection – working on a broadband Wi-Fi or a stable fiber optics cable connection is not the same as trying to shop online in a countryside area where the most you can get is a dodgy 2G or EDGE speeds with occasional disconnects and losses of signal,
- mobile shoppers have to use a small on-screen keyboard and a tap-based interface which limits their ability to type quickly and without typos and implies some limitations on how your UI should look for tap-centered user experience,
- smartphone users can shop at places and in situations that are not suitable for desktop experiences such as waiting for someone in a cafe or standing in a line, or even using the bathroom – all these situations are brief, highly intermittent, they start and end abruptly.
Taking into account all these facts is how you build a strong and consistent mobile user experience. Now let’s move on to actual improvements you can do to make your mobile users’ shopping experience more pleasant and memorable.
10 Ways To Improve Mobile Google PageSpeed Score
Google PageSpeed Insights puts heavy emphasis on speed so if your goal is to make the score as fast as possible, we have 10 tips for you that can make this happen.
Keep in mind that in our guide we don’t want to compromise user experience over an artificial machine score so all our recommendations are user-friendly and don’t involve gaming the system.
Also Read: The Ultimate Guide To On-page Optimization For Ecommerce – 1
Tip 1. Defer Files From Loading Instantaneously
One of the most important tasks of any optimization project is to clear the Critical Rendering Path of clutter.
The shorter the path is, the less time it takes for the browser to fetch everything on the page: JS, CSS, HTML, pictures.
One of the ways you can improve it is to defer non-critical files from taking up huge chunks of space on the path and slowing everything down.
Things you can defer:
- scripts that are not mission-critical for user experience,
- below the fold images that the users won’t see until they start scrolling (this
- feature is also called lazy loading),
- the same goes for images on manual and automated carousels and sliders,
- CSS files that apply styles below the user’s actual viewport.
NOTE: The more code you have, the larger the time period you’ll need to set to defer resource loading.
Don’t be afraid to defer as many JavaScript files as you can, it’s completely okay to do that.
Tip 2. Segregate Non-Important Files To Load Them Later
By default, all JS code lies at the very top of the page.
This is not an issue if you have 2-3 scripts that you need to load for the page.
Now imagine a modern Magento store with dozens upon dozens of scripts all clumped together inside the of the page.
Splitting them into two unequal groups is step 1.
The first group keeps all the important code that you need to load to get a working first screen.
The second group contains the rest of the code that’s not vital to offer the user a working over-the-fold experience.
This group goes to the bottom of the page near the end of the .
This simple measure allows the browser to speed up page load significantly.
No more waiting around until all the necessary code gets executed before we can move on. Just load whatever you need for the first screen and take the rest to the bottom.
The same goes for CSS. Split into two parts, move the majority of styles to the bottom.
Tip 3. Minimize & Compress Your Payloads
The less data you have, the faster it loads, right? So it’s a good idea to make your data as small as possible.
There are two main ways how you can achieve this:
minification and compression.
Most of the time you can minify and compress any file on the server:
text, CSS, JS, or HTML documents.
Use Gzip if you would like to do the compression yourself.
Alternatively, you can use Brotli as it’s more effective and often get integrated inside a Content Delivery Network solution as a part of their service offer.
Also Read: The Ultimate Guide To On-page Optimization For Ecommerce – 2
Tip 4. Trim Wherever You Can
Your Magento store has a lot of unnecessary bulk that slows you down. Shed that ballast if you want to get a fast and responsive mobile store:
- reduce the number of DOM elements to simplify your DOM structure,
- trim CSS files (get rid of unused CSS files on pages, we know you have them),
- refactor your code to lighten HTML/CSS/JS files.
Simplify DOM structure. A simple DOM structure with minimal DOM children can make all the difference in the world when we are talking about mobile speeds.
Make an effort to reduce the depth of DOM elements, their overall children, and the complexity of the structure itself.
Trim CSS files. While it’s not the easiest fix here, getting rid of unused CSS can help you save a lot in terms of frontend performance.
Need an example? Let’s say your customer wants to load a Homepage.
Their browser gets a list of CSS files it needs to load and process in order to apply all the necessary styles to the page.
But what if the Homepage only needs like 3 CSS files while you have a total of 5 listed?
This is just additional time in which the mobile browser will have to download each file, unpack it, go through the contents, realize nothing applies here for the page, go to the next file: rinse and repeat.
Eliminating unnecessary bloat here can shave up to 500 ms in the most severe of cases.
Getting unused CSS on all pages is the result of sloppy theme design and not always the fault of the developer team but it’s still up to you whether you want to deal with this complex issue or leave it at that: after all, going through every page and inspecting every CSS file to see if it applies here is a hard and long job.
Refactor your code. Speed up code parsing to speed up the store. Tidy up the HTML/JS/CSS code so it weighs less and doesn’t become a burden for mobile browsers. Refactoring is a good housekeeping practice anyway. And if it helps you keep your Magento store fast and snappy, that’s good, right?
Tip 5. Integrate A CDN To Speed Up Content Delivery
Getting a CDN is always a huge step forward in your optimization efforts.
In addition to the traditional role of a tool to handle asset delivery, a good CDN worth its salt will also offer a number of features you either need to build in manually or work out other third-party solutions to integrate:
- create and maintain an efficient cache policy,
- optimize images and put them into faster storage,
- convert and serve images where possible in modern image formats,
- offer HTTP/2 and QUIC loading (asynchronous loading is faster than HTTP/1.1),
- compress assets with gzip or brotli/deflate tools,
- create multiple-sized image versions to always serve images of the most appropriate size, etc.
The exact list of improvements will, of course, depend on your choice of a CDN.
Shop around, see what other store owners prefer and ask them why.
Get the best deal on the market. Our only recommendation here is to choose something.
A good CDN can help you a lot in both improving your Google PageSpeed score and speed up the real-life store performance numbers.
Also Read: Stackpath Vs Akamai
Tip 6. Optimize The Media That You Upload
Too often Magento store owners or their content managers upload oversized or unoptimized banners, product photos, and backgrounds that can completely ruin any previous effort to make the store lighter and better in the eyes of the Google PageSpeed algorithm.
Integrate automated server tools that can compress and optimize images and gifs before they land in your Magento storage.
Why is this important?
Images take up the lion’s share of all frontend load and therefore constitute ⅔ of the overall bandwidth of what your mobile users have to download.
There’s always an option to try and educate your staff on proper image handling but it’s only useful for resizing.
We would still recommend that you just integrate a standalone image optimization service into your Magento server to deal with image optimization tasks.
Automated optimization tools: imagemin, libvips, Cloudinary, imgix, or ImageOptim.
Manual optimization tools: TinyPNG and TinyJPG.
Tip 7. Avoid Page Redirects
Every redirect you have will create a small delay for your users.
If you have a lot of old links to pages and constantly redirect users from one URL to another, their experience will suffer.
We understand that in some cases redirects are inevitable.
At least make sure that you use redirect 301 instead of 302 in your links and that there are no redirects on the Critical Rendering Path.
Tip 8. Optimize Font Loading
Make a revision of your fonts. Most of the time, Magento stores will use a different font for every possible header, text block, or paragraph just to make it stand out.
Google PageSpeed can see the overwhelming number of fonts and penalizes stores for excessive use.
And this is not something unreasonable, too.
Each font adds a bit of delay into the loading process since the browser has to load and then apply the font to the text.
In most cases, it will even wait until the font is fully loaded and applied before it will show any text to the user.
This is, of course, unacceptable and here’s what we can do about it:
- limit your fonts to the absolute minimum,
- pre-load the fonts that you need beforehand so the browser takes less time to process them,
- use the swap font-display config value to make sure web fonts load faster and stay visible during page load.
Interesting Post: How To Increase Time On Site For Your Ecommerce Site
Tip 9. Minimize Nesting & Slow Third-Party Code
Nesting is when you place one resource inside another one. This creates a complex layer structure that can get out of hand really fast.
Unnecessary complexity leads to increased latency and other performance issues, especially for mobile users.
Unfortunately, there’s no simple way to get rid of overly nested code pieces.
You have to manually rewrite these parts one by one to dismantle overengineered code.
Another crippling issue that Google PageSpeed always asks to fix is slow third-party code.
Magento is a demanding and complex platform that has a lot of third-party dependencies for any given page.
And since we have zero control over how fast third-party resources actually get to us, cutting on the number of requests to third-party servers can help significantly lower the amount of time it takes to deliver the page to the customer.
Tip 10. Use DNS-Prefetch & Other Preloading Methods
DNS-prefetch is a separate parameter that can also increase your third-party resource loading speed.
Just add this attribute to the third-party resources that you use and see the difference in speed.
Preload fonts, logos, critical CSS and JS files that you know you will need (fonts, styles, scripts, images).
Preloading is implemented using the parameter and prioritizes fetching one resource over another.
Most of the time, it’s used to shorten your Critical Request Chain by preemptively requesting resources that you will need anyway – so there’s little sense in waiting around not requesting them beforehand.
Essentially preload helps you spread your requests out a bit without them clumping all together into a limited period of time.
It’s still something we do inside the part of the document since the part will need to stay as clean and easy on the browser as possible.
Also Read: Elements Of Mobile Friendly Ecommerce
Put User Experience Before Internet Points
ThinkWithGoogle is another viable performance tool that measures real time, not gives scores or grades
Google PageSpeed Insights score is something a lot of eCommerce site owners obsess about.
While Google PageSpeed score doesn’t affect SERP and it’s not exactly a website performance measurement tool, it’s still important to improve this score.
Why? Because the score represents actual frontend performance challenges that your store struggles with.
These challenges are especially hard to overcome for mobile experience since in addition to normal obstacles the mobile platform has its own limitations such as low connection speeds, poor RAM and CPU performance, and limited screen space.