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. Pourquoi optimiser son site
Internet ?
57% des visiteurs abandonnent
une page qui met plus de 3s à
s’afficher
jeudi 5 décembre 13
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. 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. 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. 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
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. 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. 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. 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
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. 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
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. 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. 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
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. 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. 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. 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. 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
