TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment améliorer la vitesse de chargement des pages des sites Web HTML statiques ?

4

Le HTML est la base d’Internet et les serveurs Web envoient des pages HTML à l’interface du navigateur. Les navigateurs comme Chrome interprètent le balisage HTML et affichent le contenu de la page de manière lisible. Ce concept est le même pour les sites utilisant PHP avec des systèmes de gestion de contenu comme WordPress. Cependant, créer un site Web n’est pas suffisant de nos jours. Vous devez optimiser votre site pour un chargement rapide afin d’obtenir un bon classement dans les moteurs de recherche et une bonne expérience utilisateur. Dans cet article, nous allons explorer comment accélérer votre site Web HTML statique et améliorer les possibilités de placer votre site en tête des résultats de recherche Google.

Avant de commencer – Sites Web HTML statiques

N’oubliez pas que dans cet article, nous parlons de sites Web HTML statiques que vous créez vous-même. Vous pouvez créer des sites Web HTML avec votre propre design ou utiliser des frameworks prêts à l’emploi comme Bootstrap. De manière générale, vous pouvez télécharger les pages HTML et autres ressources (images/CSS/JS) sur votre serveur et accéder au site depuis le navigateur. À part le nom de domaine et le compte d’hébergement, vous n’avez besoin d’aucun autre outil tiers à cette fin. Vous pouvez également utiliser des outils tiers tels que Mobirise pour créer des pages HTML statiques et les télécharger via FTP.

Nous ne discutons pas des cas suivants :

  • Systèmes de gestion de contenu comme WordPress – WordPress offre une suite d’optimisation complète pour améliorer la vitesse de chargement de votre site Web. Consultez notre article sur l’ optimisation du temps de chargement des pages des sites WordPress.
  • Outils de création de sites Web tels que Weebly, Wix, etc. – ces plates-formes ne sont pas des solutions open source, ce qui signifie essentiellement que vous disposez d’options limitées au sein de la plate-forme à optimiser. Vous pouvez utiliser certaines des options suggérées dans cet article. Cependant, vous ne pouvez pas optimiser des éléments tels que la combinaison de CSS/JS, la suppression des ressources bloquant le rendu, etc., car vous ne pouvez pas accéder au serveur.

Vérifier la vitesse de la page dans l’outil Google PageSpeed ​​Insights

Maintenant que le contexte est clair, nous allons continuer. La meilleure façon de démarrer l’optimisation est d’abord de comprendre les problèmes de base existant sur votre site. Afin de trouver les problèmes liés à la vitesse, accédez aux outils Google PageSpeed ​​Insight et vérifiez le score de votre site Web. Ne vous inquiétez pas trop du score au début, faites défiler vers le bas et consultez la section des opportunités pour améliorer le score.

Comment améliorer la vitesse de chargement des pages des sites Web HTML statiques ?

Suggestions de Google PageSpeed ​​Insights

Notez que les opportunités affichées dans l’outil PageSpeed ​​Insights n’auront PAS d’impact direct sur le score. En règle générale, le score sera faible lorsque vous rencontrez des problèmes au-dessus du pli (section d’en-tête) de votre site Web. Cela inclut les ressources de blocage de rendu, le préchargement des polices et des images, le changement de mise en page cumulatif avec du code tiers, etc. Par conséquent, vous pouvez combiner les opportunités et les règles générales pour améliorer la vitesse de chargement des pages de vos sites Web HTML statiques.

Comment améliorer la vitesse de chargement des pages des sites Web HTML statiques ?

Vous pouvez utiliser les fonctionnalités suivantes pour améliorer la vitesse de votre site.

1 Combiner et réduire les fichiers CSS et JS

Un site Web HTML statique aura une feuille de style CSS comme ressource minimale pour définir le style des éléments de votre page HTML. De plus, vous pouvez utiliser des fichiers JavaScript supplémentaires pour ajouter d’autres fonctionnalités telles que des curseurs sur votre site.

  • La première chose dont vous avez besoin est de supprimer les espaces et commentaires inutiles dans vos fichiers CSS/JS/HTML. C’est ce qu’on appelle la minification qui réduit la taille du fichier et améliore la vitesse de chargement des pages. Utilisez ces outils de minification CSS, JS et HTML pour supprimer l’encombrement inutile des fichiers. N’oubliez pas que les fichiers CSS et JS minifiés auront des extensions telles que .min.css et .min.js.
  • Vérifiez auprès de votre hébergeur et activez la compression GZIP pour compresser votre contenu HTML. Cela réduira la taille du fichier servi au navigateur et améliorera considérablement la vitesse de la page. Vous pouvez vérifier si votre site utilise la compression GZIP à l’aide de cet outil et trouver les économies de taille.
  • La combinaison de fichiers CSS et JS vous aidera à réduire le nombre de requêtes HTTP vers votre serveur. Par conséquent, vous pouvez combiner les fichiers CSS au lieu d’utiliser des styles dans différentes feuilles de style. Cependant, cela n’est pas obligatoire si votre serveur d’hébergement prend en charge le protocole HTTP/2 qui prend en charge les requêtes HTTP parallèles. De plus, la combinaison de fichiers JS peut casser la mise en page à moins que vous ne sachiez comment combiner correctement le code à l’intérieur du fichier.

2 Suppression des ressources bloquant le rendu

L’étape suivante consiste à supprimer les ressources bloquant le rendu au-dessus de la section de pli (en-tête) de votre site. En règle générale, assurez-vous de lier tous les fichiers JS après la section corps de votre page HTML. Cela vous aidera à retarder le chargement des scripts et à éviter les problèmes de blocage de rendu.

  • Accédez à l’ outil Google PageSpeed ​​Insights et testez votre site Web pour mesurer la vitesse de chargement des pages.
  • Si vous avez des avertissements concernant les ressources bloquant le rendu, notez le nom du fichier.
  • Déplacez le fichier de votre section d’en-tête vers la zone de pied de page.

N’oubliez pas qu’il n’est pas possible dans toutes les situations de déplacer le fichier vers la zone de pied de page. Vérifiez que la mise en page et les fonctionnalités de votre site fonctionnent correctement lorsque vous réorganisez les fichiers. De plus, vous devrez peut-être désactiver la combinaison de fichiers pour trouver le fichier de ressources à l’origine du problème.

3 Utiliser les réseaux de diffusion de contenu (CDN)

Les deux options ci-dessus sont de nature plus technique, ce qui peut être difficile pour vous. Afin d’éviter de perdre du temps et de casser la mise en page de votre site, la meilleure solution possible est d’utiliser un réseau de diffusion de contenu (CDN) comme Cloudflare StackPath.

  • Vous pouvez combiner et réduire les fichiers en utilisant le réseau CDN au lieu de le faire sur votre serveur.
  • Augmentez la vitesse, surtout si vous proposez du contenu à des utilisateurs internationaux.
  • Améliorez la sécurité en bloquant les robots automatisés et avec des protections par force brute et DDoS.

Le CDN Cloudflare de base est gratuit, ce qui est suffisant pour la plupart des sites Web HTML statiques. Vous pouvez combiner et réduire les fichiers en un seul clic et tester son impact sur la vitesse de chargement de votre page dans l’outil Google PageSpeed ​​Insights. Si vous utilisez des frameworks tels que Bootstrap, assurez-vous d’inclure la ressource CDN au lieu de gérer le fichier source à partir de votre serveur.

4 Évitez les codes tiers

L’un des facteurs les plus importants pour améliorer le temps de chargement de votre page est de limiter l’utilisation de codes tiers sur votre site. Le problème est que vous ne pouvez pas contrôler le comportement de chargement des codes tiers. Le comportement de chargement dynamique aura un impact sur les paramètres de vitesse tels que le décalage de mise en page cumulatif et la plus grande peinture de contenu.

  • Placez les publicités comme Google AdSense sous la zone visible lorsque la page se charge. Malheureusement, cela affectera directement vos revenus en réduisant le CTR et les pages vues.
  • Insérez Google Analytics ou tout autre code de suivi après la section corps.
  • Évitez d’insérer des codes dans l’en-tête pour le partage social.
  • Si vous utilisez des polices Google, veillez à les utiliser de manière simplifiée avec moins d’épaisseurs et de familles de polices. Cela vous aidera à réduire le nombre de fichiers et à les récupérer plus rapidement depuis le serveur de Google.

5 Préchargement des polices et des images

Un autre problème de vitesse de page courant concerne le préchargement des polices et des images que vous chargez dans la section d’en-tête. Si vous voyez des messages d’avertissement dans Google PageSpeed, ajoutez les codes suivants dans votre section d’en-tête. Assurez-vous de remplacer les noms de fichiers par ceux que vous voyez dans Google PageSpeed ​​Insights.

<link rel="preload" href="font-file " as="font" crossorigin="anonymous"> <link rel="preload" as="image" href="image-file">

Ceci est très utile, en particulier lorsque vous utilisez des icônes de police géniales sur votre site.

6 images – Compresser et utiliser le format Next-Gen

La dernière option que nous expliquons ici est de compresser les images que vous utilisez sur votre site. Étant donné que les sites Web HTML statiques n’ont aucune option intégrée pour réduire la taille des images, vous devez les compresser manuellement avant de les télécharger sur votre serveur.

  • Certains serveurs Web ont une option pour compresser les images lors du téléchargement. Vérifiez auprès de votre hébergeur s’il propose un outil à cet effet.
  • Sinon, utilisez des outils de compression d’images pour réduire la taille de vos images sans perdre en qualité.
  • De plus, vous pouvez convertir le format d’image en JPEG-2000 ou JPEG XR. Généralement, les serveurs VPS ont une option de serveur d’images au format WebP que vous pouvez confirmer auprès de votre hébergeur. Dans ce cas, vous n’avez besoin d’aucune conversion car elle se fera automatiquement côté serveur pour chaque image. L’utilisation d’ images dans WebP, JPEG-2000 ou JPEG XR vous aidera à résoudre le problème des images de service dans le format de nouvelle génération dans l’outil Google PageSpeed ​​Insights

7 Utilisez le CSS critique

Lorsque vous avez la même section d’en-tête sur tout le site, il existe un moyen simple d’améliorer la vitesse de chargement. Au lieu de charger l’intégralité du fichier CSS dans l’en-tête, vous pouvez utiliser CSS uniquement pour la section d’en-tête visible lorsque la page se charge dans une fenêtre de navigateur. C’est ce qu’on appelle le CSS critique que vous pouvez générer à partir d’outils tiers.

  • Accédez à l’ outil de génération CSS critique et fournissez l’URL de votre site Web.
  • Générez des CSS critiques et copiez le contenu.
  • Mettez en page les styles copiés entre les balises … à l’intérieur de la section d’en-tête de votre site HTML.
  • Vous pouvez reporter la feuille de style principale à la section de pied de page pour éviter le problème de blocage du rendu CSS.

Comment améliorer la vitesse de chargement des pages des sites Web HTML statiques ?

Générateur CSS critique

Derniers mots

Comme mentionné, la vitesse de chargement des pages de votre site Web HTML statique dépend du rendu au-dessus de la zone de pliage dans le navigateur. Vous pouvez réduire le CSS et les scripts dans la section d’en-tête pour résoudre la plupart des problèmes et des opportunités affichés dans l’outil Google PageSpeed ​​Insights. La meilleure option est d’utiliser le CDN et d’éviter le contenu tiers dans la section d’en-tête.

Source d’enregistrement: webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'acceptePlus de détails