1 private link
Don’t use runtime CSS-in-JS if you care about the load performance of your site. Simply less JS = Faster Site. There isn’t much we can do about it. But if you want to see some numbers, continue reading.
Optimizing websites for a quality user experience is key to the long-term success of any site on the web and Core Web Vitals is an initiative Google has provided as a unified guidance for quality signals that are essential to delivering a great user experience on the web. Addy Osmani and Kristofer Baxter, from Google, join us to talk more about Core Web Vitals.
Layout shifts can be caused by the following events:
- Changes to the position of a DOM element
- Changes to the dimensions of a DOM element
- Insertion or removal of a DOM element
- Animations that trigger layout
Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224× faster.
The first step in improving speed is establishing who is responsible for the effort. Other than responsibility, it’s invaluable to gather a diverse group who can contribute unique ideas to the brainstorming and evaluation session (more on that below). By including people from different business areas, you’ll allow knowledge to spread throughout the organisation more freely too.
This post covers some of the performance issues related to consent banners, how I bypass the banners, and my approach to working out which cookies or localStorage items I need to set to bypass them.
If the median site continued to send 3x the recommended amount of script, when would the web start to feel usable on most of the world's devices?
The first part of this article discusses tooling for debugging layout shifts, while the second part discusses the thought process to use when identifying the cause of a layout shift.
Hover and quicklink prefetching works for the vast majority of web apps. I’d recommend starting with hover prefetching moving to quicklink approach if fast navigation is from a high-priority and you don’t have many links.
There’s a huge focus recently on JavaScript bundle size: how big are your dependencies? Could you use a smaller one? Could you lazy-load it? But I believe we focus on bundle size first and foremost because it’s easy to measure.
[…] you could imagine some basic stats around initial CPU execution time, memory usage, and disk usage that wouldn’t be impossible to measure in an automated way.
There has been a lot of uncertainty and confusion since Google announced the Page Experience Update in 2020. With just over three months before the update goes live in May, here's what we know about it.
Guide de "ce qu'il ne faut pas oublier" quand on design pour la performance : écrans de chargement, vide, erreurs, synchronisation, perte de connexion, etc.
An impressive article to explain how not to cause Layout Shifts and penalize your CLS.
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 the unexpected changes that helped boost all the metrics across the board.
About the weight of CLS in Lighthouse
After a lot and fun work for over a year, varied from things that were low-effort to a few that were advanced, we’ve done it.
We’ve made Skroutz.gr faster.
Performance is a feature at Skroutz. But it is also a competitive advantage. Optimized experiences lead to higher user engagement, conversions, and ROI.
Let’s stop here and recap:
- Individual experiences are just data points along a distribution. What feels fast depends on the conditions under which it was experienced. Everyone’s conditions are different.
- Lab tests may not be configured to be representative of the most common experiences on the curve, or any experience on the curve for that matter.
- User-centric metrics require extra care to ensure that behaviors are emulated faithfully in the lab.
[…] An even better solution would be to build stronger data bridges between field and lab tools, so that the lab tool itself can make informed recommendations about the most realistic user profiles to simulate.
Embedding the resource directly removes the latency that’s incurred when the browser makes a separate request for the resource and so for critical resources it can make pages render faster.
But data URIs also come with quite a few trade offs too.
In this article, we will explore some of these native solutions that are available to the majority of your users. We will see some examples but we won’t go into all the subtleties, because other resources do so very well. Rather, the goal is to inform you of the existence of these techniques.