SlideShare ist ein Scribd-Unternehmen logo
1 von 45
Downloaden Sie, um offline zu lesen
PERFORMANCE WEB
Par quoi commencer ? 
Photo : © Raphaël Goetter
RAPHAËL GOETTER
Alsacréations
#CSS #Standards #Webdesign #Responsive
#HTML #Accessibilité #WebPerf
L'INTERNAUTE
N'AIME PAS
ATTENDRE
❶
!
ON VEUT DES CHIFFRES ! 
Vous aimez les stats ? 
ON VEUT DES CHIFFRES ! 
Sites e-commerce et attente client
57 % des visiteurs quittent un site e-commerce
s'il met plus de 4 secondes à s'afficher
– PhoCusWright / Akamai (2010)
“ 
26 % des visiteurs quittent un site e-commerce
s'il met plus de 2 secondes à s'afficher
– PhoCusWright / Akamai (2010)
“ 
ON VEUT DES CHIFFRES ! 
Sites e-commerce et attente client
ON VEUT DES CHIFFRES ! 
C'est pire sur mobile ! 
60% des mobinautes s'attendent à un chargement
de 3s maximum pour un site mobile
– Compuware (2011)
“ 
ON VEUT DES CHIFFRES ! 
C'est pire sur mobile ! 
60% des mobinautes s'attendent à un chargement
de 3s maximum pour un site mobile
– Compuware (2011)
“ … Et 74% quittent une page après 5 secondes d'attente
– Compuware (2011)
“ 
POURQUOI
LA PERFORMANCE WEB ? 
❷
Photo : CC Flickr - jdwheaton
PARCE QUE ÇA
RAPPORTE !  Photo : CC Flickr - jdwheaton
+100ms
1% perte de revenus
⬇
+100ms
1% perte de revenus
⬇
+500ms
-20% de recherches
⬇
+100ms
1% perte de revenus
⬇
+500ms
-20% de recherches
⬇
-2s
+15% de chargements
⬇
+100ms
1% perte de revenus
⬇
+500ms
-20% de recherches
⬇
-2s
+15% de chargements
⬇
-5s
+12% de revenus
+25% pageviews
⬇
MAIS AUSSI (SURTOUT ?) ...
Sources : WebRankInfo / 1ere-position.fr / silicon.fr
En 2010, Google a annoncé
officiellement qu'il tenait compte
de la rapidité des sites dans son
algorithme de positionnement.
Google recommande un délai
moyen de 1,5 seconde pour
l’affichage d’une page web.
❶ ❷
QU'EST-CE QUI
RALENTIT
LE WEB
❸
?
LE TYPE DE CONNEXION
EDGE (0,38 Mbit/s)
3G (1,9 Mbit/s)
3G+ (3,6 Mbit/s)
H+ (10 Mbit/s)
Wi-Fi (25 Mbit/s)
ADSL (30 Mbit/s)
4G (40 Mbit/s)
Fibre (100 Mbit/s)
Source : Wikipedia
LE TYPE DE CONNEXION
3G 20 minutes➞
3G+ 1min 15s➞
4G 10 secondes➞
Concrètement...
Source : Orange (bon OK c'est un peu bullshit marketing)
Téléchargement d'un album
de musique :
LE POIDS DES RESSOURCES
Images 700 Ko➞
JavaScript 230 Ko➞
CSS 37 Ko➞
HTML 45 Ko➞
Autres 188 Ko➞
1,2Mo au total en
moyenne : 
Source : AlexaRank Top 1000 (janvier - août 2013)
LE POIDS DES RESSOURCES
Source : http://mobitest.akamai.com
LE NOMBRE DE REQUÊTES
Images 60 requêtes➞
JavaScript 17 requêtes➞
CSS 3,5 requêtes➞
HTML 10 requêtes➞
Autres 7 requêtes➞
98 requêtes en
moyenne : 
Source : AlexaRank Top 1000 (janvier - août 2013)
LE NOMBRE DE REQUÊTES
… à cause de la latence
Latence
●
dépend du serveur, du DNS
●
dépend de la connexion :
●
20-60ms via ADSL
●
200-600ms en 3G
Chargement
●
dépend du poids
LES RALENTISSEMENTS DIVERS
Scripts bloquants
CSS bloquants
Redirections HTTP/JavaScript
Mauvaises requêtes (404)
Reflow, repaint navigateur
Etc.
LES OUTILS POUR
TESTER
❹
Photo : © Raphaël Goetter
MANUELLEMENT
Outil d'audit de Chrome
Module d'audit divers (accessibilité, réseau, performances,...)
directement intégré au navigateur Chrome :
Touche F12 Onglet « Audit » Option « Webpage performance »➞ ➞
MANUELLEMENT
Extensions : YSlow et PageSpeed 
YSlow (Yahoo!) : plugin disponible sur Firefox, Chrome, Safari, Opera
PageSpeed (Google) : plugin Chrome, Firefox et en ligne
EN LIGNE
La référence : WebPageTest.org 
Au choix : lieu du serveur, type de connexion, navigateur, etc.
EN LIGNE
Httparchive.org
FilmStrip !
EN LIGNE
Google PageSpeed Insights
EN LIGNE
AkamaiMobitest
Pour les temps d'affichage sur mobiles
QUELQUES
EXEMPLES
❺
QUELQUES SITES PASSÉS AU CRIBLE
7s
chargement
78
requêtes
1095ko
poids
7.1s
chargement
163
requêtes
2203ko
poids
7.2s
chargement
133
requêtes
808ko
poids
7.7s
chargement
57
requêtes
1010ko
poids
QUELQUES SITES PASSÉS AU CRIBLE
2.3s
chargement
171
requêtes
2058ko
poids
Suite...
6.6s
chargement
66
requêtes
671ko
poids
ACCÉLÉREZ VOS
PAGES WEB
❻
Photo : © Raphaël Goetter
BONNES PRATIQUES GÉNÉRALES
Pas de redirections de pages
Scripts placés avant </body> et/ou attributs async / defer
Évitez @import pour les fichiers CSS
Hébergez les ressources sur plusieurs domaines (entre 2 et 4)
Déclarez les dimensions des images dans le HTML (width="", height="")
Évitez les mauvaises requêtes (404)
❶
EN DÉTAIL
Hébergez les ressources sur plusieurs domaines«   »
Hébergez les ressources (images, médias) sur plusieurs domaines différents.
Cette technique favorise leur téléchargement en parallèle.
Un sous-domaine fonctionne aussi (ex. media.alsacreations.com), et un domaine sans cookies
est encore plus performant.
Source : Yahoo!UI blog
Opera : 8 / IE10 : 8 / Chrome : 6 / Firefox : 6 / IE8/IE9 : 6 / Safari : 4 / IE6/IE7 : 2
❶
RÉDUIRE LE POIDS DES RESSOURCES
Minifiez les fichiers CSS
Minifiez les fichiers JS
Compressez les images
Choississez le bon format d'image
(.png, .gif, .jpg)
Optez pour des fontes légères
(.woff est généralement plus léger)
❷
EN DÉTAIL
Compressez les images«   » ❷www.kraken.io
RÉDUIRE LES REQUÊTES
Réunissez les feuilles de styles CSS
en une seule si possible
Réduisez / réunifiez le nombre de
fichiers JavaScript externes si possible
N'utilisez pas (ou presque pas)
d'images !
→ Sprites CSS,
→ Data-URI,
→ Caractères unicodes,
→ Font Icons, ...
❸
EN DÉTAIL
Font Icons«   » ❸icomoon.io
.icon {font-family: "MyFontIcon", sans-serif;}
.icon-twitter:before {content: "t";}
NE CHARGER QUE LE NÉCESSAIRE
Chargez les scripts externes en Asynchrone et/ou Différé
N'utilisez pas display : none pour masquer un élément
jQuery est parfois inutile et remplaçable par jQuip ou Zepto.js, plus légers
Triez les scripts nécessaires et les scripts de confort
JavaScript est parfois avantageusement remplaçable par CSS3 :
bordures, arrondis, ombrages, animations, formes simples
(triangles, ronds, carrés)
Pensez à faire du chargement conditionnel de ressources
(selon taille d'écran, pixel-ratio, ...)
❹
EN DÉTAIL
Charger conditionnellement les éléments«   » ❹@media (min-width : 768px) {
.deco {background: url(concombre-big.jpg);}
}
@media (max-width : 767px) {
.deco {background: url(concombre-small.jpg);}
}
concombre-big.jpg
concombre-small.jpg
CÔTÉ SERVEUR
Compressez les fichiers texte côté serveur (HTML, CSS, JS)
Générez certaines pages « à l'avance » (ex. flux RSS)
Gérez les durées de cache des éléments
❺
EN DÉTAIL
Durée d'expiration du cache«   » ❺<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/plain "access plus 1 day"
ExpiresByType text/html "access plus 1 hour"
ExpiresByType application/x-javascript "access plus 3 months"
ExpiresByType application/javascript "access plus 3 months"
ExpiresByType text/css "access plus 3 months"
ExpiresByType image/gif "access plus 3 months"
ExpiresByType image/x-icon "access plus 3 months"
ExpiresByType image/png "access plus 3 months"
ExpiresByType image/jpeg "access plus 3 months"
ExpiresByType application/xml "access plus 1 hour"
# ExpiresDefault "access plus 1 day"
</IfModule>
Outil Google : Google ModPagespeed
Polices : League Gothic + Segoe UI Light
Photos : Fotolia + mon super APN
Pictos : IconFinder (Visual Pharm, Designmodo)
MERCI, BISOUS
Raphaël Goetter www.alsacreations.fr @goetter
Crédits

Weitere ähnliche Inhalte

Was ist angesagt?

Inclure du Javascript de manière performante
Inclure du Javascript de manière performanteInclure du Javascript de manière performante
Inclure du Javascript de manière performanteJean-Pierre Vincent
 
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016Daniel Roch - SeoMix
 
Atelier WordPress - Freelance fair tour - La cordée Rennes
Atelier WordPress - Freelance fair tour - La cordée RennesAtelier WordPress - Freelance fair tour - La cordée Rennes
Atelier WordPress - Freelance fair tour - La cordée Renneswpalex
 
Optimiser son référencement WordPress - QueDuWeb 2016
Optimiser son référencement WordPress - QueDuWeb 2016Optimiser son référencement WordPress - QueDuWeb 2016
Optimiser son référencement WordPress - QueDuWeb 2016Daniel Roch - SeoMix
 
Magento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerceMagento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commercePatrick Valibus
 
Le meilleur pour votre site WordPress
Le meilleur pour votre site WordPressLe meilleur pour votre site WordPress
Le meilleur pour votre site WordPressAurélien Denis
 
Meetup Webperf : résumé des 3 dernières années
Meetup Webperf : résumé des 3 dernières annéesMeetup Webperf : résumé des 3 dernières années
Meetup Webperf : résumé des 3 dernières annéesJean-Pierre Vincent
 
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019Laurent Tulpan
 
Wordpress et SEO - Campus Made in Blog 2014 Montréal
Wordpress et SEO - Campus Made in Blog 2014 MontréalWordpress et SEO - Campus Made in Blog 2014 Montréal
Wordpress et SEO - Campus Made in Blog 2014 MontréalMade in
 
Sécuriser un site Wordpress
Sécuriser un site WordpressSécuriser un site Wordpress
Sécuriser un site Wordpressbestyuna
 
Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webIZZA Samir
 
Faire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketingFaire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketingDaniel Roch - SeoMix
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixDaniel Roch - SeoMix
 
Créer son site web avec WordPress
Créer son site web avec WordPressCréer son site web avec WordPress
Créer son site web avec WordPressAbel LIFAEFI MBULA
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEODimitri Brunel
 
#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le webNormandie Web Xperts
 

Was ist angesagt? (20)

Inclure du Javascript de manière performante
Inclure du Javascript de manière performanteInclure du Javascript de manière performante
Inclure du Javascript de manière performante
 
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
 
Atelier WordPress - Freelance fair tour - La cordée Rennes
Atelier WordPress - Freelance fair tour - La cordée RennesAtelier WordPress - Freelance fair tour - La cordée Rennes
Atelier WordPress - Freelance fair tour - La cordée Rennes
 
Optimiser son référencement WordPress - QueDuWeb 2016
Optimiser son référencement WordPress - QueDuWeb 2016Optimiser son référencement WordPress - QueDuWeb 2016
Optimiser son référencement WordPress - QueDuWeb 2016
 
Magento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerceMagento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerce
 
Le meilleur pour votre site WordPress
Le meilleur pour votre site WordPressLe meilleur pour votre site WordPress
Le meilleur pour votre site WordPress
 
Le prix de la pub
Le prix de la pubLe prix de la pub
Le prix de la pub
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Meetup Webperf : résumé des 3 dernières années
Meetup Webperf : résumé des 3 dernières annéesMeetup Webperf : résumé des 3 dernières années
Meetup Webperf : résumé des 3 dernières années
 
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
 
Peyronnet webspam-seocampus
Peyronnet webspam-seocampusPeyronnet webspam-seocampus
Peyronnet webspam-seocampus
 
Wordpress et SEO - Campus Made in Blog 2014 Montréal
Wordpress et SEO - Campus Made in Blog 2014 MontréalWordpress et SEO - Campus Made in Blog 2014 Montréal
Wordpress et SEO - Campus Made in Blog 2014 Montréal
 
Sécuriser un site Wordpress
Sécuriser un site WordpressSécuriser un site Wordpress
Sécuriser un site Wordpress
 
Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du web
 
Faire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketingFaire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketing
 
Introduction à la webperf
Introduction à la webperfIntroduction à la webperf
Introduction à la webperf
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMix
 
Créer son site web avec WordPress
Créer son site web avec WordPressCréer son site web avec WordPress
Créer son site web avec WordPress
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEO
 
#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web
 

Andere mochten auch

Convention Medialibs : iAdvize (Relation client : ce qu'attendent les intern...
Convention Medialibs : iAdvize (Relation client :  ce qu'attendent les intern...Convention Medialibs : iAdvize (Relation client :  ce qu'attendent les intern...
Convention Medialibs : iAdvize (Relation client : ce qu'attendent les intern...Medialibs
 
Conférence sur le Community Messaging : témoignages de Lucette, Sosh et La Poste
Conférence sur le Community Messaging : témoignages de Lucette, Sosh et La PosteConférence sur le Community Messaging : témoignages de Lucette, Sosh et La Poste
Conférence sur le Community Messaging : témoignages de Lucette, Sosh et La PosteiAdvize
 
Click to Chat & Click to Call - Les bonne pratiques en 10 succes stories
Click to Chat & Click to Call - Les bonne pratiques en 10 succes storiesClick to Chat & Click to Call - Les bonne pratiques en 10 succes stories
Click to Chat & Click to Call - Les bonne pratiques en 10 succes storiesiAdvize
 
Les attente
Les attenteLes attente
Les attenteiAdvize
 
Conférence salon E-commerce : présentation d'iAdvize et ibbü
Conférence salon E-commerce : présentation d'iAdvize et ibbüConférence salon E-commerce : présentation d'iAdvize et ibbü
Conférence salon E-commerce : présentation d'iAdvize et ibbüiAdvize
 
Comment uberiser la relation client de votre marque ?
Comment uberiser la relation client de votre marque ?Comment uberiser la relation client de votre marque ?
Comment uberiser la relation client de votre marque ?iAdvize
 
Etude sur les comportements d'achat sur internet et l'engagement client en 2015
Etude sur les comportements d'achat sur internet et l'engagement client en 2015Etude sur les comportements d'achat sur internet et l'engagement client en 2015
Etude sur les comportements d'achat sur internet et l'engagement client en 2015iAdvize
 
Conference iadvize au salon Stratégie Clients 2015
Conference iadvize au salon Stratégie Clients 2015Conference iadvize au salon Stratégie Clients 2015
Conference iadvize au salon Stratégie Clients 2015iAdvize
 
Chatbots & expérience client : comment les chatbots transforment l'expérience...
Chatbots & expérience client : comment les chatbots transforment l'expérience...Chatbots & expérience client : comment les chatbots transforment l'expérience...
Chatbots & expérience client : comment les chatbots transforment l'expérience...iAdvize
 
Comparatif de la Relation Client 2017 : services clients & communautés de marque
Comparatif de la Relation Client 2017 : services clients & communautés de marqueComparatif de la Relation Client 2017 : services clients & communautés de marque
Comparatif de la Relation Client 2017 : services clients & communautés de marqueiAdvize
 
Guide iAdvize : Comment engager vos clients avec une stratégie crosscanal ?
Guide iAdvize : Comment engager vos clients avec une stratégie crosscanal ?Guide iAdvize : Comment engager vos clients avec une stratégie crosscanal ?
Guide iAdvize : Comment engager vos clients avec une stratégie crosscanal ?iAdvize
 

Andere mochten auch (11)

Convention Medialibs : iAdvize (Relation client : ce qu'attendent les intern...
Convention Medialibs : iAdvize (Relation client :  ce qu'attendent les intern...Convention Medialibs : iAdvize (Relation client :  ce qu'attendent les intern...
Convention Medialibs : iAdvize (Relation client : ce qu'attendent les intern...
 
Conférence sur le Community Messaging : témoignages de Lucette, Sosh et La Poste
Conférence sur le Community Messaging : témoignages de Lucette, Sosh et La PosteConférence sur le Community Messaging : témoignages de Lucette, Sosh et La Poste
Conférence sur le Community Messaging : témoignages de Lucette, Sosh et La Poste
 
Click to Chat & Click to Call - Les bonne pratiques en 10 succes stories
Click to Chat & Click to Call - Les bonne pratiques en 10 succes storiesClick to Chat & Click to Call - Les bonne pratiques en 10 succes stories
Click to Chat & Click to Call - Les bonne pratiques en 10 succes stories
 
Les attente
Les attenteLes attente
Les attente
 
Conférence salon E-commerce : présentation d'iAdvize et ibbü
Conférence salon E-commerce : présentation d'iAdvize et ibbüConférence salon E-commerce : présentation d'iAdvize et ibbü
Conférence salon E-commerce : présentation d'iAdvize et ibbü
 
Comment uberiser la relation client de votre marque ?
Comment uberiser la relation client de votre marque ?Comment uberiser la relation client de votre marque ?
Comment uberiser la relation client de votre marque ?
 
Etude sur les comportements d'achat sur internet et l'engagement client en 2015
Etude sur les comportements d'achat sur internet et l'engagement client en 2015Etude sur les comportements d'achat sur internet et l'engagement client en 2015
Etude sur les comportements d'achat sur internet et l'engagement client en 2015
 
Conference iadvize au salon Stratégie Clients 2015
Conference iadvize au salon Stratégie Clients 2015Conference iadvize au salon Stratégie Clients 2015
Conference iadvize au salon Stratégie Clients 2015
 
Chatbots & expérience client : comment les chatbots transforment l'expérience...
Chatbots & expérience client : comment les chatbots transforment l'expérience...Chatbots & expérience client : comment les chatbots transforment l'expérience...
Chatbots & expérience client : comment les chatbots transforment l'expérience...
 
Comparatif de la Relation Client 2017 : services clients & communautés de marque
Comparatif de la Relation Client 2017 : services clients & communautés de marqueComparatif de la Relation Client 2017 : services clients & communautés de marque
Comparatif de la Relation Client 2017 : services clients & communautés de marque
 
Guide iAdvize : Comment engager vos clients avec une stratégie crosscanal ?
Guide iAdvize : Comment engager vos clients avec une stratégie crosscanal ?Guide iAdvize : Comment engager vos clients avec une stratégie crosscanal ?
Guide iAdvize : Comment engager vos clients avec une stratégie crosscanal ?
 

Ähnlich wie Convention Medialibs : Raphaël Goetter (Introduction à la performance web)

Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Adyax
 
10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPressAurélien Denis
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heureRaphaël Goetter
 
Web typographie
Web typographieWeb typographie
Web typographiemirko
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Fasterize
 
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
 
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...SEARCH Y - Philippe Yonnet Evénements
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web MobileWilly Leloutre
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Peak Ace
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifiéAdrien Russo
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)Khaled Djebloun
 
Introduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, ParisIntroduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, ParisEric D.
 
Améliorer la rapidité de son site web
Améliorer la rapidité de son site webAméliorer la rapidité de son site web
Améliorer la rapidité de son site webEmmanuel Gautier
 
Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Aymen Loukil
 
Octo RefCard test front-end
Octo RefCard test front-endOcto RefCard test front-end
Octo RefCard test front-endClément Dubois
 
Octo Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endOcto Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endFrançois Petitit
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxyassinesouli2
 

Ähnlich wie Convention Medialibs : Raphaël Goetter (Introduction à la performance web) (20)

Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"
 
10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Web typographie
Web typographieWeb typographie
Web typographie
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
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
 
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web Mobile
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
Conception de sites Web
Conception de sites WebConception de sites Web
Conception de sites Web
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifié
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
CasperJS
CasperJSCasperJS
CasperJS
 
Introduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, ParisIntroduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, Paris
 
Améliorer la rapidité de son site web
Améliorer la rapidité de son site webAméliorer la rapidité de son site web
Améliorer la rapidité de son site web
 
Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018
 
Octo RefCard test front-end
Octo RefCard test front-endOcto RefCard test front-end
Octo RefCard test front-end
 
Octo Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endOcto Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-end
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
 

Mehr von Medialibs

RGPD et Loi de finances : quels impacts pour vos sites internet ? - Février ...
RGPD et Loi de finances : quels impacts pour vos sites internet ? - Février ...RGPD et Loi de finances : quels impacts pour vos sites internet ? - Février ...
RGPD et Loi de finances : quels impacts pour vos sites internet ? - Février ...Medialibs
 
Atelier - Adwords : Optimisation des comptes, hygiène et best practices
Atelier - Adwords : Optimisation des comptes, hygiène et best practicesAtelier - Adwords : Optimisation des comptes, hygiène et best practices
Atelier - Adwords : Optimisation des comptes, hygiène et best practicesMedialibs
 
Atelier - Marketing 1to1 : les enjeux de la connaissance clients
Atelier - Marketing 1to1 : les enjeux de la connaissance clientsAtelier - Marketing 1to1 : les enjeux de la connaissance clients
Atelier - Marketing 1to1 : les enjeux de la connaissance clientsMedialibs
 
Atelier - Le Motion Design en 2017
Atelier - Le Motion Design en 2017Atelier - Le Motion Design en 2017
Atelier - Le Motion Design en 2017Medialibs
 
Atelier - Développer son intelligence relationnelle
Atelier - Développer son intelligence relationnelleAtelier - Développer son intelligence relationnelle
Atelier - Développer son intelligence relationnelleMedialibs
 
Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir Medialibs
 
Atelier - SEO OnSite et OffSite : Nos tricks !
Atelier - SEO OnSite et OffSite : Nos tricks !Atelier - SEO OnSite et OffSite : Nos tricks !
Atelier - SEO OnSite et OffSite : Nos tricks !Medialibs
 
Conférence - Roadmap Medialibs
Conférence - Roadmap MedialibsConférence - Roadmap Medialibs
Conférence - Roadmap MedialibsMedialibs
 
Conférence - Mettre en place une démarche UX au sein de vos équipes
Conférence - Mettre en place une démarche UX au sein de vos équipesConférence - Mettre en place une démarche UX au sein de vos équipes
Conférence - Mettre en place une démarche UX au sein de vos équipesMedialibs
 
Conférence - La place du Mobile dans la communication digitale ?
Conférence -  La place du Mobile dans la communication digitale ?Conférence -  La place du Mobile dans la communication digitale ?
Conférence - La place du Mobile dans la communication digitale ?Medialibs
 
Atelier - E-Commerçant, faites parler de votre marque et développez votre CA ...
Atelier - E-Commerçant, faites parler de votre marque et développez votre CA ...Atelier - E-Commerçant, faites parler de votre marque et développez votre CA ...
Atelier - E-Commerçant, faites parler de votre marque et développez votre CA ...Medialibs
 
Atelier - Développez votre chiffre d'affaires avec l'offre Medialibs
Atelier - Développez votre chiffre d'affaires avec l'offre MedialibsAtelier - Développez votre chiffre d'affaires avec l'offre Medialibs
Atelier - Développez votre chiffre d'affaires avec l'offre MedialibsMedialibs
 
Atelier - Bienvenue dans l'ère post-webdesign
Atelier - Bienvenue dans l'ère post-webdesignAtelier - Bienvenue dans l'ère post-webdesign
Atelier - Bienvenue dans l'ère post-webdesignMedialibs
 
Atelier - L'expérience client en pratique
Atelier - L'expérience client en pratique Atelier - L'expérience client en pratique
Atelier - L'expérience client en pratique Medialibs
 
Atelier - Synergie SEO & SEA, véritable levier de performance pour votre site
Atelier - Synergie SEO & SEA, véritable levier de performance pour votre site Atelier - Synergie SEO & SEA, véritable levier de performance pour votre site
Atelier - Synergie SEO & SEA, véritable levier de performance pour votre site Medialibs
 
Atelier - L'email marketing de A à Z : optimisez le ROI de vos campagnes
Atelier - L'email marketing de A à Z : optimisez le ROI de vos campagnesAtelier - L'email marketing de A à Z : optimisez le ROI de vos campagnes
Atelier - L'email marketing de A à Z : optimisez le ROI de vos campagnesMedialibs
 
Conférence - Roadmap Medialibs
Conférence - Roadmap MedialibsConférence - Roadmap Medialibs
Conférence - Roadmap MedialibsMedialibs
 
Conférence - L'automatisation des emails au service de la relation client
Conférence - L'automatisation des emails au service de la relation clientConférence - L'automatisation des emails au service de la relation client
Conférence - L'automatisation des emails au service de la relation clientMedialibs
 
Conférence - Définition et enjeux de l'expérience client
Conférence - Définition et enjeux de l'expérience clientConférence - Définition et enjeux de l'expérience client
Conférence - Définition et enjeux de l'expérience clientMedialibs
 
Atelier - La vidéo : le nouvel eldorado de la visibilité sur Internet ?
Atelier - La vidéo : le nouvel eldorado de la visibilité sur Internet ? Atelier - La vidéo : le nouvel eldorado de la visibilité sur Internet ?
Atelier - La vidéo : le nouvel eldorado de la visibilité sur Internet ? Medialibs
 

Mehr von Medialibs (20)

RGPD et Loi de finances : quels impacts pour vos sites internet ? - Février ...
RGPD et Loi de finances : quels impacts pour vos sites internet ? - Février ...RGPD et Loi de finances : quels impacts pour vos sites internet ? - Février ...
RGPD et Loi de finances : quels impacts pour vos sites internet ? - Février ...
 
Atelier - Adwords : Optimisation des comptes, hygiène et best practices
Atelier - Adwords : Optimisation des comptes, hygiène et best practicesAtelier - Adwords : Optimisation des comptes, hygiène et best practices
Atelier - Adwords : Optimisation des comptes, hygiène et best practices
 
Atelier - Marketing 1to1 : les enjeux de la connaissance clients
Atelier - Marketing 1to1 : les enjeux de la connaissance clientsAtelier - Marketing 1to1 : les enjeux de la connaissance clients
Atelier - Marketing 1to1 : les enjeux de la connaissance clients
 
Atelier - Le Motion Design en 2017
Atelier - Le Motion Design en 2017Atelier - Le Motion Design en 2017
Atelier - Le Motion Design en 2017
 
Atelier - Développer son intelligence relationnelle
Atelier - Développer son intelligence relationnelleAtelier - Développer son intelligence relationnelle
Atelier - Développer son intelligence relationnelle
 
Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir
 
Atelier - SEO OnSite et OffSite : Nos tricks !
Atelier - SEO OnSite et OffSite : Nos tricks !Atelier - SEO OnSite et OffSite : Nos tricks !
Atelier - SEO OnSite et OffSite : Nos tricks !
 
Conférence - Roadmap Medialibs
Conférence - Roadmap MedialibsConférence - Roadmap Medialibs
Conférence - Roadmap Medialibs
 
Conférence - Mettre en place une démarche UX au sein de vos équipes
Conférence - Mettre en place une démarche UX au sein de vos équipesConférence - Mettre en place une démarche UX au sein de vos équipes
Conférence - Mettre en place une démarche UX au sein de vos équipes
 
Conférence - La place du Mobile dans la communication digitale ?
Conférence -  La place du Mobile dans la communication digitale ?Conférence -  La place du Mobile dans la communication digitale ?
Conférence - La place du Mobile dans la communication digitale ?
 
Atelier - E-Commerçant, faites parler de votre marque et développez votre CA ...
Atelier - E-Commerçant, faites parler de votre marque et développez votre CA ...Atelier - E-Commerçant, faites parler de votre marque et développez votre CA ...
Atelier - E-Commerçant, faites parler de votre marque et développez votre CA ...
 
Atelier - Développez votre chiffre d'affaires avec l'offre Medialibs
Atelier - Développez votre chiffre d'affaires avec l'offre MedialibsAtelier - Développez votre chiffre d'affaires avec l'offre Medialibs
Atelier - Développez votre chiffre d'affaires avec l'offre Medialibs
 
Atelier - Bienvenue dans l'ère post-webdesign
Atelier - Bienvenue dans l'ère post-webdesignAtelier - Bienvenue dans l'ère post-webdesign
Atelier - Bienvenue dans l'ère post-webdesign
 
Atelier - L'expérience client en pratique
Atelier - L'expérience client en pratique Atelier - L'expérience client en pratique
Atelier - L'expérience client en pratique
 
Atelier - Synergie SEO & SEA, véritable levier de performance pour votre site
Atelier - Synergie SEO & SEA, véritable levier de performance pour votre site Atelier - Synergie SEO & SEA, véritable levier de performance pour votre site
Atelier - Synergie SEO & SEA, véritable levier de performance pour votre site
 
Atelier - L'email marketing de A à Z : optimisez le ROI de vos campagnes
Atelier - L'email marketing de A à Z : optimisez le ROI de vos campagnesAtelier - L'email marketing de A à Z : optimisez le ROI de vos campagnes
Atelier - L'email marketing de A à Z : optimisez le ROI de vos campagnes
 
Conférence - Roadmap Medialibs
Conférence - Roadmap MedialibsConférence - Roadmap Medialibs
Conférence - Roadmap Medialibs
 
Conférence - L'automatisation des emails au service de la relation client
Conférence - L'automatisation des emails au service de la relation clientConférence - L'automatisation des emails au service de la relation client
Conférence - L'automatisation des emails au service de la relation client
 
Conférence - Définition et enjeux de l'expérience client
Conférence - Définition et enjeux de l'expérience clientConférence - Définition et enjeux de l'expérience client
Conférence - Définition et enjeux de l'expérience client
 
Atelier - La vidéo : le nouvel eldorado de la visibilité sur Internet ?
Atelier - La vidéo : le nouvel eldorado de la visibilité sur Internet ? Atelier - La vidéo : le nouvel eldorado de la visibilité sur Internet ?
Atelier - La vidéo : le nouvel eldorado de la visibilité sur Internet ?
 

Convention Medialibs : Raphaël Goetter (Introduction à la performance web)

  • 1. PERFORMANCE WEB Par quoi commencer ?  Photo : © Raphaël Goetter
  • 2. RAPHAËL GOETTER Alsacréations #CSS #Standards #Webdesign #Responsive #HTML #Accessibilité #WebPerf
  • 4. ON VEUT DES CHIFFRES !  Vous aimez les stats ? 
  • 5. ON VEUT DES CHIFFRES !  Sites e-commerce et attente client 57 % des visiteurs quittent un site e-commerce s'il met plus de 4 secondes à s'afficher – PhoCusWright / Akamai (2010) “ 
  • 6. 26 % des visiteurs quittent un site e-commerce s'il met plus de 2 secondes à s'afficher – PhoCusWright / Akamai (2010) “  ON VEUT DES CHIFFRES !  Sites e-commerce et attente client
  • 7. ON VEUT DES CHIFFRES !  C'est pire sur mobile !  60% des mobinautes s'attendent à un chargement de 3s maximum pour un site mobile – Compuware (2011) “ 
  • 8. ON VEUT DES CHIFFRES !  C'est pire sur mobile !  60% des mobinautes s'attendent à un chargement de 3s maximum pour un site mobile – Compuware (2011) “ … Et 74% quittent une page après 5 secondes d'attente – Compuware (2011) “ 
  • 9. POURQUOI LA PERFORMANCE WEB ?  ❷ Photo : CC Flickr - jdwheaton
  • 10. PARCE QUE ÇA RAPPORTE !  Photo : CC Flickr - jdwheaton
  • 11. +100ms 1% perte de revenus ⬇
  • 12. +100ms 1% perte de revenus ⬇ +500ms -20% de recherches ⬇
  • 13. +100ms 1% perte de revenus ⬇ +500ms -20% de recherches ⬇ -2s +15% de chargements ⬇
  • 14. +100ms 1% perte de revenus ⬇ +500ms -20% de recherches ⬇ -2s +15% de chargements ⬇ -5s +12% de revenus +25% pageviews ⬇
  • 15. MAIS AUSSI (SURTOUT ?) ... Sources : WebRankInfo / 1ere-position.fr / silicon.fr En 2010, Google a annoncé officiellement qu'il tenait compte de la rapidité des sites dans son algorithme de positionnement. Google recommande un délai moyen de 1,5 seconde pour l’affichage d’une page web. ❶ ❷
  • 17. LE TYPE DE CONNEXION EDGE (0,38 Mbit/s) 3G (1,9 Mbit/s) 3G+ (3,6 Mbit/s) H+ (10 Mbit/s) Wi-Fi (25 Mbit/s) ADSL (30 Mbit/s) 4G (40 Mbit/s) Fibre (100 Mbit/s) Source : Wikipedia
  • 18. LE TYPE DE CONNEXION 3G 20 minutes➞ 3G+ 1min 15s➞ 4G 10 secondes➞ Concrètement... Source : Orange (bon OK c'est un peu bullshit marketing) Téléchargement d'un album de musique :
  • 19. LE POIDS DES RESSOURCES Images 700 Ko➞ JavaScript 230 Ko➞ CSS 37 Ko➞ HTML 45 Ko➞ Autres 188 Ko➞ 1,2Mo au total en moyenne :  Source : AlexaRank Top 1000 (janvier - août 2013)
  • 20. LE POIDS DES RESSOURCES Source : http://mobitest.akamai.com
  • 21. LE NOMBRE DE REQUÊTES Images 60 requêtes➞ JavaScript 17 requêtes➞ CSS 3,5 requêtes➞ HTML 10 requêtes➞ Autres 7 requêtes➞ 98 requêtes en moyenne :  Source : AlexaRank Top 1000 (janvier - août 2013)
  • 22. LE NOMBRE DE REQUÊTES … à cause de la latence Latence ● dépend du serveur, du DNS ● dépend de la connexion : ● 20-60ms via ADSL ● 200-600ms en 3G Chargement ● dépend du poids
  • 23. LES RALENTISSEMENTS DIVERS Scripts bloquants CSS bloquants Redirections HTTP/JavaScript Mauvaises requêtes (404) Reflow, repaint navigateur Etc.
  • 24. LES OUTILS POUR TESTER ❹ Photo : © Raphaël Goetter
  • 25. MANUELLEMENT Outil d'audit de Chrome Module d'audit divers (accessibilité, réseau, performances,...) directement intégré au navigateur Chrome : Touche F12 Onglet « Audit » Option « Webpage performance »➞ ➞
  • 26. MANUELLEMENT Extensions : YSlow et PageSpeed  YSlow (Yahoo!) : plugin disponible sur Firefox, Chrome, Safari, Opera PageSpeed (Google) : plugin Chrome, Firefox et en ligne
  • 27. EN LIGNE La référence : WebPageTest.org  Au choix : lieu du serveur, type de connexion, navigateur, etc.
  • 30. EN LIGNE AkamaiMobitest Pour les temps d'affichage sur mobiles
  • 32. QUELQUES SITES PASSÉS AU CRIBLE 7s chargement 78 requêtes 1095ko poids 7.1s chargement 163 requêtes 2203ko poids 7.2s chargement 133 requêtes 808ko poids 7.7s chargement 57 requêtes 1010ko poids
  • 33. QUELQUES SITES PASSÉS AU CRIBLE 2.3s chargement 171 requêtes 2058ko poids Suite... 6.6s chargement 66 requêtes 671ko poids
  • 35. BONNES PRATIQUES GÉNÉRALES Pas de redirections de pages Scripts placés avant </body> et/ou attributs async / defer Évitez @import pour les fichiers CSS Hébergez les ressources sur plusieurs domaines (entre 2 et 4) Déclarez les dimensions des images dans le HTML (width="", height="") Évitez les mauvaises requêtes (404) ❶
  • 36. EN DÉTAIL Hébergez les ressources sur plusieurs domaines«   » Hébergez les ressources (images, médias) sur plusieurs domaines différents. Cette technique favorise leur téléchargement en parallèle. Un sous-domaine fonctionne aussi (ex. media.alsacreations.com), et un domaine sans cookies est encore plus performant. Source : Yahoo!UI blog Opera : 8 / IE10 : 8 / Chrome : 6 / Firefox : 6 / IE8/IE9 : 6 / Safari : 4 / IE6/IE7 : 2 ❶
  • 37. RÉDUIRE LE POIDS DES RESSOURCES Minifiez les fichiers CSS Minifiez les fichiers JS Compressez les images Choississez le bon format d'image (.png, .gif, .jpg) Optez pour des fontes légères (.woff est généralement plus léger) ❷
  • 38. EN DÉTAIL Compressez les images«   » ❷www.kraken.io
  • 39. RÉDUIRE LES REQUÊTES Réunissez les feuilles de styles CSS en une seule si possible Réduisez / réunifiez le nombre de fichiers JavaScript externes si possible N'utilisez pas (ou presque pas) d'images ! → Sprites CSS, → Data-URI, → Caractères unicodes, → Font Icons, ... ❸
  • 40. EN DÉTAIL Font Icons«   » ❸icomoon.io .icon {font-family: "MyFontIcon", sans-serif;} .icon-twitter:before {content: "t";}
  • 41. NE CHARGER QUE LE NÉCESSAIRE Chargez les scripts externes en Asynchrone et/ou Différé N'utilisez pas display : none pour masquer un élément jQuery est parfois inutile et remplaçable par jQuip ou Zepto.js, plus légers Triez les scripts nécessaires et les scripts de confort JavaScript est parfois avantageusement remplaçable par CSS3 : bordures, arrondis, ombrages, animations, formes simples (triangles, ronds, carrés) Pensez à faire du chargement conditionnel de ressources (selon taille d'écran, pixel-ratio, ...) ❹
  • 42. EN DÉTAIL Charger conditionnellement les éléments«   » ❹@media (min-width : 768px) { .deco {background: url(concombre-big.jpg);} } @media (max-width : 767px) { .deco {background: url(concombre-small.jpg);} } concombre-big.jpg concombre-small.jpg
  • 43. CÔTÉ SERVEUR Compressez les fichiers texte côté serveur (HTML, CSS, JS) Générez certaines pages « à l'avance » (ex. flux RSS) Gérez les durées de cache des éléments ❺
  • 44. EN DÉTAIL Durée d'expiration du cache«   » ❺<IfModule mod_expires.c> ExpiresActive On ExpiresByType text/plain "access plus 1 day" ExpiresByType text/html "access plus 1 hour" ExpiresByType application/x-javascript "access plus 3 months" ExpiresByType application/javascript "access plus 3 months" ExpiresByType text/css "access plus 3 months" ExpiresByType image/gif "access plus 3 months" ExpiresByType image/x-icon "access plus 3 months" ExpiresByType image/png "access plus 3 months" ExpiresByType image/jpeg "access plus 3 months" ExpiresByType application/xml "access plus 1 hour" # ExpiresDefault "access plus 1 day" </IfModule> Outil Google : Google ModPagespeed
  • 45. Polices : League Gothic + Segoe UI Light Photos : Fotolia + mon super APN Pictos : IconFinder (Visual Pharm, Designmodo) MERCI, BISOUS Raphaël Goetter www.alsacreations.fr @goetter Crédits