Watch Out for Layout Shifts with ‘ch’ Units
Since `ch` units are based on your current font their value can change when fonts are loaded and cause unexpected layout shifts.
Performance, Page 2
A details element as a burger menu is not accessible
Using the native HTML disclosure widget for a burger menu is so enticing. Unfortunately, the details/summary elements come with accessibility issues, so it's not an inclusive solution.
Removing layout shift from a progressively enhanced burger menu
Progressive enhancement or a great Cumulative Layout Shift metric score? Why not both?
Font Subsetting Strategies: Content-Based vs Alphabetical
Font subsetting allows you to split a font's characters (letters, numbers, symbols, etc.) into separate files so your visitors only download what they need. There are two main subsetting strategies that have different advantages depending on the type of site you're building.
Which SVG technique performs best for way too many icons?
When I started giving talks about SVG back in 2016, I'd occasionally hear a question I never had a great answer for: What if you have a lot of icons on a page?
Building an accessible image comparison web component
By leveraging native browser controls, we can make accessible and high-performing components with just a dash of JavaScript.
Depth Limiting and Path Filtering in Lighthouse Parade
In case you missed it, last month we released Lighthouse Parade, a CLI tool to automatically run and aggregate Lighthouse performance reports across an entire site. One of the most requested features has been the ability to limit which pages are crawled. We're excited to release Lighthouse Parade 1.1, which introduces three new flags to accommodate these use cases.
Big picture performance analysis using Lighthouse Parade
Lighthouse Parade is a Node.js command line tool that crawls a domain and gathers lighthouse performance data for every page. With a single command, the tool will crawl an entire site, run a Lighthouse report for each page, and then output a spreadsheet with the aggregated data. Each row in the generated spreadsheet is a page on the site, and each individual performance metric is a column. This is convenient for high-level analysis because you can sort the rows by whichever metric you are analyzing.
Your bundled code deserves some attention too!
Development toolchains now have many more layers of tools than they did years ago. Because of this change, the JS code that runs in our users' browsers looks less like the original code we authored. Periodically checking the code generated by our tools can lead to opportunities to reduce bundle size and improve performance for users.
Performance is an issue of equity
Website speed and performance are a question of equity. Fast and lightweight sites mean that everyone can access your content equally. It’s not only an economic imperative; it’s a moral imperative.