24 tips webperf à connaître pour un site plus rapide

Fasterize vous offre 24 tips pour rendre votre site web et l’affichage de vos pages plus rapide.
Esprit de Noël, quand tu nous tiens… Mieux qu’un calendrier de l’Avent, pas besoin d’attendre chaque jour pour déguster un nouveau chocolat : vous pouvez tous les consommer immédiatement. Régalez-vous !

1. La requête la plus rapide, c’est celle qu’on ne fait pas. Alors pensez à mettre un maximum d’éléments en cache.
2. Vous faites de l’A/B testing ? Ne chargez pas votre tag d’A/B test via un autre tag.
3. Ne preloadez pas tout mais seulement ce que le navigateur ne peut pas découvrir par lui-même.
4. Faites le ménage dans vos CSS !
5. Faites le ménage aussi dans vos JS, encore plus sur mobile où le parsing et l’exécution sont beaucoup beaucoup plus longs.
6. Compressez tout ce que vous pouvez avec les formats à votre disposition : WOFF2, brotli, WebP…
7. Laissez respirer votre navigateur : retardez le plus possible le chargement de vos third-parties.
8. Testez vos optimisations webperf avant de les valider parce-que des best practices mal appliquées peuvent être contre-productives.
9. Ne lazyloadez pas les images visibles au-dessus de la ligne de flottaison.
10. Mesurez vos performances au cours du temps dans un environnement contrôlé grâce au Synthetic monitoring.
11. Passez en HTTP/2 pour compenser l’impact du HTTPS.
12. Mettez en place les optimisations TLS (OCSP Stapling, Session Resumption, TLS False Start, TLS 1.3)
13. Si vous êtes en HTTP/2, supprimez le sharding pour les éléments compris dans le chemin critique.
14. Attention aux SPOF : un script third-parties chargé en synchrone peut bloquer toute une page !
15. Pour le mobile, préférez un site adaptatif voire responsive à un site dédié.
16. Vous pouvez précharger le JSON de vos requêtes XHR en JSONP !
17. Utilisez un CDN, ça soulagera vos serveurs 😉
18. Explorez les Service Workers dans vos stratégies de cache.
19. Attention à l’utilisation des webfonts ! Ne chargez pas une police avec 100 icônes si vous n’en n’utilisez que 3 🙂
20. Préférez le format .mp4, bien plus performant que le .gif.
21. Expérimentez le critical CSS pour accélérer le chargement de votre page.
22. Jetez jQuery à la poubelle, préférez Zepto. Ou mieux : codez en JS natif !
23. N’oubliez pas les temps de réponse de vos serveurs et limitez les échanges avec celui-ci.
24. Passez de bonnes fêtes !

Vous souhaitez savoir de quelles optimisations vous avez besoin et les automatiser ?