Poids des pages, attention danger
•Télécharger en tant que PPT, PDF•
0 j'aime•934 vues
Présentation donnée au Human Talk de mai 2013.
Recommandé
Contenu connexe
En vedette
En vedette (19)
Similaire à Poids des pages, attention danger
Similaire à Poids des pages, attention danger (13)
Plus de Goulven Champenois
Plus de Goulven Champenois (18)
Poids des pages, attention danger
- 1. Poids des pages : attention danger ! Quelques rappels utiles
- 2. Pourquoi parler de mobile ? de mobile ?
- 3. Pourquoi parler de mobile ? 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/
- 8. On n’y peut rien Connexion antenne 0 - 2300 ms Autorisation SIM 200 ms Résolution DNS 200 ms Connection TCP 200 ms Echange TLS 0 - 400 ms Requête HTTP 200 ms TOTAL 800 - 3500 ms Breaking the 1000ms time to glass mobile barrier http://www.youtube.com/watch?v=Il4swGfTOSM
- 9. 0. Mesurer
- 10. 0. Mesurer • WebPageTest • PageSpeed Insights • YSlow • Google Analytics • Garder des enregistrements !
- 11. 1. Réduire
- 12. 1. Réduire • Images • Minifier • Concaténer • En-têtes de cache • Vanilla JS
- 13. 2. Prioriser
- 14. 2. Prioriser • CSS • JS
- 15. 3. Comparer
- 16. 3. Comparer • Temps de chargement • Engagement des visiteurs • Bande passante
- 17. 4. Fignoler • Sprites d’images • Encoder en base64 • Font Subset • FastClick.js
- 19. A retenir • Mesurez • Réduisez • Priorisez • Recommencez !
Notes de l'éditeur
- 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.