Poids des pages : attention danger !

Performance web et mobile : rappels utiles sur les limites du réseau et les bonnes pratiques à mettre en place.

Présenté lors du Human Talk de juin à Lyon.

Transcript

1. Poids des pages : attention danger ! Quelques rappels utiles
2. Pourquoi parler de mobile ?
3. Pourquoi parler de mobile ? • Appareils moins performants • Utilisateurs plus impatients • Optimisations valables pour le desktop
4. Débit 3G
5. Débit 3G 7.2 Mbit/s en théorie 2 Mbit/s max 500-1500 kbit/s en moyenne
6. Page ± 1.5 MB http://httparchive.org/
7. Page ± 1.5 MB Chargement 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/ 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...
8. On n’y peut rien Connexion antenne Autorisation SIM Résolution DNS Connection TCP Echange TLS Requête HTTP 0 - 2300 ms 200 ms 200 ms 200 ms 0 - 400 ms 200 ms TOTAL 800 - 3500 ms Breaking the 1000ms time to glass mobile barrier http://www.youtube.com/watch?v=Il4swGfTOSM
9. 0. Mesurer Avant de se lancer dans des optimisations, il faut déjà savoir où se situe le site sur le plan des performances.
10. 0. Mesurer • WebPageTest • PageSpeed Insights • YSlow • Google Analytics • Garder des enregistrements !
11. 1. Réduire 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.
12. 1. Réduire • Images • Minifier • Concaténer • En-têtes de cache • Vanilla JS 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.
13. 2. Prioriser Une fois qu’on a l’indispensable, il faut faire en sorte que le navigateur puisse commencer à afficher la page le plus vite possible.
14. 2. Prioriser • CSS • JS 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.
15. 3. Comparer
16. 3. Comparer • Temps de chargement • Engagement des visiteurs • Bande passante 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.
17. 4. Fignoler • Sprites d’images • Encoder en base64 • Font Subset • FastClick.js 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).
18. http://qkme.me/3ujva3 Success baby says “Page loaded in less than 1sec”.
19. A retenir • Mesurez • Réduisez • Priorisez • Recommencez !
20. Merci ! @goulvench paris-web.fr sudweb.fr pompage.net 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.