SEO: Using Lighthouse to Improve Site Speed

Google Lighthouse, a free tool, can identify ways to improve a site’s load time. Lighthouse is available in Chrome, in the “Developer Tools” menu.

Site speed is tricky for search engine optimization practitioners. It’s a ranking signal for Google and a key factor in the customer’s experience. Studies by Walmart and Amazon found that even a small fractional improvement matters; each company attributes a 100-millisecond improvement in page load speed to a 1 percent increase in revenue.

Moreover, Think with Google found that slower site speeds can significantly reduce conversions and increase bounces — up to a 20-percent decrease in conversion rates for a single second’s delay.

That puts SEO pros in an awkward position. We know that it’s important, but few among us have the development chops to solve the thorny technical issues that underpin fast site speed times.

So now what? One option is to use Google’s Lighthouse, a free site auditing tool, in Chrome’s “Developer Tools” menu, at View > Developer > Developer Tools > Audits.

Lighthouse provides detailed suggestions for improving the technical quality and speed of a site. Best of all, each Lighthouse recommendation comes with a list of specific files to optimize and a “Learn more” link to understand the basics before you approach your developers.

In my experience, Lighthouse most frequently cites the following four areas to improve site speed.

4 Speed Tips from Lighthouse

Eliminate render-blocking. Every time visitors land on a page, their browser has to request, download, and process external CSS and JavaScript files. That’s what render-blocking means. Your visitors have to wait for their browser to process every render-blocking file before they can see the things they want to buy, let alone add them to cart.

CSS and JavaScript are powerful tools. But they also can slow down a site.

Some JavaScript and CSS files don’t need to load at the beginning of the process to display meaningful page content or enable core functionality. Loading all of these noncritical files before content appears increases bounce rates.

For JavaScript, include critical pieces inline in the HTML when possible. Use the async or defer attributes for noncritical portions to delay their loading after the other, more important, elements.

Critical CSS can be inlined, too, to eliminate a time-consuming trip to the server for a second request. CSS files can also be parsed by device via the media query string. In this strategy, each stylesheet link in the HTML should then have its own media attribute so that the browser only executes what’s needed for that user’s device.

Deliver smaller payloads. HTML, CSS, and JavaScript can all be minified and compressed to shrink file size even further.

Minification is the art of shrinking the number of code characters without changing how the browser processes it. Minification examples include removing comments, carriage returns, formatting, and unnecessary strings.

Compression reduces the size of a file — similar to a zipping tool. Compression services such as Brotli or Gzip squish text files into smaller packages without changing what’s inside or how they work.

Optimize images. Optimization is not about reducing image quality. Formats such as JPEG 2000, JPEG XR, and WebP provide quality visuals at higher compression rates, which means that they’ll load more quickly.

Also, consider responsive images, which specify the image size for each page load. It means generating several sizes of each image and serving the smallest one needed for each page. It can shave seconds off the load time for an image-heavy site.

A content delivery network that optimizes images can make this process a lot easier — if you have the budget.

Extend browser caching. Your visitor’s browser can temporarily store a file. This is handy for repeat visits to a page, and also for files that are used across the site. The browser accesses its local, stored copy every time it needs to load that file until the cache period for that file expires. Then the browser requests a new version and caches it again.

This doesn’t do a thing for those first-time visitors. But it helps those who make it past the first click, as well as those who return to your site.

What happens when you need to push a critical update to your site? Your development team can invalidate the old cache to update the file so that the browser receives the new image, text, CSS file, or whatever the resource may be.

Saving Lighthouse Reports

You can’t print your Lighthouse reports from the console. But you can download the results. The download, unfortunately, is not in a digestible text format. But GitHub has a viewing solution. Open this page on GitHub. Drag the downloaded Lighthouse file from your file manager to the GitHub page in your browser. The page renders the report, complete with clickable help links and the usual printing and saving options from your browser.