Webperf Front-End SeoCampus 2012

4 901 vues

Publié le

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/

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 901
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 072
Actions
Partages
0
Téléchargements
56
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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.
  • + Bibliothèques Javascript sur les CDN de Google
  • Webperf Front-End SeoCampus 2012

    1. 1. Performance Front-End SEO Camp’us 2012
    2. 2. Thomas SOUDAZ Consultant Webperformance & SEO Fondateur de la société Refficience @tsoudaz #seocampus Refficience.com
    3. 3. Google a dit“Chez Google nous sommes obsédés par la vitesse de nos produits etdu web.”“Nous avons décidé de prendre en compte la vitesse des sites dans leclassement 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 nospages de 100 à 400 millisecondes faisait baisser le volume total de nosrecherches 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
    4. 4. Google acteur de la vitesseDiagnostique PageSpeed pour Firefox et Chrome PageSpeed Online PageSpeed For Mobile PageSpeed APIOutils Mesure Vitesse de Site dans Google Analytics Statistiques de crawl Vitesse d’exploration dans les Webmaster ToolsMesure passive utilisée en SEO GoogleToolbarProjet d’optimisation PageSpeed Service mod_pagespeed pour Apache Protocole SPDY Google Public DNS Chrome…
    5. 5. WebPerf Front-endHTML  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%.
    6. 6. Anatomie d’une Page webRépartition moyenne du poids des pages par type de contenu 62% ! Source : http://httparchive.org
    7. 7. Vers l’indigestion ? Poids total moyen d’une page et Nombre de ressources Poids total en Ko Nombre de requête HTTP2010 2011 2012 Source : http://httparchive.org
    8. 8. La performance recule Score Google PageSpeed Obtenir son score PageSpeed : https://developers.google.com/pagespeed/2010 2011 2012 Source : http://httparchive.org
    9. 9. Quand la vitesse impacte le SEOExpé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
    10. 10. Pourquoi la vitesse compte ? 2 sec ? 2013source : Akamaï source : Aberdeen Group source : Sean Power
    11. 11. « Près de 57% des consommateurs abandonneront leurpanier après avoir attendu plus de trois secondes » StrangeLoop Network Source : andysnotebook.com
    12. 12. Pistes d’optimisation1. Optimiser le Cache2. Limiter le nombre de ressources3. Réduire le poids des ressources et des entêtes4. Améliorer la vitesse de rendu navigateur
    13. 13. 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 » : 
    14. 14. 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
    15. 15. 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
    16. 16. Vitesse de Rendu navigateur Javascript bloquants : document.write  Chargement Asynchrone/onload  <link> CSS dans le head Responsive design ? Oui mais…
    17. 17. Cas Client AAvantAprè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
    18. 18. Résultats Client
    19. 19. Thomas SOUDAZConsultant webts@refficience.com @tsoudaz

    ×