Optimiser une page HTML

Optimiser une page HTML consiste essentiellement à la réécrire afin de modifier l'ordre des requêtes HTTP soumises au serveur par le navigateur et à en diminuer le nombre. La réorganisation de la page a également un effet sur le temps de préparation du DOM et donc de la mise en page finale. Le but est d'accélérer le temps d'affichage et si possible de rendre ce dernier inférieur au temps de chargement. Une bonne mesure de cette optimisation est le Speed Index.

Jumbo CSS : concaténer tous les CSS en un seul

Les pages HTML, en particulier celles conçues au moyen d'un CMS contiennent souvent un grand nombre de CSS. Typiquement un par pluggin ou widget ajouté à la page en plus des CSS de base. Le but de cette optimisation consiste à concaténer tous les CSS en un seul, qu'on appelle le jumbo-css, afin de diminuer le nombre de requêtes. Il est important que les feuilles de style soient chargées au plus tôt afin que tous les éléments du DOM soient correctement décorés dès leur chargement. Ceci simplifie les calculs de mise en page effectués par le navigateur et accélère l'affichage.

Inlining : incorporer les composants directement dans la page

Lorsque les composants (CSS, images, scripts) sont assez petits, il est avantageux de les incorporer directement dans la page. Ceci est également possible pour les images. Dans ce cas l'URL de l'image est remplacée par la donnée de l'image codée sous forme texte en base64.

Versioner les URL

La solution définitive à la gestion du cache du navigateur et au choix délicat des durées de vie des composants dans le cache est de générer des URL dépendantes de la version du composant. Une méthode radicale consiste à adjoindre la signature numérique du composant à l'URL. Par exemple, /images/landscape.jpg devient /images/landescape-4D4A88C0B211AADC.jpg4D4A88C0B211AADC est le CRC64 de l'image. Cela permet d'attribuer une durée de vie infinie à ce composant sachant que s'il change, sa signature changera et par conséquant, il sera vu comme un autre composant par le navigateur.

Imaginons que l'on change légèrement la saturation des couleurs de l'image dont l'URL est indiquée ci-dessus, sa nouvelle signature sera (par exemple) B7C14EBA40F192E9 et donc l'URL deviendra /images/landescape-B7C14EBA40F192E9.jpg

Ceci est fait par UBfast lorsque le HTML-Tweaker est activé.