Site Internet rapide
Portrait Olivier Duffez

Olivier Duffez

Créateur de WebRankInfo,
consultant en référencement

Une solution tout-en-un pour accélérer votre site web ! Bon pour le SEO et votre CA :-)

Découvrez une solution tout-en-un pour accélérer votre site web ! Configuration extrêmement simple, optimisations très performantes : le mode SaaS est très efficace.

 

Pourquoi rendre son site plus rapide ?

A part faire plaisir à Google (qui a déclaré tenir compte de la vitesse dans son algorithme de classement), pourquoi devriez-vous tout faire pour avoir un site très rapide ? En accélérant le chargement de vos pages, vous gagnez sur plusieurs plans :

  • le taux de rebond baisse : vous réduisez les risques que l'internaute quitte le site trop tôt, sans avoir trouvé ce qu'il cherchait.
  • le nombre de pages vues par visite augmente
  • le taux de conversion augmente
  • le taux d'abandon du panier diminue
  • la fidélisation des internautes augmente (à l'inverse, nombreux sont les internautes à ne pas recommander un site en raison de sa lenteur)

C'est encore plus flagrant sur mobile, où les internautes sont encore plus demandeurs de vitesse que sur ordinateurs fixes (source).

Quelle stratégie pour accélérer le chargement des pages ?

Pour optimiser le temps de chargement, vous pouvez travailler sur le back-end, le "middle-end" et le front-end. Notons toutefois que le front-end est la partie qui génère de nos jours le plus de temps, comme le montre le tableau ci-dessous.

3 parties d'optimisation de la vitesse de chargement

3 parties d'optimisation de la vitesse de chargement

Dans cet exemple, la page met 6,2s à être complètement chargée :

  • 0,2s côté back-end, c'est-à-dire le temps que le serveur réponde
  • 1s côté "middle-end", c'est-à-dire le temps que le contenu soit téléchargé et commence à s'afficher dans le navigateur
  • 5s côté front-end, c'est-à-dire le temps que le contenu soit complètement chargé et que l'internaute puisse interagir avec la page
Pour accélérer un site, travailler sur le front-end (chargement navigateur) est le + efficaceClick to Tweet

Les possibilités d'optimisation pour les 2 premières parties sont assez restreintes et de toutes façons ne peuvent avoir un impact que limité (1,2s sur 6,2s dans cet exemple, soit 19%). Côté back-end il faut optimiser le serveur (très difficile sur un mutualisé) et côté "middle-end" il faut passer par un CDN. Côté front-end, non seulement vous avez beaucoup à gagner en l'optimisant, mais surtout il y a de nombreuses techniques à mettre en place :

  • concaténation de fichiers JS et CSS pour réduire le nombre de requêtes au serveur
  • minification pour réduire la taille des fichiers HTML, JS et CSS en retirant les caractères inutiles
  • compression pour réduire la taille des fichiers HTML, JS, CSS et images
  • et de nombreuses autres techniques (sprites, lazyloading, inlining, sharding, URL versioning, defer JS, pre-rendering, JPEG progressif, CSS on top, etc.)

J'ai voulu creuser un peu plus et étudier un diagramme waterfall (représentation du chargement des éléments par le navigateur au cours du temps). Dans mon exemple assez classique, les 10% représentent le temps de chargement du back-end (serveur) et les 90% du front-end (chargement du code HTML). J'ai simplifié en retirant ce qu'on pourrait appeler le "middle-end".

Comme vous pouvez le voir, le chargement du code HTML est la partie la plus longue.

Waterfall

L'optimisation de la vitesse passe par une analyse détaillée du waterfall, l'enchaînement des requêtes sur votre serveur jusqu'au chargement complet de la page

La solution que je vous propose un peu plus loin dans ce dossier agit sur ces 90%, afin d'être très efficace :

  • en réduisant le poids des requêtes : le waterfall est donc moins large (le temps de chargement est donc moins long)
  • en réduisant le nombre de requêtes : le waterfall est donc moins long (il y a moins d'éléments à charger)
  • en modifiant l'ordre de chargement des éléments : on donne la priorité aux requêtes qui se chargent rapidement (les plus longues et donc bloquantes sont chargées dans un second temps). Cela permet de remplir la page le plus vite possible. Ca joue sur la sensation de vitesse de l'internaute qui pourra interagir avec le site plus rapidement.
Optimisation vitesse

3 axes pour optimiser la vitesse de chargement des pages web

Quels outils ou solutions utiliser pour accélérer son site ?

On pourrait répartir les solutions d'optimisation en 3 types :

Développement en interne

Avantages : sur-mesure, réactivité, flexibilité.

Inconvénients : temps passé par l’équipe technique à développer et maintenir la performance web, compétences particulières nécessaires, veille constante des évolutions des bonnes pratiques à suivre et à appliquer.

Remarque : si vous souhaitez réaliser vous-même les optimisations techniques, je vous recommande de tester mon partenaire Dareboost, que j'ai présenté ici en détails.

Logiciel à installer sur ses serveurs

Avantages : bonnes pratiques immédiatement appliquées.

Inconvénients : nécessite un temps d’installation et de configuration, nécessite de l’expertise technique, nécessite de la maintenance.

Solution SaaS

Avantages : expertise du sujet, évolution constante du service, gain de temps (mise en place rapide), coût maîtrisé (choix d’une formule forfaitaire), aucune maintenance et exploitation de la part du client.

Inconvénients : solution générale (à configurer selon les sites)

Il me semble donc que la solution SaaS est le nec plus ultra, c'est pourquoi j'ai le plaisir de vous détailler l'offre que j'ai retenue.

Présentation de Fasterize (solution SaaS)

Si vous n'avez pas de compétences techniques pour optimiser vous-même la vitesse de votre site, la solution SaaS présente de nombreux avantages. J'ai testé Fasterize et l'ai beaucoup apprécié, si bien qu'ils sont devenus partenaires de WebRankInfo. A ce titre, les liens présents dans cet article sont des liens affiliés, mais cela ne change rien au fait que c'est une solution très performante à tester sans attendre !

Un autre point positif est que Fasterize a été créé par Stéphane Rios, ancien directeur technique du site RueDuCommerce.fr, qui avait déjà pu faire ses preuves là-bas. C'était pendant les années où j'étais leur consultant SEO, j'ai pu voir le gros boulot qu'il avait fait !

Fonctionnement

Le principe de Fasterize est que vous n'avez strictement rien à faire ! A part des cas complexes qui nécessitent des réglages sur-mesure avec l'équipe technique, il vous suffit de changer vos DNS afin que les serveurs de Fasterize gèrent les demandes de consultations de votre site.

Accélérez votre site sans rien installer ni sur votre serveur, ni sur votre site !Click to Tweet

Aucun logiciel à installer sur votre serveur, aucun code à insérer sur votre site, aucune mise à jour à faire de votre côté : Fasterize est compatible avec tous les sites, CMS ou pas. Faites confiance aux spécialistes de la webperf chez Fasterize pour mettre en place toutes les techniques d'optimisation de la vitesse, qu'il s'agisse de grands classiques ou de nouveautés.
4 étapes :

  1. Le navigateur (ou un robot comme Googlebot) transmet une requête HTTP/HTTPS en cherchant à accéder à une URL de votre site. Fasterize l'intercepte, comme le fait un proxy.
  2. Fasterize récupère et analyse les pages et les ressources demandées aux serveurs d'origine (votre site et parfois d'autres pour certains scripts ou images) : code HTML, javascript, CSS et images.
  3. Fasterize applique les règles d’optimisation (des plus connues aux plus récentes). Chacune de ces règles est préalablement sélectionnée et testée par ses experts techniques afin de garantir la qualité de service.
  4. Le contenu optimisé est généré puis renvoyé au navigateur (ou robot). Ce code est bien sûr mis en cache si la réponse du serveur d'origine le permet.

Comment tester Fasterize ?

Le plus simple est de vous créer un compte et de choisir parmi leurs offres. Il y en a même une gratuite !

Testez Fasterize dès maintenant ! Créez vous un compte ici

Questions-réponses

J'ai posé une série de questions à l'équipe de Fasterize pour anticiper celles que vous vous posez. Si vous en avez d'autres, indiquez-les dans les commentaires ou par email.

Quels CMS sont gérés par Fasterize ?

Tous ! Cette solution ne dépend pas du CMS, vous pouvez donc l'utiliser avec un site sous WordPress, Joomla, Prestashop, Magento ou tout autre CMS, et même sur des sites sans CMS.

J'utilise déjà un CDN, ai-je besoin de Fasterize ? Est-ce compatible ?

Fasterize optimise le contenu de votre site web, un CDN optimise la diffusion de ce contenu. Ce sont donc deux solutions complémentaires qui permettent d'atteindre des performances optimales pour votre site web, quelle que soit votre audience.

A partir de 500 000 pages vues par mois, les forfaits Fasterize intègrent un CDN.

Bien sûr, vous pourrez garder votre propre CDN.

Ai-je besoin d'optimiser la compression de mes images ?

L'optimisation de la compression des images (JPEG et PNG en général) est indispensable pour garantir une grande vitesse tout en maintenant la qualité visuelle. Avec Fasterize, vous n'avez pas à vous en occuper, c'est inclus !

Si vous avez déjà optimisé vos images, cela ne pose aucun problème bien entendu.

Maintenez-vous mon référencement des images ?

L'indexation des images ne change pas, car un entête HTTP link rel=canonical avec l'url d'origine est envoyé pour toute requête une image qui passe par Fasterize.

Puis-je disposer d'un serveur de test ?

Oui, vous pouvez faire des tests sur le serveur de recette.

Peut-on optimiser les pages dynamiques ?

Même si elles ne peuvent bénéficier d'un cache (comme c'est le cas pour les pages statiques), les pages dynamiques sont optimisées en temps réel.

Cette solution est-elle compatible mobile ?

Oui bien entendu ! Certaines techniques sont d'ailleurs propres aux mobiles.

Comment gérez-vous les 3 possibilités de rendre son site compatible mobile ?

Nous gérons très bien ces 3 possibilités :

  • Responsive Web Design : c'est la même URL, le même contenu, les optimisations ont lieu une fois quel que soit le device.
  • Dynamic Serving : même URL mais contenu différent, les optimisations se basent sur le contenu et Fasterize sert donc un contenu différent selon le device
  • Sites distincts : On peut gérer les deux sites sur la même configuration ou sur deux configuration différentes. Dans tous les cas, les optimisations ont lieu pour chaque site et Fasterize sert un contenu différent pour chaque device. A noter qu'il existe une option pour gérer la redirection vers les sites mobile/tablette directement au niveau de Fasterize.

Je suis sur WordPress, qu'apporte Fasterize de plus qu'un bon plugin de cache comme WP Rocket ou d'autres reconnus ?

Fasterize fait plus que du cache : le système modifie à la volée les pages HTML afin d'appliquer toutes les bonnes pratiques de Webperf en temps réel. En plus du cache, les techniques suivantes sont exploitées : la concaténation, la minification, l'inlining, le lazyloading, le chargement différé de JS, des CSS réordonnés, l'optimisation d'images, le JPEG progressif, le versionning d'URL, le sharding/unsharding, et pleins d'autres choses encore.

Des systèmes sont prévus pour gérer les redirections mobiles, pour cacher les pages crawlées par les Bot, pour gérer les pics de charge avec des pages d'attente, ...

De plus, c'est du SaaS : pas d'installation, pas de maintenance ("sur quelle version je suis déjà ? Est-ce que ça va pas casser si je mets à jour cette version ?"), rien à modifier chez vous, c'est plug and play et réversible en un clic.

J'ai un petit site (maxi 500 pages) et pas de vente en ligne. Est-ce rentable pour moi ?

Pas forcément mais est-ce que vous rentabilisez vos coûts d'hébergement ? Optimiser ses temps de chargement est incontournable au même titre que l'hébergement ou le SEO.

Je sais bien qu'il faut un site rapide, mais comment évaluer mon retour sur investissement ?

Oui il faut un site rapide, ça ne se discute pas. Avez-vous évalué les pertes que vous avez quand votre site rame ?

Et sinon, on peut éventuellement mettre en place des indicateurs business avec un test A/B pour essayer de mesurer le gain.

J'utilise déjà un CDN, que dois-je faire et que m'apporterait Fasterize de mieux ?

Un CDN ne réduit ni le poids, ni la complexité des pages. Un CDN n'est d'aucune utilité sur une connexion à forte latence comme les connexions mobile car c'est la latence du réseau mobile qui va dicter les performances. Avoir un CDN pour charger une page de 3Mo avec 200 requêtes ne changera pas grand chose.

Fasterize réduit le poids et la complexité des pages, change l'ordre de chargement des objets pour donner la priorité à ce qui est visible et plus globalement essaie de remplir le plus rapidement possible la page. Avec Fasterize, une page de 3Mo et 200 requêtes devient une page de 1,5Mo et 100 requêtes : c'est tout simplement plus rapide à charger.

En plus, utiliser Fasterize avec un CDN peut réduire votre consommation CDN de moitié, c'est une source de ROI.

A partir de quand l'offre de Fasterize est-elle intéressante ?

Les offres dépendent du nombre de pages vues. Les petits sites (- de 100 000 pages vues par mois) ont accès à l'offre freemium.
Certes il y a une mention qui précise que Fasterize peut insérer de la publicité mais cela n'est pas le cas pour le moment. Le jour où Fasterize décidera d'inclure de la publicité, les utilisateurs en seront informés afin qu'ils puissent passer à l'offre à 39€ HT / mois. Donc en attendant, pourquoi ne pas en profiter ?

Notre objectif étant l'amélioration de l'expérience utilisateur nous veillerons par ailleurs à ce que cette pub s'incorpore bien sur le site (et qu'elle reste minime).

Nos offres sont adaptées à tous types de site et tout le monde peut y trouver son compte.

A partir du moment où l'on comprend qu'un site rapide est nécessaire à une bonne expérience utilisateur, au taux de conversion (pour les sites e-commerce), au référencement, à l'image du site ; je crois que l'on peut estimer intéressant d'utiliser Fasterize. Il ne faut pas seulement penser au ROI financier.

Par ailleurs, la rapidité d'un site web a un impact positif sur le taux de conversion : il est donc tout à fait possible de rentrer dans ses frais et de dégager une marge supplémentaire. Cela dépend de chaque site.

Comment évaluer les pertes du site quand il rame ? notamment quand il n'y a pas de ecommerce

On peut mener un A/B test sur des métriques telles que le nombre de pages vue, le nombre de visiteur ou encore le taux de rebond (mais ce dernier est à prendre avec des pincettes car la rapidité d'affichage d'une page peut aussi augmenter le taux de rebond).

Par rapport à un plugin de cache, comment faire avec Fasterize quand je mets à jour mon contenu ? tout est totalement automatique ? puis-je forcer un reset de votre cache ?

Tout est paramétrable depuis le dashboard Fasterize. On peut indiquer une valeur pour la durée de vie d'un contenu statique dans le cache. Ainsi la mise à jour du site se fera de toute façon selon cette valeur (bien sûr plus la durée de vie dans le cache est élevée, meilleures seront les performances).

Il est par ailleurs possible de forcer le reset du cache via notre dashboard en "flushant le cache".
Nous pratiquons par ailleurs l'URL versioning, ce qui améliore le reset du cache.

D'autres questions sur Fasterize ? Consultez leur site web

Crédit image : Shutterstock, sous licence

Cet article vous a-t-il plu ?

Note : 5.0 (2 votes)
Cliquez pour voter !

Laisser un commentaire

Remarques :

  • Si vous souhaitez poser une question ou détailler un problème technique, il ne faut pas utiliser le formulaire ci-dessous qui est réservé aux avis. Posez votre question directement dans le forum Gmail de WebRankInfo. L'inscription est gratuite et immédiate.

  • En postant un avis, vous acceptez les CGU du site WebRankInfo. Si votre avis ne respecte pas ces règles, il pourra être refusé. Si vous indiquez votre adresse email, vous serez informé dès que votre avis aura été validé (ou refusé...) ; votre adresse ne sera pas utilisée pour vous envoyer des mailings et ne sera pas revendue ou cédée à des tiers.

3 commentaires

Stardust31

Bonsoir, pour les petits budgets qui ont un serveur virtuel et/ou dédié, qui n'ont pas encore les moyens d'investir dans un SaaS.
il existe en solution gratuite, le "mod_pagespeed" de Google, associé avec un système de cache interne au site et/ou module de cache,
+ PhpFPM, et/ou autre accélérateurs Php, ou autres système d'accélérateur pour les autres langages.
mod_pagespeed et un très bon complément.
il existe pour Apache et Nginx ici -> https://developers.google.com/speed/pagespeed/module/

Gratuit, rapide à installer, et assez simple à configurer, il y a un fichier fichier de configuration à modifier/adapter selon ses besoins. Puis on trouve des infos sur le web. On peut l'utiliser que sur certaines parties d'un site, etc...
Personnellement, je l'ai dans un premier temps testé, vérifié qu'il ne détruit pas le code, puis maintenant je l'utilise en prod, j'en suis très satisfait. Avec le mod_pagespeed, j'atteint un Gain de 5 à 10% en temps d'affichage, selon les pages. Je conseille de tester avant, et d'ajuster la configuration par default en fonction de votre site.

Répondre
Bool

@Marc : en fait le transfert du code HTML étant compressé dans la majorité des cas, ces "espaces vides" ne consomment en réalité pas grand chose.

Répondre
Marc Premsgo

Bonjour,

c'est un article complet et très intéressant , en plus d'être très utile.

je rajouterais une PLAIE PERMANENTE pour le web que l'on retrouve sur une majorité de sites :

Les espaces vides dans le code HTML et les tabulations , qui représentent parfois 70% du code d'une page, pour vraiment rien du tout, hormis de polluer les réseaux et ralentir l'usager.

C'est un gâchis énorme, et à l'échelle de la planète , celà représente un volume de pollution (énergie consommée pour rien) qui a un impact sur l'écologie mondiale.

Un jour, j'essayerai de calculer cela ...

Répondre