Web performance - appliquer les règles de base

2 341 vues

Publié le

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 341
Sur SlideShare
0
Issues des intégrations
0
Intégrations
87
Actions
Partages
0
Téléchargements
19
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Web performance - appliquer les règles de base

  1. 1. Web Performance Appliquer les règles de base Jonathan Buttigieg EPITECH - 05/12/2013 jeudi 5 décembre 13
  2. 2. Qui suis-je ? • Consultant, formateur et développeur WordPress • Co-fondateur de WP Media, société éditrice de WP Rocket • Auteur des livres «STF pour le web : PHP/MySQL» et «Mémento : WordPress Programmation» jeudi 5 décembre 13
  3. 3. Pourquoi optimiser son site Internet ? 57% des visiteurs abandonnent une page qui met plus de 3s à s’afficher jeudi 5 décembre 13
  4. 4. Comment mesurer le temps de chargement ? • GT Metrix http://gtmetrix.com/ • Pingdom Tools http://tools.pingdom.com/fpt/ • WebPageTest http://www.webpagetest.org/ • PageSpeed Insight https://developers.google.com/speed/pagespeed/ insights/ jeudi 5 décembre 13
  5. 5. Pourquoi il ne faut pas se fier à 100% aux résultats ? • Bonnes notes != site rapide • Serveurs de test à l’étranger • Vancouver, Canada (GT Metrix) • Texas, États-Unis (Pingdom Tools) • Utiliser un serveur + proche de la France • London, Angleterre (GT Metrix) • Amsterdam, Pays-Bas (PingdomTools) jeudi 5 décembre 13
  6. 6. Pourquoi optimiser le poids des images ? • Ressources les plus lourdes • Très nombreuses = plus de chances de ralentir son site • Le 56k est encore présent via les mobiles #troll jeudi 5 décembre 13
  7. 7. Comment optimiser le poids des images ? • Photoshop est votre ami ! • Enregistrer pour le web et pas Engeristrer sous • Choisir le bon format (PNG ou JPG) • Compression des JPG à 60% • Oublier le GIF à la place du PNG 8 jeudi 5 décembre 13
  8. 8. Comment optimiser le poids des images ? Outils serveur Applications • OptiPNG PNGCrush, PNGOUT • ImageOptim (Mac Only), OptiPng (Windows Only) • Jpegtran, JPEGOptim • tinypng, Smush.it, Kraken.io, JPEGmini jeudi 5 décembre 13
  9. 9. Les bonnes pratiques d’intégration des images • Ajouter les attributs width et height sur les balises <img> = amélioration du temps chargement • Ne JAMAIS redimensionner vos images en CSS = diminution de la bande passante jeudi 5 décembre 13
  10. 10. Le chargement différé des images : LazyLoad • La IOD (Image on demand) • Réduction importante des requêtes HTTP • Simple et rapide à mettre en place. Même pas besoin de jQuery ! • Technique utilisée par les + gros sites : Youtube, Dailymotion jeudi 5 décembre 13
  11. 11. Le chargement différé des images : LazyLoad • Un pixel transparent de taille 1x1px pour l’attribut src (DataURI de préférence) • Un attribut supplémentaire contenant le chemin vers l’image réelle balise <noscript> pour le SEO Scripts JS • http://www.appelsiini.net/projects/lazyload • https://github.com/ezYZ/Lazy-Load-Images-without-jQuery • https://github.com/luis-almeida/unveil • Une Plugins WordPress LazyLoad : http://wordpress.org/plugins/lazy-load/ • jeudi 5 décembre 13 • BJ LazyLoad : http://wordpress.org/plugins/bj-lazy-load/
  12. 12. Regrouper les images de décoration : CSS Images Sprite • Regrouper toutes les images de décoration CSS en une seule • Réduction importante des requêtes HTTP • Simple, mais plus long à mettre en place jeudi 5 décembre 13
  13. 13. Regrouper les images de décoration : CSS Images Sprite WebService • Spritecow Outils • http://www.spritecow.com/ • Spritebox http://compass-style.org/ • http://www.spritebox.net/ • Spritegen Compass Stitches http://draeton.github.io/stitches/ • http://fr.spritegen.website- Glue https://github.com/jorgebastida/glue performance.org/ • SpriteRight (Mac Only) http://spriterightapp.com/ jeudi 5 décembre 13
  14. 14. Les bonnes pratiques d’intégration des fichiers CSS & JS CSS JavaScript • Toujours <head> • Bannir • Ne dans la balise les <style> si possible jamais utilisé l’attribut style jeudi 5 décembre 13 • Placer au plus bas. Au-dessus de </body> dans l’idéal • Si le poids du fichier minifié <= 2ko, mettre le fichier dans le <head>
  15. 15. Concaténation & Minification des fichiers CSS & JS Minification • Réduction fichiers du poids des • Plus rapide à charger + économie de bande passante • Suppression des espaces blancs et des retours à la ligne jeudi 5 décembre 13 Concaténation • Combine les fichiers en un seul (enfin pas vraiment...) • Réduction du nombre de requêtes HTTP • Moins de requêtes plus lourdes + performant que plus de requêtes moins lourdes
  16. 16. Concaténation & Minification des fichiers CSS & JS Librairies & App • Google Code Minify https://code.google.com/p/minify/ • CSSMin & JSMin Outils Web • Yui Compressor http://refresh-sf.com/yui/ • JSCompress http://jscompress.com/ • Compass (outputFormat : compressed) • Google Closure Compiler http://closure-compiler.appspot.com/home • Uglify.js & Grunt.js • CSS Minifier http://cssminifier.com/ jeudi 5 décembre 13
  17. 17. Chargement différé des fichiers JavaScript • Chargement dit «asynchrone» des fichiers • Ne bloque pas le chargement de la page • Indispensable pour les scripts de partage Facebook, Twitter & Google + jeudi 5 décembre 13 Libraires JavaScript • LabJS : http://labjs.com/ • head.js : http://headjs.com/
  18. 18. Les Data-URI ou Images Inline • Contient directement les données d’une image • Encodage • Utiliser en Base64 pour les images de petites tailles/poids Avantages • Réduction des requêtes HTTP Inconvénients Problème avec certains navigateurs en fonction du type • jeudi 5 décembre 13 • Augmente légèrement la taille des fichiers (environ 10% après compression Gzip)
  19. 19. Compression Gzip des fichiers via .htaccess • Réduction du poids des fichiers = économie de bande passante • Modification du type de fichier via le mod_deflate d’Apache • Plus PHP jeudi 5 décembre 13 rapide qu’un traitement Code complet : https://gist.github.com/GeekPress/7796748
  20. 20. Compression Gzip des fichiers via .htaccess jeudi 5 décembre 13
  21. 21. Compression Gzip des fichiers via .htaccess jeudi 5 décembre 13
  22. 22. Optimisation du cache navigateur via .htaccess • Éviter de télécharger les ressources à chaque visite = réduction du temps de chargement Code complet : https://gist.github.com/GeekPress/7803194 • Modification des requêtes HTTP via le mod_expires d’Apache • Définir un temps de mise en cache en fonction du type de ressource jeudi 5 décembre 13
  23. 23. L’indispensable : Système de cache statique • • • Éviter les traitements PHP et requêtes SQL à chaque visite Plugins WordPress • http://wordpress.org/plugins/wp-supercache/ Générer un fichier HTML grâce au 1er visiteur Servir le fichier de cache aux autres visiteurs • Amélioration du temps de chargement et de l’indextion des pages jeudi 5 décembre 13 W3 Total Cache http://wordpress.org/plugins/w3-total-cache/ • • WP Super Cache Quick Cache http://wordpress.org/plugins/quick-cache/ • WP Rocket http://wp-rocket.me/
  24. 24. Le Domain Sharding • Répartition des ressources (JS, CSS & images) entre plusieurs domaines en place des sousdomaines pour cette solution Avantages • • Mettre • Pas plus de 3 domaines dédiés au Domain Sharding jeudi 5 décembre 13 Contourne la limite des téléchargements parallèles des navigateurs (6 à 8) Inconvénients • Résolution DNS supplémentaires (surtout sur mobile)
  25. 25. Les Content Delivery Network • CDN != Domain Sharding • Servir les ressources en fonction de la localisation des visiteurs • Diminution du temps de latence • • Services MaxCDN http://www.maxcdn.com/ CloudFlare https://fr.cloudflare.com/ • Indispensable pour les sites multilingues • Amazon CloudFront http://aws.amazon.com/fr/cloudfront/ • Même inconvénient que le Domain Sharding jeudi 5 décembre 13 • OVH CDN http://www.ovh.com/fr/cdn/
  26. 26. Pour aller plus loin •NGINX http://wiki.nginx.org/Main •Varnish https://www.varnish-cache.org/ •Redis http://redis.io/ jeudi 5 décembre 13
  27. 27. Merci pour votre écoute jeudi 5 décembre 13

×