SlideShare a Scribd company logo

Un site web rapide ?

haricot
haricot

Avec l’avènement des connexions haut-débit et bientôt très haut-débit, les concepteurs semblent de moins en moins attentifs à la rapidité de leurs sites. De plus, avec de telles connexions, les internautes supportent mal un site qui les fasse attendre. Cela gâche l’expérience utilisateur, pourtant censée être au cœur du "web 2.0" Cet atelier vous présentera comment, sans devoir repenser votre application ou vos pages depuis le début, améliorer la rapidité de votre site.

1 of 32
Download to read offline
Un site web rapide ?
 C’est pas sorcier !

      Mathieu Pillard m@skyrock.com
    Anthony Ricaud haricot@skyrock.com


Paris Web 2007 - 17 novembre 2007
Nous
                               Mathieu Pillard
                              m@skyrock.com


                              Anthony Ricaud
irc.freenode.net #openweb
                            haricot@skyrock.com


                                   Telefun
                                skyrock.com
                                                 2
Le problème
Sites de plus en plus beaux, plus en plus interactifs...
...Mais en plus lourds et gourmands en ressources!
Les concepteurs de sites font de moins en moins attention
à ca...
...Pourtant tout le monde n’a pas une connexion internet
très haut débit (21% de bas débit, sans compter les
mobiles) et un PC multi-core
“Arg, y en a marre de ces sites où faut charger dix mille
trucs avant de voir quelque chose” (Lolo 15/10/07)

                                                            3
Pourquoi c’est important ?
 Pour vos visiteurs
   C’est la première chose que l’on remarque
   Ce qui se passe à La Poste sur les quais pendant les
   grèves SNCF se passe aussi devant un écran: les gens
   sont impatients, s’énervent à force d’attendre...
     Limite théorique des 2 secondes
   Les visiteurs avec de vieilles machines vous remercieront
   Bas débit, mobiles


                                                               4
Pourquoi c’est important ?
 Pour vous
   Plus de trafic avec les mêmes machines
   Plus vos frontaux sont rapides à servir des pages, moins
   les serveurs derrière les attendent...
   La satisfaction du travail bien fait :-)




                                                              5
Objectifs de cet atelier
 Sujet vaste, concentrons nous sur les points simples et
 rapides à mettre en place pour des développeurs
 Le but n’est pas de configurer des serveurs aux petits
 oignons, mais d’expliquer les démarches y menant
 La perception de la rapidité est aussi importante que la
 rapidité elle même pour vos visiteurs
 Yahoo “Exceptional Performance” : promis, on n’a pas tout
 copié :)
 Les cordonniers sont toujours les plus mal chaussés...

                                                             6

Recommended

PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005Eric D.
 
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007Eric D.
 
NodeJs, une introduction
NodeJs, une introductionNodeJs, une introduction
NodeJs, une introductionToxicode
 
Optimiser WordPress
Optimiser WordPressOptimiser WordPress
Optimiser WordPressChi Nacim
 
MongoDB day Paris 2012
MongoDB day Paris 2012MongoDB day Paris 2012
MongoDB day Paris 2012FastConnect
 
Enib cours c.a.i. web - séance #6 : introduction à node js
Enib   cours c.a.i. web - séance #6 : introduction à node jsEnib   cours c.a.i. web - séance #6 : introduction à node js
Enib cours c.a.i. web - séance #6 : introduction à node jsHoracio Gonzalez
 

More Related Content

What's hot

Spring Batch - Julien Jakubowski - November 2010
Spring Batch - Julien Jakubowski - November 2010Spring Batch - Julien Jakubowski - November 2010
Spring Batch - Julien Jakubowski - November 2010JUG Lausanne
 
Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006Eric D.
 
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Nicolas Silberman
 
Présentation de nodejs
Présentation de nodejsPrésentation de nodejs
Présentation de nodejs13p
 
Retour d'expérience sur notre stack de log
Retour d'expérience sur notre stack de logRetour d'expérience sur notre stack de log
Retour d'expérience sur notre stack de logJulien Maitrehenry
 
Industrialiser la gestion des fichiers multimedia #dcparis13
Industrialiser la gestion des fichiers multimedia #dcparis13Industrialiser la gestion des fichiers multimedia #dcparis13
Industrialiser la gestion des fichiers multimedia #dcparis13Aurelien Navarre
 
Ops@viadeo : Puppet & Co... 6 mois après par Xavier Krantz
Ops@viadeo : Puppet & Co... 6 mois après par Xavier KrantzOps@viadeo : Puppet & Co... 6 mois après par Xavier Krantz
Ops@viadeo : Puppet & Co... 6 mois après par Xavier KrantzOlivier DASINI
 
Memcached: Comprendre pour mieux utiliser
Memcached: Comprendre pour mieux utiliserMemcached: Comprendre pour mieux utiliser
Memcached: Comprendre pour mieux utiliserNimeOps
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptKhalid Jebbari
 
Utilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDBUtilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDB13p
 
DrupalCamp Lyon 2012 - Optimiser les performances Drupal depuis les tranchées
DrupalCamp Lyon 2012 -  Optimiser les performances Drupal depuis les tranchéesDrupalCamp Lyon 2012 -  Optimiser les performances Drupal depuis les tranchées
DrupalCamp Lyon 2012 - Optimiser les performances Drupal depuis les tranchéesAurelien Navarre
 
Memcached, une solution de cache par excellence
Memcached, une solution de cache par excellenceMemcached, une solution de cache par excellence
Memcached, une solution de cache par excellenceMehdi Mehni
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousjwajsberg
 
Développer pour tous les navigateurs
Développer pour tous les navigateursDévelopper pour tous les navigateurs
Développer pour tous les navigateursMicrosoft
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.jsTelecomValley
 
WS User Group - Spring Batch - Xebia
WS User Group - Spring Batch - XebiaWS User Group - Spring Batch - Xebia
WS User Group - Spring Batch - XebiaOlivier BAZOUD
 
Faites-des sauvegardes-WordPress-Backup-WC-Montreal-2016
Faites-des sauvegardes-WordPress-Backup-WC-Montreal-2016Faites-des sauvegardes-WordPress-Backup-WC-Montreal-2016
Faites-des sauvegardes-WordPress-Backup-WC-Montreal-2016Jasmine Brien
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 

What's hot (20)

Spring Batch - Julien Jakubowski - November 2010
Spring Batch - Julien Jakubowski - November 2010Spring Batch - Julien Jakubowski - November 2010
Spring Batch - Julien Jakubowski - November 2010
 
Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006
 
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
 
Présentation de nodejs
Présentation de nodejsPrésentation de nodejs
Présentation de nodejs
 
Optimisation de son site web
Optimisation de son site webOptimisation de son site web
Optimisation de son site web
 
Retour d'expérience sur notre stack de log
Retour d'expérience sur notre stack de logRetour d'expérience sur notre stack de log
Retour d'expérience sur notre stack de log
 
Industrialiser la gestion des fichiers multimedia #dcparis13
Industrialiser la gestion des fichiers multimedia #dcparis13Industrialiser la gestion des fichiers multimedia #dcparis13
Industrialiser la gestion des fichiers multimedia #dcparis13
 
Ops@viadeo : Puppet & Co... 6 mois après par Xavier Krantz
Ops@viadeo : Puppet & Co... 6 mois après par Xavier KrantzOps@viadeo : Puppet & Co... 6 mois après par Xavier Krantz
Ops@viadeo : Puppet & Co... 6 mois après par Xavier Krantz
 
Memcached: Comprendre pour mieux utiliser
Memcached: Comprendre pour mieux utiliserMemcached: Comprendre pour mieux utiliser
Memcached: Comprendre pour mieux utiliser
 
Spring Batch ParisJUG
Spring Batch ParisJUG Spring Batch ParisJUG
Spring Batch ParisJUG
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
 
Utilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDBUtilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDB
 
DrupalCamp Lyon 2012 - Optimiser les performances Drupal depuis les tranchées
DrupalCamp Lyon 2012 -  Optimiser les performances Drupal depuis les tranchéesDrupalCamp Lyon 2012 -  Optimiser les performances Drupal depuis les tranchées
DrupalCamp Lyon 2012 - Optimiser les performances Drupal depuis les tranchées
 
Memcached, une solution de cache par excellence
Memcached, une solution de cache par excellenceMemcached, une solution de cache par excellence
Memcached, une solution de cache par excellence
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
Développer pour tous les navigateurs
Développer pour tous les navigateursDévelopper pour tous les navigateurs
Développer pour tous les navigateurs
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
 
WS User Group - Spring Batch - Xebia
WS User Group - Spring Batch - XebiaWS User Group - Spring Batch - Xebia
WS User Group - Spring Batch - Xebia
 
Faites-des sauvegardes-WordPress-Backup-WC-Montreal-2016
Faites-des sauvegardes-WordPress-Backup-WC-Montreal-2016Faites-des sauvegardes-WordPress-Backup-WC-Montreal-2016
Faites-des sauvegardes-WordPress-Backup-WC-Montreal-2016
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 

Viewers also liked

1400 nouvelles extensions internet quels enjeux et opportunites - CCI Bordeau...
1400 nouvelles extensions internet quels enjeux et opportunites - CCI Bordeau...1400 nouvelles extensions internet quels enjeux et opportunites - CCI Bordeau...
1400 nouvelles extensions internet quels enjeux et opportunites - CCI Bordeau...polenumerique33
 
Trucs de-grand-mere
Trucs de-grand-mereTrucs de-grand-mere
Trucs de-grand-meresultan126
 
Apprendre à Pirater
Apprendre à PiraterApprendre à Pirater
Apprendre à PiraterJulesis
 
IV Seminario - Fortaleciendo las Capacidades del Concejal Chaqueño
IV Seminario - Fortaleciendo las Capacidades del Concejal ChaqueñoIV Seminario - Fortaleciendo las Capacidades del Concejal Chaqueño
IV Seminario - Fortaleciendo las Capacidades del Concejal ChaqueñoFundación CiGob
 
Résultats enquête de satisfaction Repères décembre 2012
Résultats enquête de satisfaction Repères décembre 2012Résultats enquête de satisfaction Repères décembre 2012
Résultats enquête de satisfaction Repères décembre 2012François Abiven
 
Digitalisation et virtualité de l'expérience musicale
Digitalisation et virtualité de l'expérience musicaleDigitalisation et virtualité de l'expérience musicale
Digitalisation et virtualité de l'expérience musicalelaurence allard
 
Sites exceptionnels
Sites exceptionnelsSites exceptionnels
Sites exceptionnelshumorymas
 
Guide%20 utilisateur%20de%20shadowprotect v9-20111129-0911[1]
Guide%20 utilisateur%20de%20shadowprotect v9-20111129-0911[1]Guide%20 utilisateur%20de%20shadowprotect v9-20111129-0911[1]
Guide%20 utilisateur%20de%20shadowprotect v9-20111129-0911[1]Zouhir Mezrhab
 
Blogs y Redes Sociales - Clase especial en UCES - 26 agosto 2009
Blogs y Redes Sociales - Clase especial en UCES - 26 agosto 2009Blogs y Redes Sociales - Clase especial en UCES - 26 agosto 2009
Blogs y Redes Sociales - Clase especial en UCES - 26 agosto 2009Alejandro Marticorena
 
RP Réseaux Sociaux
RP Réseaux SociauxRP Réseaux Sociaux
RP Réseaux Sociauxmaevacdcm
 
curriculum-2011-spanish
curriculum-2011-spanishcurriculum-2011-spanish
curriculum-2011-spanishMateo Budinich
 
Taller de Consumer Insights Abril 2009: ¿Desea conocer las técnicas y herrami...
Taller de Consumer Insights Abril 2009: ¿Desea conocer las técnicas y herrami...Taller de Consumer Insights Abril 2009: ¿Desea conocer las técnicas y herrami...
Taller de Consumer Insights Abril 2009: ¿Desea conocer las técnicas y herrami...Consumer Truth - Insights & Planning
 

Viewers also liked (20)

Tanjon film 1 (1)
Tanjon film 1 (1)Tanjon film 1 (1)
Tanjon film 1 (1)
 
1400 nouvelles extensions internet quels enjeux et opportunites - CCI Bordeau...
1400 nouvelles extensions internet quels enjeux et opportunites - CCI Bordeau...1400 nouvelles extensions internet quels enjeux et opportunites - CCI Bordeau...
1400 nouvelles extensions internet quels enjeux et opportunites - CCI Bordeau...
 
Smi2012 Marrakech
Smi2012 MarrakechSmi2012 Marrakech
Smi2012 Marrakech
 
Trucs de-grand-mere
Trucs de-grand-mereTrucs de-grand-mere
Trucs de-grand-mere
 
Project management semana 2 2013_ii
Project management semana 2 2013_iiProject management semana 2 2013_ii
Project management semana 2 2013_ii
 
Silabo project management 2013 ii
Silabo project management 2013 iiSilabo project management 2013 ii
Silabo project management 2013 ii
 
Apprendre à Pirater
Apprendre à PiraterApprendre à Pirater
Apprendre à Pirater
 
ceu
ceuceu
ceu
 
IV Seminario - Fortaleciendo las Capacidades del Concejal Chaqueño
IV Seminario - Fortaleciendo las Capacidades del Concejal ChaqueñoIV Seminario - Fortaleciendo las Capacidades del Concejal Chaqueño
IV Seminario - Fortaleciendo las Capacidades del Concejal Chaqueño
 
Résultats enquête de satisfaction Repères décembre 2012
Résultats enquête de satisfaction Repères décembre 2012Résultats enquête de satisfaction Repères décembre 2012
Résultats enquête de satisfaction Repères décembre 2012
 
Texto narrativo iii parte
Texto narrativo iii parteTexto narrativo iii parte
Texto narrativo iii parte
 
Digitalisation et virtualité de l'expérience musicale
Digitalisation et virtualité de l'expérience musicaleDigitalisation et virtualité de l'expérience musicale
Digitalisation et virtualité de l'expérience musicale
 
Portfolio
Portfolio Portfolio
Portfolio
 
Sites exceptionnels
Sites exceptionnelsSites exceptionnels
Sites exceptionnels
 
Manuel de rédaction de rapports GRI G4
Manuel de rédaction de rapports GRI G4Manuel de rédaction de rapports GRI G4
Manuel de rédaction de rapports GRI G4
 
Guide%20 utilisateur%20de%20shadowprotect v9-20111129-0911[1]
Guide%20 utilisateur%20de%20shadowprotect v9-20111129-0911[1]Guide%20 utilisateur%20de%20shadowprotect v9-20111129-0911[1]
Guide%20 utilisateur%20de%20shadowprotect v9-20111129-0911[1]
 
Blogs y Redes Sociales - Clase especial en UCES - 26 agosto 2009
Blogs y Redes Sociales - Clase especial en UCES - 26 agosto 2009Blogs y Redes Sociales - Clase especial en UCES - 26 agosto 2009
Blogs y Redes Sociales - Clase especial en UCES - 26 agosto 2009
 
RP Réseaux Sociaux
RP Réseaux SociauxRP Réseaux Sociaux
RP Réseaux Sociaux
 
curriculum-2011-spanish
curriculum-2011-spanishcurriculum-2011-spanish
curriculum-2011-spanish
 
Taller de Consumer Insights Abril 2009: ¿Desea conocer las técnicas y herrami...
Taller de Consumer Insights Abril 2009: ¿Desea conocer las técnicas y herrami...Taller de Consumer Insights Abril 2009: ¿Desea conocer las técnicas y herrami...
Taller de Consumer Insights Abril 2009: ¿Desea conocer las técnicas y herrami...
 

Similar to Un site web rapide ?

Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Adyax
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secretsAymeric Bouillat
 
Introduction to Rust in Production - Servo Mozilla project (Talk)
Introduction to Rust in Production - Servo Mozilla project (Talk)Introduction to Rust in Production - Servo Mozilla project (Talk)
Introduction to Rust in Production - Servo Mozilla project (Talk)Quentin Frémeaux
 
Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Jean-Pierre Vincent
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesOxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceLudovic Piot
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
Techniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyTechniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyJean-Pierre Vincent
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web MobileWilly Leloutre
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 
Performance des sites dynamiques : une histoire de cache à tous les niveaux
Performance des sites dynamiques : une histoire de cache à tous les niveauxPerformance des sites dynamiques : une histoire de cache à tous les niveaux
Performance des sites dynamiques : une histoire de cache à tous les niveauxMy_Sic
 
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEOCore Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEOWeLoveSEO
 
Les containers docker vu par un chef cuisinier et un mécanicien
Les containers docker vu par un chef cuisinier et un mécanicienLes containers docker vu par un chef cuisinier et un mécanicien
Les containers docker vu par un chef cuisinier et un mécanicienRachid Zarouali
 
Amélioration des performances eCommerce - Webinaire par aYaline
Amélioration des performances eCommerce - Webinaire par aYalineAmélioration des performances eCommerce - Webinaire par aYaline
Amélioration des performances eCommerce - Webinaire par aYalineaYaline
 
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020SEO CAMP
 
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...Paris, France
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostDamien Jubeau
 

Similar to Un site web rapide ? (20)

Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
 
Introduction to Rust in Production - Servo Mozilla project (Talk)
Introduction to Rust in Production - Servo Mozilla project (Talk)Introduction to Rust in Production - Servo Mozilla project (Talk)
Introduction to Rust in Production - Servo Mozilla project (Talk)
 
Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Techniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyTechniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwiparty
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web Mobile
 
Fusion io
Fusion ioFusion io
Fusion io
 
Do you speak technique ?
Do you speak technique ?Do you speak technique ?
Do you speak technique ?
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
Performance des sites dynamiques : une histoire de cache à tous les niveaux
Performance des sites dynamiques : une histoire de cache à tous les niveauxPerformance des sites dynamiques : une histoire de cache à tous les niveaux
Performance des sites dynamiques : une histoire de cache à tous les niveaux
 
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEOCore Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
 
Les containers docker vu par un chef cuisinier et un mécanicien
Les containers docker vu par un chef cuisinier et un mécanicienLes containers docker vu par un chef cuisinier et un mécanicien
Les containers docker vu par un chef cuisinier et un mécanicien
 
Amélioration des performances eCommerce - Webinaire par aYaline
Amélioration des performances eCommerce - Webinaire par aYalineAmélioration des performances eCommerce - Webinaire par aYaline
Amélioration des performances eCommerce - Webinaire par aYaline
 
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
 
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 

Un site web rapide ?

  • 1. Un site web rapide ? C’est pas sorcier ! Mathieu Pillard m@skyrock.com Anthony Ricaud haricot@skyrock.com Paris Web 2007 - 17 novembre 2007
  • 2. Nous Mathieu Pillard m@skyrock.com Anthony Ricaud irc.freenode.net #openweb haricot@skyrock.com Telefun skyrock.com 2
  • 3. Le problème Sites de plus en plus beaux, plus en plus interactifs... ...Mais en plus lourds et gourmands en ressources! Les concepteurs de sites font de moins en moins attention à ca... ...Pourtant tout le monde n’a pas une connexion internet très haut débit (21% de bas débit, sans compter les mobiles) et un PC multi-core “Arg, y en a marre de ces sites où faut charger dix mille trucs avant de voir quelque chose” (Lolo 15/10/07) 3
  • 4. Pourquoi c’est important ? Pour vos visiteurs C’est la première chose que l’on remarque Ce qui se passe à La Poste sur les quais pendant les grèves SNCF se passe aussi devant un écran: les gens sont impatients, s’énervent à force d’attendre... Limite théorique des 2 secondes Les visiteurs avec de vieilles machines vous remercieront Bas débit, mobiles 4
  • 5. Pourquoi c’est important ? Pour vous Plus de trafic avec les mêmes machines Plus vos frontaux sont rapides à servir des pages, moins les serveurs derrière les attendent... La satisfaction du travail bien fait :-) 5
  • 6. Objectifs de cet atelier Sujet vaste, concentrons nous sur les points simples et rapides à mettre en place pour des développeurs Le but n’est pas de configurer des serveurs aux petits oignons, mais d’expliquer les démarches y menant La perception de la rapidité est aussi importante que la rapidité elle même pour vos visiteurs Yahoo “Exceptional Performance” : promis, on n’a pas tout copié :) Les cordonniers sont toujours les plus mal chaussés... 6
  • 8. Le but Pour chaque page Le moins de requêtes possible Le moins de trafic possible Quelques fois, c’est en opposition... 8
  • 9. Réduire les requêtes HTTP Établir une connexion coûte cher au serveur comme au client HTTP Pipelining : oui mais... Moins de fichiers Combiner les fichiers CSS, JavaScript Images Maps CSS Sprites Éviter les redirections 9
  • 10. Réduire les requêtes DNS Avant chaque requête HTTP, il faut connaître l’adresse du serveur et ça prend encore du temps ~20-120ms Cache navigateur : 30 minutes pour IE, 1 minute pour Firefox Même pour les sous-domaines... Attention aux CNAME server1 IN A 192.168.0.3 www IN CNAME server1 10
  • 11. Réduire vos envois Gzip, Deflate ~ 70% de gain HTML, CSS, JavaScript Surtout pas les images Mais réduire ce n’est pas que compresser 11
  • 12. Cache Deux éléments importants Validation Fraîcheur 12
  • 13. Fraîcheur - Expires Expires Temps absolu Expires: Sat, 17 Nov 2007 11:30:41 GMT Mais on peut régler son serveur Temps relatif au dernier accès Temps relatif à la dernière modification Cache-Control max-age Cache-Control: max-age=3600 13
  • 14. Validation Last-Modified If-Modified-Since Etag Identifiant unique du contenu de la page Etag: quot;81ba2d31d2a55ff57fbb136a767ff6221195260435quot; If-None-Match 14
  • 15. Bien les utiliser URLs propres Attention aux POST, SSL Expiration loin dans le temps pour tout ce qui n’est pas HTML Ne changez que les fichiers nécessaires Attention aux Etag sur différents serveurs 15
  • 16. Séparer statique et dynamique 2 requêtes par domaine HTTP 1.1 : téléchargement parallèle possible 2 domaines est un bon compromis Pas besoin de cookies pour récupérer du statique Réglages simplifiés (cache, compression) 16
  • 17. Temps de réponse Taille (delta) 0 octets 78 ms (0 ms) 500 octets 79 ms (+1 ms) 1000 octets 94 ms (+16 ms) 1500 octets 109 ms (+31 ms) 2000 octets 125 ms (+47 ms) 2500 octets 141 ms (+63 ms) 3000 octets 156 ms (+78 ms) 16
  • 18. Séparer statique et dynamique 2 requêtes par domaine HTTP 1.1 : téléchargement parallèle possible 2 domaines est un bon compromis Pas besoin de cookies pour récupérer du statique Réglages simplifiés (cache, compression) 16
  • 20. Problèmatique Donner l’impression au visiteur que le site est rapide: lui montrer ce qu’il veut voir en priorité Trouver des astuces pour que le navigateur passe moins de temps à afficher une page Rester réactif une fois le site chargé 18
  • 21. Comprendre le chargement d’une page web Téléchargement -> Parsing -> Affichage -> Fini! L’affichage d’une page: Tous les navigateurs bloquent sur les <script>, à cause notamment de document.write() Certains bloquent sur les CSS aussi (Gecko) Certains ont des délais avant d’afficher quoi que ce soit pour éviter le “FOUC” (Gecko, Webkit) L'événement “onload” ne s'exécute que lorsque la page et tous ses éléments (styles, scripts, images) sont chargés 19
  • 22. Coté (X)HTML Réduisez la soupe de balise inutiles Evitez les tableaux imbriqués La taille du document compte: réduisez vos pages! Evitez les tableaux pour la mise en page, utilisez les CSS Attention à l’ordre des éléments dans l’HTML si vos pages sont longues. Choisissez ce que l’utilisateur verra en premier Ça va de soit, mais plus il y a d’éléments à charger et plus ils sont gros, plus ça prendra de temps, alors réduisez aussi vos images, flashs, etc. 20
  • 23. Coté CSS Evitez à tout prix les expression() sous Internet Explorer Factorisez vos règles Evitez la multiplication des fichiers une fois en production, surtout si ils se retrouvent tous sur vos pages Les styles sont la chose la plus importante pour l’affichage d’une page, le plus haut ils sont placés dans le document, le mieux c’est Profitez du cache du navigateur, faites des feuilles externes 21
  • 24. Scripts Chaque <script> est bloquant, le moins vous en avez le mieux c’est! De même, si l’affichage de la page est plus important, mettez vos scripts le plus bas possible pour que l’affichage commence tôt Idem que pour les CSS, vive les scripts externes Compressez vos scripts avec gzip et éventuellement un “packer” (attention, différentes méthodes, différents résultats). 22
  • 25. Scripts: L'événement “onload” http://dean.edwards.name/my/busted.html http://dean.edwards.name/my/busted3.html L'événement “DOMContentLoaded” remplace avantageusement “onload” dans beaucoup de situations Implémenté dans Firefox et Opera de base, bidouilles possible pour les autres navigateurs Les bidouilles en question sont présentes dans la majorité des frameworks JavaScript. 23
  • 26. Scripts, reloaded Utilisez les variables locales Evitez d’accéder plusieurs fois à une propriété d’un élément, faites le maximum de choses en une seule fois Bannissez “with”, évitez “eval” autant que possible. Attention aux memory leaks, surtout sous Internet Explorer N’abusez pas du XmlHttpRequest: une requête asynchrone n’est pas forcément instantanée (oui, j’ai volé cette ligne à Yahoo) 24
  • 27. Scripts, exemple function test { str = “coucou”; document.getElementById(“test”).innerHTML = str; document.getElementById(“test”).innerHTML += “mat”; } function test { var str = “coucou” + mat; var element = document.getElementById(“test”); element.innerHTML = str; } 25
  • 28. Scripts, revolutions Effets Web 2.0 (fade, etc): c’est joli, mais attention: Est ce que ca tourne bien sur les vieilles machines? Est ce que ca impose un délai inutile à l’utilisateur? Frameworks: gagner du temps, c’est bien, mais attention aux performances! Attention à la multiplication de fichiers et à leur tailles. Testez avec tous les navigateurs, certains sont vraiment lents sous Internet Explorer Dans bien des cas le DOM suffit, même avec le support limité d’Internet Explorer 26
  • 29. Comparaison vitesse des frameworks (Slickspeed) Base2 jQuery MooTools prototype en ms 0.9a 1.2.1 1.2 r1028 1.6.0_rc0 Safari3 124 236 120 124 Firefox2 116 552 173 207 Opera 137 351 163 200 9.5α IE7 339 886 713 1437 IE6 640 1617 1291 2787 27
  • 30. Comparaison fichiers frameworks en ko Base2 jQuery Mootools Prototype Normale 100 80 88 128 Gzipée 26 25 22 28 Minifiée 54 46 65 45 Minifiée 16 14 19 20 compressée 28
  • 31. Outils Firebug Yslow Firebug lite Safari Web Inspector Fiddler Sniffer réseau :) Logs serveur 29