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/