Have you ever been reading an article online when something suddenly changes on the page? Without warning, the text moves, and you've lost your place.

If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths [1]. This tool helps you do exactly that.

Le travail qui nous attend est énorme. Les changements d’habitude peuvent paraître insurmontables (j’ai passé une semaine chez mes parents, produits des Trente Glorieuses, je saisis pleinement l’ampleur du travail), mais on n’a pas vraiment le choix.

"Eyes don't lie: understanding users' first impressions on website design using eye tracking"

À la question « Combien coûte un site web ? », répondre par un chiffre n’a pas de sens. Pour estimer le coût d’un site web, la solution consister à lister les éléments nécessaires à la conception et à la vie d’un site.

Configuring TLS is perhaps the most complicated and error-prone of all IT tasks, and this tries to make it as easy as possible.

To make this risk-score system work accurately, website administrators are supposed to embed reCaptcha v3 code on all of the pages of their website, not just on forms or log-in pages. Then, reCaptcha learns over time how their website’s users typically act, helping the machine learning algorithm underlying it to generate more accurate risk scores. Because reCaptcha v3 is likely to be on every page of a website,  if you’re signed into your Google account there’s a chance Google is getting data about every single webpage you go to that is embedded with reCaptcha v3—and there many be no visual indication on the site that it’s happening, beyond a small reCaptcha logo hidden in the corner.

Just is a build task definition library. Tasks can be composed, executed in series and in parallel. Logging, command-line arguments, conditionnals, a very simple API…

Google Fonts are easy to implement, but they can have a big impact on your page load times. Let’s explore how we can load them in the most optimal way.

A visual way to understand CSS specificity. Change the selectors or paste in your own.

In this talk, we’ll take a look at unruly or uninvited (third-)party guests: how to detect them, how to audit them, and how to manage them. We’ll also look at the different tools available to help us stress-test and quantify the overhead these third parties bring, and what that means for users and businesses alike.

There is a clear pattern of environmental properties having the worst correlation: Effective connection type, device memory, available CPU, page transfer size. This might suggest that users are aware of their device, network quality and page size (small vs big article in Wikipedia's case) and adjust their expectations to those factors.

Our current generation of frameworks makes off-main-thread architectures hard and diminishes its returns. UI frameworks are supposed to do UI work and therefore have the right to run on the UI thread. In reality, however, the work they are doing is a mixture of UI work and other related, but ultimately non-UI work.

HTML and CSS are just more resilient than JS. […] Use polyfills, use progressive enhancement: use JavaScript responsibly.

[…] we need to change the way we think about performance and think of it as part of the process instead of an extra. The best way to do this and make it part of the culture of our teams is to try to find a way to include it as part of our planning.

C’est un bon début mais il ne faut surtout pas se limiter à ce type de test. Il faut poursuivre par des tests manuels réalisés par des auditeurs en accessibilité, et idéalement compléter avec des tests d’utilisateurs en situation de handicap.
[…] Quoiqu’il en soit, il est important de garder en tête qu’il n’existe pas d’outil magique concernant l’accessibilité. Il y a juste des outils (et c’est déjà pas mal) qui permettent de faciliter le travail d’un auditeur en accessibilité.

• Risks: slowdowns and outages, service shutdowns, security vulnerabilities
• Penalties : network negotiation, loss of prioritisation, caching

All of that for the sake of the cross-domain caching? Please, self-host your static assets.

… But I couldn't teach anything without first teaching them how the browser work. None of it made any sense unless you have a pretty good knowledge of the inner working of the browsers.
So really, when we're talking about performance what we're really talking about is making the browser happy. […] And this is not something that we're used to be talked about.

This is a small explainer that I built for a talk on web fonts and performance. […] For example, if you're rendering the main body text on a site, you should use font-display:optional.

As a matter of fact, the Time To Interactive does not measure how long it takes for a page to become interactive, it measures how long it takes to be sure, regarding the conditions, that a interactivity can happen in a satisfactory way, for at least 5 seconds.