1 private link
As always, the big advice here is whether you're using a framework or not, keep the total amount of JavaScript as small as possible.
… À partir du moment où vous avez identifié ce cas, je vous recommande fortement d’expérimenter la suppression de la version en gras « Bold 700 » et l’utilisation de la version « faux gras » avec la propriété CSS font-weight avec pour valeur bold ou 700.
…
Et n’en déplaise aux typographes, la différence visuelle est tellement légère par rapport à l’utilisation du poids d’une font web en plus, que cela justifie l’utilisation de ce « faux gras ».
As a web font loads, you can now adjust its scale, to normalize the document font sizes and prevent layout shift when switching between fonts.
- Imagine
- ImageOptim
- Sqoosh
- File Optimizer
- RIOT
- Compressor
- Image Resizer
- Pingo
- EzGif
Fine-tune your font files and optimise your loading strategy for maximum speed + minimum FOUT.
- Use the most modern file formats
- Use the font-display descriptor
- Preload your font files
- Subset your font files
- Self-host your fonts
This is the story of how Beau Hartshorne and his team at Instant Domain Search improved their Core Web Vitals scores. Plus, an open-source tool they’ve built along the way.
Chrome has stated their intent to make size-adjust available in Chrome 92 due for release on July 20th presumably indicating it’s almost there.
So, not quite ready yet, but looks like it’s coming in the very near future. In the meantime, have a play with the demo in Chrome Canary and see if it can go a bit closer to addressing your font loading woes and the CLS impact they cause.
Now, after having had some time in the hands of developers, the Lighthouse score has increased the weight of CLS from 5% to 15%, consistent with the methodology of having Core Web Vitals be the most heavily weighted metrics in the Lighthouse score.
Google’s Core Web Vitals initiative has taken the SEO and Web Performance worlds by storm and many sites are busy optimizing their Page Experience to maximize the ranking factor. The Cumulative Layout Shift metric is causing trouble to a lot of sites, so let’s have a look at ways of addressing any issues for that metric.
A step by step guide on how to get started with using Cloudflare Workers for web performance optimisation.
We’re going to take a deep-dive here into two of the strategies that produced the overall biggest performance impact for us: crafting high performance animations and serving the perfect image.
Shortly before the Core Web Vitals will become a search ranking factor (June-August) for the Google mobile search, the Google team answered the most asked questions about the Core Web Vitals in their Google I/O – “Ask Me Anything Web Vitals” session.
The humble <img> element has gained some superpowers over the years. Given how central it is to image optimization on the web, let’s catch up on what it can do and how it can help improve user experience and the Core Web Vitals.
Delivering thin resources is essential, especially when it comes to HTML. If HTML is turning out big, we have no room left for CSS resources or javascript in our performance budget.
Third-party scripts, or "tags" can be a source of performance problems on your site, and therefore a target for optimization. However, before you start optimizing the tags you have added, make sure that you are not optimizing tags you don't even need. This article shows you how to assess requests for new tags, and manage and review existing ones.
Learn how to use the Chrome DevTools Performance tab to measure and improve the speed of your website.
It might seem that such selectors would be a speed problem. However, the selector matching performance is fast. The CSS declarations are so friendly to compression algorithms that the effort required to optimise a CSS selector is usually better spent working on other parts of your application with a greater return on investment.
The other half of this statement is in the ever growing Google of it all. This update is dipping a toe into creating other measurable User Satisfaction/UX metrics. So you should be thinking-- what annoys me about websites? How would I measure that? And is my own website up to the task?
the reason we’ve been so dependent on lab data for so long is because RUM data is noisy. The steps CrUX takes to reduce this does help to give a more stable view, but at the cost of it making it difficult to see recent changes.
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.