Poids des pages, attention danger
Upcoming SlideShare
Loading in...5
×
 

Poids des pages, attention danger

on

  • 350 views

Présentation donnée au Human Talk de mai 2013.

Présentation donnée au Human Talk de mai 2013.

Statistics

Views

Total Views
350
Views on SlideShare
329
Embed Views
21

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 21

http://humantalks.com 21

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • En conditions réelles, le débit 3G associé au temps de traitement des navigateurs sur mobile font qu’une page d’1 méga 5 met entre 10 et 20 secondes à se charger. Non, ce n’est pas normal...
  • Avant de se lancer dans des optimisations, il faut déjà savoir où se situe le site sur le plan des performances.
  • Puisque nous ne pouvons pas modifier le débit du “tuyau” par où passent les données, il faut limiter au maximum ce qui transite dedans.
  • Les images représentent presque 2/3 du poids des pages aujourd’hui. Or il est souvent possible de réduire leur poids sans les modifier visuellement (ImageOptim, RIOT, smush.it...). J’ai vu une image de 70k dont le poids a été divisé par 10 comme ça ! Minifier c’est retirer les espaces, retours à la ligne et commentaires inutiles dans les CSS et JS. Les préprocesseurs CSS font ça très bien, raison de plus pour s’y mettre. Concaténer c’est créer un seul fichier regroupant le contenu de plusieurs fichiers de même type (CSS ou JS). Evite de nombreuses requêtes HTTP coûteuses. Si le site fait plus d’une page, configurer les en-têtes de cache permet au navigateur de ne pas redemander les ressources communes non modifiées entre-temps. Vanilla JS n’est pas un framework, c’est l’utilisation du DOM natif. Télécharger et exécuter un framework JavaScript est long et lourd sur mobile, pour des interactions simples il vaut mieux s’en passer.
  • Une fois qu’on a l’indispensable, il faut faire en sorte que le navigateur puisse commencer à afficher la page le plus vite possible.
  • Le navigateur n’affiche rien tant qu’il n’a pas reçu toutes les CSS. Les inclure dans le head pour qu’elles soient chargées le plus tôt possible (donc avant les images de contenu). Dès qu’un navigateur tombe sur un lien JS il interrompt l’analyse du HTML au cas où un `document.write` vienne s’interposer. Mettre le JS en toute fin de page, juste avant la balise body fermante. Le code de Google Analytics peut aller dans le head car il est asynchrone.
  • Comparer les métriques permet de s’assurer que rien n’a été cassé au passage, et de montrer le retour sur investissement aux équipes marketing/communication et sysadmins.
  • Combiner les images pour réduire le nombre de requêtes HTTP. Si les navigateurs supportés le permettent, économiser quelques requêtes en incluant certaines images dans la CSS via encodage base64. Supprimer des fichiers de police les caractères non utilisés : cyrillique, vietnamien... Pour que les liens se chargent plus vite, utiliser fastclick.js qui évite les 380ms de délai sur mobile (le temps pour le navigateur de s’assurer que ce n’est pas un double-tap).
  • Success baby says “Page loaded in less than 1sec”.
  • Je partage ma veille (et plus) sur Twitter. Je présente une conférence et un atelier à ParisWeb 2013. Je co-organise Sud Web. Je participe au site de traduction pompage.net.

Poids des pages, attention danger Poids des pages, attention danger Presentation Transcript

  • Poids des pages :attention danger !Quelques rappels utiles
  • Pourquoi parlerde mobile ?de mobile ?
  • Pourquoi parlerde mobile ?de mobile ?• Appareils moins performants• Utilisateurs plus impatients• Optimisations valables pour le desktop
  • Débit 3G
  • Débit 3G7.2 Mbit/s en théorie2 Mbit/s max500-1500 kbit/s en moyenne
  • Page ± 1.5 MBhttp://httparchive.org/
  • Page ± 1.5 MBChargement de 10 à 20 s !http://www.webperformancetoday.com/2012/10/03/what-we-learned-from-testing-the-mobile-load-times-of-200-top-retail-sites-over-3g-and-lte/
  • On n’y peut rienConnexion antenne 0 - 2300 msAutorisation SIM 200 msRésolution DNS 200 msConnection TCP 200 msEchange TLS 0 - 400 msRequête HTTP 200 msTOTAL 800 - 3500 msBreaking the 1000ms time to glass mobile barrierhttp://www.youtube.com/watch?v=Il4swGfTOSM
  • 0. Mesurer
  • 0. Mesurer• WebPageTest• PageSpeed Insights• YSlow• Google Analytics• Garder des enregistrements !
  • 1. Réduire
  • 1. Réduire• Images• Minifier• Concaténer• En-têtes de cache• Vanilla JS
  • 2. Prioriser
  • 2. Prioriser• CSS• JS
  • 3. Comparer
  • 3. Comparer• Temps de chargement• Engagement des visiteurs• Bande passante
  • 4. Fignoler• Sprites d’images• Encoder en base64• Font Subset• FastClick.js
  • http://qkme.me/3ujva3
  • A retenir• Mesurez• Réduisez• Priorisez• Recommencez !
  • Merci !@goulvenchparis-web.frsudweb.fr