optimiser les performances d’un site web nicolas ...€¦ · site % chargement du html skyrock...
TRANSCRIPT
![Page 1: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/1.jpg)
Optimiser les performances d’un site web Nicolas Chevallier
Camille Roux
![Page 2: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/2.jpg)
Intellicore Tech Talks
Des conférences pour partager son savoir
Le mardi au CICA Sophia Antipolis
http://techtalks.intellicore.net
Aujourd’hui la 14ème conférence
Vous voulez participer ?
![Page 3: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/3.jpg)
Optimiser les performances d’un site web Nicolas Chevallier
Camille Roux
![Page 4: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/4.jpg)
Optimisation de chaque page
Optimisation de la navigation
Optimisations complémentaires
Sommaire
![Page 5: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/5.jpg)
Introduction > Pourquoi optimiser un site?
Bande passante
Charge serveur
L'expérience utilisateur
Très facile à mettre en place
![Page 6: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/6.jpg)
Site % Chargement du HTML
Skyrock 4,7
Orange 3,8
Free 6,2
Dailymotion 5,3
Introduction > Sur quels paramètres agir?
![Page 7: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/7.jpg)
Optimisation de chaque page
![Page 8: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/8.jpg)
CSS Scripts ImagesPoids total
Requêtes
Skyrock 2 7 90 431,1ko 116
Orange 1 11 54 230,3ko 36
Free 2 6 54 226,9ko 64
Dailymotion 1 3 41 256,8ko 47
![Page 9: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/9.jpg)
Diminuer le nombre de requêtes
![Page 10: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/10.jpg)
Diminuer le nb de requêtes > Regrouper scripts et CSS
Tout regrouper
"Compiler" les composants de chaque page
Regrouper intelligemment les scripts
![Page 11: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/11.jpg)
Diminuer le nb de requêtes > Réduire le nb d’images
Images réactives (image map)
Images intégrées
Sprites CSS
![Page 12: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/12.jpg)
Diminuer le nb de requêtes > Images réactives
Cas d'utilisation : plusieurs liens sur une même image
<MAP NAME="DEMO"> <AREA SHAPE="RECT" HREF="partie1.php" COORDS="54,81,83,107"> <AREA SHAPE="CIRCLE" HREF="partie2.php" COORDS="70,126,15"> <AREA SHAPE="DEFAULT" HREF="default.php"></MAP><IMG ALIGN=MIDDLE SRC="image.gif" USEMAP="#DEMO">
![Page 13: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/13.jpg)
Diminuer le nb de requêtes > Images intégrées
<img src="data:image/gif;base64,R0l...QA7" width="20" height="20">
A éviter (incompatible avec IE)
![Page 14: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/14.jpg)
Réduire la taille des composants
![Page 15: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/15.jpg)
Réduire la taille des composantes > Introduction
Supprimer les commentaires
Réduire les URL
Compresser les composants (gzip)
![Page 16: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/16.jpg)
A partir de HTTP/1.1=> Accept-Encoding : gzip, deflate<= Content-Encoding : gzip
Réduire la taille des composantes > Compresser (1/2)
![Page 17: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/17.jpg)
Réduire la taille des composantes > Compresser (2/2)
Consomme du temps CPU
Compresser si > 1 - 2ko
Compresser le texteHTML / XML /JSON
CSS
Scripts
Ne pas recompresserImages
Vidéos
![Page 18: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/18.jpg)
Réduire la taille des composantes > Compactage
Pour CSS et JS
Suppression des caractères inutiles:
Espaces superflus
Commentaires
![Page 19: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/19.jpg)
Réduire la taille des composantes > Obfuscation
Compactage + renommage des noms de variables et de fonctions
Risques :
Bugs
Maintenance
Debug
![Page 20: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/20.jpg)
Réduire la taille des composantes > Résumé
JS non compressé
JS compacté JS obfuscé JS gzip
JS compacté
+ gzip
JS obfusqué
+ gzip
20,2 ko 13,7 ko 13,1 ko 5,8 ko 3,8 ko 3,7 ko
100% 67% 65% 29% 19% 18%
![Page 21: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/21.jpg)
Placer les feuilles de style en début de page
![Page 22: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/22.jpg)
Feuilles de style > Cas normal
Affichage progressif de la page
Rafraîchissement du contenu à chaque chargement de feuille de style
Phénomène de scintillement de la page
![Page 23: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/23.jpg)
CSS en bas de page
IE
Nouvelle fenêtre
Actualisation
Page d'accueil
Feuilles de style > Page Blanche
![Page 24: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/24.jpg)
Feuilles de style > <link> vs @import
<link rel="stylesheet" href="/styles/css.css" type="text/css" media="screen" />
<style type="text/css"> @import url(/styles/css.css);</style>
![Page 25: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/25.jpg)
Ordre de chargement non contrôlé
Page blanche (même si en haut de la page)
Moins rapide que <link>
Pas compatible avec les vieux navigateurs
➡ Utiliser <link>
Feuilles de style > @import
![Page 26: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/26.jpg)
Déplacer les scripts en bas de page
![Page 27: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/27.jpg)
Déplacer les scripts > Comparaison
HTML
Image
Javascript
Image
HTML
Image
Image
Javascript
![Page 28: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/28.jpg)
Pendant le chargement d'un script,le téléchargement en parallèle est désactivé
Un script peut modifier la page (document.write)
Garantie de l'exécution dans le bon ordre des scripts
Déplacer les scripts > Pourquoi ce phénomène?
![Page 29: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/29.jpg)
Rappel
✓Diminuer le nombre de requêtes
✓Compresser le contenu
✓Placer les feuilles de style en haut de la page
✓Placer les scripts en bas de la page
![Page 30: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/30.jpg)
Optimisation de la navigation
![Page 31: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/31.jpg)
Optimisations de la navigation > Pas de mise en cache
Requêtes inutiles
Renvoi systématique du composant
![Page 32: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/32.jpg)
Optimisations de la navigation > GET conditionnel
Requêtes inutiles
Requêtes HTTP 304 si fichier non modifié
![Page 33: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/33.jpg)
Optimisations de la navigation > Entêtes d’expiration
Plus de requêtes
Obliger de renommer le composant à chaque modifscript_20080605.js plutot que script.js?20080605
![Page 34: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/34.jpg)
Optimisations complémentaires
![Page 35: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/35.jpg)
Optimisations complémentaires > Sprite CSSimage1 image2 ...
image
css.sprite-anchor { background-position: 0 -5px; } .sprite-accept { background-position: 0 -26px; } .sprite-attach { background-position: 0 -47px; } .sprite-error { background-position: 0 -68px; } .sprite-exclamation { background-position: 0 -89px; } .sprite-feed { background-position: 0 -110px; } .sprite-email { background-position: 0 -131px; } .sprite-comments { background-position: 0 -152px; } .sprite-application_cascade { background-position: 0 -173px; } .sprite-delete { background-position: 0 -194px; }#container li { background: url(csg-4856bd30bc355.png) no-repeat top left; }
10 images 6,1ko
css + 1 image 4,5 ko
![Page 36: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/36.jpg)
Optimisations complémentaires > Sprite CSS
![Page 37: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/37.jpg)
Optimisations complémentaires > Pré chargement
Beacoup de temps inutilisé...
Chargement
Accès à la page 1Accès à la page 2
Rendu
Chargement
Rendu
![Page 38: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/38.jpg)
Optimisations complémentaires > Pré chargement
Chargement
Accès à la page 1Accès à la page 2
Rendu
Chargement
Rendu
Pré chargement
html jscss image
Préchargement de 3 images avec MooTools :
new Asset.images(['image1','image2','image3'], {});
![Page 39: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/39.jpg)
Optimisations complémentaires > AJAX
XML vs JSONJSON plus léger
JSON plus rapide à parser/évaluer en javascript
GET vs POSTGET plus rapide et logique dans la plupart des cas
Mettre en cache
5 minutes? 10 minutes? 1 heure?
![Page 40: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/40.jpg)
En savoir plus
OutilsYSlow http://open.yahoo.com/yslow/
AOL PageTest http://pagetest.wiki.sourceforge.net/
Générateur de Sprite CSS Online http://spritegen.website-performance.org/
Générateur de Sprite CSS Java et PHP http://smartsprites.osinski.name/
Sites webYahoo! Exceptionnal Performance http://developer.yahoo.com/performance/
Performance Web http://performance.survol.fr/
![Page 41: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/41.jpg)
YSlow > Audit des performances
![Page 42: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/42.jpg)
YSlow > Mise en cache
![Page 43: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/43.jpg)
YSlow & AOL PageTest > Chargement d’une page
![Page 44: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/44.jpg)
Conclusion
Optimiser!1 ou 2 jours nécessaires
Très simple à mettre en place
Expérience utilisateur améliorée
![Page 45: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/45.jpg)
Questions?
Blog
Intellicore Tech Talks http://techtalks.intellicore.net/
Blog de Camille Roux http://www.camilleroux.com/
Camille Roux [email protected]
Nicolas Chevallier [email protected]
![Page 46: Optimiser les performances d’un site web Nicolas ...€¦ · Site % Chargement du HTML Skyrock 4,7 Orange 3,8 Free 6,2 Dailymotion 5,3 Introduction > Sur quels param tres agir?](https://reader033.vdocuments.pub/reader033/viewer/2022050404/5f8177c8b38721687c169032/html5/thumbnails/46.jpg)
WWW.INTELLICORE.NET
Tous droits réservés Intellicore Services © 2008