Performance Front-End SEO Campus Refficience.com Consultant Webperformance & SEO Fondateur de la société Refficience #seocampus Thomas.

Slides:



Advertisements
Présentations similaires
ISO Lignes directrices relatives à la responsabilité sociétale
Advertisements

« Les Mercredis du développement » Gestion de la navigation avancée
Novembre 2005 – Michel Desconnets PHP : théorie Objectif : introduire les concepts globaux permettant d'aborder la programmation en PHP.
Sébastien Billard - Consultant SEO Identifier et corriger ce qui bloque un référencement - Structure - Contenu - Popularité
Open Days 2006 Le Web 2.0 demain: produits, technologies, outils.
Conception de Site Webs dynamiques Cours 6
Conception de Site Webs Interactifs Cours 3
Conception de Site Webs Interactifs Cours 4
Aperçu des architectures des systèmes d’information web
TOUQUET Arnaud ▪ GI05 BLONDEEL Igor ▪ GM05
Internet.
Exposé de Système - Informatique et Réseau
SVG: Scalable Vector Graphics Exemple: Vienne Christine Potier, INF347, 20 juin 2008.
AVOCATS & DIGITAL The end of lawyers ?. LENJEU ?
Le Téléphone Russe Le Téléphone Russe. Le Téléphone Russe Le Téléphone Russe.
2006/2007Denis Cabasson – Programmation Web Cours de programmation web ENSAE
La Mêlée Numérique 11.0 Les Ateliers ecommerce mesurer la performance 24 avril 2007.
Comprendre l’environnement Web
Ajax. Contexte Dabord, il y a eu les terminaux des ordinateurs centraux (environnements TSO, CICS, etc.) et les terminaux plein écran des environnements.
Lycée Louis Vincent Séance 1
Identifier ce qui peut gêner ou bloquer votre référencement Sébastien Billard, consultant référencement.
LA PLUS GRANDE PLATEFORME VIDEO DU MONDE
LE REFERENCEMENT NATUREL S.E.O. (Search Engine Optimisation)
Médiathèque de Sélestat - 5 février 2005 Olivier Andrieu Comment ne pas être visible sur les moteurs de recherche.
ASP.NET Par: Hugo St-Louis. C ARACTÉRISTIQUES A SP. NET Évolution, successeur plus flexible quASP (Active Server Pages). Pages web dynamiques permettant.
SITES E-COMMERCE RESPONSIVE
Internet : la mémoire courte ? Capture de sites Web en ligne Conférence B.N.F, Avril 2004 Xavier Roche(HTTrack)
Comment optimiser la visibilité de vos contenus sur les principaux moteurs de recherches ? Rédaction de contenus SEO friendly Publication on-line.
ISICIL SWEETDEKI Intégration du logiciel Mindtouch Core dans la plate-forme ISICIL Guillaume HUSSON.
Clients riches RIA (Rich Internet Application) / RDA
PhP-MySQL Pagora 2012/2013 CTD 1 - Presentation de moi ^^
AJAX.
Document élaboré à Centrale Paris par Pascal Morenton LES TECHNOLOGIES DU WEB 1. LES PHASES D UN DEPLOIEMENT DE RESEAUX 2. LE LANGAGE HTML 3. LE LANGAGE.
1 Référencer ses pages web Principes – Référencement passif (SEO) – Référencement actif (SEM) – Maîtrise des outils [Source : formation au référencement.
1 Référencement (phase 2) Rappel SEO (acquis) Analytics (suivi daudience) SEM (liens sponsorisés)
© 2006 Microsoft Corporation. Bonjour et Bienvenue !
-Présentation de l’équipe -Cadre du projet -Enjeux -Choix du sujet.
Développement Web Open Source haXe et les outils « open source » Première partie.
Le langage du Web CSS et HTML
PROGRAMMATION WEB FRONT-END.
JavaScript Nécessaire Web.
0 Objectifs de la session n°1  Revenir sur toutes les bases théoriques nécessaires pour devenir un développeur Web,  Découvrir l’ensemble des langages.
Les réseaux - Internet Historique Réseau local Internet Les protocoles
Cours de programmation web
Référencement naturel
Edge Computing & ESI ZHU Yidong Master 2 Professionnel Génie informatique Année
Merci de lire le dossier d’Abondance (Olivier Andrieu) 20 conseils pour résoudre les problèmes de référencement m/2010/09/20-conseils-pour-reussir-
Auteur : Frédéric Thériault 1. Les titres  (de 1 à 6) Titre 1 Titre 2 Titre 3 Titre 4 Titre 5 Titre 6 2.
S'initier au HTML et aux feuilles de style CSS Cours 5.
D4 : Organiser la recherche d'informations numériques
http 1.1.  connexion persistante Browser Mozilla Firefox Adresse ip.
Campus-Booster ID : **XXXXX Copyright © SUPINFO. All rights reserved Le développement Web.
420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.
P2pWeb Une boite à outils pour construire un réseau coopératif d’hébergement de site Web –Réseau coopératif réseau physique de nœuds sur l ’Internet réseau.
Page 1Dernière mise à jour: 17 avril 2015 Service de l'enseignement des technologies de l'information, © HEC Montréal, Tous droits réservés.
Créez des applications Silverlight 3 David Rousset Relations Techniques avec les développeurs Microsoft France
Introduction au socle MEAN
Module : Pages Web Dynamiques (Production Électronique Avancée)
S'initier au HTML et aux feuilles de style CSS Cours 5.
Initiation au JavaScript
Présentation ESTRABOX
Paramètre à améliorer : Paramètre qui se dégrade : N°7 - Volume de l’objet mobile N°3 - Longueur de l’objet mobile Principe Technique d’Innovation n°
Description générale: Le front office regroupe différents mini- jeux et les alimente en contenu. Nous fournissons ainsi une enveloppe de jeux paramétrable.
INF2005– Programmation web– A. Obaid Les métadonnées.
Conception de site web. Place du Web dans le monde  Entreprises  Commerce électronique  Réseaux sociaux  Les municipalités  Les partis politiques.
Temps de chargement T’as pas un site performant ? THOMAS SOUDAZ / DAMIEN JUBEAU SEOCAMPUS - 07/04/
Création d’un site WEB 1 – Un site WEB c’est quoi ? 2 – Questions à se poser avant la construction d’un site WEB 3 – Principes de fonctionnement d’un site.
APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Valérie Bellynck, Benjamin Brichet-Billet, Mazen.
Responsive Web Design Performant 8 juin Thomas SOUDAZ Fondateur de la société Refficience, Consultant WebPerf et SEO Site : Refficience.com .
Transcription de la présentation:

Performance Front-End SEO Campus 2012

@tsoudaz Refficience.com Consultant Webperformance & SEO Fondateur de la société Refficience #seocampus Thomas SOUDAZ

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 Amit Singhal, Matt Cutts et dautres googlers : La vitesse est un facteur parmi nos 200 autres facteurs 1 Février Matt Cutts : 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 Jake Brutlag :

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 dexploration dans les Webmaster Tools Mesure passive utilisée en SEO GoogleToolbar Projet doptimisation PageSpeed Service mod_pagespeed pour Apache Protocole SPDY Google Public DNS Chrome…

WebPerf Front-end 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%. HTML

Anatomie dune Page web Source : Répartition moyenne du poids des pages par type de contenu 62% !

Vers lindigestion ? Poids total moyen dune page et Nombre de ressources Source : Poids total en Ko Nombre de requête HTTP

La performance recule Score Google PageSpeed Source : Obtenir son score PageSpeed :

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

Pourquoi la vitesse compte ? source : Akamaïsource : Aberdeen Groupsource : Sean Power sec ?

« Près de 57% des consommateurs abandonneront leur panier après avoir attendu plus de trois secondes » StrangeLoop Network Source : andysnotebook.com

Pistes doptimisation 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

Optimiser le cache navigateur Utiliser des dates dexpiration 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 Noubliez pas les proxys Paramètres sur les ressources statiques : « Cache-control: public » :

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

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

Vitesse de Rendu navigateur Javascript bloquants : document.write Chargement Asynchrone/onload CSS dans le head Responsive design ? Oui mais…

Cas Client A 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 Avant Après Monitoring actif : Webpagetest.org

Résultats Client

Thomas SOUDAZ Consultant