Découvrez nos différentes Expertises métiers à travers, l’Acquisition de trafic,l’Analyse du trafic, et la Conversion. Avec un seul et même objectif: Transformezvos visiteurs en clients.
Menu-Expertises-300x131
Référencement payant Optimisez la visibilité de votre site internet sur vos mots clés stratégiques
référencement-payant_Plan-de-travail-1-420x300
Google Ads Choisissez vos visiteurs et maîtrisez mieux vos dépenses publicitaires sur Google, le premier moteur de recherche en France.
Google Adwords
Bing Bing, second moteur de recherche mondial, avec un coût par clic et un coût d’acquisition plus faible que Google.
BING_Plan-de-travail-1-420x300
Remarketing / retargeting dynamique Relancez vos prospects qui ont visité votre site et rentabilisez vos coûts d’acquisition.
Retargeting-remarketing-dynamique-_Plan-de-travail-1-420x300
Google Shopping Placez les visuels de vos produits en tête de gondole sur le comparateur de prix leader de Google.
Google-shopping_Plan-de-travail-1-420x300
Display Gagnez en visibilité ou en notoriété grâce aux opportunités du display avec Google.
Ggogle-display_Plan-de-travail-1-420x300
Référencement naturel Atteignez la première page des résultats de recherche en optimisant votre site web.
référencement-naturel_Plan-de-travail-1-420x300
SEO On site La priorité de votre optimisation SEO consiste à travailler votre référencement OnSite.
SEO-on-site-420x300
SEO Off site Ne sous-estimez pas l’importance du référencement naturel Off-Site sur votre site internet.
SEO-off-site-420x300
Web Analytics La Data est le pétrole du 21 ème siècle. Elle vous offre la possibilité d’analyser et comprendre vos visiteurs et d’ajuster vos actions.
web-analytics-01-420x300
Google Analytics Apprenez à mieux connaître vos clients en optimisant votre compte Google Analytics.
google-analytics_Plan-de-travail-1-420x300
Call Tracking Mesurez précisément le nombre de ventes ou devis réalisés grâce aux appels entrants.
Call-tracking_Plan-de-travail-1-420x300
Rich Lead Monitoring Croisez vos données avec la solution R&D PumpUp pour mesurer la rentabilité digitale de vos actions.
rich-lead-monitoring_Plan-de-travail-1-420x300
Google Data Studio Rassemblez et transformez vos datas tableaux de bord partageables pour vous aider dans la prise de décision.
Google-Data-studio-420x300
Google Tag Manager Simplifiez l’installation et la gestion de vos scripts de tracking.
Google-Tag-manager-420x300
Data Conciergerie Suivi vos performances webanalytics et prenez les bonnes décisions.
Data-conciergerie_Plan-de-travail-1-420x300
Matomo (Piwik) Piwik, aujourd’hui appelée Matomo, est une alternative webanalytics à Google Analytics, libre et open source, pour garder vos données chez vous
Matomo_Logo.svg
Workshop Atelier stratégique Réalisez un diagnostic et un plan d’actions sur votre présence digitale.
Workshop_Plan-de-travail-1-420x300
Réseaux sociaux Développez et engagez avec succès vos communautés sur les médias sociaux.
réseaux-sociaux-01-420x300
Facebook Ads Si votre cible est présente sur Facebook alors vous avez tout intérêt à annoncer sur Facebook Ads, le ciblage étant très précis cela vous permettra d’obtenir une audience de qualité pour vos campagnes publicitaires.
Facebook_Plan-de-travail-1-420x300
Youtube Gagnez en impact avec vos vidéos sur YouTube.
Youtube_Plan-de-travail-1-420x300
Brand Content Maîtrisez mieux ce qui se dit de votre marque et influencez naturellement vos cibles.
brand-content_Plan-de-travail-1-420x300
Conversion Vous pouvez avoir de nombreux visiteurs sur votre site, cependant s’ils ne convertissent pas il n’y a pas grand intérêt.
Conversion-420x300
Landing page Créez des pages spécifiques pour vos annonces, collectez les données de manière optimisée et augmentez vos conversions.
Landing-page_Plan-de-travail-1-420x300
Test A/B Testez votre site et augmentez vos conversion et vos ventes.
test-A-B_Plan-de-travail-1-420x300
Test Utilisateur Identifiez les points de blocage de votre site pour booster vos conversions.
test-utilisateur_Plan-de-travail-1-420x300
Audit Ergonomique Optimisez votre tunnel de conversion en identifiant les éléments défaillants.
Audit-ergonomique_Plan-de-travail-1-420x300
Eye Tracking Analysez et comprenez le regard utilisateur et optimisez vos conversions.
eye-tracking-_Plan-de-travail-1-420x300
Newsletter et emails Créez un rendez-vous régulier et fidélisez votre communauté.
newsletter_Plan-de-travail-1-420x300
Linkedin Ads Crée en 2003 en Californie le réseau social professionnel Linkedin revendique environ 400 Millions de membres. Découvrez la publicité via Linkedin Ads avec nos Experts.
Linkedin_Plan-de-travail-1-420x300
// Add the new slick-theme.css if you want the default styling

J'ai perdu patience !

Différentes études ont montré que le temps de chargement d'une page web est directement lié au taux de rebond.

Performance et taux de rebond

Ainsi un site de designer a réalisé un sondage pour connaître les raisons de sortie d'un site : le temps de chargement apparaît comme une cause importante de « rebond ».

 

Relation entre le temps de chargement et le taux de rebond. Relation entre le temps de chargement et le taux de rebond.

Les grands sites ont également étudié cette question, avec des conclusions identiques :

  • Amazon indique qu'un temps de chargement de 100ms en moins augmente son chiffre d'affaire de 1%.
  • Google perd 20% de recherche lors d'un chargement allongé de 500ms.
  • Yahoo auto annonce avoir diminué son taux de rebond de 9 à 5% en gagnant 400ms de temps de chargement

Il est facile de comprendre qu'un site rapide est beaucoup plus agréable à utiliser.
Akamai -un grand fournisseur de trafic web- a commandé une étude chez Forrester Consulting, dont les enseignements sont éloquents :

  • Les visiteurs s’impatientent lorsque la page met plus de 2 secondes à s'afficher : 47% des visiteurs estiment qu'une page web ne doit pas mettre plus de 2 secondes pour s'afficher et 40% des visiteurs n'attendent pas plus de 3 secondes, augmentant ainsi le taux de rebond (des temps en nette diminution depuis la dernière étude de 2006).
  • La fidélité des acheteurs en ligne est inversement proportionnelle à la vitesse d'affichage de page : 52% des acheteurs en ligne affirment que la vitesse de chargement  est importante pour leur fidélité (12% seulement dans l'étude de 2006).
  • Les acheteurs en ligne détournent leur attention lorsque l'affichage de la page est long : 14% vont voir un autre site et 23% arrêtent.
  • Il en résulte un manque à gagner pour les sites contre-performants : 79% des acheteurs en ligne ne reviennent pas sur un site après une mauvaise expérience de visite (17% en 2006) et 64%  se rendent sur un autre site.
  • L'impact dépasse le web : 46% des clients en ligne insatisfaits on plus de chance de développer une perception négative de la société et 44% vont en faire part à leurs amis et famille.

Le manque de performance d'affichage sera beaucoup plus sensible pour le visiteur qui vous a trouvé depuis un moteur de recherche en moins de 500ms pour obtenir le résultat de sa recherche.

Je veux améliorer la performance de mon site !

Voici quelques pistes pour vous permettre d'accélérer l'affichage de vos pages web, et en premier lieu, l’outil Firebug. Dans l'onglet "Réseau" on observe le graphe de chargement des éléments.

Graphe de chargement d'une page du site skype.com. Graphe de chargement d'une page du site skype.com.

Constatation importante : La génération de la page HTML ne prend qu'une toute petite partie du temps de chargement de la page complète. L'optimisation du « backend » n’est donc pas très utile, et il vaux mieux optimiser la suite du chargement.

1ère optimisation : réduire le nombre de requêtes HTTP

Chaque élément transféré pour construire la page web utilise une requête HTTP au serveur Web.

Illustration d'une requête HTTP Illustration d'une requête HTTP

On peut constater sur ce schéma que chaque requête nécessite du temps de transfert sur internet ainsi que du temps de prise en charge par le serveur Web.
Pour gagner du temps, l'idée est de réduire le nombre d'éléments à transférer.
3 types d'éléments se prêtent plus facilement à ce type d'optimisation.

Les feuilles de style

De manière générale, on différencie le contenu de la page HTML de la mise en forme via les feuilles de style CSS.
Très souvent la mise en forme d'une page web utilise plusieurs fichiers CSS. Dans l'exemple de Skype ci dessus,  la page utilise 6 fichiers CSS. Soit 6 requêtes HTTP. De plus, les feuilles de style nécessitent une interprétation par le navigateur qui retarde les autres téléchargements.

La solution la plus simple est de placer toutes les règles de style dans un seul fichier CSS. Cette solution n'est pas forcément meilleure pour la maintenance, et votre site utilise peut être des styles assez différents suivant les sections. Dans ce cas il vaut mieux séparer vos styles en quelques fichiers.

Une autre solution consiste à utiliser un script serveur qui va « concaténer » à la volée les différents fichiers CSS. Bien entendu il faut faire attention à l'ordre de concaténation, et là encore il peut être judicieux de séparer différentes sections.

Il n'est pas rare de naviguer sur un site utilisant des thèmes nécessitant une dizaine de fichiers CSS. Et pour lesquels il est aisé de concaténer les styles dans 2 fichiers !

Les images de style CSS-image

Ce sont les images utilisées par les styles. Elles sont statiques et ne servent que pour la mise en forme de la page. Ce sont généralement des fonds de pages, des boutons, des survols et des habillages.
L'idée est de grouper différentes images dans une image plus grande. Évidemment là encore il faut grouper de manière intelligente. Tout n'est pas groupable !

Exemple de fond de boutons en sprites Exemple de fond de boutons en sprites

Cette méthode se nomme "css sprites" : un peu technique mais vous trouverez aisément toute l'aide nécessaire via Google.

Les scripts Javascript

Pour plus d'interactions et de « tracking » les pages modernes utilisent Javascript. Au risque de multiplier les fichiers de scripts. Notre exemple de Skype utilise 12 fichiers javascript. De plus les fichiers de scripts nécessitent  une interprétation par le navigateur qui retarde les autres téléchargements.
L'idée là encore est de regrouper certains fichiers : ce qui peut être fait manuellement ou à la volée en utilisant un script serveur (dans cette optique Yahoo fournit outils et documentations).

A propos de Javascript, afin d'accélérer le rendu de la page par le navigateur, on dispose le chargement des fichiers scripts qui le peuvent juste avant le </body>.

2ème optimisation : réduire la taille des transferts

Le poids des éléments transférés influe évidemment sur la vitesse d'affichage.

gzip des transferts

Tous les éléments textes de la page peuvent être transférés compressés. C'est une simple opération de configuration du serveur Web qui permet de gagner facilement pas mal de poids.
Voici les lignes de configuration pour Apache 2.2 :

#Sous Apache2 mod_gzip est devenu mod_deflate
<IfModule mod_deflate.c>
<Location />
# Insert filter
SetOutputFilter DEFLATE
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
# BrowserMatch bMSIE no-gzip !gzip-only-text/html
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch bMSI[E] no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI
.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</Location>
</IfModule>

poids des images

Les images représentent généralement la plus grande partie du volume de données.

Utiliser des images dont la taille correspond exactement à l'emplacement prévu. Par ailleurs, pour accélérer la mise en forme de la page par le navigateur, il faut spécifier la taille dans la balise <img>.

Le format doit être adapté à l'image, généralement du JPEG ou du PNG. Ces formats contiennent des informations optionnelles qui peuvent être enlevées pour alléger le poids.

De plus le PNG peut coder l'image en différentes profondeurs de couleurs, en 32, 24 ou 8 bits : utilisez le format le plus léger en fonction de l'image.

Pour vous aider dans cette tâche utilisez Optipng et smushit.

3ème optimisation : bien gérer le cache

Une bonne gestion du cache ne va pas changer la vitesse du premier affichage. Mais cela va considérablement accélérer les autres visites de la page et même du site.

Exemple de bonne gestion du cache Exemple de bonne gestion du cache

Il s'agit là essentiellement de paramétrage du serveur Web.

Deux directives HTTP permettent de gérer le cache.

Il y a Cache-Control: public; qui autorise la mise en cache par le navigateur et par les proxys publics. Si vous avez un système d'authentification sur vos pages définissez plutôt Cache-Control: private;.

La deuxième directive est Expires.

Avec ces directives, vous allez pouvoir informer le navigateur qu'il n'aura pas besoin de redemander la ressource avant une certain date.
Voici un exemple de configuration avec Apache 2.2

<IfModule mod_expires.c>
# turn on the module for this directory
ExpiresActive on
ExpiresByType image/jpg "access plus 6 weeks"
ExpiresByType image/gif "access plus 6 weeks"
ExpiresByType image/jpeg "access plus 6 weeks"
ExpiresByType image/png "access plus 6 weeks"
ExpiresByType image/x-icon "access plus 6 weeks"
ExpiresByType text/css "access plus 2 weeks"
# cache JS
ExpiresByType application/x-javascript "access plus 6 weeks"
# set the default to 4 hours
ExpiresDefault "access plus 4 hours"
</IfModule>

Si ces quelques optimisations ne vous suffisent pas, il existe évidemment d'autres pistes. Nous vous conseillons l'utilisation de Google Page Speed et de Yahoo YSlow.

Bon alors

Vous travaillez le design et le contenu : pourquoi pas la vitesse ?

Vous êtes en concurrence avec d'autres sites : mettez tous les atouts de votre côté !

Google intègre le temps de chargement de la page de destination dans le calcul du Quality Score Adwords. Il se pourrait aussi que Google intègre la vitesse d'affichage du site dans l'évaluation de la pertinence des pages de ce site…

Laisser un commentaire