Les performances front-end et son impact sur le SEO. Des constats sur l'évolution des performances et les principales grandes pistes d'optimisations.
Besoin d'un audit pour boostez vos temps de chargement ?
Rendez-vous sur : http://refficience.com/contact/
2. Thomas SOUDAZ
Consultant Webperformance & SEO
Fondateur de la société Refficience
@tsoudaz
#seocampus Refficience.com
3.
4. Google a dit
“Chez Google nous sommes obsédés par la vitesse de nos produits et
du web.”
“Nous avons décidé de prendre en compte la vitesse des sites dans le
classement de nos résultats de recherche”
9 Avril 2010 - Amit Singhal, Matt Cutts et d’autres googlers :
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
“La vitesse est un facteur parmi nos 200 autres facteurs”
1 Février 2010 - Matt Cutts : http://www.youtube.com/watch?v=muSIzHurn4U
“Nous avons mesuré que ralentir le temps de chargement de nos
pages de 100 à 400 millisecondes faisait baisser le volume total de nos
recherches de -0.2% à -0.6%”
“le coût induit par la lenteur est croissant et persiste dans le temps”
24 Juin 2009 - Jake Brutlag : http://googleresearch.blogspot.com/2009/06/speed-matters.html
5. Google acteur de la vitesse
Diagnostique
PageSpeed pour Firefox et Chrome
PageSpeed Online
PageSpeed For Mobile
PageSpeed API
Outils Mesure
Vitesse de Site dans Google Analytics
Statistiques de crawl
Vitesse d’exploration dans
les Webmaster Tools
Mesure passive utilisée en SEO
GoogleToolbar
Projet d’optimisation
PageSpeed Service
mod_pagespeed pour Apache
Protocole SPDY
Google Public DNS
Chrome…
6. WebPerf Front-end
HTML
Le back-end (Génération du HTML
côté serveur) représente en
moyenne 12% du temps de
chargement global.
Le front-end : images / javascript
/ css / vidéo / flash - 88%.
7. Anatomie d’une Page web
Répartition moyenne du poids des pages par type de contenu
62% !
Source : http://httparchive.org
8. Vers l’indigestion ?
Poids total moyen d’une page et Nombre de ressources
Poids total en Ko
Nombre de requête HTTP
2010 2011 2012
Source : http://httparchive.org
9. La performance recule
Score Google PageSpeed
Obtenir son score PageSpeed :
https://developers.google.com/pagespeed/
2010 2011 2012
Source : http://httparchive.org
10. Quand la vitesse impacte le SEO
Expérience de Crawl de Googlebot/2.1
Meilleur temps de réponse
Augmentation du nombre de pages crawlées
Indexation des nouveaux contenus accélérée
Double peine
Redirection ou succession de redirections
Erreurs HTTP
11. Pourquoi la vitesse compte ?
2 sec ?
2013
source : Akamaï source : Aberdeen Group source : Sean Power
12.
13. « Près de 57% des consommateurs abandonneront leur
panier après avoir attendu plus de trois secondes »
StrangeLoop Network
Source : andysnotebook.com
14. Pistes d’optimisation
1. Optimiser le Cache
2. Limiter le nombre de ressources
3. Réduire le poids des ressources et des entêtes
4. Améliorer la vitesse de rendu navigateur
15. Optimiser le cache navigateur
Utiliser des dates d’expiration lointaine
• Pour les fichiers statiques qui ne changent pas
• Et pour les autres aussi !*
*En faisant du versioning de fichier
Ex : style_v3.css
Utiliser des fichier externes pour les grosses ressources JS et CSS
N’oubliez pas les proxys
Paramètres sur les ressources statiques :
« Cache-control: public » :
16. Limiter le nombre de ressources
Concaténation des fichiers JS et CSS
Utilisation de Sprites CSS
Utilisation du CSS3 : dégradation élégante
Toutes les applications tiers / scripts sont-elles utiles
?
Lazyloading
17. Régime !
Compresser les images
Lossless (sans perte de qualité optimisation en masse)
Lossly (cas par cas)
Compresser les fichiers de type « text »
Minifier les documents CS, JS et HTML
18. Vitesse de Rendu navigateur
Javascript bloquants : document.write
Chargement Asynchrone/onload
<link> CSS dans le head
Responsive design ? Oui mais…
19. Cas Client A
Avant
Après
Nombre de requêtes HTTP divisé par deux
Bande passante réduite de 40%
Temps de chargement réduit de 33% pour un nouveau visiteur
Temps de chargement réduit de 36% avec les éléments en cache
Monitoring actif : Webpagetest.org
Google et « Jake a dit » - Google une société qui développe une névrose de la vitesse !Etude intitulé « Speed Matters »
Google mobilise beaucoup d’ingénieurs autour de la VitesseGoogle est présent et sponsor de toutes les conférences internationales #VelocityChrome et SPDY sont des initiatives extrêmement prometteuses
L’essentiel des optimisations possibles se font sur le front-end et non côté serveur.
Httparchive.org est un site qui observe et enregistre le comportement de dizaine de milliers de Homepage de sites (+50 000) dont le top 1M Alexa, Top 500 des plus grandes entreprises et Top 10K QuantCast4,5% HTML3,5% CSS8,5% flash18% Javascript62% Images
Poussé par le web social et les interfaces riches le poids total des pages et le nombres de ressources par page augmente rapidementLes pages web ont grossie de +38% en 15 moisLe nombre moyen de ressource par page de +16%
Les notes de performance se dégradent ET les temps de chargement également!
La vitesse impacte indirectement le SEO : Surface d’indexation et Fraîcheur des contenus. Très mauvaises pratiques : une redirection inutile c’est 500ms de perdu – Les Erreurs HTTP bloquent le téléchargement des ressources de la page 30% des pages contiennent des Erreurs HTTP 65% des pages contiennent au moins une redirection
Les internautes sont de moins en moins patientsla seconde supplémentaire coûte cher quelque soit le modèle économique Impact potentiel sur les parts de marché
AOL a segmenté son audience en 10 groupes de visiteurs des plus rapides au moins rapides.Le groupe ayant les temps de chargement réalise 50% de pages vues en plus.Amazon qui est l’un des sites e-commerce les plus exigeant sur la webperf a mesuré que pour chaque 100ms économiséIls voyaient leur revenus augmenter d’un pourcent !
Meilleurs sont vos règles de cache, moins vous dépendez du réseau pour afficher vos pagesLes utilisateurs réguliers (clients) sont fortement impactés par ces optimisationsLes Aller/Retour Navigateur du client Serveur sont coûteux Réduisez / Concatenez les ressources de vos pages.« Si l’efficacité d’un élément qui ralentit vos pages n’est pas prouvé, il faut songer à le retirer ».Réduire le poids des ressources : Compression / Minification / Optimisation du code et de l’intégration - Réduire l’upload, l’upload même sous ADSL les requêtes envoyés au seveur sont lentesFaciliter le travail du navigateur en lui servant un contenu simple à interpréter et à dessiner.