PERFORMANCE CÔTÉ FRONTEND
chemin vers le 100/100 au Google Pagespeed Insight
● CEO Escale / Co-Founder Startup Palace
● Fait du HTML depuis 1999
● Fan de Bootstrap depuis 3 ans.
Mathieu Le Gac
● Gain important possible facilement VS Backend
● Importance pour l’expérience de vos utilisateurs
● SEO : importance pour...
Google PageSpeed Insight
Google PageSpeed Insight
● Un outil de référence > Un référentiel
● Des guidelines très complètes
● Laissez-vous guider
● ...
#QUICKWIN
Classics
● Responsive obligatoire
● Cache des ressources
avec date d’expiration
● Compression gzip
● Pas de redirection
● ...
Minification (Grunt / Gulp tasks)
● JavaScript > uglify (minify + renaming)
● CSS > cssmin
● HTML > htmlmin
● Compression ...
CSS Critical
● Contexte
○ On utilise des frameworks lourds comme Bootstrap
○ On concat + min le css en 1 seule feuille de ...
Async’all
● JavaScript
○ <script async type="text/javascript" src="..."></script>
● CSS
○ CSS Critical inline
○ Lib loadcs...
Pour aller plus loin...
● FOUT
○ “Flash of invisible text”
● CSS Critical
○ Se limite à une seule url (home)
○ Peut faire ...
Prochain SlideShare
Chargement dans…5
×

Performance côté frontend - chemin vers le 100/100 au Google Pagespeed Insight

595 vues

Publié le

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

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
595
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Performance côté frontend - chemin vers le 100/100 au Google Pagespeed Insight

  1. 1. PERFORMANCE CÔTÉ FRONTEND chemin vers le 100/100 au Google Pagespeed Insight
  2. 2. ● CEO Escale / Co-Founder Startup Palace ● Fait du HTML depuis 1999 ● Fan de Bootstrap depuis 3 ans. Mathieu Le Gac
  3. 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
  4. 4. Google PageSpeed Insight
  5. 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
  6. 6. #QUICKWIN
  7. 7. Classics ● Responsive obligatoire ● Cache des ressources avec date d’expiration ● Compression gzip ● Pas de redirection ● Eléments tactile d’une taille convenable
  8. 8. Minification (Grunt / Gulp tasks) ● JavaScript > uglify (minify + renaming) ● CSS > cssmin ● HTML > htmlmin ● Compression image > imageoptim / imagemin
  9. 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)
  10. 10. Async’all ● JavaScript ○ <script async type="text/javascript" src="..."></script> ● CSS ○ CSS Critical inline ○ Lib loadcss ● Font ○ WebFontLoader (Adobe-Typekit / Google)
  11. 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

×