How to prepare your website for Google’s 2021 page experience update with Varnish

1. First Contentful Paint

Link: </css/styles.css>; rel=preload; as=style;
Link: </js/functions.js>; rel=preload; as=script;

2. Largest Contentful Paint

  • Caching images: If the images are cached, Varnish can serve them to the user faster than your backend can, the same applies for JavaScript and other resources the page loads.
  • Link headers: Varnish Enterprise can find images in your page and add “Link” headers to them just like we did with the JS and CSS files for the FCP. This allows us to take maybe the first three images on your page and tell the browser to pre-load them because they will be in the initial window that the user sees.
  • HTTP/2: HTTP/2 allows you to load multiple assets simultaneously. Varnish Enterprise supports HTTP/2 along with TLS 1.3, so HTTP/2 can be used with HTTPS to make sure the connection to your users is still secure.
  • Inline images: Reducing the number of requests the browser has to make to the server to load a page is crucial. Varnish Enterprise allows you to inline specific images on the page so the browser doesn’t need a separate request to load them. This is useful for small and frequently recurring images on the page like your logo or social media icons.

3. Time to Interactive

4. Total Blocking Time

5. Cumulative Layout Shift

6. Speed Index Score

Which Metrics are Most Important?

--

--

--

Varnish Software is the world’s leading provider of open source web application acceleration software.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Troubleshooting the CORS error

Pair Programming : a Baby Developer’s perspective

Two programmers working in pair.

Introduction to HBase

Day 81 — Creating an Elevator in Unity

Use nconnect to effortlessly increase NFS performance

READ/DOWNLOAD$( Semantic Mashups: Intelligent Reuse of Web Resources FULL BOOK PDF & FULL AUDIOBOOK

Diving deep into Android Dex bytecode

A beginner’s guide to joining a DAO

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Varnish Software

Varnish Software

Varnish Software is the world’s leading provider of open source web application acceleration software.

More from Medium

How is working on a Unilevel MLM plan software?

Benefits of PaaS (platform as a service) for developers & organizations

DIFFERENCES BETWEEN WEB 2.0 AND 3.0

Stream Delay on YouTube: The Hows and The Whys