Techniques d’accélération des pages Web
Jean-Pierre VINCENTConsultant indépendant
#WebPerf - @theystolemynickBraincracking.org
Bonjour, je m’appelle Jean-Pierre
● 5 10 13 ans de Web
● PHP, JavaScript, HTML5, CSS
● Ex :
– startups, Yahoo!, houra.fr● Expert frontend indépendant
● Veilleur :
– braincracking.org
– @theystolemynick
Performance Web ?
Les 10 14 35 commandements
http://developer.yahoo.com/performance/rules.html
Comment faire le tri ?
● Yahoo! Best Practices (35 règles)
● Google PageSpeed (31 règles)
● Test Opquast (41 règles)
● En vrai : 500+ pratiques
● Nouveaux navigateurs● Nouveaux besoins● Mobile
Pourquoi la performance ?
● SEO
– 1 critère de référencement
chez Google
– Métrique : temps « onload »
– Mesurée par les utilisateurs
http://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.html
Pourquoi la performance ?
● Un administrateur système
heureux
Pourquoi la performance ?
● Qualité perçue
● Ergonomie
● Réponse à un besoin
● Métrique : premier rendu
$$
Combien coûte une seconde ?
Combien coûte une seconde ?
Tunnel d’achat :
1s = -7% de conversion
Combien coûte une seconde ?
Vidéo :
1s =-6% de vue
Akamai 2012
Combien coûte une seconde ?
Voyage
4s = -60% de vue
Combien coûte une seconde ?
Search
● Bing : 1 s =
- 3 % de CA
● Yahoo! : 1 s =
+ 10 % de rebond
Combien coûte une seconde ?
Mobile
● 1 s = -10% de pages vues
● Après 4 s : 60% d'abandon
/ http://www.themediabriefing.com/article/2012-10-02/speed-is-a-feature-why-a-slow-mobile-web-experience-means-lost-revenuehttp://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster
Chantier Webperf
Comment ne pas rater un chantier Webperf ?
Chantier Webperf
● Objectifs
● Que voient les utilisateurs ?
● Quelles techniques ?
● Quel suivi ?
Objectifs
Interactivité avec la fonctionnalité < 5 s
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Objectifs
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Réponse HTML < 1 s
Objectifs
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Réponse HTML < 1 s
Chargement de la page < 20 s ?
Objectifs
●Grand public français :● IE 7 is dead !● Arrivée via réseaux mobiles● Connexions moyennes :
ADSL Mobiles
Débit 4, 8 Mb/s 2,5 Mb/s
Latence 95 ms 200 ms
Les utilisateurs
• La moyenne n’est pas représentative
● 25% des utilisateurs ont moins de 2,5 Mb/s
< 1 Mb/s
1 - 2 Mb/s
2 - 3 Mb/s3 - 4 Mb/s
4 - 5 Mb/s
5-10 Mb/s> 10 Mb/s
Répartition des débits (ligne fixe)
Les utilisateurs
ADSL Mobiles
Débit 2,5 Mb/s 2,5 Mb/s
Latence 110 ms 200 ms+25% de perte
Connexion réseau à cibler :
Navigateurs à cibler :IE 8Safari iOSAndroid 2.3.x et 4.x
Les utilisateurs
Par où commencer ?
Yahoo! Best Practices (35 règles)Google PageSpeed (31 règles)Test Opquast (41 règles)
En vrai : 500+ pratiques
Les techniques
Configuration serveur
1. Configuration du keep-alive :
2. Activer la compression
KeepAlive OnKeepAliveTimeout 5Timeout 10
→
Gérer son cache
Efficace mais :50% des sites oublient30% ont un TTL < 30 jours
Gérer son cache
« Vide ton cache »
Sans cache : • Phases de recette interne • Environnements de développement
Cache agressif : • Cache utilisateur • Chaîne de cache réseau
Gérer son cache
Cache : invalidation standard● ServeureTag: "xxxxxx"
OuLast-Modified: DATE_W3C
• Serveur200 OK
Ou304 Not Modified
• ClientIf-None-Match: "xxxxxx"
OuIf-Modified-Since: DATE_W3C
Gérer son cache
Cache : invalidation standard
Sert à des cas spéciaux• Polling• Revalidation de session• Environnement de dév.
Gérer son cache
Invalidation des caches longs
● Maîtrise totale des URL● HTML● CSS● JS
● Processus de compilation● URL rendues uniques par :
● Numéro de release● Md5 du fichier
Expires : +1 anCache-control : publicVary : xxx
Mise en cache long :
Gérer son cache
Le super cache
API Application Cache
● 1 application = 1 pack de fichiers
● 1 fichier de règles● 1 API de gestion du
cache
● Surtout sur mobiles
Gérer son cache
Trouver le chemin critique
Chemin critique
1er rendu
Le chemin critique
Côté client
● Redirections● Génération de la page● CSS● Polices● JS
Ressources bloquantes :● Images● Iframe● Objets flash / vidéo
Ressources gênantes :
Le chemin critique
Redirections
● Limiter à 1 max● Jamais côté client● Surtout sur mobile
Le chemin critique
● Moyens :● Cache serveur● Flush()● Page dynamiques et XHR● Parallélisation (Big Pipe de FB)
Le chemin critique
Pages statiques
Cache serveur● Fichiers plats● Mécanismes des CMS● memcache● Varnish● CDN…
Paramétrage du temps de cacheContenu personnalisé
Technique du Flush()
● Envoyer le <head> au plus tôt
Pages semi-dynamiques
● Cache sur les parties statiques● Envoyer ASAP● XHR ou SSI pour les parties dynamiques● Ne pas oublier l'interface
Référencement
● Personnalisation : Server Side Include
Le chemin critique
Inclusion des parties dynamiques
Pages semi-dynamiques
Extrêmes
Facebook Big Pipe
Déblayer le chemin critique
● CSS
● Concaténation● Minification● Inline ?
Le chemin critique
Polices
● Les supprimer …● Les valider :
● poids,● utilisée● compatibilité
● Chargement asynchrone
Le chemin critique
SPOF
Dépendances à des serveurs tiers qui peuvent bloquer le rendu
Usual suspect :●http://platform.twitter.com/widgets.js●https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
●http://html5shiv.googlecode.com/svn/trunk/html5.js
SPOF-O-Matic
Teste la fragilité aux ralentissements des serveurs tiers
démo
Pause ?
Le choix des armes
● <script src> en haut● <script src> en bas● Inline● defer ● Asynchrone
Inclure JavaScript
<script src> en haut
● Si :● petit ● concaténé ● sans concurrence
Inclure JavaScript
<script src> en bas
● Si :● Page rapide● Gestion des dépendances● Pas de document.write()● Pas de iOS
Inclure JavaScript
<script defer>
● Retardé par le onload
Inclure JavaScript
Javascript asynchrone
Conditions :● Chargeur mis inline● Gestion d'une file de téléchargement● Remplacer les dépendances inline par des callback
● Découpe par module● Téléchargement dépriorisé
● Au top: concaténation + module + asynchrone
Inclure JavaScript
Outils : analyse
ySlow
Outils : analyse
Google PageSpeed
Outils : analyse
WebPageTest
Outils : analyse
WebPageTest, PageSpeed, ySwow...
Ne pas se focaliser sur les notes
Profilers front
IE Developer tools
Profilers front
Dynatrace AJAX
RUM
✓ Collecte des temps de chargement des utilisateurs
✓ Complément des tests synthétiques
Peut ralentir la page
RUM
Gratuit
● Boomerang JS● Google Analytics
Commercial
● LogNormal● Torbit● Yottaa● New Relic● Cedexis…
RUM
Google Analytics
RUM
Google Analytics
RUM
Google Analytics
Données de navigateurs modernes
Monitoring
Gratuit
● WPT monitor● ShowSlow
Commercial
● Torbit● Yottaa● GTmetrix● Dynatrace…
Résumé
● Analyse fine et méta-outils :● WebPageTest
● Monitoring :● WPT Monitor
● RUM :● Boomerang, Google Analytics
● Code Front :● IE8 F12, Chrome
Les images
Images
Optimisations :
● Ne pas les charger !● Charger à la demande● Compression manuelle● Compression automatique
Ne pas charger
Méthode de lazy-load :● charger les images visibles
mobiles
https://github.com/fasterize/lazyload
Remplacer les icônes
Caractères unicode
► ♥ ☻☺★✓⇢✎ ☎♻⚠ ⇨
● Taille et couleur adaptable⚠ servir en UTF-8
⚠ dépend du couple OS / navigateur
http://ikwebdesigner.com/special-characters/
Remplacer les dégradés
background: linear-gradient(top bottom, #ffffff 0%,#131313 100%);
● Taille automatique IE : dégradés simples● Syntaxe lourde
http://www.colorzilla.com/gradient-editor/
Remplacer la décoration
● Coins arrondis● Ombres sur texte et boîtes● Rotation de texte● Opacité
⚠ Attention aux perfs de rendu
Limiter les requêtes
● Encodage en base64<img src="data:image/png;base64,<?= base64_encode( file_get_contents( './image.png' )); ?>">
● IE < 8 : MHTML⚠ Performance de rendu
Sprites
Maintenance Outil : Sass + Compass
Compression manuelle
Connaître les formats● PNG toujours meilleur que GIF● PNG : ultra efficace avec des aplats de couleur● JPG : mauvais pour le texte si il est en couleurs● Jamais de PNG entrelacé● PNG8 alpha● WebP : mal supporté
Outils de compression
● PNGOUT● OptiPNG● Pngcrush● JpegOptim● jpegrescan
● pngquant● pngnq-s9● Gifsicle● jpegtran
● SVG : distribuer en gzip
Interface
● PNGGauntlet
Interface
● ImageAlpha (pngmini.com)
Interface
● ImageOptim
Interface
● smushit.com
Rendu fluide
Alléger le DOM
Surveiller 2 métriques● La profondeur max et moyenne ( < 12 )● Le nombre de nœuds (< 1500 )
Outil : DOM Monster, WPT
● Long et périlleux si fait après coup● Sensibilisation des intégrateurs
Rendu fluide - JavaScript
● Bonnes pratiques● Peu de requêtes DOM
● Caching● En dehors des boucles
● Manipulation du DOM par batch● Application de classes VS $.css()● Limiter la taille des requêtes
●$(doc.ById('monID')).find('> div.maClasse');
● Privilégier document.querySelector()
● JavaScript lui même est rarement un problème
Rendu fluide
La technique du setTimeout( 0 )
En cas de blocage de l'interface :● « casser » les boucles toutes les 50 ms● Y revenir lorsque le navigateur est libre
Rendu fluide - Web Worker
Pour du calcul lourd● Crée un nouveau thread● Communication par événements
var worker = new Worker('my_task.js');worker.onmessage = function(event) { console.log("Called !\n");};
● Compatibilité navigateurs● Organisation du code spécifique
S’auto-former
En anglais
● http://www.perfplanet.com/● http
://developer.yahoo.com/performance/rules.html
● https://developers.google.com/speed/docs/best-practices/rules_intro
● http://www.webpagetest.org/forums
En français
● http://checklists.opquast.com/webperf/
● https://groups.google.com/forum/?fromgroups#!forum/performance-web
● @webperf_fr et
● @WebperfParis● https://
github.com/edas/webperf-book● http://braincracking.org
Crédits
● http://www.flickr.com/photos/themonnie/2495892146● http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/● http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostrea
m/