Poursuivons-donc nos optimisations pour alléger le code de nos pages Web.
Cette fois pour le code HTML5 et avec quelques cerises du gâteux...
Encore une fois, certaines recommandations doivent être envisagées avec circonspection et prudence.
Et, bien sûr, pour vos tests il vous faut un navigateur moderne et à jour.
On y va ?
• • •
Le balisage HTML5
Le cas de <body> et de </html>
<body> n'est pas indispensable du tout pour la validation du code ni la compréhension de la structure de la page. Mais je me le garde parce que c'est la matrice de toutes les balises qui la suivront. Par contre son tag de fermeture (</body>), lui, ne sert à rien. Vous pouvez l'enlever sans souci.
Itou pour </html> qu'on peut se demander pourquoi elle a été si longuement requise.
Les autres balises auto-fermantes d'HTML5
C'est par inadvertance que je m'en suis aperçu mais la balise de fermeture </p> des paragraphes n'est nullement indispensable. J'ai commencé à la passer à la trappe quand je me suis aperçu que les parsers d'Opera (10.60) et de Firefox (3.6.6), dans certaines conditions, plantent la mise en page. Là c'est l'absence de la fermeture de la balises du paragraphe qui a fait glisser le contenu de la liste hors son conteneur, la balise <aside>.
Pourtant, dans ce cas particulier, Safari et Chrome n'ont aucun problème avec l'absence de </p>.
Pour les listes, si on doit conserver les balises de fermetures des déclaration de listes (</ul>, </ol>) la balise <li>, elle, est auto-fermante. Encore une dont on peut faire l'économie. Et là, sans aucun problème pour les navigateurs sachant interpréter HTML5 comme il convient.
Les scripts
Autant que possible ceux-ci doivent être placés au plus bas de la page. Certains doivent se déclencher une fois que tous les éléments du DOM sont chargés, alors que d'autres peuvent se charger en parallèle. HTML5 offre 2 nouveaux attributs pour la balise <script> :
- async : de manière asynchrone. C’est à dire indépendamment et en parallèle du processus de chargement de la page Web.
Concrètement, le navigateur n’attend pas que les scripts s’exécutent pour interpréter le code HTML qui est placé après. - defer : en différé. Le script pourvu de cet attribut sera exécuté à la fin du parsing de la page HTML.
Attention : avec Firefox (encore lui !) les attributs defer et async provoquent sur certains scripts des comportements totalement incompréhensibles. Ses moteurs d'interprétation d'HML5 ou de Javascript semblent nécessiter une mise à jour.
Autre optimisation sur les scripts quand en HTML5 : préciser type="text/javascript" ne sert plus à rien. Faites-les sauter. Tant dans vos scripts externes, qu'internes.
Le cas particulier du navigateur IE
Si HTML5 et CSS3 peuvent être interprétés par tous les navigateurs, il faut pour les différentes versions actuelles d'IE, les faire passer par le filtre d'un script pour lui apprendre le balisage HTML5 et par des hacks (ou un script, ou bien encore des CSS conditionnelles) pour lui apprendre les bonnes manières de certaines propriétés des CSS :
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->- je n'ai seulement que 12% de visiteurs tatoués d'un « À MS pour toujours ». Ils sont tombés ici par hasard : maintenant ils vont se perdre dans le fouillis de mon gabarit ininterprétable par IE.
- la version 9 arrive à grands pas : les accros à Internet Explorer n'auront qu'à faire leurs mises à jours.
Pour conclure
Ces optimisations réalisées et testées depuis Avril m'ont permis un gain de 20% sur le chargement de mes pages. Plutôt qu'aux exemples du code des 2 parties de l'article, fiez-vous au code qui sera lui, régulièrement mis à jour. Avec HTML5 rien n'étant encore figé (il faudra attendre quelques mois encore la spec quasi-définitive), il se peut qu'il y ait des modifs importantes à venir.
À bientôt.
Commentaires :
Si tu te bases sur l'extension FF HTML Validator sache qu'elle n'interprète pas encore HTML5.