Générateur de sites web

IMPORTANT

Ce site web est un prototype en cours de construction, destiné à valider le code source généré par le logiciel Thot (version 0.0.1), projet personnel lui-même en phase de développement. Son contenu ainsi que son graphisme sont donc expérimentaux et n'ont de ce fait aucune valeur commerciale et/ou juridique. Pour obtenir plus d'information sur cet environnement, vous pouvez vous reporter à la page intitulée Questions fréquentes. Une page Facebook consacrée au projet peut par ailleurs être consultée. Un compte Twitter fournit des informations sur l'avancement du projet.

Préchargement des ressources

Le problème

Pour être correctement affichées par un navigateur, les pages web nécessitent la plupart du temps de charger différentes ressources externes. C'est notamment le cas lorsque des polices de caractères, des images, des scripts, etc. entrent dans la composition de la page.

Le problème est que, lorsqu'elle accède à une ressource externe quelle qu'elle soit, la page web en cours de construction émet une requête HTTP à destination du serveur distant…

Ce processus nécessite dans un premier temps d'établir une connexion entre le navigateur et le serveur, puis une action de la part du serveur pour récupérer (site statique) ou produire (site dynamique) la ressource demandée et enfin un envoi de données en retour vers le navigateur ayant initié la demande.

Tout ceci représente un coût en termes de délai d'exécution et de consommation de la bande passante. Le but du jeu pour obtenir un site parfaitement optimisé consiste donc à limiter le nombre de requêtes HTTP émises à destination du serveur et réduire la taille des flux échangés à leur minimum afin d'améliorer la vitesse d'exécution globale.

Toute amélioration apportée à ce processus influe sur le ressenti de l'utilisateur et son confort de navigation sur un site web. Un gain dans le temps de chargement d'une page, même s'il peut paraître a priori minime, augmente la probabilité de voir cet utilisateur revenir visiter le site en question. A contrario, une dégradation du temps de chargement s'avère très vite pénalisante et mal perçue par ce même visiteur. Ainsi, on estime aujourd'hui qu'un temps de chargement maximum de 3,5 s est le seuil au-delà duquel ce sentiment de lenteur apparaît côté utilisateur.

Bien que la bande passante disponible se soit accrue ces dernières années avec l'arrivée de la 3G, puis la 4G et aujourd'hui la 5G, force est de constater que dans le même temps le poids des pages web et notamment celui des ressources externes dont elles dépendent s'est accru lui aussi de façon importante. Il convient de noter par ailleurs qu'il existe une disparité de fait entre les différentes localisations géographiques en matière de bande passante réellement offerte aux utilisateurs, notamment sur terminaux mobiles.

La solution

L'augmentation de la taille des tuyaux (du moins pour certains utilisateurs) allant de pair avec l'augmentation simultanée des flux ayant à les traverser rend toujours aussi indispensable l'optimisation des temps de chargement des pages web. Il appartient ainsi aux concepteurs de ne pas préjuger des capacités de connexion pour qui visitera leur site, mais bien de chercher en permanence à optimiser la gestion des ressources.

Cette optimisation peut se faire à plusieurs niveaux, en réduisant tout d'abord la taille intrinséque d'une ressource (ex. suppression des informations EXIF dans une image), en compressant ensuite le flux avant de l'envoyer dans les tuyaux précités mais surtout en anticipant le chargement. C'est ce dernier point qui est connu sous le terme de « préchargement » et qui consiste à indiquer au navigateur quelles seront les ressources dont on est sûr qu'elles devront être disponibles et téléchargées à un moment donné dans la construction de la page web. Le navigateur, dès qu'il a connaissance de cette information, peut donc émettre très tôt la requête HTTP correspondante et récupérer en avance le flux de données requis pour le placer dans son cache interne, le mettant ainsi à disposition le moment venu.

La première façon de précharger une ressource à partir d'une page web consiste à ajouter dans sa section HEAD une balise LINK avec un attribut @rel ayant pour valeur « preload ». Lorsque le navigateur analyse le code source de la page et détecte la présence de cette balise, il va identifier la ressource concernée et émettre une requête HTTP vers le serveur sur lequel elle est stockée. Ce serveur n'est pas forcément identique à celui qui délivre la page en cours et peut très bien être localisé ailleurs. C'est notamment le cas lorsque le site web a recours à des CDN (Content Delivery Network) pour stocker, justement, ses ressources statiques au plus près des utilisateurs susceptibles de les demander.

La seconde façon de procéder à ce préchargement consiste à utiliser les entêtes de type LINK reconnues par le protocole de communication HTTP/2. Sur le fond, leur fonctionnement est identique à celui décrit pour la balise LINK précitée, mais il repose sur l'échange bidirectionnel mis en place par ce protocole et permet au serveur distant de « pousser » (push) par anticipation certaines ressources critiques vers le navigateur demandant le chargement d'une page web.

Comment procéde le générateur Thot ?

Le générateur de sites web Thot repose sur la notion de composant, chacun d'eux représentant une « brique logique » dont l'assemblage va constituer la structure d'une page.

En tant qu'entité autonome, un composant est capable de s'auto analyser pour définir quelles ressources il va avoir besoin (ex. images, polices de caractères, etc.) pour être correctement affiché. Ces informations sont ensuite collectées au niveau de la page ce qui permet, lors du processus de sérialisation, d'identifier de façon globale quelles vont être les ressources que le navigateur devra télécharger à un moment ou à un autre durant le processus de rendu de la page.

Une fois les ressource identifiées, il est possible de laisser le navigateur exécuter les requêtes HTTP auprès du serveur au fur et à mesure des besoins, ou bien a contrario, sachant de ces données seront forcément requises, anticiper la lecture du flux correspondant et demander à ce même serveur de les envoyer très en amont durant le processus de chargement de la page web.

Le générateur Thot permet d'indiquer, au niveau de la configuration projet, si on veut ou non que ce préchargement des ressources soit activé. Si c'est le cas, les balises LINK et/ou entêtes HTTP sont alors automatiquement initialisées et mises en place au niveau du code source de chaque page HTML. L'avantage du générateur est de garantir que toutes les pages seront correctement analysées et leur contenu adapté aux choix de configuration qui auront été faits.

Image bouton cliquable permettant le retour en haut de page