In the East of Scotland, there’s a cantilever railway bridge called the Forth bridge, painted a bright shade of rust-red. There’s an old story that the bridge was so long that every time they finish painting it, they have to start again from the other side to patch up the wear and tear.
Staying in the top percentile of mobile site speed takes the same process. Just as you think you’ve optimized enough to get some breathing room, the standards improve and there’s more to do.
With this in mind, we teamed up with our insights team to bring you everything you need to do to score 90+ in Google’s page speed insights in 2019.
The speed score incorporates data from the Chrome User Experience Report to deliver user-centric performance data about a page. It’s measured on the time it takes the page to achieve the following stages:
- First Contentful Paint
- First Meaningful Paint
- Speed Index
- First CPU Idle
- Time to Interactive
- Estimated Input Latency
To achieve a score of 90+, your page has to match or beat the following benchmarks.
- First contentful paint must be <3s
- First meaningful paint must be <3s
- First CPU idle must be <4,5s
- Time to interactive must be <5s
- Speed index must be <4,5s
- Estimated input latency must be <50ms
Hitting these results gives us the target score of over 90.
Andy Osmani, a Google engineering manager working on Chrome, demonstrated what these key sections mean to the user in his case study into the performance of the Tinder PWA.
How to increase page speed:
Now we have a target to work towards, we can start making changes that will chip away at these times. Here are Google’s recommendations for increasing page speed.
Having a redirect, such as to an M. mobile version, will create another HTTP request and response, which will delay the page rendering. It can even create multiple roundtrips to perform the DNS lookup, TCP handshake, and the TLS negotiation. Avoid redirects to cut your loading time down.
As you can see from the page loading timeline, loading times are all about what is presented to the reader in those crucial first seconds. You can boost your load speed by giving priority to everything that loads ‘above-the-fold’.
By applying the PRPL strategy, pages can be loaded in the order that they are viewed.
Push critical resources for the initial URL route
Render the initial route
Pre-cache remaining routes
Lazy-load and create remaining routes on demand
Using the gzip format to compress file sizes can reduce the size of the transferred response by up to 90%. This will significantly reduce the time it takes to download the resource and the amount of data transferred. The result will be a reduction in the time it takes your page to complete its first render.
This is the temporary storage of online documents, such as web pages, images, and other types of media, to reduce server lag.
Without browser caching, gathering these media resources every time the page loads takes time. It can require multiple roundtrips between the client and server, which delays processing and the rendering of the page even further. A caching policy will help the client determine if and when it can reuse a previously fetched response.
Google recommends a minimum cache time of one week and preferably up to one year for static assets or assets that change infrequently.
There are ways to removing unnecessary data without affecting how the source is prepared by the browser. Code comments and formatting can be removed, as can any unused code. Using shorter variable and function names will also reduce the impact of these resources.
There are Google-recommended tools that will help to minify these aspects of your page.
Big images are big files. Big files equal longer loading times. 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. Set the compression levels of JPEG images to 85.
Furthermore, your page should never serve images that are larger than the version that’s rendered on the user’s screen. Anything larger than that just results in wasted bytes and slows down page load time.
For each image on the page, Lighthouse compares the size of the rendered image against the size of the actual image. The rendered size also accounts for the device pixel ratio. If the rendered size is at least 25KB smaller than the actual size, then the image fails the audit.
If your external CSS resources are small, you can insert them directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page, increasing page speed.
Leverage the font-display CSS feature to ensure text is user-visible while web fonts are loading.
Implementing these practices will improve the page speed insight score but optimization is a constant process. Like painting the Forth bridge, as soon as publishers hit the newest standards, they need to restart the process.
To learn how Marfeel to can make sure your page speed is constantly optimized, check out our features that help pages load in 0.7 seconds.