How to optimize ORDER BY RANDOM()
Tag Archives: performance
How to optimize
Performance-Testing the F1 websites
Jake Archibald has published a nice series in which he has been been performance-testing all F1 sites. Not only does he dig into waterfall charts, he also points out a few simple things that could be applied in order to improve overall loading performance. As a bonus he also tested the Google I/O site, which …
Too Many SVGs Clogging Up Your Markup? Try use
Good reminder by Georgi Nikoloff to have one (visually hidden) SVG that contains several layers, which you can then include further down in your code. SVG has a <defs> tag that lets us declare something like our graph footer just once and then simply reference it — using <use> — from anywhere on the page …
Continue reading “Too Many SVGs Clogging Up Your Markup? Try use“
Debugging Layout Shifts
Over at web.dev, Katie Hempenius learns us how to identify and fix layout shifts using the Layout Instability API and the DevTools. What I take away from this is that you can easily spot them using DevTools: In the Rendering Panel you can enable an option to highlight areas of Layout Shift: To enable Layout …
JavaScript performance beyond bundle size
Nolan Lawson, on how we might focus too much on JavaScript bundle size: Performance is a multi-faceted thing. It would be great if we could reduce it down to a single metric such as bundle size, but if you really want to cover all the bases, there are a lot of different angles to consider. …
Continue reading “JavaScript performance beyond bundle size”
Before You React.memo()
Dan Abramov shares 2 techniques to try before resorting to optimize with React.memo() In this post, I want to share two different techniques. They’re surprisingly basic, which is why people rarely realize they improve rendering performance. These techniques are complementary to what you already know! They don’t replace memo or useMemo, but they’re often good …
Debugging layout repaint issues triggered by CSS Transition
Dzhavat ran into an interesting performance issue where practically his whole site would repaint when a transition in the header was triggered. The element being animated is a span wrapping some text placed inside an h1. The h1 itself is in the upper left corner on the page and contains my name. Initially, only the …
Continue reading “Debugging layout repaint issues triggered by CSS Transition”
How to avoid layout shifts caused by web fonts
Simon Hearne, who has been keeping a closer eye on unexpected layout shifts ever since Core Web Vitals came into play: One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT). In this post we will explore the surprisingly complex world of text rendering on the web and …
Continue reading “How to avoid layout shifts caused by web fonts”
How We Improved SmashingMag Performance
Interesting real-world case-study over at Smashing Magazine: In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of …
content-visiblity: auto; vs. jumpy scrollbars, a solution
As warned in content-visibility: the new CSS property that boosts your rendering performance you need to be careful with applying content-visibility: auto; on each and every element as the scrollbar might get jumpy. This is because elements will be rendered as they scroll into the viewport and will be hidden as they scroll out of …
Continue reading “content-visiblity: auto; vs. jumpy scrollbars, a solution”