Techniques d’accélération des

pages WebJean-Pierre VINCENT

Consultant indépendant

Code / Développement

#WebPerf - @theystolemynick

Braincracking.org

• 5 10 13 ans de Web

• PHP, JavaScript, HTML5, CSS

• Ex : – startups, Yahoo!, houra.fr

• Expert frontend indépendant

• Veilleur :– braincracking.org

– @theystolemynick

Bonjour, je m’appelle Jean-Pierre

Les 10 14 35 commandements

http://developer.yahoo.com/performance/rules.html

Steve Souders, like a Boss

Performance Web ?

• 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

Comment faire le tri ?

• 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

$$

Pourquoi la performance ?

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 ?

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-revenue

http://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster/

Comment ne pas rater un chantier Webperf ?

1. Objectifs

2. Que voient les utilisateurs ?

3. Quelles techniques ?

4. Quel suivi ?

Chantier Webperf

Interactivité < 5 s

1. Objectifs

Interactivité avec la fonctionnalité < 5 s

Premier rendu < 2 s

1. Objectifs

Interactivité avec la fonctionnalité < 5 s

Premier rendu < 2 s

Réponse HTML < 1 s

1. Objectifs

Interactivité avec la fonctionnalité < 5 s

Premier rendu < 2 s

Réponse HTML < 1 s

Chargement de la page < 20 s ?

1. Objectifs

2. Utilisateurs

Sources : Akamai 2011 et 2012, Degrouptest, 60 millions de consommateurs, ARCEP

• Grand public français :– IE 7 is dead !

– Arrivée via réseaux mobiles

– Connexions moyennes :

2. Utilisateurs

ADSL Mobiles

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

Latence 95 ms 200 ms

• 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)

2. Utilisateurs

• Connexion réseau à cibler :

• Navigateurs à cibler :

– IE 8

– Safari iOS

– Android 2.3.x et 4.x

2. Utilisateurs

ADSL Mobiles

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

Latence 110 ms 200 ms

+25% de perte

3. LES TECHNIQUES

• Yahoo! Best Practices (35 règles)

• Google PageSpeed (31 règles)

• Test Opquast (41 règles)

• En vrai : 500+ pratiques

Par où commencer ?

Sans débat : configuration serveur

• Configuration du keep-alive

• Activer la compression

• Ressources texte : 80%

KeepAlive On

KeepAliveTimeout 5

Timeout 10

Sans débat : gérer son cache

• Et pourtant :

– 50% des sites oublient

– 30% ont un TTL < 30 jours

Cache

• Sans cache :

– Phases de recette interne

– Environnements de

développement

• Cache agressif :

– Cache utilisateur

– Chaîne de cache réseau

« Vide ton cache »

• Serveur

– eTag: "xxxxxx"

Ou

– Last-Modified: DATE_W3C

• Serveur

– 200 OK

Ou

– 304 Not Modified

• Client

– If-None-Match: "xxxxxx"

Ou

– If-Modified-Since: DATE_W3C

Cache : invalidation standard

• Sert à des cas spéciaux

– Polling

– Revalidation de session

– Environnement de dév.

Cache : invalidation standard

• Génère autant de requêtes

• Maîtrise totale des URL

– HTML

– CSS

– JS

• Processus de compilation

• URL rendues uniques par :

– Numéro de release

– Md5 du fichier

Invalidation des caches longs

• Mise en cache long :

Expires : +1 anCache-control : publicVary : xxx

API Application Cache

• 1 application = 1 pack de

fichiers

• 1 fichier de règles

• 1 API de gestion du cache

• Surtout sur mobiles

Le super cache

Sans débat : moins de requêtes

• La limite de HTTP : la latence

Au pire

• DNS

• + Ouverture TCP

• + Slow Start

• + 1 RTT mininum

= 4 X latence

= 400 ms

Trouver le chemin critique

Chemin critique

1er rendu

Ressources bloquantes :

• Redirections

• Génération de la page

• CSS

• Polices

• JS

Ressources gênantes

• Images

• Iframe

• Objets flash / vidéo

Déblayer le chemin critique

• Redirections :– Limiter à 1 max

– Jamais côté client

– Surtout sur mobile

Déblayer le chemin critique

Génération de la page:

• Caches serveur

• Flush du head

Déblayer le chemin critique

Génération de la page:

• Caches serveur

• Flush du head

• Fonctionnalités longues :

XHR

Déblayer le chemin critique

Génération de la page:

• Caches serveur

• Flush du head

• Fonctionnalités longues : XHR

• Personnalisation :

Server Side Include

Déblayer le chemin critique

• CSS

– Concaténation

– Minification

– Inline ?

Déblayer le chemin critique

• Polices

– Les supprimer ...

– Chargement asynchrone

Déblayer le chemin critique

Le choix des armes

• <script src> en haut

• <script src> en bas

• Inline

• defer

• Asynchrone

Déblayer le chemin critique : JavaScript

<script src> en haut

• Si :

– Petit

– concaténé

– Sans concurrence

Déblayer le chemin critique : JavaScript

<script src> en bas

• Si :

– Page rapide

– Gestion des dépendances

– Pas de document.write()

– Pas de iOS

Déblayer le chemin critique : JavaScript

<script defer>

– Retardé par le onload

Déblayer le chemin critique : JavaScript

• Javascript asynchrone

Déblayer le chemin critique : JavaScript

En anglais

• http://www.perfplanet.com/

• http://developer.yahoo.com/pe

rformance/rules.html

• https://developers.google.com

/speed/docs/best-

practices/rules_intro

• http://www.webpagetest.org/fo

rums

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

S’auto-former

• http://www.flickr.com/photos/t

hemonnie/2495892146

• http://www.flickr.com/photos/7

6657755@N04/7214596024/in

/photostream/

• http://www.flickr.com/photos/j

ohannes_wl/8364284798/sizes/

l/in/photostream/

Crédits