It’s easy to get excited about new techniques for measuring and improving site speed but this focus on the technical side of performance can lead us to think of speed as a technical issue, rather than a business issue with technical roots.

Almost half of all pages that scored 100 on Lighthouse didn’t meet the recommended Core Web Vitals thresholds.

Core Web Vitals is a measurable SEO ranking factor. This data study shows changes seen during the Page Experience Update July-Aug 2021

Automation typically includes purely code-based tasks that don’t even think about a browser, but some tasks need to interact and use the browser as a human would like performing a search on a site. How can we leverage tools that can automate the browser and pack it into a serverless API endpoint to make easily accessible?

Render-blocking resources are a common hurdle to rendering your page faster. They impact your Web Vitals which now impact your SEO. Slow render times also frustrate your users and can cause them to abandon your page.

Writing about browser performance is hard, but it’s not fruitless. I’ve had enough successes over the years (and enough stubbornness and curiosity, I guess) that I keep doing it.

Make use of the requestIdleCallback callback to improve the responsiveness of input while ensuring JS actions during the typing.

You now have a simple, platform-reliant way of preventing unnecessary requests. You have another tool in your belt to save your users time and money. Also you’ve got a way to save a little carbon from being released into our atmosphere to power a server farm. And you can use this tool with any style of website: static file sites, single page applications, and server rendered applications. It’s a superpower.

One of the great things about Eleventy is its flexibility and its lack of assumptions about how your projects should be organized. However, in order to preserve my own sanity, I needed to come up with a default files and folders architecture that made sense to me.

If your site uses native image lazy-loading, check how it's implemented and run A/B tests to better understand its performance costs. It may benefit from more eagerly loading images above the fold.

Putting images on websites is incredibly simple, yes? Actually, yes, it is. You use <img> and link it to a valid source in the src attribute and you’re done. Except that there are (counts fingers) 927 things you could (and some you really should) do that often go overlooked. Let’s see…

As we have seen, the for-of loop beats for, for-in, and .forEach() w.r.t. usability.

Any difference in performance between the four looping mechanisms should normally not matter. If it does, you are probably doing something very computationally intensive and switching to WebAssembly may make sense.

By combining the powers of real-user experiences in the Chrome UX Report 3 (CrUX) dataset with web technology detections in HTTP Archive 1, we can get a glimpse into how architectural decisions like choices of CMS platform or JavaScript framework play a role in sites’ CWV performance.

Nous avons deman­dé à Hubert Guillaud, Rédac­teur en chef d’InternetActu et ana­lyste des grands mou­ve­ments et phé­no­mènes qui tra­versent le champ du numé­rique et de la poli­tique, son avis sur la pos­si­bi­li­té d’une poli­tique publique (pro­gres­siste) du numé­rique. « Nous sommes cer­nés par des sys­tèmes néo­li­bé­raux aug­men­tés par le numé­rique et les sys­tèmes numé­riques de gauche sont...

How Telegraph, the leading UK news website managed to improve their 75th percentile CLS by 250% from 0.25 to 0.1 in a couple of months.

Hey John! In France, we don't learn to give positive feedback. A few months ago, I started working with many more people from other cultures and I felt unable to show them appreciation as I would have liked. Your article has helped me to better understand how to express my gratitude and have it received in a constructive way. Thank you for continuing to write such helpful articles.

Ces technologies peuvent apporter un confort supplémentaire à certains utilisateurs. Cependant, les outils de surcouche d’accessibilité sont des solutions partielles qui ne doivent pas occulter le véritable enjeu de l’accessibilité numérique : le développement de sites et applications accessibles pour tous, uniquement garanti aujourd’hui par le respect du RGAA.

A small tool to compute your fluid typography clamp() instruction

Combine picture, source, the media attribute and srcset to serve sharp images to 2x+ density screens.

There are, however, plenty of tasks that require minimal effort that have a big impact on site speed. These are often overlooked in favor of lower-impact tasks.

If you want to get the best results, here are the tasks you’ll want to prioritize.