1 private link
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 demandé à Hubert Guillaud, Rédacteur en chef d’InternetActu et analyste des grands mouvements et phénomènes qui traversent le champ du numérique et de la politique, son avis sur la possibilité d’une politique publique (progressiste) du numérique. « Nous sommes cernés par des systèmes néolibéraux augmentés par le numérique et les systè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.
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