Introduction à la Performance Web

Adf4ff2212aea06456ca3c3bca95c0db?s=47 Raphael Goetter
September 11, 2013

Introduction à la Performance Web

Medialibs Nantes, 2012

"Introduction à la performance web" (comment accélérer l'affichage de son site web)

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

September 11, 2013
Tweet

Transcript

  1. 5.

    ON VEUT DES CHIFFRES ! Sites e-commerce et attente client

    57 % des visiteurs quittent un site e-commerce s'il met plus de 4 secondes à s'afficher – PhoCusWright / Akamai (2010) “
  2. 6.

    26 % des visiteurs quittent un site e-commerce s'il met

    plus de 2 secondes à s'afficher – PhoCusWright / Akamai (2010) “ ON VEUT DES CHIFFRES ! Sites e-commerce et attente client
  3. 7.

    ON VEUT DES CHIFFRES ! C'est pire sur mobile !

    60% des mobinautes s'attendent à un chargement de 3s maximum pour un site mobile – Compuware (2011) “
  4. 8.

    ON VEUT DES CHIFFRES ! C'est pire sur mobile !

    60% des mobinautes s'attendent à un chargement de 3s maximum pour un site mobile – Compuware (2011) “ … Et 74% quittent une page après 5 secondes d'attente – Compuware (2011) “
  5. 13.
  6. 14.

    +100ms 1% perte de revenus ⬇ +500ms -20% de recherches

    ⬇ -2s +15% de chargements ⬇ -5s +12% de revenus +25% pageviews ⬇
  7. 15.

    MAIS AUSSI (SURTOUT ?) ... Sources : WebRankInfo / 1ere-position.fr

    / silicon.fr En 2010, Google a annoncé officiellement qu'il tenait compte de la rapidité des sites dans son algorithme de positionnement. Google recommande un délai moyen de 1,5 seconde pour l’affichage d’une page web. ❶ ❷
  8. 17.

    LE TYPE DE CONNEXION EDGE (0,38 Mbit/s) 3G (1,9 Mbit/s)

    3G+ (3,6 Mbit/s) H+ (10 Mbit/s) Wi-Fi (25 Mbit/s) ADSL (30 Mbit/s) 4G (40 Mbit/s) Fibre (100 Mbit/s) Source : Wikipedia
  9. 18.

    LE TYPE DE CONNEXION 3G 20 minutes ➞ 3G+ 1min

    15s ➞ 4G 10 secondes ➞ Concrètement... Source : Orange (bon OK c'est un peu bullshit marketing) Téléchargement d'un album de musique :
  10. 19.

    LE POIDS DES RESSOURCES Images 700 Ko ➞ JavaScript 230

    Ko ➞ CSS 37 Ko ➞ HTML 45 Ko ➞ Autres 188 Ko ➞ 1,2Mo au total en moyenne : Source : AlexaRank Top 1000 (janvier - août 2013)
  11. 21.

    LE NOMBRE DE REQUÊTES Images 60 requêtes ➞ JavaScript 17

    requêtes ➞ CSS 3,5 requêtes ➞ HTML 10 requêtes ➞ Autres 7 requêtes ➞ 98 requêtes en moyenne : Source : AlexaRank Top 1000 (janvier - août 2013)
  12. 22.

    LE NOMBRE DE REQUÊTES … à cause de la latence

    Latence • dépend du serveur, du DNS • dépend de la connexion : • 20-60ms via ADSL • 200-600ms en 3G Chargement • dépend du poids
  13. 25.

    MANUELLEMENT Outil d'audit de Chrome Module d'audit divers (accessibilité, réseau,

    performances,...) directement intégré au navigateur Chrome : Touche F12 Onglet « Audit » Option « Webpage performance » ➞ ➞
  14. 26.

    MANUELLEMENT Extensions : YSlow et PageSpeed YSlow (Yahoo!) : plugin

    disponible sur Firefox, Chrome, Safari, Opera PageSpeed (Google) : plugin Chrome, Firefox et en ligne
  15. 27.

    EN LIGNE La référence : WebPageTest.org Au choix : lieu

    du serveur, type de connexion, navigateur, etc.
  16. 32.

    QUELQUES SITES PASSÉS AU CRIBLE 7s chargement 78 requêtes 1095ko

    poids 7.1s chargement 163 requêtes 2203ko poids 7.2s chargement 133 requêtes 808ko poids 7.7s chargement 57 requêtes 1010ko poids
  17. 33.

    QUELQUES SITES PASSÉS AU CRIBLE 2.3s chargement 171 requêtes 2058ko

    poids Suite... 6.6s chargement 66 requêtes 671ko poids
  18. 35.

    BONNES PRATIQUES GÉNÉRALES Pas de redirections de pages Scripts placés

    avant </body> et/ou attributs async / defer Évitez @import pour les fichiers CSS Hébergez les ressources sur plusieurs domaines (entre 2 et 4) Déclarez les dimensions des images dans le HTML (width="", height="") Évitez les mauvaises requêtes (404) ❶
  19. 36.

    EN DÉTAIL Hébergez les ressources sur plusieurs domaines « »

    Hébergez les ressources (images, médias) sur plusieurs domaines différents. Cette technique favorise leur téléchargement en parallèle. Un sous-domaine fonctionne aussi (ex. media.alsacreations.com), et un domaine sans cookies est encore plus performant. Source : Yahoo!UI blog Opera : 8 / IE10 : 8 / Chrome : 6 / Firefox : 6 / IE8/IE9 : 6 / Safari : 4 / IE6/IE7 : 2 ❶
  20. 37.

    RÉDUIRE LE POIDS DES RESSOURCES Minifiez les fichiers CSS Minifiez

    les fichiers JS Compressez les images Choississez le bon format d'image (.png, .gif, .jpg) Optez pour des fontes légères (.woff est généralement plus léger) ❷
  21. 39.

    RÉDUIRE LES REQUÊTES Réunissez les feuilles de styles CSS en

    une seule si possible Réduisez / réunifiez le nombre de fichiers JavaScript externes si possible N'utilisez pas (ou presque pas) d'images ! → Sprites CSS, → Data-URI, → Caractères unicodes, → Font Icons, ... ❸
  22. 40.

    EN DÉTAIL Font Icons « » ❸ icomoon.io .icon {font-family:

    "MyFontIcon", sans-serif;} .icon-twitter:before {content: "t";}
  23. 41.

    NE CHARGER QUE LE NÉCESSAIRE Chargez les scripts externes en

    Asynchrone et/ou Différé N'utilisez pas display : none pour masquer un élément jQuery est parfois inutile et remplaçable par jQuip ou Zepto.js, plus légers Triez les scripts nécessaires et les scripts de confort JavaScript est parfois avantageusement remplaçable par CSS3 : bordures, arrondis, ombrages, animations, formes simples (triangles, ronds, carrés) Pensez à faire du chargement conditionnel de ressources (selon taille d'écran, pixel-ratio, ...) ❹
  24. 42.

    EN DÉTAIL Charger conditionnellement les éléments « » ❹ @media

    (min-width : 768px) { .deco {background: url(concombre-big.jpg);} } @media (max-width : 767px) { .deco {background: url(concombre-small.jpg);} } concombre-big.jpg concombre-small.jpg
  25. 43.

    CÔTÉ SERVEUR Compressez les fichiers texte côté serveur (HTML, CSS,

    JS) Générez certaines pages « à l'avance » (ex. flux RSS) Gérez les durées de cache des éléments ❺
  26. 44.

    EN DÉTAIL Durée d'expiration du cache « » ❺ <IfModule

    mod_expires.c> ExpiresActive On ExpiresByType text/plain "access plus 1 day" ExpiresByType text/html "access plus 1 hour" ExpiresByType application/x-javascript "access plus 3 months" ExpiresByType application/javascript "access plus 3 months" ExpiresByType text/css "access plus 3 months" ExpiresByType image/gif "access plus 3 months" ExpiresByType image/x-icon "access plus 3 months" ExpiresByType image/png "access plus 3 months" ExpiresByType image/jpeg "access plus 3 months" ExpiresByType application/xml "access plus 1 hour" # ExpiresDefault "access plus 1 day" </IfModule> Outil Google : Google ModPagespeed
  27. 45.

    Polices : League Gothic + Segoe UI Light Photos :

    Fotolia + mon super APN Pictos : IconFinder (Visual Pharm, Designmodo) MERCI, BISOUS Raphaël Goetter www.alsacreations.fr @goetter Crédits