Optimisation des performances d'un site web

dernière édition : Kaelig Deloumeau-Prigent, le 12 mai 2010 Optimiser les performances de son site web Cette création est mise à disposition selon le Contrat Paternité-Partage des Conditions Initiales à l'Identique 2.0 France disponible en ligne http:// creativecommons.org/licenses/by-sa/2.0/fr/ ou par courrier postal à Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.

Pourquoi un site + rapide ?

Pourquoi un site + rapide ? Google : + 0.4s = -0.6% de recherches (source)

Pourquoi un site + rapide ? Google : + 0.4s = -0.6% de recherches (source) Site lent = hausse du taux de rebond

Pourquoi un site + rapide ? Google : + 0.4s = -0.6% de recherches (source) Site lent = hausse du taux de rebond En e-commerce : impact sur le ROI

Pourquoi un site + rapide ? Google : + 0.4s = -0.6% de recherches (source) Site lent = hausse du taux de rebond En e-commerce : impact sur le ROI Depuis peu de temps : impact SEO

Pourquoi un site + rapide ? Google : + 0.4s = -0.6% de recherches (source) Site lent = hausse du taux de rebond En e-commerce : impact sur le ROI Depuis peu de temps : impact SEO Mais aussi...

Marche à suivre

Marche à suivre « Auditer » ses pages, savoir quelles mesures prendre

Marche à suivre « Auditer » ses pages, savoir quelles mesures prendre Optimiser son serveur

Marche à suivre « Auditer » ses pages, savoir quelles mesures prendre Optimiser son serveur Tirer parti du cache du navigateur

Marche à suivre « Auditer » ses pages, savoir quelles mesures prendre Optimiser son serveur Tirer parti du cache du navigateur Diminuer le nombre de requêtes http

Marche à suivre « Auditer » ses pages, savoir quelles mesures prendre Optimiser son serveur Tirer parti du cache du navigateur Diminuer le nombre de requêtes http Optimiser les images

Marche à suivre « Auditer » ses pages, savoir quelles mesures prendre Optimiser son serveur Tirer parti du cache du navigateur Diminuer le nombre de requêtes http Optimiser les images Optimiser les scripts

Ressources et outils

Ressources et outils Google Webmaster Tools

Ressources et outils Google Webmaster Tools code.google.com/speed

Ressources et outils Google Webmaster Tools code.google.com/speed Web page test

Ressources et outils Google Webmaster Tools code.google.com/speed Web page test Yahoo Developer Network

YSlow, SiteSpeed, Webkit inspector

Optimiser son serveur

Optimiser son serveur DNS

Optimiser son serveur DNS Proxy HTTP

Optimiser son serveur DNS Proxy HTTP Conﬁguration adaptée au site

Optimiser les en-têtes HTTP

Optimiser les en-têtes HTTP Compression gzip

Optimiser les en-têtes HTTP Compression gzip les headers de cache : Etags, expiration

Optimiser les en-têtes HTTP Compression gzip les headers de cache : Etags, expiration Éviter les redirections http (301, 302...) ≈75 à 1000 ms

Optimiser le code HTML

Optimiser le code HTML Externaliser les styles et les scripts

Optimiser le code HTML Externaliser les styles et les scripts Placer les CSS dans le head

Optimiser le code HTML Externaliser les styles et les scripts Placer les CSS dans le head Placer les scripts en bas de page autant que possible

Optimiser le code HTML Externaliser les styles et les scripts Placer les CSS dans le head Placer les scripts en bas de page autant que possible Coder «light» : standards, extensibilité, simplicité

Optimiser le code HTML Externaliser les styles et les scripts Placer les CSS dans le head Placer les scripts en bas de page autant que possible Coder «light» : standards, extensibilité, simplicité D’autres bonnes pratiques, surtout efﬁcaces côté client

Optimiser les images

Optimiser les images Retirer les meta datas (exporter pour le web)

Optimiser les images Retirer les meta datas (exporter pour le web) Ne pas utiliser les gif

Optimiser les images Retirer les meta datas (exporter pour le web) Ne pas utiliser les gif Choisir le bon format (jpg pour les photos, png pour les pictos) Exemple : linternaute.com Avant optimisation : 492 Ko Après optimisation : 353 Ko

Ex. : ImageOptim

Ex. : ImageOptim Retire les meta datas

Ex. : ImageOptim Retire les meta datas Applique successivement des algorithmes de compression

Diminuer le nombre de requêtes HTTP

Diminuer le nombre de requêtes HTTP Grouper les CSS et scripts

Diminuer le nombre de requêtes HTTP Grouper les CSS et scripts Combine.php

Diminuer le nombre de requêtes HTTP Grouper les CSS et scripts Combine.php Éviter les iframes

Diminuer le nombre de requêtes HTTP Grouper les CSS et scripts Combine.php Éviter les iframes Recharger certaines parties de la page en AJAX

Diminuer le nombre de requêtes HTTP Grouper les CSS et scripts Combine.php Éviter les iframes Recharger certaines parties de la page en AJAX Utiliser des images sprites

Images Sprites

Images Sprites Technique accessible et SEO-Friendly

Images Sprites Technique accessible et SEO-Friendly 1 grande image < plusieurs petites

Images Sprites Technique accessible et SEO-Friendly 1 grande image < plusieurs petites Moins de requêtes HTTP

À vous de jouer !

Merci ! Kaelig Deloumeau-Prigent twitter.com/kaelig kaelig.fr - lunaweb.fr

http://www.slideshare.net	104
http://www.lunaweb.fr	61
http://opencoffeerennes.com	52

Optimisation des performances d'un site web

by Kaelig Deloumeau-Prigent on May 15, 2010

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 217

Statistics

Optimisation des performances d’un site web Presentation Transcript