PERFORMANCE WEBPar quoi commencer ? 

Photo : © Raphaël Goetter

RAPHAËL GOETTERAlsacréations

#CSS #Standards #Webdesign #Responsive

#HTML #Accessibilité #WebPerf

L'INTERNAUTEN'AIME PASATTENDRE

❶

!

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

+100ms1% perte de revenus

⬇

+100ms1% perte de revenus

⬇+500ms

-20% de recherches⬇

+100ms1% perte de revenus

⬇+500ms

-20% de recherches⬇

-2s+15% de chargements

⬇

+100ms1% 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 QUIRALENTITLE 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

MANUELLEMENTOutil 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 »➞ ➞

MANUELLEMENTExtensions : YSlow et PageSpeed 

YSlow (Yahoo!) : plugin disponible sur Firefox, Chrome, Safari, Opera

PageSpeed (Google) : plugin Chrome, Firefox et en ligne

EN LIGNELa référence : WebPageTest.org  

Au choix : lieu du serveur, type de connexion, navigateur, etc.

EN LIGNEHttparchive.org

FilmStrip !

EN LIGNEGoogle PageSpeed Insights

EN LIGNEAkamai Mobitest

Pour les temps d'affichage sur mobiles

QUELQUESEXEMPLES

❺

QUELQUES SITES PASSÉS AU CRIBLE

7schargement

78requêtes

1095kopoids

7.1schargement

163requêtes

2203kopoids

7.2schargement

133requêtes

808kopoids

7.7schargement

57requêtes

1010kopoids

QUELQUES SITES PASSÉS AU CRIBLE

2.3schargement

171requêtes

2058kopoids

Suite...

6.6schargement

66requêtes

671kopoids

ACCÉLÉREZ VOSPAGES 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ÉTAILHé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ÉTAILCompressez les images«   » ❷

www.kraken.io

RÉDUIRE LES REQUÊTES

Réunissez les feuilles de styles CSSen une seule si possible

Réduisez / réunifiez le nombre defichiers JavaScript externes si possible

N'utilisez pas (ou presque pas)d'images !

→ Sprites CSS,→ Data-URI, → Caractères unicodes,→ Font Icons, ...

❸

EN DÉTAILFont 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ÉTAILCharger 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ÉTAILDurée d'expiration du cache«   » ❺

<IfModule mod_expires.c>ExpiresActive OnExpiresByType 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