La balise head - les fondamentaux (2/2)

Référencement, réseaux sociaux, interopérabilité et performance web sont autant de sujets qui sont à prendre en compte à travers la balise head de vos pages web, découvrons ensemble les fondamentaux. (partie 2/2)

Cet article constitue la seconde partie de notre sujet sur la balise <head>. Si vous avez raté la première partie, l'article est disponible ici.
Nous allons maintenant présenter les subtilités à connaître pour identifier et organiser les ressources chargées depuis le <head> dans une optique de performance. Nous conclurons notre dossier par quelques informations importantes pour les sites mobiles.

Permettez un affichage rapide de la page

Les paragraphes suivants abordent des notions essentielles pour l'expérience utilisateur sur votre page.

N'oubliez pas que les internautes sont impatients. L'une de vos priorités doit donc être de rendre vos pages interactives au plus vite et d'afficher en priorité les contenus importants, notamment ceux disponibles en haut de page sans que l'utilisateur n'ait besoin de “scroller”.

“We must deliver and render the above the fold (ATF) content in under one second, which allows the user to begin interacting with the page as soon as possible” (Google Page Speed Insights)

Votre objectif est donc d’afficher les contenus au dessus de la ligne de flottaison en moins d’une seconde. Vous allez ainsi mener plusieurs actions afin de rester sous ce seuil, ou tout du moins de s’en approcher au maximum. Ces actions seront plus ou moins difficiles à mener selon le contexte de votre page : site développé “from scratch”, utilisation de tel ou tel CMS, choix du serveur, etc.  C’est d’ailleurs ce qui fait toute la valeur ajoutée de DareBoost par rapport aux autres outils d’audit: vous êtes guidés pas-à-pas selon les technologies utilisées par votre site.

Nous allons désormais nous intéresser aux techniques pouvant être mises en œuvre dans la balise <head> pour rendre votre site interactif le plus rapidement possible.

Idéalement, vous devez organiser vos feuilles de styles afin de séparer celles utilisées au dessus et en dessous de la ligne de flottaison. Les premières devant être chargées dans le <head>, et les secondes dans la balise <body>, après le contenu à afficher en priorité à l’utilisateur.

Le même comportement est à adopter pour vos fichiers tels que les scripts JavaScript. Placez les scripts non utiles à l’affichage initial après le contenu à afficher en priorité.

Ensuite, il faut adopter une politique d’exécution cohérente pour chaque script. Deux approches majeures existent à ce niveau :
  • les scripts exécutés de façon synchrone
  • les scripts exécutés de façon asynchrone

    • Les scripts exécutés de façon synchrone

    Lorsque votre navigateur web rencontre une balise <script>, son comportement par défaut est de bloquer l’exécution de la page tant que la ressource en question n’est pas chargée et exécutée. En effet un script est en mesure de modifier le DOM ou le CSSOM, qui permettent au navigateur de représenter la page. Il faut donc nécessairement que le script soit exécuté avant l’interprétation du reste de la page, qui peut alors être modifiée lors de l’exécution.C'est par exemple ce qu’il se passe avec le script HTML 5 shiv qui permet la compatibilité d'anciennes versions d’Internet Explorer avec des éléments issus des spécifications HTML 5.

    Les scripts exécutés de façon asynchrone

    D'autres scripts servent essentiellement à interagir avec l'utilisateur. Ils nécessitent donc une action de l'internaute. Un délai de quelques centaines de millisecondes est alors acceptable entre l'affichage de la page et la fin de leur exécution. Pour ce faire, vous pouvez utiliser l'attribut async :

    <script src="script.js" async></script>
    Avec cette méthode le script ne bloque plus l’exécution du reste de la page. Le navigateur charge la ressource tout en continuant d’interpréter la suite de la page, le script sera exécuté avant la fin du chargement de la page. Attention cependant en cas de dépendances entre vos scripts : vous ne maîtrisez plus l’ordre de chargement !
    Une technique très intéressante consiste à ne charger les javascripts qu’après l’évènement onload. Vous limitez ainsi le volume initial de données téléchargées, tout en diminuant le temps d’exécution de la page et de son rendu. Très utile par exemple pour charger des widgets sociaux qui sont généralement très pénalisants en termes de performance.Vous trouverez ici un exemple de code proposé par Google.

    Sites mobiles, des précisions importantes

    Pour finir, certaines informations du <head> sont mises à disposition pour la compatibilité avec les appareils mobiles. Nous allons citer ici deux exemples.

    <link> canonical/alternate

    Les balises <link> “canonical” et “alternate” permettent aux robots d'indexation de connaître la version équivalente classique ou mobile de la page en cours d’indexation.
    Version classique (à placer dans sa page mobile) :
    <link rel="canonical" href="http://www.example.com/">
    Version mobile (à placer dans sa page classique) :
    <link rel="alternate" media="only screen and (max-width: 640px)"
          href="http://m.example.com/">
    Bien entendu, inutile de préciser ces informations dans le cas d’un site utilisant le responsive design par exemple, le contenu de la page étant identique.

    <meta> viewport

    Enfin, une meta information se révèle être essentielle pour afficher correctement sa page web sur mobile : la meta viewport. Elle vous permet d’adapter le contenu de la page en prenant en compte la résolution de votre périphérique.
    La configuration suivante est particulièrement intéressante :
    <meta name="viewport" content="initial-scale=1"/>
    Vous indiquez en effet que le zoom initial sur la page doit être fait de manière à ce qu’un “pixel CSS” correspond à un “pixel réel”.De nombreuses options sont disponibles, vous pouvez les retrouver dans cet excellent article sur le sujet.

    Cela conclu ces deux articles sur la balise <head>. En suivant les différentes recommandations évoquées, vous vous donnez de bonnes bases pour mettre en place une page performante. 

    Notez que vous pouvez tester gratuitement le respect de ces recommandations avec l’outil en ligne DareBoost.