Performances web, pourquoi les optimiser pour mobile et desktop

Performances web Pourquoi les optimiser pour mobile et desktop

• Mesure du temps de chargement des sites côté client
• Techniques et outils pour le réduire Déﬁnition

Pourquoi la WebPerf ?

#MardiConfession Je n’aime pas attendre ...et je ne suis pas
le seul

57% des visiteurs abandonnent une page qui met plus de
3s à s’afﬁcher

“Ce site est lent, c’est la faute des développeurs”

85% des internautes s’attendent à ce qu’un site s’afﬁche au
moins aussi vite que sur desktop

Vous n’êtes pas des internautes moyens

• Machine récente • Navigateur à jour • Connexion ﬁbre
/ 4G • Connaissances techniques Vous n’êtes pas des internautes moyens

Site lent = visiteurs stressés, anxieux, inattentifs

“Phone rage” 4% ont jeté leur téléphone à cause d’un
site trop lent

Nov. 2010 Nov. 2012 Mai 2013 Nov. 2013 Mai 2014
702 1 280 1 520 1 820 2 240 Source : HTTP Archive Poids moyen des pages

Parlons budget

Google +250ms = 25% de recherches en moins (et l’effet
a perduré 6 mois après la ﬁn du test)

+100ms au chargement = 1% de ventes en moins Amazon

Shopzilla -5s au chargement des pages = 50% de serveurs
en moins (!)

Activer la compression = -43% de trafic sortant Netflix Netflix
représente 32% du trafic Internet US entre 20h et minuit

Augmentation des revenus + Réduction des coûts matériel Budget WebPerf

• Design • Développement • Optimisation SEO / Achat de
trafﬁc • WebPerf ! À prévoir au budget

Mesurer

Mesurer • Page Speed • Yslow • WebPageTest • Mobitest

Real User Monitoring La route du RUM

Real User Monitoring • Google Analytics • Boomerang (Yahoo)

navigation.timing

Mesurer • Automatiser • Comparer

Améliorer

Envoyer moins de données

Prioriser Contenu > Présentation > Interaction

Contenu • Le HTML • Envoyer morceau par morceau (ﬂush)
• Optimiser la BDD • Utiliser un cache statique côté serveur

Présentation • Écran vide tant que la CSS n’est pas
arrivée • Texte masqué tant que les webfonts ne sont pas téléchargées • Concaténer ! • Miniﬁer !

Interactivité • Le HTML doit être utilisable sans JS •
JS bloque le parseur HTML • Utiliser async & defer • Attention aux widgets externes et aux régies publicitaires !

Valeur Complexité En dernier À planiﬁer À étudier On fonce
!

Faible complexité Forte valeur • Activer GZIP • Conﬁgurer les
en-têtes de cache • Miniﬁer CSS & JS • Images inline

Forte complexité Forte valeur • JS en ﬁn de <body>
• Concaténer CSS & JS • Optimiser les images • Optimiser les boutons de partage

Faible complexité Faible valeur • Utiliser des sprites • Éliminer
les 404 • Éviter les redirections

Forte complexité Faible valeur • Optimiser les webfonts • Utiliser
un CDN • Optimiser les certiﬁcats TLS

Récapitulons 1. L’ajouter au budget 2. Mesurer 3. L’améliorer !
4. S’informer

Sources • http://www.strangeloopnetworks.com/resources/infographics/web- performance-and-user-expectations/mobile-device-users-expect-sites-to-load- fast/ • http://www.webperformancetoday.com/2013/06/05/web-page- growth-2010-2013/ • http://www.webperformancetoday.com/2011/10/21/phone-rage-how-people-
react-to-slow-mobile-sites/ • http://www.guypo.com/business/17-statistics-to-sell-web-performance- optimization/ • http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-ﬂush/ • https://developer.mozilla.org/en-US/docs/Navigation_timing • http://fr.slideshare.net/jpvincent/techniques-dacceleration-des-pages-web • http://checklists.opquast.com/webperf

Questions https://speakerdeck.com/ goulvench/performances-web- pourquoi-les-optimiser-pour- mobile-et-desktop @goulvench RDV à Paris Web
et à Sud Web !

Performances web, pourquoi les optimiser pour mobile et desktop

Performances web, pourquoi les optimiser pour mobile et desktop

More Decks by Goulven Champenois

Other Decks in Technology

Featured

Transcript