Un ensemble de petites applications conçues pour tourner dans le navigateur uniquement :
- Un outil pour enlever le fond d'une photo
- Un optimisateur d'images
- Un optimisateur de vidéos
- Un éditeur d'image
- Un upscaler d'image
- Etc.
Une revue de différentes méthodes pour découper le traitement de tâches longues et ainsi éviter de bloquer le thread principal en JavaScript (ce qui est primordial).
La nouvelle propriété CSS content-visibility permet de faire du lazy loading sur des morceau entiers du DOM pour améliorer le temps de chargement de vos pages.
Les éléments à qui est attribuée la valeur auto ne seront "peint" ou rendu par le navigateur seulement lorsqu'ils s'apprêtent à être visible, après que l'utilisateur ait suffisamment fait défilé la page.
Et c'est un bon candidat à l'amélioration progressive puisque les navigateurs qui ne connaissent pas cette propriété se contenteront de l'ignorer.
Article passionnant sur comment passer de 5 minutes à 11 secondes pour traiter un fichier de 12 Go avec Node. Très didactique, notamment sur l'utilisation des streams.
Un outil pour effectuer du benchmarking avec Node.
Pré-charger les polices de caractère dont on sait à l'avance qu'elles seront utilisées, pour que le navigateur n'attende pas d'avoir chargé le CSS pour les télécharger.
Cette technique permet de limiter les layout shifts provoqués par le remplacement de la police par défaut par la police personnalisée, et d'améliorer le temps de chargement global de la page.
Utilisation de Deno.bench pour comparer la vitesse d'exécution de divers algorithmes de tri, de boucles, etc.
Il n'y a rien de plus performant que d'utiliser les APIs DOM directement, sans framework.
Cet article regroupe quelques bonnes pratiques si vous avez besoin de performances optimales.
Comment optimiser du code JavaScript. Il faut noter que ça se fait souvent au détriment de la lisibilité et de la compréhensibilité. Certains conseils sont donc à réserver pour des scénarios où les performances sont cruciales.
Un outil pour analyser une image Docker et proposer des outils pour l'optimiser.
Via https://korben.info/explorer-optimiser-images-docker-avec-dive.html
Très bon article en français qui explique de manière concise le fonctionnement des attributs async, defer, rel=preload/preconnect/dns-prefetch, fetchpriority et loading.
Un outil qui permet de scroller un très grand nombre de données efficacement dans une app Vue.
Un regroupement d'articles qui parlent en profondeur de comment optimiser une appli web. C'est plein de bonnes pratiques à avoir en tête quand on développe.
Super initiative ! Quand je vois tous ces sites dont la home page fait 10 MB de scripts, CSS et images en tout genre et que ça semble ne gêner personne 🙄
Removing jQuery from GOV.UK was a huge yet manageable task that led to improved code and performance gains across the site. This is how and why we did this work.
Un outil pour analyser la taille d'un package npm.