Vitesse et performances de votre site web : ce que vous pouvez faire et comment HubSpot vous aide

Highlighted
HubSpot Moderator

This is a translated copy of: Site Speed and Performance: What you can do, and How HubSpot Helps from the HubSpot Designers Blog for HubSpot's French users. 

 

Le CMS HubSpot est l'un des systèmes de gestion de contenu les plus avancés et les plus optimisés du marché. Nous travaillons en permanence à optimiser davantage votre site hébergé sur HubSpot, ainsi qu'à proposer des solutions que vous pouvez implémenter pour améliorer la vitesse et les performances de votre site Web.

 

Ce que HubSpot fait en coulisses pour optimiser votre site web

 

Secure Socket Layer (SSL)

 

En octobre 2017, Google a déployé la mise à jour de Chrome qui commençait à marquer les pages contenant un formulaire, mais qui ne sont pas compatibles SSL, comme étant « non sécurisées ». Étant donné que Chrome représente environ 47 % du marché des navigateurs, cette mise à jour concerne des millions de visiteurs et de spécialistes du marketing sur le web.

Le protocole SSL standard est inclus pour les versions Basique, Pro et Enterprise du Hub Marketing. Cette modification garantit que votre trafic et vos prospects ne sont pas affectés par cette mise à jour Google Chrome, et que les informations relatives à vos visiteurs soient protégées des attaques.

 

HTTP/2

 

HTTP/2 est un remplacement de la façon dont HTTP est exprimé, il ne s'agit pas d'une réécriture du protocole; les méthodes HTTP, les codes de statut et la sémantique sont les mêmes, et il devrait être possible d'utiliser les mêmes API que HTTP/1.x (éventuellement avec quelques petits ajouts) pour représenter le protocole.

Le protocole met l’accent sur la performance; en particulier la latence perçue par l'utilisateur final, l'utilisation des ressources réseau et serveur. L'un des principaux objectifs est de permettre l'utilisation d'une seule connexion des navigateurs vers un site web.

Tout le trafic SSL sur les sites web hébergés par HubSpot est diffusé via HTTP/2. Découvrez comment utiliser le protocole sécurisé ici.

 

IPv6

 

IPv6 est la version la plus récente du protocole internet et augmente le nombre d'adresses disponibles à un nombre pratiquement illimité. Face à la pénurie d'adresses IPv4, la transition vers IPv6 permet à internet de continuer de se développer et permet le développement de nouveaux services innovants, car davantage d'appareils peuvent se connecter à internet.

Tous les sites web hébergés sur HubSpot incluent des adresses IPv6, de sorte qu'ils peuvent être accédés en mode natif sur IPv6.

 

Minification JavaScript

 

Bien que les espaces, les sauts de ligne et les commentaires facilitent considérablement l'édition et la lecture des fichiers codés, ils prennent plus de temps pour l'analyse des navigateurs. Les fichiers JavaScript plus petits offrent aux utilisateurs de votre site web une expérience utilisateur plus fluide et plus rapide. jQuery, la populaire bibliothèque Javascript illustre bien l'impact de la minification: une fois minimisé jQuery est réduit à 86 k contre 271 k pour la version non-minimisé.

HubSpot supprime automatiquement les espaces inutiles, les sauts de ligne et les commentaires de vos fichiers JavaScript dans le Gestionnaire de conception afin d'assurer la livraison et l'analyse les plus rapides de vos fichiers JavaScript. Notez que les fichiers JavaScript téléchargés dans le Gestionnaire de fichiers ne sont pas automatiquement réduits, ils doivent donc être minimisés avant le téléchargement si vous prévoyez de les inclure sur votre site web.

 

REMARQUE : chaque fois que vous mettez à jour vos fichiers JavaScript, HubSpot les réduit automatiquement en arrière-plan, de sorte que la version .min.js de vos fichiers Javascript sera diffusée sur des pages actives. Les erreurs de syntaxe peuvent empêcher la réduction de vos fichiers JavaScript.

 

image JS.png

 

Fusion CSS

 

HubSpot réduit automatiquement (en supprimant les espaces inutiles et les sauts de ligne) et combine tous les fichiers CSS inclus sur une seule page dans un seul fichier CSS. Cela se traduit par des requêtes HTTP minimales et la livraison et l'analyse de CSS sur votre site web les plus rapides.

Enfin, le fichier CSS combiné est envoyé en utilisant HTTP/2 Push, ce qui signifie que les navigateurs peuvent commencer à télécharger tous les fichiers CSS dont ils ont besoin avant même que le chargement de la page ne soit terminé.

 

REMARQUE : chaque fois que vous mettez à jour vos fichiers CSS, HubSpot doit redéfinir et combiner les fichiers CSS sur une page, de sorte que la version combinée de vos fichiers CSS soit diffusée sur des pages actives avant la fin de la période. Les erreurs de syntaxe peuvent empêcher la réduction et la fusion de vos fichiers CSS. Les mises à jour des fichiers CSS externes ne mettront pas à jour les fichiers combinés-css. Actuellement, les pages avec CSS en ligne n'auront pas leurs fichiers CSS combinés.

 

Mise en cache du navigateur et du serveur

 

Chaque fois qu'un visiteur demande une page, son navigateur fait une chaîne complexe de demandes à différents services qui font des calculs complexes et des itinéraires pour servir les visiteurs de leurs fichiers.

HubSpot met automatiquement en cache les pages et les fichiers au niveau du serveur et du navigateur pour assurer la diffusion la plus rapide de tous les éléments de la page aux visiteurs de votre site web. Lorsque votre page ou toute dépendance de votre page (comme un modèle ou un module) change, HubSpot fait expirer automatiquement les caches de serveur pour cette page.

La mise en cache du serveur est particulièrement efficace pour les visiteurs de sites mobiles.

 

Réécriture du domaine

 

Chaque domaine supplémentaire utilisé sur votre site entraîne une recherche et une connexion DNS supplémentaires. Moins vous utilisez de domaines, plus votre site web sera chargé rapidement. HTTP/2 prend en charge le chargement simultané de plusieurs fichiers sur la même connexion, de sorte que les anciennes règles de partitionnement de vos actifs entre plusieurs domaines ne s'appliquent plus.

Les URL des ressources référencées dans les pages du CMS, telles que les fichiers, les CSS et les images sont automatiquement réécrites pour correspondre au domaine de la page en cours lorsque cela est possible. Ainsi, si vous faites référence à une image sur : http://cdn2.hubspot.net/hubfs/53/HubSpot_Logos/HSLogo_gray.svg sur une page diffusée sur : www.hubspot.coml'URL sera automatiquement mise à jour vers https://www.hubspot.com/hubfs/HubSpot_Logos/HSLogo_gray.svg.

 

Compression du texte

 

Les fichiers texte tels que HTML, CSS et JS sont tous compressés en utilisant gzip avant d'être diffusés aux navigateurs. La compression peut réduire la taille des fichiers jusqu'à 10 fois. Tandis que la minification accélère le temps d'analyse des fichiers CSS et JS dans le navigateur, la compression accélère ces fichiers vers le navigateur.

 

Compression, optimisation et mise à redimensionnement automatique des images

 

Lorsque vous téléchargez une image vers le Gestionnaire de fichiers, les images sont automatiquement optimisées. Plus précisément, les fichiers JPEG et PNG sont dépouillés de leurs méta-données (EXIF et autres éléments qui alourdissent les images). Toutes les images sont également compressées sans perte visuelle. De plus, HubSpot peut publier des images dans un codage différent si elles peuvent être représentées avec le format PNG, plus petit que le format JPEG.

Les images sont ré-enregistrées à 72 dpi indépendamment de leur résolution d'origine. Si vous téléchargez un fichier à 300 dpi, créé à l'origine pour l'impression, il sera sauvegardé à 72 dpi, ce qui est la norme pour le web.

Au fur et à mesure que le CMS affiche une page, HubSpot redimensionne automatiquement les images, en recherchant des images qui ont des attributs de largeur ou de hauteur sur les images. Si ces images sont hébergées sur le Gestionnaire de fichiers, HubSpot ajoute des segments de chemin de largeur et / ou de hauteur à l'URL de l'image. Si l'URL possède un paramètre de hauteur ou de largeur, le CMS intercepte cette requête et tente de la redimensionner aux dimensions demandées. Les navigateurs disposent de plusieurs options pour le chargement de la résolution de l'image, afin que vos images soient nettes sur les affichages standard et haute résolution.

L’optimisation de l'image la compression et le redimensionnement automatique de l'image sont activées par défaut pour toutes les pages / fichiers hébergés par HubSpot.

 

image compression.png

 

Accelerated Mobile pages (AMP)

 

AMP est un format de page spécifique au mobile qui charge le contenu presque instantanément. L'AMP peut être activé sur vos articles de blog hébergés sur HubSpot à l'aide d'un commutateur, consultez cet article cet article pour plus de détails.



Ce que vous pouvez faire pour optimiser votre site web

 

Charger les requêtes jQuery dans le pied de page

 

jQuery est une bibliothèque JavaScript incluse par défaut sur tous les sites web hébergés par HubSpot. Il est maintenant possible d'inclure jQuery dans le pied de page (et non plus au code HTML principal) de vos sites web hébergés sur HubSpot. Si vous chargez jQuery dans le pied de page, votre page sera chargée sans avoir à analyser et à charger jQuery tant que cette bibliothèque n'est pas requise. Ainsi le code visuel (HTML et CSS) sera chargé en premier.

 

Cela nécessite que toutes les dépendances jQuery se chargent également dans le pied de page. Pour tester le chargement de vos pages avec jQuery chargé dans le pied de page, vous pouvez ajouter à vos pages publiées la chaîne de requête suivante afin d'effectuer un test : ?hsMoveJQueryToFooter=True

 

image jquery.png

 

N’utiliser que les fichiers CSS et JavaScript dont vous avez besoin

 

Faites de votre mieux pour ne joindre et n’utiliser que des fichiers JavaScript et CSS sur les pages / modèles qui les utilisent réellement. Google dispose d'un outil astucieux qui analyse la quantité de CSS et de JavaScript utilisés sur une page donnée, ce qui peut laisser supposer qu'un facteur de scoring/classement pourrait être utilisé un jour dans le futur. Moins il y a de JavaScript et de CSS sur une page, plus l'expérience du visiteur est rapide.

La connexion de fichiers JavaScript ou CSS dépendants à des modules personnalisés permet de réduire la quantité de code non utilisé chargé par une page, car cela garantit que le code dépendant ne vit que sur les pages du module personnalisé si un module personnalisé est inclus plusieurs fois.

 

Réduire le nombre de requêtes HTTP cross origin HTTP requests

 

Abstenez-vous de faire de nombreuses requêtes HTTP pour les ressources sur vos pages. Faites de votre mieux pour inclure le moins de fichiers possible sur vos sites web (HubSpot combine automatiquement les fichiers CSS dans un seul fichier : combined-css). En outre, les requêtes http d'origine croisée ralentissent les pages et s'appuient sur des services externes performants et fiables, hébergez tout ce que vous pouvez dans HubSpot pour éviter d'extraire des ressources externes et d'origine croisée sur vos pages.

 

1 Reply 1
Community Manager

Merci @Adeline_Hochet Smiley Happy

Reply
0 Upvotes