Performance CSS
- Ne pas faire de transition ou d'animation CSS avec une autre propriété que : opacity, transform, filter
- chaque frame d'animation doit être faite en moins de 16-10ms (60 frames par seconde), latence en dessous de 50ms
- Si on a une image de fond fixe au défilement : séparer l'image sur un élément à part et créer un nouveau layer pour cet élément
- Border-radius = coûteux, n'affecte pas le layout mais le repaint
- Box-shadow / Pour animer l'ajout d'une ombre sur un élément
- Box shadow a différentes qualités de rendering dans différents navigateurs (faible avec Webkit, haute avec in Opera/IE9, varie entre les versions de Firefox)
- Donc sa performance est différente entre les navigateurs
- Box shadow est coûteux, surtout si le radius est large, ou si on utilise inset box shadow => car on doit repeindre tous les éléments qui sont autour de notre élément
- Au lieu de box-shadow
- Séparer l'ombre sur un élément à part
- Animer l'opacité de cet élément
Fonts
Checker si la font est installée en local avant de la télécharger
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
Monitorer la performance du CSS
- CSS Triggers pour voir quels propriétés déclenchent le paint
CSS Overview
- Activer si pas dispo : activer CSS Overview dans les "experiments" + lancer "Show CSS Overview"
- => résumé, nb de couleurs et valeur, info sur la font (toutes les font weight et line height utilisées), déclarations css non utilisées, media queries
Coverage panel
- filtrer par le type de fichier .css
Rendering panel
- Activer si pas dispo : lancer "Show Rendering"
- Layout shift regions : illumine les zones qui changent => peut-être perturbant pour l'utilisateur (les éléments de la page bougent), et réduit la performance (coûteux pour le render de la frame)
- paint flashing
- frame rendering stats
Performance monitor/panel
- = pour voir combien de recalculs de layout sont appelés (quand on interagit avec la page ou quand l'animation apparaît)
- Performance recording
- Différents marqueurs temporels (dans la section "Timings")
- DCL : DomContentLoaded
- FP : First Paint
- FCP : First contentful paint
- FMP : First Meaningful paint
- enable the “Screenshots” and “Web Vitals” options
- most interesting metrics : Layout Shifts, and Largest Contentful Paint. There is also a pie chart showing the Painting and Rendering time.
Outils en ligne
- Pour voir si on a trop de sélecteurs spécifiques
- CSS Stats
- Analyze CSS : permet de voir les changements faits sur le css