In my career, I've worked on a lot of sites, and the ones that have always gotten the most recognition from our clients are the ones that performed very well. To get a site to perform that well, you have to dig down into the details of what CSS you're delivering, what JavaScript you're not delivering, and how you can perform well in search engines and give the most information to web crawlers to surface website data.
On this page, I'm going to start accumulating articles associated with this process. The first two are a story about optimizing your fonts for the language your site is being delivered in, and a fix for the Prism plugin that I use on this website, including how to modify your CSS to ensure content renders properly with this plugin. In the future, this pillar page will grow with new articles specific to front-end performance, optimization, and front-end technologies.
Fonts
Self-hosted fonts are easy to ship whole, glyphs and all. Subsetting them to the characters a page actually renders, then compressing to WOFF2 with Brotli, is the highest-leverage payload cut available.
-
How to Compress WOFF2 Fonts with fonttools and Brotli
Subset and re-compress self-hosted WOFF2 web fonts with pyftsubset and Brotli to cut font payload by ~89%. The exact commands, real byte numbers, and the tradeoffs.
CSS and rendering
Inlining critical CSS speeds up the first paint, but it also changes when and how later styles load, which can break things in ways that only show up at runtime. This is one of those cases, traced and fixed.
-
Fixing Prism Line-Number Misalignment
Prism's line-numbers plugin froze the wrong line heights onto the gutter, leaving the numbers drifting below the code. The cause was a white-space race with a deferred stylesheet, and the fix was one rule in the critical CSS.
Want to get in touch? Connect on LinkedIn or send an email .