Comment avoir un site en pole position

Google a admis que le vitesse est un facteur déterminant pour la positionnement d'un site. Pour cette raison, et pour répondre aux besoins des experts SEO, le géant de Mountain View a introduit dans le Outils pour les webmasters, aujourd'hui Search Console, un nouvel outil appelé Aperçu de la vitesse de la page. Cet outil permet d'analyser les problèmes de performances d'une page Web de manière intuitive et directement depuis le navigateur Mozilla Firefox. L'outil, en plus de signaler les problèmes potentiels, donne également des conseils et des fonctions utiles pour les résoudre.



Certaines des failles rencontrées avec Page Speed ​​​​se résolvent facilement lors de la phase de conception du frontend d'un site. D'autres, en revanche, ont besoin de plus de connaissances au niveau du système.

Comment avoir un site en pole position

Pour entrer plus en dĂ©tail, les facteurs qui peuvent dĂ©pendre des configurations du système sont :

  • mise en cache ;
  • compression;

Ceux relatifs au frontend et Ă  la structuration du site sont en revanche :

  • rĂ©duction des rĂ©solutions DNS et des redirections
  • minification des fichiers Css / Js / Html ;
  • optimisation d'image;
  • ordre dans lequel les Ă©lĂ©ments de la page sont chargĂ©s ;
  • parallĂ©lisation et rĂ©duction des requĂŞtes Http.
  • Analysons ces aspects en dĂ©tail.

Première phase : mise en cache

La grande majorité des pages Web contiennent des ressources telles que des fichiers javascript, Css, images qui composent la mise en page et d'autres types de fichiers qui sont rarement modifiés. Bien que ces ressources changent, en fait, rarement, chaque fois qu'un utilisateur demande la page Web avec son navigateur, elles sont, cependant, téléchargé à nouveau. Cela augmente le temps de chargement de la page. Eh bien leHttp la mise en cache vous permet d'enregistrer ces ressources dans le navigateur de l'utilisateur qui visite le site ou dans les serveurs proxy du fournisseur. Le résultat est que, par exemple, l'image mise en cache ne sera plus servie depuis le site Web, mais directement depuis le PC de l'utilisateur ou depuis le Proxy.



Cela donne un double avantage : cela rĂ©duit le temps d'aller-retour (le temps que prennent les donnĂ©es pour aller et venir d'un client Ă  un serveur), Ă©liminant beaucoup de requĂŞtes Http nĂ©cessaires pour obtenir toutes les ressources et, par consĂ©quent, rĂ©duit la taille de la rĂ©ponse globale du serveur. La rĂ©duction du poids total de la page pour chaque visiteur qui revient rĂ©duit Ă©galement considĂ©rablement l'utilisation de la bande passante et les coĂ»ts de chargement du site. 

Compression en cours ..

La compression des pages Web peut être réalisée à l'aide de systèmes gzip o dégonfler. En effet, tous les navigateurs modernes en circulation prennent en charge la compression des fichiers Html, Css et Javascript et, par conséquent, vous permettent d'envoyer des fichiers plus petits en ligne sans perdre d'informations. Le processus de compression a lieu côté serveur, en activant certains modules, ou en utilisant des scripts spécifiques.

La compression est recommandée pour des ressources pas trop petites, car ce processus a sa propre charge sur la machine. La solution idéale est donc de l'associer à des mécanismes de mise en cache. Un autre aspect à garder à l'esprit est d'éviter la compression de fichiers au format binaire (tels que des images, des vidéos, des archives et des pdf) et, par conséquent, pratiquement déjà compressés.

Comment avoir un site en pole position

RĂ©solutions DNS et de redirection

Le temps de téléchargement de la page est également considérablement affecté par le nombre de résolutions Dns et le nombre de Réorienter. Voyons en détail ce que c'est :


La Résolution DNS c'est le temps mis par le navigateur pour identifier l'origine de chaque nom d'hôte unique desservant les ressources, auquel s'ajoute le délai causé par le temps d'aller-retour. Pour être clair, l'utilisation de nombreux widgets au sein de la page provoque une forte augmentation des résolutions DNS. Par conséquent, il est bon d'utiliser ces objets avec conscience et seulement s'ils profitent réellement aux visiteurs.


Il en va de même bien sûr pour le réorienter: il est conseillé d'essayer d'inclure des ressources qui ne font pas référence à d'autres. Il faut dire que, dans certains cas, comme les sites qui incluent de nombreuses vidéos et images, vous pouvez bénéficier de l'utilisation de différents hostnames, car le temps de résolution DNS est compensé par la parallélisation du téléchargement de multiples ressources. Il est donc nécessaire de faire les bonnes évaluations en fonction de chaque besoin.

Parallélisation

Comme recommandĂ© par Google, le nombre optimal d'hĂ´tes Ă  utiliser est compris entre 1 et 5 (rĂ©partis pour qu'il y ait un hĂ´te principal et quatre Ă  partir desquels tĂ©lĂ©charger les ressources "cacheables") et le rapport entre le nombre d'hĂ´tes et de ressources doit ĂŞtre 1 Ă  6. Alors, ne jamais utiliser plusieurs noms d'hĂ´tes si le nombre de ressources utilisĂ©es par la page est infĂ©rieur Ă  six. Par exemple, il est possible d'Ă©mettre l'hypothèse qu'un site qui utilise un CSS, un Javascript et six images ne gagnerait pas Ă  utiliser un hostname supplĂ©mentaire, ce qui serait justifiable si les ressources devenaient 12. 


Miniification Css/Html/Javascript

La minification ce n'est rien de plus que l'opĂ©ration de compactage du code source des fichiers pour minimiser la prĂ©sence d'espaces blancs et de nouvelles lignes. Cette intervention, combinĂ©e Ă  la compression, vous permet d'obtenir une rĂ©duction significative de la taille du fichier. Voici un petit exemple trivial de minification :

Avant:

a{

couleur: #0027ee

}

Après:

a{couleur:#0027ee}

Comment avoir un site en pole position

Optimisation des images

Les points clés quand il s'agit de ottimizzazione des images, sont sans aucun doute la maximisation du rapport qualité / taille et l'utilisation des meilleurs algorithmes de compression existants. Un excellent outil pour y parvenir est smush.com Yahoo, mais aussi RIOT par i fichier JPG e TinyPng pour les fichiers PNG sont d'excellents outils.


Une autre opĂ©ration très importante lors de la crĂ©ation d'une page Web utilisant des images est de toujours utiliser des photos dĂ©jĂ  mises Ă  l'Ă©chelle et donc de la taille correspondant Ă  la taille rĂ©elle affichĂ©e. Utiliser une grande image, 200 Ă— 200, et l'inclure sur la page, la redimensionner Ă  100 Ă— 100 via des balises largeur e la taille, nous utiliserons une image plus grande que nĂ©cessaire et, par consĂ©quent, le temps nĂ©cessaire Ă  son tĂ©lĂ©chargement sera plus long. Un autre paramètre important est de spĂ©cifier avec les balises qui viennent d'ĂŞtre mentionnĂ©es la taille exacte qui Ă©vite toutes les opĂ©rations de rendu inutiles. 

Ordre de chargement et de réduction des requêtes HTTP

Lors de la conception d'une page, les règles de base à prendre en compte sont :

  • combiner plusieurs fichiers CSS en une seule ressource afin de rĂ©duire le nombre de requĂŞtes Http (mĂŞme chose pour JS) ;
  • charge d'abord le css puis le Js comme ces derniers sont bloquants tandis que les premiers sont parallĂ©lisables ;
  • si possible, inclure Javascript Ă  la fin de la page;
  • Ă©viter d'inclure Css et Js en ligne dans la page ;
  • Ă©vitez d'inclure des fichiers CSS en utilisant @import ;
  • servir des documents statiques Ă  partir de domaines qui ne dĂ©finir des cookies.

Toutes ces optimisations permettent non seulement de réduire considérablement les temps de chargement des pages, car elles minimisent le nombre de requêtes Http qui ont un temps physiologique à résoudre, mais permettent également de paralléliser le téléchargement des différentes ressources à la masse.

ajouter un commentaire de Comment avoir un site en pole position
Commentaire envoyé avec succès ! Nous l'examinerons dans les prochaines heures.