Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction à la Performance Web

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)

Raphael Goetter

September 11, 2013
Tweet

More Decks by Raphael Goetter

Other Decks in Design

Transcript

  1. PERFORMANCE WEB
    Par quoi commencer ?
    Photo : © Raphaël Goetter

    View Slide

  2. RAPHAËL GOETTER
    Alsacréations
    #CSS #Standards #Webdesign
    #Responsive
    #HTML #Accessibilité #WebPerf

    View Slide

  3. L'INTERNAUTE
    N'AIME PAS
    ATTENDRE

    !

    View Slide

  4. ON VEUT DES CHIFFRES !
    Vous aimez les stats ?

    View Slide

  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)

    View Slide

  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

    View Slide

  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)

    View Slide

  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)

    View Slide

  9. POURQUOI
    LA PERFORMANCE WEB ?

    Photo : CC Flickr - jdwheaton

    View Slide

  10. PARCE QUE ÇA
    RAPPORTE !
    Photo : CC Flickr - jdwheaton

    View Slide

  11. +100ms
    1% perte de revenus

    View Slide

  12. +100ms
    1% perte de revenus

    +500ms
    -20% de recherches

    View Slide

  13. +100ms
    1% perte de revenus

    +500ms
    -20% de recherches

    -2s
    +15% de chargements

    View Slide

  14. +100ms
    1% perte de revenus

    +500ms
    -20% de recherches

    -2s
    +15% de chargements

    -5s
    +12% de revenus
    +25% pageviews

    View Slide

  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.
    ❶ ❷

    View Slide

  16. QU'EST-CE QUI
    RALENTIT
    LE WEB

    ?

    View Slide

  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

    View Slide

  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 :

    View Slide

  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)

    View Slide

  20. LE POIDS DES RESSOURCES
    Source : http://mobitest.akamai.com

    View Slide

  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)

    View Slide

  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

    View Slide

  23. LES RALENTISSEMENTS DIVERS
    Scripts bloquants
    CSS bloquants
    Redirections HTTP/JavaScript
    Mauvaises requêtes (404)
    Reflow, repaint navigateur
    Etc.

    View Slide

  24. LES OUTILS POUR
    TESTER

    Photo : © Raphaël Goetter

    View Slide

  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 »
    ➞ ➞

    View Slide

  26. MANUELLEMENT
    Extensions : YSlow et PageSpeed
    YSlow (Yahoo!) : plugin disponible sur Firefox, Chrome, Safari, Opera
    PageSpeed (Google) : plugin Chrome, Firefox et en ligne

    View Slide

  27. EN LIGNE
    La référence : WebPageTest.org
    Au choix : lieu du serveur, type de connexion, navigateur, etc.

    View Slide

  28. EN LIGNE
    Httparchive.org
    FilmStrip !

    View Slide

  29. EN LIGNE
    Google PageSpeed Insights

    View Slide

  30. EN LIGNE
    Akamai Mobitest
    Pour les temps d'affichage sur mobiles

    View Slide

  31. QUELQUES
    EXEMPLES

    View Slide

  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

    View Slide

  33. QUELQUES SITES PASSÉS AU CRIBLE
    2.3s
    chargement
    171
    requêtes
    2058ko
    poids
    Suite...
    6.6s
    chargement
    66
    requêtes
    671ko
    poids

    View Slide

  34. ACCÉLÉREZ VOS
    PAGES WEB

    Photo : © Raphaël Goetter

    View Slide

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

    View Slide

  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

    View Slide

  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)

    View Slide

  38. EN DÉTAIL
    Compressez les images
    « »

    www.kraken.io

    View Slide

  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, ...

    View Slide

  40. EN DÉTAIL
    Font Icons
    « »

    icomoon.io
    .icon {font-family: "MyFontIcon", sans-serif;}
    .icon-twitter:before {content: "t";}

    View Slide

  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, ...)

    View Slide

  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

    View Slide

  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

    View Slide

  44. EN DÉTAIL
    Durée d'expiration du cache
    « »


    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"

    Outil Google : Google ModPagespeed

    View Slide

  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

    View Slide