Techniques d’accélération des pages Web

Jean-Pierre VINCENTConsultant indépendant

@theystolemynickBraincracking.org

Bonjour, je m’appelle Jean-Pierre

l 13 ans de Web :l PHP, JavaScript, HTML5, CSSstartups, Yahoo!, houra.fr

Expert frontend indépendantl Veilleur :l braincracking.orgl @theystolemynick

Performance frontend ?

Performances traditionnelles :- Tenir la charge- Délivrer vite- Techniques serveur

Performances Frontend- Vitesse d'affichage d'une page- Fluidité de l'interface- Techniques de développeur front

Performance frontend

Rien Rien Premier affichage ! Chargé

Pourquoi la performance ?

l Qualité perçue

l Ergonomie

l Référencement

l Coûts réseau

l Fun

$$

Combien coûte une seconde ?

Combien coûte une seconde ?

Tunnel d’achat :

1s = -7% de conversion

Tagman, 2012

Combien coûte une seconde ?

Vidéo :

1s = -6% de vue

Akamai 2012

Combien coûte une seconde ?

e-commerce

1 s = - 50 % de conversion

Walmart 2012

Combien coûte une seconde ?

Search

l Bing : 1 s = l - 3 % de CAl Yahoo! : 1 s = l + 10 % de rebond

Études Bing et Google Velocity 2009 : http://velocityconf.com/velocity2009/public/schedule/detail/8523

Combien coûte une seconde ?

Mobile

l 1 s = -10% de pages vues

l 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

Pourquoi la performance ?

l SEOl1 critère de référencement

chez GooglelInfluence le taux de crawl

l Métrique : temps « onload »

lMesurée par les utilisateurs

http://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.html

l Charger un site de 1,5 Mo ?

l Facile avec la fibre !

Toujours utile ?

Les utilisateurs

Sources 2012 : Akamai, Degrouptest, 60 Millions de consommateurs, ARCEP, Cedexis

ADSL Mobiles

Débit 4, 8 Mb/s 2,5 Mb/s

Latence 95 ms 200 ms

Temps de chargement

l Débit moyen : 5 Mb/s

l 25% des utilisateurs ont moins de 2,5 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

l Le site moyenl 1,5 Mol 120 requêtesl 12 domaines

15 secondes de chargement

Chantier Webperf

l Fixer des objectifs

l Mesurer pour l'utilisateur

l Coder !

l Surveiller

Objectifs Utilisateurs

Interactivité avec la fonctionnalité < 5 s

Mesurer l'accès à la fonctionnalité

l En JavaScriptl Google Analytics « User Timing »l Boomerang, autres outils de RUM

Interactivité avec la fonctionnalité < 5 s

Premier rendu < 2 s

Objectifs Utilisateurs

Mesurer le premier rendu

l En JavaScriptl Librairies RUM :l RequestTrackerl Boomerang JS

l Outils externesl WebPageTest.org

Interactivité avec la fonctionnalité < 5 s

Premier rendu < 2 s

Réponse HTML < 1 s

Chargement de la page < 20 s ?

Objectifs SEO

Mesurer le onload

l Pratiquement tous les outils

Agir

Techniques passe partout :

l Configuration serveurl Cache serveur, cache clientl Chargement des fichiers

Configuration serveur

1. Configuration du keep-alive :

2. Activer la compression

KeepAlive OnKeepAliveTimeout 5Timeout 10

SetOutputFilter DEFLATEAddOutputFilterByType DEFLATE text/html text/css text/plain application/x-javascript

Configuration serveur

Vérifier avec WebPageTest

Cache Serveur

l Fichiers platsl Mécanismes / plugin des CMSl memcachel Varnishl CDN…

Paramétrage du temps de cacheContenu personnalisé

Cache serveur

Vérifier avec WebPageTest

Agir

l Le chargement des fichiers ou le chemin critique

Trouver le chemin critique

Chemin critique

1er rendu

Le chemin critique

Côté client

l Redirectionsl CSSl Policesl JS

Ressources bloquantes :

Le chemin critique

Redirections

l Limiter à 1 maxl Jamais côté clientl Surtout sur mobile

Le chemin critique

CSS / JS

l Concaténation (2 fichiers max par type)

l Minification

Le chemin critique

Polices

l Les limiterl Les valider :l poids,l utilisée,l compatible (Chrome XP)

Le chemin critique

Le choix des armes

l <script src> en hautl <script src> en basl Inlinel defer l Asynchrone

Inclure JavaScript

<script src> en haut

Si :l petit l concaténé l sans concurrence

l Etl HTML + CSS + JS + Fonts < 6 requêtes

Inclure JavaScript

<script src> en bas

l Si :l Page légèrel Gestion des dépendancesl Pas de document.write()l Pas de iOS

Inclure JavaScript

l Imagesl Iframel Objets flash / vidéo

Ressources gênantes :

Temps onload()

Images

l Optimisations :

l Ne pas les charger !l Charger à la demandel Compression manuellel Compression automatique

Remplacer la décoration

l Caractères unicode ►★✓⇢✎♥☎♻⚠☻☺⇨l Dégradésl Coins arrondisl Ombres sur texte et boîtesl Rotation de textel Opacité

l http://ikwebdesigner.com/special-characters/

Chargement Just In Time

l Méthode de lazy-load :

l charger les images visibles

https://github.com/fasterize/lazyload

Sprites

l Maintenance Outil : Sass + Compass

Compression manuelle

l Connaître les formats

l PNG toujours meilleur que GIFl PNG : ultra efficace avec des aplats de couleurl JPG : mauvais pour le texte si il est en couleursl Jamais de PNG entrelacél PNG8 alphal WebP : mal supportél …

→

Cache client

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

Invalidation des caches longs

l Maîtrise totale des URLl HTMLl CSSl JS

l Processus de compilationl URL rendues uniques par :

l Numéro de releasel Md5 du fichier

Expires : +1 anCache-control : publicVary : xxx

Mise en cache long :

Gérer son cache

X

Gérer son cache

Surveiller : WebPagetest

Pourquoi la performance ?

Un administrateur l système heureux

l

l

l Serveurs tiers

SPOF

Dépendances à des serveurs tiers qui peuvent bloquer le rendu

Usual suspect :l http://platform.twitter.com/widgets.jsl https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

l http://html5shiv.googlecode.com/svn/trunk/html5.js

SPOF-O-Matic

Teste la fragilité aux ralentissements des serveurs tiersl démo

SPOF

Surveiller : WebPagetest

Fixer : chargements asynchrones

S’auto-former

En anglais

l http://www.perfplanet.com/l http://developer.yahoo.com/performance/rules.htmll https://developers.google.com/speed/docs/best-practices/rules_introl http://www.webpagetest.org/forums

En françaisl http://checklists.opquast.com/webperf/l https://groups.google.com/forum/?fromgroups#!forum/performance-webl @webperf_fr l et l @WebperfParisl https://github.com/edas/webperf-bookl http://braincracking.org

Passer des règles aux outils

l Règlesl Yahoo! Best Practices

l (35 règles)l Google PageSpeedl (31 règles)l Test Opquastl (41 règles)…l Jusqu'à 400+ pratiques

l Outilsl Analyse réseaul Profilingl Bonnes pratiquesl Monitoringl RUMl Intégration continue

Questions ?

l Viens jouer :l braincracking.orgl @theystolemynick

Crédits

l http://www.flickr.com/photos/themonnie/2495892146l http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/l http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostream/