Optimiser les performances CSS au chargement de la page


Deprecated: array_key_exists(): Using array_key_exists() on objects is deprecated. Use isset() or property_exists() instead in /srv/ruban.stephanemourey.fr/src/vendor/twig/twig/lib/Twig/Extension/Core.php on line 1530

Deprecated: array_key_exists(): Using array_key_exists() on objects is deprecated. Use isset() or property_exists() instead in /srv/ruban.stephanemourey.fr/src/vendor/twig/twig/lib/Twig/Extension/Core.php on line 1530

Deprecated: array_key_exists(): Using array_key_exists() on objects is deprecated. Use isset() or property_exists() instead in /srv/ruban.stephanemourey.fr/src/vendor/twig/twig/lib/Twig/Extension/Core.php on line 1530

Les CSS peuvent avoir un impact négatif sur la façon dont les pages se chargent. Dans cet article, quelques conseils utiles pour minimiser cet impact, le plus simple à implémenter consistant à ne pas donner à l'attribut rel la valeur stylesheet mais une autre comme preload et à la corriger de nouveau à stylesheet en JavaScript une fois que la page est chargée (plus de détails sur cette technique.

J'aime aussi la technique du chargement progressif des CSS, s'appliquant par block: voir démo

Source