The Largest Contentful Paint is the Core Web Vitals metric that websites most often fail. To make optimizing LCP easier Google has started recommending looking at a breakdown of the metric called LCP sub-parts. By breaking LCP down into separate components you can more easily identify suitable optimizations. What are the LCP sub-parts?​ The Largest Contentful Paint metric measures how long after navigating to a page the biggest page element appears. The metric can be divided into four components: Time to First Byte: time to start loading the HTML document from the website server Resource Load ..read more

Network request waterfalls show what resources are loaded when opening a website. This helps developers and website owners understand why different content elements show up at different times and how it can be optimized. Recently I made a wall calendar with 12 request waterfalls for a conference, highlighting different web performance issues. This article goes through these waterfalls one by one and explains what they show. You can also test your own website to see what you can optimize. Are you in the UK and interested in a paper calendar? Request one here. Number 1: Prioritizing the LCP ima ..read more

The developer tools that ship with Chrome or other browsers are very helpful when developing and testing your websites. However, when you encounter mobile-specific issues that you can’t replicate on your desktop or laptop, these developer tools become less helpful. That's where remote debugging comes in. Remote debugging allows you to run your website natively on a mobile device while still using your main computer for testing and debugging. This way you can find and fix bugs that only occur on real mobile devices. Remote debugging is also useful for seeing how your site performs on mobile dat ..read more

When you open your website it probably just takes a couple of seconds for all the content to appear. To fast to really understand what's going on and how to optimize it. Find out how you can use Chrome DevTools to load your website step by step and pause loading to inspect the page at each stage. Throttle the network to slow down loading​ Chrome DevTools allows you to throttle the network so that your page loads more slowly. By applying very strong throttling you can see how different parts of your page appear over time. Right-click the page and click Inspect to open the developer tools Open ..read more

We regularly get requests to include carbon emissions in our website speed test results. However, we don’t display this data as it cannot be meaningfully calculated for a particular website just based on the URL. This article explains how the internet contributes to carbon emissions, how CO2 calculators work, and why the numbers they report should not be used for decision-making. How does the internet contribute to CO2 emissions?​ The internet mostly contributes to global greenhouse gas emissions through the production and operation of electronic equipment. Overall the information and communi ..read more

When opening a website your browser downloads a bunch of text files, for example the HTMl document, CSS stylesheets, or JavaScript application code. The larger these files are the longer it will take load them and visitors will have to wait longer for your page content to appear. This article takes at HTTP text compression, a simple but effective way to reduce your page weight and improve page load time. We'll also compare the two most common text compression algorithms, GZIP and Brotli. What is HTTP text compression?​ Text compression algorithms reduce the size of text files. That way these f ..read more

Synthetic website performance tests measure page load time in a controlled lab environment with a specified network speed. Since these tests are often run on a computer with a fast network connection, the network needs to be throttled to achieve a consistent result that reflects how visitors with a slower connection would experience the page. However, there are different ways to throttle the network. This article explains why packet-level throttling is the most reliable option and how it’s different from network throttling in Chrome DevTools or the default settings in Google Lighthouse. What i ..read more

CSS stylesheets are one of the core technologies powering the web. This article explains why optimizing is important for page speed and what you can do to reduce CSS size. We'll also introduce the free CSS Size Analyzer. Why does CSS page weight have a big impact on page load time?​ Most CSS stylesheets are render-blocking which means that users can't see any page content until after they've been loaded. You can see an example of this in the request waterfall below: The HTML document is loaded The document contains a link tag to the CSS stylesheet The browser downloads the stylesheet After do ..read more

Google Lighthouse is a great tool to automatically test the quality of your website and find ways to improve. Lighthouse provides scores from 0 to 100 across four categories: Performance, Accessibility, Best Practices, and SEO. This article will focus on the Lighthouse SEO score and how to improve it. How to run a Lighthouse SEO test​ The quickest way to run Lighthouse on your website is to use Google's PageSpeed Insights website. Simply enter your website URL to test it. Somewhat confusingly, the SEO category is grouped under the "Diagnose performance issues" heading. Click on the SEO score ..read more

Lighthouse is a free tool developed by Google that analyzes your website and generates a report on your page speed, accessibility, and SEO. All you need to do is provide your website URL and Lighthouse automatically runs through a large number of individual checks (called audits). You can see how well you do on each audit and what you can do to improve. This article looks at the different options you have for running Lighthouse what the differences are between them. Run Lighthouse on PageSpeed Insights​ The easiest way to run Lighthouse is to use Google's official PageSpeed Insights tool that ..read more