Web Performance
Appliquer les règles de base
Jonathan Buttigieg
EPITECH - 05/12/2013

jeudi 5 décembre 13
Qui suis-je ?
• Consultant, formateur

et
développeur WordPress

• Co-fondateur

de WP Media,
société éditrice de WP
Rocke...
Pourquoi optimiser son site
Internet ?
57% des visiteurs abandonnent
une page qui met plus de 3s à
s’afficher

jeudi 5 déce...
Comment mesurer le temps de
chargement ?
• GT

Metrix

http://gtmetrix.com/

• Pingdom Tools

http://tools.pingdom.com/fpt...
Pourquoi il ne faut pas se fier à
100% aux résultats ?
• Bonnes

notes != site rapide

• Serveurs

de test à l’étranger

•
...
Pourquoi optimiser le poids des
images ?
• Ressources

les plus lourdes

• Très

nombreuses = plus de
chances de ralentir ...
Comment optimiser le poids des
images ?
•

Photoshop est votre ami !

•

Enregistrer pour le web et pas
Engeristrer sous

...
Comment optimiser le poids des
images ?
Outils serveur

Applications

•

OptiPNG PNGCrush,
PNGOUT

•

ImageOptim (Mac Only...
Les bonnes pratiques
d’intégration des images
• Ajouter

les attributs width et
height sur les balises <img>
= amélioratio...
Le chargement différé des
images : LazyLoad
• La

IOD (Image on demand)

• Réduction

importante des
requêtes HTTP

• Simp...
Le chargement différé des
images : LazyLoad
• Un

pixel transparent de taille
1x1px pour l’attribut src
(DataURI de préfér...
Regrouper les images de
décoration : CSS Images Sprite
• Regrouper

toutes les images
de décoration CSS en une
seule

• Ré...
Regrouper les images de
décoration : CSS Images Sprite
WebService
•

Spritecow

Outils
•

http://www.spritecow.com/

•

Sp...
Les bonnes pratiques
d’intégration des fichiers CSS & JS
CSS

JavaScript

• Toujours

<head>

• Bannir
• Ne

dans la balise...
Concaténation & Minification des
fichiers CSS & JS
Minification
• Réduction

fichiers

du poids des

• Plus

rapide à charger ...
Concaténation & Minification des
fichiers CSS & JS
Librairies & App
• Google

Code Minify

https://code.google.com/p/minify/...
Chargement différé des fichiers
JavaScript
• Chargement

dit
«asynchrone» des fichiers

• Ne

bloque pas le
chargement de la...
Les Data-URI ou Images Inline
• Contient

directement les
données d’une image

• Encodage
• Utiliser

en Base64

pour les ...
Compression Gzip des fichiers
via .htaccess
• Réduction

du poids des
fichiers = économie de
bande passante

• Modification

...
Compression Gzip des fichiers
via .htaccess

jeudi 5 décembre 13
Compression Gzip des fichiers
via .htaccess

jeudi 5 décembre 13
Optimisation du cache navigateur
via .htaccess
• Éviter

de télécharger les
ressources à chaque visite =
réduction du temp...
L’indispensable : Système de
cache statique
•

•

•

Éviter les traitements PHP et
requêtes SQL à chaque visite

Plugins W...
Le Domain Sharding
• Répartition

des ressources
(JS, CSS & images) entre
plusieurs domaines
en place des sousdomaines pou...
Les Content Delivery Network
•

CDN != Domain Sharding

•

Servir les ressources en fonction
de la localisation des visite...
Pour aller plus loin
•NGINX

http://wiki.nginx.org/Main

•Varnish

https://www.varnish-cache.org/

•Redis
http://redis.io/...
Merci pour votre écoute

jeudi 5 décembre 13
Prochain SlideShare
Chargement dans…5
×

Web performance - appliquer les règles de base

2 269 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 269
Sur SlideShare
0
Issues des intégrations
0
Intégrations
85
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

×