Vitesse d'affichage et référencement - Vidéos en ligne, web marketing, référencement et réseaux sociaux.

Vitesse d’affichage d’une page web et son référencement.

La qualité du référencement d’une page web, chez Google, est intimement liée à sa vitesse d’affichage. Or Google fournit de multiples services aux webmasters et développeurs de sites web, qui parfois, sont antagonistes.

Les polices libres de droits.

Entre autres services, Google fourni l’accès à des polices d’affichage prêtes à l’emploi. Ces polices, ou fonts en anglais, sont disponibles à cette adresse : https://fonts.google.com.
Une ou plusieurs polices peuvent être utilisées sur l’ensemble d’un site web, ou uniquement sur une page en particulier. Il s’agit de polices qui ne sont pas forcément en standard sur le PC de l’utilisateur.

Comment afficher des polices spécifiques sur un site web ?

Concrètement, il s’agit d’indiquer au navigateur que la police à afficher se trouve sur un autre serveur. Dans la feuille de style du site web (style.css) ou dans le script “css” d’une page HTML, c’est avec l’instruction suivante :

*@import url(‘https://fonts.googleapis.com/css?family=nom-de-la-police:300’);

Pour info, “300” est l’épaisseur de la police : de très gras à très fin (de 100 à 700 par exemple).

Ensuite, à chaque fois que cette police est nécessaire, il faut le spécifier. Comme par exemple pour les titres de pages auxquels on octroie la balise “h1” :

h1.titre {font-family: “nom-de-la-police”, sans-serif;}

Avec ce type de requête dans le code, on utilise des polices prêtes à l’emploi. Mais le paradoxe est que Google sanctionne les scripts qui vont chercher des éléments externes au site web.
Nous avons expérimenté sur la page de garde de notre propre site web “scyvius.net” . Cette page est uniquement en HTML. Grâce à l’outil Google qui mesure la vitesse d’affichage d’une page web, il est possible d’expérimenter les deux façons de faire : En utilisant les polices directement depuis le site de Google, ou en important les fichiers des polices afin de les intégrer aux pages web.

Un exemple avec l’utilisation des polices d’écritures libres de droits, directement depuis le site de Google :

Vitesse d'affichage sur smartphone avec polices importées. — Vitesse d’affichage sur smartphone avec polices importées.

Vitesse d'affichage sur PC avec polices importées. — Vitesse d’affichage sur PC avec polices importées.

Cette notation est très insatisfaisante pour une simple page en HTML : Elle devrait se situer proche de 100%.

Il vaut donc mieux importer les fichiers de la police dans le répertoire du site web, et les INTÉGRER dans les scripts CSS. Ce qui est également proposé par Google.

Les fichiers téléchargés depuis le site de Google devront être placés dans un répertoire du site web (“/polices”, par exemple).

@font-face {font-family: ‘Nom-de-la-police’; src: url(‘/polices/Nom-de-la-police.ttf’);font-weight: normal;font-style: normal;}
@font-face {font-family: ‘Nom-de-la-police’; src: url(‘/polices/Nom-de-la-police.ttf’);font-weight: bold;font-style: normal;}

Dans cet exemple, les deux lignes font appel à un style gras et un style normal.

Ensuite, il suffit, comme dans le cas précédent, de faire appel à cette police d’affichage selon les besoins. Comme pour un titre de page estampillé de la balise “h1” :

h1.titre {font-family: “nom-de-la-police”, sans-serif;}