Web performance - appliquer les règles de base
27
Web Performance Appliquer les règles de base Jonathan Buttigieg EPITECH - 05/12/2013 jeudi 5 décembre 13
-
Upload
jonathan-buttigieg -
Category
Technology
-
view
1.942 -
download
0
description
Transcript of Web performance - appliquer les règles de base
Web PerformanceAppliquer les règles de base
Jonathan ButtigiegEPITECH - 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 Rocket
• Auteur des livres «STF pour le web : PHP/MySQL» et «Mémento : WordPress Programmation»
jeudi 5 décembre 13
Pourquoi optimiser son site Internet ?
57% des visiteurs abandonnent une page qui met plus de 3s à s’afficher
jeudi 5 décembre 13
Comment mesurer le temps de chargement ?
• GT Metrix http://gtmetrix.com/
• Pingdom Toolshttp://tools.pingdom.com/fpt/
• WebPageTesthttp://www.webpagetest.org/
• PageSpeed Insighthttps://developers.google.com/speed/pagespeed/insights/
jeudi 5 décembre 13
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
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
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
Comment optimiser le poids des images ?
Outils serveur
• OptiPNG PNGCrush, PNGOUT
• Jpegtran, JPEGOptim
Applications
• ImageOptim (Mac Only), OptiPng (Windows Only)
• tinypng, Smush.it, Kraken.io, JPEGmini
jeudi 5 décembre 13
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
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
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
• Une 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
Plugins WordPress
• LazyLoad : http://wordpress.org/plugins/lazy-load/
• BJ LazyLoad : http://wordpress.org/plugins/bj-lazy-load/
jeudi 5 décembre 13
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
Regrouper les images de décoration : CSS Images Sprite
WebService
• Spritecowhttp://www.spritecow.com/
• Spritebox http://www.spritebox.net/
• Spritegenhttp://fr.spritegen.website-performance.org/
Outils
• Compasshttp://compass-style.org/
• Stitcheshttp://draeton.github.io/stitches/
• Gluehttps://github.com/jorgebastida/glue
• SpriteRight (Mac Only)http://spriterightapp.com/
jeudi 5 décembre 13
Les bonnes pratiques d’intégration des fichiers CSS & JS
CSS
• Toujours dans la balise <head>
• Bannir les <style> si possible
• Ne jamais utilisé l’attribut style
JavaScript
• 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>
jeudi 5 décembre 13
Concaténation & Minification des fichiers CSS & JS
Minification
• Réduction du poids des fichiers
• Plus rapide à charger + économie de bande passante
• Suppression des espaces blancs et des retours à la ligne
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
jeudi 5 décembre 13
Concaténation & Minification des fichiers CSS & JS
Librairies & App
• Google Code Minifyhttps://code.google.com/p/minify/
• CSSMin & JSMin
• Compass(outputFormat : compressed)
• Uglify.js & Grunt.js
Outils Web
• Yui Compressorhttp://refresh-sf.com/yui/
• JSCompresshttp://jscompress.com/
• Google Closure Compilerhttp://closure-compiler.appspot.com/home
• CSS Minifierhttp://cssminifier.com/
jeudi 5 décembre 13
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+
Libraires JavaScript
• LabJS : http://labjs.com/
• head.js : http://headjs.com/
jeudi 5 décembre 13
Les Data-URI ou Images Inline
• Contient directement les données d’une image
• Encodage en Base64
• Utiliser 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
• Augmente légèrement la taille des fichiers (environ 10% après compression Gzip)
jeudi 5 décembre 13
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 rapide qu’un traitement PHP Code complet : https://gist.github.com/GeekPress/7796748
jeudi 5 décembre 13
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 temps de chargement
• 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
Code complet : https://gist.github.com/GeekPress/7803194
jeudi 5 décembre 13
L’indispensable : Système de cache statique
• Éviter les traitements PHP et requêtes SQL à chaque visite
• 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
Plugins WordPress
• WP Super Cachehttp://wordpress.org/plugins/wp-super-cache/
• W3 Total Cachehttp://wordpress.org/plugins/w3-total-cache/
• Quick Cachehttp://wordpress.org/plugins/quick-cache/
• WP Rocket http://wp-rocket.me/
jeudi 5 décembre 13
Le Domain Sharding
• Répartition des ressources (JS, CSS & images) entre plusieurs domaines
• Mettre en place des sous-domaines pour cette solution
• Pas plus de 3 domaines dédiés au Domain Sharding
Avantages
• Contourne la limite des téléchargements parallèles des navigateurs (6 à 8)
Inconvénients
• Résolution DNS supplémentaires (surtout sur mobile)
jeudi 5 décembre 13
Les Content Delivery Network
• CDN != Domain Sharding
• Servir les ressources en fonction de la localisation des visiteurs
• Diminution du temps de latence
• Indispensable pour les sites multilingues
• Même inconvénient que le Domain Sharding
Services
• MaxCDNhttp://www.maxcdn.com/
• CloudFlarehttps://fr.cloudflare.com/
• Amazon CloudFronthttp://aws.amazon.com/fr/cloudfront/
• OVH CDNhttp://www.ovh.com/fr/cdn/
jeudi 5 décembre 13
Pour aller plus loin
•NGINXhttp://wiki.nginx.org/Main
•Varnishhttps://www.varnish-cache.org/
•Redishttp://redis.io/
jeudi 5 décembre 13
Merci pour votre écoute
jeudi 5 décembre 13
