La performance de votre site ou application web est importante pour vos utilisateurs et aux yeux des robots d'indexation des moteurs de recherche comme Google.
Contrairement aux performances Backend, où le gain peut être plus difficile à obtenir, nous disposons aujourd'hui de guidelines et d'outils pour obtenir des améliorations significatives sur les performances de chargement de votre applications web du côté des développements Frontend.
Ce talk propose une présentation quelques outils et méthodes qui sont faciles à mettre en oeuvre rapidement :
- Minification : JavaScript, CSS, HTML
- CSSCritical
- Changement asynchrone des dépendances : JavaScript, Font, CSS
2. ● CEO Escale / Co-Founder Startup Palace
● Fait du HTML depuis 1999
● Fan de Bootstrap depuis 3 ans.
Mathieu Le Gac
3. ● Gain important possible facilement VS Backend
● Importance pour l’expérience de vos utilisateurs
● SEO : importance pour les robots (Google)
● Des méthodes
● Des outils
Performance côté Frontend
5. Google PageSpeed Insight
● Un outil de référence > Un référentiel
● Des guidelines très complètes
● Laissez-vous guider
● Position de Google (avant le rendering au dessus de la
ligne de flottaison)
○ afficher un rendu (approximatif) le plus rapidement
possible
○ limiter les RQT HTTP
7. Classics
● Responsive obligatoire
● Cache des ressources
avec date d’expiration
● Compression gzip
● Pas de redirection
● Eléments tactile d’une
taille convenable
9. CSS Critical
● Contexte
○ On utilise des frameworks lourds comme Bootstrap
○ On concat + min le css en 1 seule feuille de style lourde
>>> stylesheet lourde !
● C’est quoi ?
○ Une feuille de 13Ko max en inline dans le HTML
● Comment on fait ?
○ Génération automatique (PhantomJS / grunt-criticalcss)
11. Pour aller plus loin...
● FOUT
○ “Flash of invisible text”
● CSS Critical
○ Se limite à une seule url (home)
○ Peut faire apparaître un flash
● UNCSS
○ Supprimer le CSS inutile
● HTTP/2
○ Beaucoup de ces améliorations resteront valables