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

Performances côté client

Performances côté client

PHPTour 2011 à Lille

arnaudlimbourg

November 24, 2011
Tweet

More Decks by arnaudlimbourg

Other Decks in Technology

Transcript

  1. Performances côté
    client
    Arnaud Limbourg - 20minutes.fr
    PHP Tour Lille 2011
    jeudi 24 novembre 11

    View Slide

  2. 200ms
    jeudi 24 novembre 11

    View Slide

  3. Pourquoi ?
    jeudi 24 novembre 11

    View Slide

  4. 10% 50%
    jeudi 24 novembre 11

    View Slide

  5. De quoi parle-t-on ?
    jeudi 24 novembre 11

    View Slide

  6. Navigateur
    jeudi 24 novembre 11

    View Slide

  7. Le plus important ?
    jeudi 24 novembre 11

    View Slide

  8. Mesurer
    jeudi 24 novembre 11

    View Slide

  9. Stratégie
    jeudi 24 novembre 11

    View Slide

  10. Comment mesurer ?
    jeudi 24 novembre 11

    View Slide

  11. jeudi 24 novembre 11

    View Slide

  12. jeudi 24 novembre 11

    View Slide

  13. jeudi 24 novembre 11

    View Slide

  14. Boomerang
    jeudi 24 novembre 11

    View Slide

  15. Nav Timing API
    jeudi 24 novembre 11

    View Slide

  16. jeudi 24 novembre 11

    View Slide

  17. Boomerang
    • R
    • 4,9 M obs. 10 jours
    • 11663 Ms
    Quart 25 % 50 % 75 %
    Ms 5056 8985 16719
    jeudi 24 novembre 11

    View Slide

  18. Source : Cedexis
    jeudi 24 novembre 11

    View Slide

  19. Améliorer
    jeudi 24 novembre 11

    View Slide

  20. jeudi 24 novembre 11

    View Slide

  21. jeudi 24 novembre 11

    View Slide

  22. http://www.flickr.com/photos/treefiddy/372092545/
    jeudi 24 novembre 11

    View Slide

  23. Améliorer
    • nb requêtes http

    • minifier/gzipper JS et CSS
    • compresser images
    • sprites, data-uri
    jeudi 24 novembre 11

    View Slide

  24. Améliorer
    • cache-control
    • nb éléments DOM
    • javascript
    jeudi 24 novembre 11

    View Slide

  25. YSlow
    Page Speed
    jeudi 24 novembre 11

    View Slide

  26. Source : Google analytics
    jeudi 24 novembre 11

    View Slide

  27. Liens
    • Comment fonctionne un navigateur :
    http://www.html5rocks.com/en/tutorials/
    internals/howbrowserswork/
    jeudi 24 novembre 11

    View Slide

  28. Liens
    • Les outils habituels :
    • Google PageSpeed
    • YSlow
    • Chrome (timeline)
    jeudi 24 novembre 11

    View Slide

  29. Liens
    • Mesure des performances :
    • Cedexis radar (http://www.cedexis.com/
    products/cedexis-radar/)
    • Yottaa (http://www.yottaa.com)
    • Webpagetest (http://
    www.webpagetest.org)
    • Google analytics
    jeudi 24 novembre 11

    View Slide

  30. Liens
    • Yahoo Boomerang (http://
    yahoo.github.com/boomerang/doc/)
    • HTTP Archive (http://www.httparchive.org)
    • DOM Monster (http://mir.aculo.us/dom-
    monster/)
    jeudi 24 novembre 11

    View Slide

  31. En résumé
    • qu’est qui à un impact sur les performances
    • que faut-il faire pour les améliorer
    jeudi 24 novembre 11

    View Slide

  32. Merci !
    Questions ?
    http://www.flickr.com/photos/jordyb/6108619670/sizes/l/in/photostream/
    jeudi 24 novembre 11

    View Slide

  33. Performances côté
    client
    Arnaud Limbourg - 20minutes.fr
    [email protected]
    jeudi 24 novembre 11

    View Slide

  34. • boomerang: http://www.flickr.com/photos/
    65438942@N08/5951313541/in/
    photostream/
    • Arbre : http://www.flickr.com/photos/
    jordyb/6108619670/sizes/l/in/photostream/
    • Montre : http://www.flickr.com/photos/
    treefiddy/372092545/
    jeudi 24 novembre 11

    View Slide