Référencement technique

Le référencement technique est la première étape de toute activité de référencement. Les campagnes de référencement n’iront pas loin si les bases ne sont pas bonnes et si les meilleures pratiques ne sont pas suivies – après tout, vous ne construirez pas une maison sans fondations solides.

L’avantage du référencement technique est qu’il n’a pas seulement un impact sur le trafic organique, il améliore également l’expérience des utilisateurs sur tous les canaux, tout en minimisant les erreurs sur le site et en augmentant la vitesse du site. En ce qui concerne les sites web de Shopify, nous nous concentrons sur huit domaines clés :

  • Réparation des pièges à araignées
  • Améliorer les structures des URL
  • Mise en œuvre de données structurées
  • Ajout du balisage social
  • Création d’un plan pour traiter les produits discontinués / en rupture de stock
  • Surveillance des liens rompus
  • Restructuration des plans de site XML
  • Améliorer la vitesse du site web

Pièges à araignées

Un piège à araignée est une section d’un site web dans laquelle un robot d’indexation reste coincé dans une boucle, ce qui entraîne une mauvaise efficacité de l’indexation et réduit la fréquence d’indexation de pages importantes telles que les produits et les catégories. Ces pages sont généralement constituées de pages dupliquées ou “indésirables” auxquelles on peut accéder par plusieurs URL.

Bien que ce problème ne se limite pas aux sites de Shopify, il tend à être plus fréquent chez les détaillants en ligne en raison des technologies utilisées pour construire leurs sites.

Les deux principales causes de ce problème sont les suivantes :

  • Liens malformés
  • Navigation à facettes

Liens malformés

Des liens malformés peuvent entraîner la génération d’un nombre infini de pages, toutes affichant le même contenu. Ce problème survient principalement lorsque le site web répond aux critères suivants :

  • Les règles de réécriture d’URL sont utilisées pour transformer une URL de chaîne de requête en une URL “conviviale”.
    par exemple : /products.php?id=3423 est réécrit en /category/3423/product-name
  • Les règles de réécriture sont configurées pour ignorer certaines parties de la chaîne d’URL, dans ce cas après l’ID du produit
    c’est-à-dire que : /catégorie/3423/nom du produit et /catégorie/3423/nom aléatoire afficheraient le même contenu

Si ces deux conditions sont remplies et qu’il y a un lien malformé de la page, c’est-à-dire

Un lien relatif sans barre oblique :

<a href=”resources/product-name”> au lieu de <a href=”/resources/product-name”>

Oublier http:// ou https:// sur un lien absolu
i.e. : <a href=”www.domain.com/”> au lieu de <a href=”https://www.domain.com/”>
Un nombre infini de pages pourrait alors être généré en cliquant sur les liens, c’est-à-dire

Relativement

/catégorie/3423/nom du produit
/catégorie/3423/ressources/nom du produit
/catégorie/3423/ressources/nom du produit/ressources/nom du produit
/catégorie/3423/ressources/nom du produit/ressources/nom du produit/ressources/nom du produit

HTTP / HTTPS manquants

/catégorie/3423/nom du produit
/catégorie/3423/www.domain.com/
/catégorie/3423/www.domain.com/www.domain.com/
/catégorie/3423/www.domain.com/www.domain.com/www.domain.com/
Ces problèmes peuvent généralement être résolus en corrigeant simplement les liens malformés, bien qu’à long terme, il soit conseillé de forcer tous les liens à utiliser des URL absolues et de vérifier que http:// ou https:// ne manque pas dans le marquage des liens.

Navigation par facettes

La navigation par facettes est un élément de navigation qui permet aux utilisateurs de filtrer ou de trier les résultats ou les produits d’une page web en fonction d’attributs spécifiques tels que la couleur, la taille, etc.

Si la navigation par facettes peut être utile aux utilisateurs, en les aidant à trouver rapidement ce qu’ils recherchent, elle peut également poser des problèmes lorsqu’il s’agit de ramper. Chaque option sélectionnable peut générer une nouvelle URL sur le site web en ajoutant des paramètres tels que la couleur ou la taille. Par exemple, les pages suivantes ressembleraient beaucoup aux moteurs de recherche :

  • domaine.com/catégorie
  • domain.com/category?color=blue
  • domain.com/category?color=blue&size=small
  • domain.com/category?color=blue&size=small&order=price-asc

Le fait de n’avoir que 5 options de filtrage uniques pourrait générer jusqu’à 3 125 URL différentes par page de catégorie selon la configuration de votre navigation à facettes. Empêcher les moteurs de recherche d’explorer ces pages supplémentaires est relativement simple et ne nécessite que deux modifications :

  1. Utiliser le nofollow sur tous les liens à facettes
  2. Déployer des méta-robots ou des x-robots noindex, nofollow sur toutes les pages supplémentaires

Structures URL

Les URL sont généralement la première chose que les utilisateurs et les moteurs de recherche voient avant le chargement d’une page et servent d’éléments constitutifs de la hiérarchie d’un site web. Bien que, par défaut, un CMS puisse utiliser des chaînes de requête / paramètres pour servir des pages (domain.com/index.php?page=1), celles-ci sont généralement écrasées pendant la phase de développement pour produire des URL conviviales (domain.com/page-name).

La structure de l’URL doit fournir des informations clés aux utilisateurs et aux moteurs de recherche sur le sujet de la page et sa position dans la hiérarchie. Idéalement, la structure de l’URL devrait suivre la hiérarchie établie dans la navigation principale tout en gardant les conventions de nommage aussi courtes que possible et en incluant des mots clés pertinents pour le contenu.

Par exemple, un site web de bijouterie pourrait être créé avec la structure suivante

domaine.com/montre
domain.com/watches/branddomain.com/jewellery/
domain.com/jewellery/diamond-rings

Il existe deux approches communes lorsqu’il s’agit d’optimiser les structures des URL de produits :

  1. Produit se trouvant par défaut à la racine du domaine, c’est-à-dire domain.com/nom du produit 
  2. Produits figurant dans les dossiers de catégorie, par exemple domain.com/catégorie/nom du produit 

Les URL racine sont traditionnellement plus faciles à mettre en œuvre et fournissent des URL plus courts. Les URL de produits au niveau de la catégorie peuvent contribuer à stimuler les efforts de référencement en regroupant le contenu dans des silos pertinents, ce qui présente deux avantages majeurs :

  1. Une plus grande autorité thématique grâce au regroupement des contenus pertinents
  2. Les liens externes ajoutés à une page peuvent profiter à toutes les autres pages de ce silo

Cela peut permettre d’obtenir plus de trafic de produits biologiques avec un budget réduit.

Bien qu’il n’y ait pas de bonne ou de mauvaise option, il y a des avantages et des inconvénients pour chacun :

URL racine

Avantages

La plupart des systèmes de gestion de contenu pour le Shopify le font par défaut
Moins de risques de duplication des pages de produits par une mauvaise configuration
Des URL plus courts

Inconvénients

Des travaux supplémentaires peuvent être nécessaires pour mettre en œuvre des paniers significatifs
L’absence de silos de contenu peut conduire à une autorité topique inférieure
Il est difficile d’obtenir des données sur les performances des produits au niveau de la catégorie

URL des catégories

Avantages

Obtention facile de données sur les performances des produits au niveau de la catégorie
Le fil d’Ariane peut être mis en œuvre sur la base de la structure de l’URL
Tout le contenu est contenu dans des silos, ce qui contribue à accroître l’autorité de l’actualité

Inconvénients

Travaux de développement supplémentaires / plugins nécessaires pour réaliser cette structure
Peut générer plusieurs pages pour chaque produit s’ils sont dans plus d’une catégorie (ce qui peut être résolu par l’attribution d’URL primaires ou de balises canoniques)
Des URL légèrement plus longs

Données structurées

Les données structurées sont un format standardisé pour la classification des entités sur une page web, aidant les moteurs de recherche à mieux comprendre le contenu et les sites web. L’ajout de données structurées aux pages peut également contribuer à améliorer l’apparence des résultats de recherche – en les rendant plus susceptibles d’être cliqués.

Bien que les données structurées existent depuis de nombreuses années, de nombreux sites de commerce électronique ne les ont pas mises en œuvre et ne bénéficient pas d’un trafic organique supplémentaire par le biais des classements qu’ils ont déjà. Il existe cinq types de balisage schema.org qui sont recommandés pour les sites de Shopify, à savoir

  • Organisation
  • Site internet
  • Miettes de pain
  • Navigation du site
  • Produit

Bien qu’il existe différentes façons de mettre en œuvre le balisage de schéma, nous avons trouvé qu’il était plus facile à déployer via JSON-LD dans la plupart des cas car il nécessite moins de modification des éléments html de la page, bien que le déploiement dépende du type de balisage mis en œuvre et de la façon dont un site web a été construit, c’est-à-dire du CMS utilisé.

Balisage de l’organisation

Le balisage des organisations contribue à générer des signaux de marque pour les moteurs de recherche et à améliorer le graphique des connaissances de Google ainsi que les extraits de la page de résultats des moteurs de recherche (SERP). Ce balisage ne doit être ajouté qu’à une seule page de votre site web, généralement une page où figurent des informations détaillées sur l’entreprise, comme la page “à propos”.

Balisage de l’orginisation John Lewis dans les résultats de recherche

La mise en œuvre du balisage de l’organisation est relativement simple car elle ne nécessite que des informations de base qui ne sont pas susceptibles de changer et qui peuvent être codées en dur dans la page via JSON-LD. Le balisage recommandé est le suivant :

<script type=”application/ld+json”>
{“@contexte” : “http://schema.org”,
“@type” : “Organisation”,
“legalName” : “Nom de l’entreprise”,
“url” : “URL du site web”,
“point de contact” : [{
“@type” : “ContactPoint”,
“téléphone” : “Numéro de téléphone”,
“contactType” : “Phone Number Type i.e. customer service”
}]
“logo” : “Logo URL”,
“sameAs” : [“URL Facebook”,
“URL Twitter”,
“URL Youtube”,
“Wikipedia URL”,
}
</script>

Balisage du site web

Ce balisage peut aider à générer la boîte de recherche Sitelinks pour les recherches liées aux marques, permettant aux utilisateurs de rechercher des informations ou des produits sur votre site web directement à partir des résultats de recherche de Google. Cela permet aux utilisateurs d’accéder plus rapidement au contenu qu’ils recherchent, ce qui améliore l’expérience globale de l’utilisateur.

Recherche sur le site de John Lewis

Ce balisage ne doit être ajouté qu’à la page d’accueil et, comme pour le balisage de l’organisation, il peut être codé en dur dans l’en-tête HTML car il est peu probable qu’il change souvent. Le JSON-LD nécessaire pour mettre en œuvre cette mesure est :

<script type=”application/ld+json”>

{“@contexte” : “http://schema.org”,
“@type” : “WebSite”,
“nom” : “Nom de l’entreprise”,
“url” : “URL du site web”,
“potentialAction” : {
“@type” : “SearchAction”,
“target” : “URL de la page de recherche i.e. https://domain.com/?s={search_term}”,
“query-input” : “required name=search_term”}
}
</script>

Balisage du fil d’Ariane

Le fil d’Ariane permet d’afficher des bribes de fil d’Ariane sur vos listes dans les SERP, ce qui donne un peu plus d’informations aux utilisateurs.

Il est préférable d’ajouter ce balisage par l’intermédiaire de microdonnées, ce qui nécessite de légères modifications du balisage HTML utilisé pour insérer les miettes de pain traditionnelles :

itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”Homepage Link”>
<span itemprop=”name”>Nom de la page</span></a>
<meta itemprop=”position” content=”1″ />
</li>

<li itemprop=”itemListElement” itemscope
itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”First Directory URL”>
<span itemprop=”name”>Nom de la page</span></a>
<meta itemprop=”position” content=”2″ />
</li>

<li itemprop=”itemListElement” itemscope
itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”URL du deuxième répertoire”>
<span itemprop=”name”>Nom de la page</span></a>
<meta itemprop=”position” content=”3″ />
</li>
</ol>

Balisage de la navigation du site

Ce balisage peut aider à influencer les liens organiques fournis pour votre site web dans les SERP et peut également aider les moteurs de recherche à comprendre un peu mieux la structure de votre site web.

Comme le fil d’Ariane, il est préférable de le mettre en œuvre par le biais de microdonnées, en faisant de petits ajouts au balisage HTML généré pour l’élément principal de navigation du site web :

<ul itemscope itemtype=”http://www.schema.org/SiteNavigationElement”>
<li itemprop=”name”><a itemprop=”url”
href=”Page URL”>Nom de la page</a></li>
<li itemprop=”name”><a itemprop=”url”
href=”Page URL”>Nom de la page</a></li>
<li itemprop=”name”><a itemprop=”url”
href=”Page URL”>Nom de la page</a></li>
<li itemprop=”name”><a itemprop=”url”
href=”Page URL”>Nom de la page</a></li>
<li itemprop=”name”><a itemprop=”url”
href=”Page URL”>Nom de la page</a></li>
<li itemprop=”name”><a itemprop=”url”
href=”Page URL”></a></li>
<li itemprop=”name”><a itemprop=”url”
href=”Page URL”>Nom de la page</a></li>
</ul>

Balisage du produit

Le balisage des produits peut améliorer votre extrait de SERP biologique en ajoutant des détails supplémentaires tels que le prix, la disponibilité et les notes d’évaluation – donnant aux utilisateurs les informations dont ils ont besoin avant de cliquer sur votre site web.

Marquage des produits John Lewis

L’ajout d’un schéma de produit à un site web via JSON-LD est relativement facile car toutes les informations requises doivent exister dans la base de données, le balisage de base recommandé est :

<script type=”application/ld+json”>
{
“@contexte” : “http://schema.org/”,
“@type” : “Produit”,
“nom” : “Nom du produit”,
“image” : [“URL de l’image du produit”],
“description” : “Description du produit”,
“marque” : {
“@type” : “Chose”,
“nom” : “marque” : “Brand Name
},
“aggregateRating” : {
“@type” : “AggregateRating”,
“ratingValue” : “rating”,
“reviewCount” : “Nombre de révisions
},
“offres” : {
“@type” : “Offre”,
“priceCurrency” : “Monnaie” : GBP,
“prix” : “prix” : c’est-à-dire 99,99″,
“disponibilité” : “http://schema.org/InStock”
}
}
</script>

Balises sociales

Les balises sociales telles que les cartes Open Graph et Twitter aident à définir la manière dont l’extrait doit être regarder quand une page est liée à une autre via des plateformes sociales telles que Facebook et Twitter. Bien que cette n’apporte pas de valeur ajoutée en matière d’optimisation des moteurs de recherche, mais peut contribuer à réduire le taux de clics dans les médias sociaux et, à son tour, entraîner un trafic supplémentaire.

Métadonnées des graphiques ouverts

Le balisage Open Graph est relativement facile à mettre en œuvre, nécessitant l’insertion d’informations de base sur le contenu dans les métabalises de l’en-tête HTML. Toutes ces informations doivent déjà exister dans la base de données de votre site web, et il suffit donc de faire de simples appels à la base de données pour mettre en œuvre les bases :

<meta property=”og:title” content=”Nom de la page” />
<meta property=”og:type” content=”Content Type” />
<meta property=”og:url” content=”URL de la page” />
<meta property=”og:description” content=”Brève description du contenu” />
<meta property=”og:image” content=”Image URL” />
John Lewis ouvre le graphique de balisage

Métadonnées de la carte Twitter

Comme pour Open Graph, les cartes Twitter sont implémentées via des méta-tags dans l’en-tête html, le balisage de base est :

<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”Twitter Handle” />
<meta name=”twitter:title” content=”Titre de la page” />
<meta name=”twitter:description” content=”Brève description du contenu” />
<meta name=”twitter:image” content=”Image URL” />

Traitement des produits retirés du marché et des produits en rupture de stock

Les produits vont et viennent tout le temps, traiter correctement ces pages peut faire toute la différence en matière de référencement. Les sites de Shopify traitent ce problème de diverses manières, comme la suppression complète de la page ou la redirection vers une autre URL, mais très peu d’entre eux gèrent cette situation correctement.

Lorsqu’un produit est discontinué ou en rupture de stock, la redirection ou la suppression de la page peut souvent entraîner la perte de tout classement organique et du trafic qui en résulte, car le contenu pertinent cesse d’exister. Pour contourner ce problème, nous vous suggérons d’ouvrir votre logiciel d’analyse et de rechercher la valeur de votre produit.

Si le produit avait de la valeur, vous pouvez quitter la page en direct avec un message “Out of Stock or Discontinued”, en gardant le reste du contenu inchangé mais en ajoutant une liste de produits alternatifs pour vous assurer de conserver autant de valeur que possible. Si le produit n’était pas performant via la recherche organique, il est alors suggéré de rediriger l’URL vers la page de catégorie la plus pertinente afin de conserver toute valeur résiduelle, c’est-à-dire l’autorité des liens externes.

Surveillance des liens brisés

De nombreuses pages web sont retirées du web chaque jour et si un site web n’est pas tenu à jour
les liens peuvent alors facilement être rompus – ce qui peut entraîner une mauvaise expérience pour l’utilisateur et une impasse pour les crawlers. Bien qu’un petit nombre de liens rompus sur un site web ne pose souvent pas de problème, il peut envoyer un signal aux moteurs de recherche que le contenu n’est pas à jour. Toutes choses étant égales par ailleurs, cela peut être le facteur qui conduit à ce qu’un autre site web gagne en préférence dans les classements.

Il est important de surveiller de près tous les liens internes et externes, en veillant à ce que ceux qui sont rompus soient réparés en temps utile. La meilleure façon d’y parvenir est d’effectuer un audit mensuel ou bimensuel, en utilisant un robot d’exploration de site web de bureau tel que ScreamingFrog pour explorer le site web, ou encore des outils basés sur les nuages tels que Deep Crawl pour surveiller en permanence votre site web.

Pour résoudre les problèmes de liens brisés, vous pouvez prendre trois mesures :

  1. Supprimer le lien
  2. Trouvez la nouvelle URL du contenu auquel vous êtes lié
  3. Lien vers une source alternative

Bien que la suppression pure et simple du lien soit l’option la plus simple/la plus rapide, le lien a été placé là pour une raison, généralement l’amélioration de l’UX global, de sorte que dans la plupart des cas, la mise à jour du lien serait la meilleure option à prendre.

Configuration du plan de site XML

Un plan de site XML est une liste de toutes les pages qui existent sur un site web, il est utilisé par les robots des moteurs de recherche comme une liste définitive de ce qu’ils doivent explorer et indexer. Bien qu’il s’agisse d’un outil utile, de nombreux sites web génèrent automatiquement ce fichier et le processus peut conduire à des URL non souhaitées ou à un fichier trop volumineux pour être traité par les moteurs de recherche.

Les plans de site peuvent être établis manuellement à l’aide d’outils tels que Screaming Frog, qui permet soit de construire le plan de site, soit d’obtenir une liste de toutes les pages du site web, puis d’ajouter les balises correspondantes. Bien que ce processus permette d’atténuer certains des problèmes posés par les plans de site automatisés, la création manuelle de plans de site peut prendre du temps et de nouvelles pages doivent être ajoutées manuellement, bien qu’il ne devrait pas y avoir d’impact négatif si de nouvelles pages manquent pendant une courte période, ce qui permet de produire des plans de site créés manuellement sur une base bimensuelle.

L’un des principaux avantages des sitemaps manuels est qu’ils peuvent être décomposés en fichiers plus petits. En ce qui concerne les sites de Shopify, vous pouvez avoir un sitemap contenant les pages clés et les URL des catégories et un autre contenant toutes les URL des produits, ce qui permet de réduire au maximum la taille des fichiers.

Vitesse du site web

Les progrès technologiques ont considérablement augmenté – tout comme les attentes des utilisateurs en matière de réponses instantanées à leurs questions. Il a été largement rapporté que 47% des utilisateurs s’attendent à ce qu’un site web se charge en moins de deux secondes et 40% pourraient le quitter si le processus de chargement prend plus de 3 secondes.

Les systèmes de gestion de contenu (CMS) de Shopify tels que Shopify ont toujours été connus pour leur temps de chargement plus lent, généralement enShopify raison de la puissance de traitement supplémentaire que ces types de CMS exigent par rapport aux systèmes de gestion de contenu traditionnels tels que WordPress ou Umbraco. Afin de maintenir la charge des pages d’un site de Shopify aussi faible que possible, il est recommandé d’étudier les points suivants

  • Plate-forme d’hébergement
  • Nombre de demandes HTTP
  • Poids total des pages
  • Compression de fichiers
  • Mise en cache HTTP
  • Plateforme d’hébergement

Si l’infrastructure technique n’est pas à la hauteur, le site web sera plus lent à donner une première réponse, ce qui augmentera le temps nécessaire pour que le premier octet d’information soit envoyé à l’utilisateur final. Il existe de nombreuses possibilités d’hébergement, mais l’hébergement partagé et, dans certains cas, les serveurs privés virtuels ne suffisent pas.

Plateforme d’hébergement

Vous devez surveiller l’utilisation des ressources de votre matériel, telles que le processeur, la mémoire vive et l’utilisation du réseau pendant les heures de pointe pour voir comment votre installation actuelle fonctionne. Si vous atteignez fréquemment un taux d’utilisation de 100 % dans un domaine quelconque, il est conseillé de procéder à une mise à niveau pour vous assurer que cela n’aura pas d’impact sur vos clients.

Outre le matériel, le passage de HTTP/1.1 à HTTP/2 peut également donner un coup de fouet à votre infrastructure en réduisant la latence globale et en accélérant les temps de téléchargement de contenu. Un aperçu complet des différences entre HTTP/1.1 et HTTP/2 peut être consulté ici.

Nombre de requêtes HTTP

Les navigateurs sont limités au nombre de connexions HTTP simultanées qui peuvent être effectuées à partir d’un seul domaine, ce qui limite le nombre d’images, de fichiers CSS et JS qui peuvent être téléchargés en même temps. Une fois la limite atteinte, le navigateur doit attendre que les téléchargements en cours soient terminés avant de passer au téléchargement du reste des ressources nécessaires au fonctionnement de votre site web

Les sites web étant devenus plus interactifs au fil des ans, le nombre de ressources supplémentaires, principalement JavaScript, a augmenté. Certains sites de Shopify utilisent plus de 20 fichiers JavaScript différents pour ajouter des fonctionnalités supplémentaires qui ne sont pas présentes dans le HTML standard.

La meilleure solution pour lutter contre ce phénomène est de combiner toutes les ressources similaires, c’est-à-dire que si vous avez 4 fichiers CSS et 10 fichiers JS, vous pouvez très probablement réduire ce nombre à un seul de chaque type. En outre, toutes les images pourraient être servies à partir d’un CDN (content delivery network), ce qui ajouterait un deuxième domaine au mélange et doublerait ainsi le nombre de voies de téléchargement pour garantir que les images, les CSS et les JS se téléchargent en parallèle – ce qui permettrait d’accélérer le temps de chargement du site web.

Poids total des pages

Le poids des pages correspond à la taille combinée des fichiers de votre site web en MB. Plus il est important, plus l’utilisateur doit attendre longtemps avant de le télécharger. Plus il est grand, plus l’utilisateur doit attendre longtemps avant de le télécharger. Comme les sites web actuels nécessitent beaucoup plus de code, principalement en raison de leur complexité croissante, le poids global des sites web a augmenté.

L’essor de la navigation mobile, où les vitesses de téléchargement sont beaucoup plus lentes, a obligé les sites web à perdre une partie de ce poids. Les deux meilleures façons d’y parvenir sont les suivantes :

  • Optimisation de l’image
  • Minimisation du code
Optimisation del’imae

S’il peut être pratique de télécharger des images haute résolution sur votre site web, dans la plupart des cas, cela n’est pas nécessaire et peut entraîner une augmentation considérable du poids total de la page. Dans la plupart des cas, les images peuvent être optimisées pour réduire la taille du fichier à l’aide d’éditeurs d’images en deux étapes simples :

  1. Réduire la hauteur et la largeur du fichier à une taille similaire à celle qui sera affichée sur le site web
  2. Réduisez la qualité de l’image autant que possible jusqu’à ce qu’elle devienne perceptible à l’œil humain.

Dans la plupart des cas, ces deux facteurs peuvent entraîner une réduction de 70 à 80 % de la taille des fichiers d’images, ce qui réduira le temps de chargement global du site web.

Minimisation du code

Le code est toujours écrit dans un format facile à lire, en utilisant des onglets et des espaces blancs entre les différents éléments. Le problème est que l’espace blanc ajoute au poids global du code et que sa suppression peut entraîner une réduction d’au moins 10 % des ressources HTML, CSS et Javascript sans incidence sur la fonctionnalité.

Comme son nom l’indique, la compression de fichiers réduit la taille des fichiers (généralement jusqu’à 70 %) afin qu’ils puissent être transférés à l’utilisateur final beaucoup plus rapidement.

Vérifier si la compression Gzip est activée sur votre site web est assez simple, il vous suffit d’entrer l’adresse de votre site web dans cet outil en ligne et il vous indiquera si la compression a été activée ou désactivée. L’activation de la compression peut être un peu plus difficile, alors que certains systèmes CMS ont une simple coche ou une option d’activation ou ont des plugins / modules qui ajoutent cette fonctionnalité – d’autres nécessitent quelques modifications de la configuration du serveur.

Serveurs Apache

Il convient d’ajouter ce qui suit au fichier .htaccess

AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Uniquement requis pour les anciens navigateurs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0 [678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
En-tête et annexe Varier l’agent utilisateur

Serveurs IIS

  1. Ouvrez IIS Manager et naviguez jusqu’au niveau que vous souhaitez gérer. Pour plus d’informations sur l’ouverture de IIS Manager, voir Open IIS Manager (IIS 7). Pour plus d’informations sur la navigation vers les emplacements de l’interface utilisateur, voir Navigation dans IIS Manager (IIS 7).
  2. Dans la vue des fonctionnalités, double-cliquez sur Compression.
  3. Sur la page Compression, sélectionnez la case à côté de Activer la compression dynamique du contenu.
  4. Cliquez sur Appliquer dans les Actions

Mise en cache HTTP

La mise en cache HTTP consiste essentiellement à stocker les ressources d’un site web (CSS, images, etc.) localement sur la machine d’un utilisateur lors de sa première visite, afin qu’elles puissent être réutilisées pour chaque chargement de page suivant sans que le navigateur ait à les télécharger à nouveau. Comme il n’est pas nécessaire de télécharger à nouveau les ressources, chaque visite après le premier chargement de la page initiale est plus rapide, ce qui donne aux utilisateurs une meilleure expérience globale de la navigation sur le site web.

L’un des problèmes liés à la mise en cache est que les choses sur le web changent tout le temps, comme les petites modifications apportées aux CSS ou aux fonctionnalités. Si les utilisateurs ont déjà mis ces fichiers en cache, ils ne pourront pas voir ces changements. Pour contourner ce dernier en-tête modifié, des ETags ou des en-têtes d’expiration peuvent être utilisés pour s’assurer que les utilisateurs peuvent obtenir la version la plus récente de votre site web.

Ouf ! Félicitations si vous êtes arrivé jusqu’ici. Faites-nous savoir si vous souhaitez choisir le cerveau de notre équipe technique.