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

Performances web, pourquoi les optimiser pour mobile et desktop

Performances web, pourquoi les optimiser pour mobile et desktop

Présente les performances web, ses enjeux et les moyens de l'améliorer.
Conférence donnée lors de Blend 2013.

C10372fa185fe953f9546de18cc3ef0c?s=128

Goulven Champenois

October 01, 2013
Tweet

Transcript

  1. Performances web Pourquoi les optimiser pour mobile et desktop

  2. • Mesure du temps de chargement des sites côté client

    • Techniques et outils pour le réduire Définition
  3. Pourquoi la WebPerf ?

  4. #MardiConfession Je n’aime pas attendre ...et je ne suis pas

    le seul
  5. 57% des visiteurs abandonnent une page qui met plus de

    3s à s’afficher
  6. “Ce site est lent, c’est la faute des développeurs”

  7. 85% des internautes s’attendent à ce qu’un site s’affiche au

    moins aussi vite que sur desktop
  8. None
  9. Vous n’êtes pas des internautes moyens

  10. • Machine récente • Navigateur à jour • Connexion fibre

    / 4G • Connaissances techniques Vous n’êtes pas des internautes moyens
  11. Site lent = visiteurs stressés, anxieux, inattentifs

  12. “Phone rage” 4% ont jeté leur téléphone à cause d’un

    site trop lent
  13. Nov. 2010 Nov. 2012 Mai 2013 Nov. 2013 Mai 2014

    702 1 280 1 520 1 820 2 240 Source : HTTP Archive Poids moyen des pages
  14. None
  15. Parlons budget

  16. Google +250ms = 25% de recherches en moins (et l’effet

    a perduré 6 mois après la fin du test)
  17. +100ms au chargement = 1% de ventes en moins Amazon

  18. Shopzilla -5s au chargement des pages = 50% de serveurs

    en moins (!)
  19. Activer la compression = -43% de trafic sortant Netflix Netflix

    représente 32% du trafic Internet US entre 20h et minuit
  20. Augmentation des revenus + Réduction des coûts matériel Budget WebPerf

  21. • Design • Développement • Optimisation SEO / Achat de

    traffic • WebPerf ! À prévoir au budget
  22. Mesurer

  23. Mesurer • Page Speed • Yslow • WebPageTest • Mobitest

  24. Real User Monitoring La route du RUM

  25. Real User Monitoring • Google Analytics • Boomerang (Yahoo)

  26. navigation.timing

  27. Mesurer • Automatiser • Comparer

  28. Améliorer

  29. Envoyer moins de données

  30. Prioriser Contenu > Présentation > Interaction

  31. Contenu • Le HTML • Envoyer morceau par morceau (flush)

    • Optimiser la BDD • Utiliser un cache statique côté serveur
  32. Présentation • Écran vide tant que la CSS n’est pas

    arrivée • Texte masqué tant que les webfonts ne sont pas téléchargées • Concaténer ! • Minifier !
  33. Interactivité • Le HTML doit être utilisable sans JS •

    JS bloque le parseur HTML • Utiliser async & defer • Attention aux widgets externes et aux régies publicitaires !
  34. Valeur Complexité En dernier À planifier À étudier On fonce

    !
  35. Faible complexité Forte valeur • Activer GZIP • Configurer les

    en-têtes de cache • Minifier CSS & JS • Images inline
  36. Forte complexité Forte valeur • JS en fin de <body>

    • Concaténer CSS & JS • Optimiser les images • Optimiser les boutons de partage
  37. Faible complexité Faible valeur • Utiliser des sprites • Éliminer

    les 404 • Éviter les redirections
  38. Forte complexité Faible valeur • Optimiser les webfonts • Utiliser

    un CDN • Optimiser les certificats TLS
  39. Récapitulons 1. L’ajouter au budget 2. Mesurer 3. L’améliorer !

    4. S’informer
  40. Sources • http://www.strangeloopnetworks.com/resources/infographics/web- performance-and-user-expectations/mobile-device-users-expect-sites-to-load- fast/ • http://www.webperformancetoday.com/2013/06/05/web-page- growth-2010-2013/ • http://www.webperformancetoday.com/2011/10/21/phone-rage-how-people-

    react-to-slow-mobile-sites/ • http://www.guypo.com/business/17-statistics-to-sell-web-performance- optimization/ • http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/ • https://developer.mozilla.org/en-US/docs/Navigation_timing • http://fr.slideshare.net/jpvincent/techniques-dacceleration-des-pages-web • http://checklists.opquast.com/webperf
  41. Questions https://speakerdeck.com/ goulvench/performances-web- pourquoi-les-optimiser-pour- mobile-et-desktop @goulvench RDV à Paris Web

    et à Sud Web !