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.

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.

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}

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.