Comment accélérer le site Web avec la balise

"Prévoyant"Les navigateurs sont l'avenir de la navigation sur Internet haut débit, nous apportant les ressources que nous voulons avant même de savoir, nous les voulons. Les navigateurs d'aujourd'hui déjà faire certains prédictions de temps en temps, pour accélérer la récupération et le rendu des documents. Pour passer à l'étape suivante, nous nous tournons vers nul autre que les développeurs Web..

Les développeurs ont un assez bonne idée de comment leurs sites Web sont navigués, et qui les ressources sont demandées le plus souvent Ils peuvent ainsi prédire certaines opérations que les navigateurs devront faire pour les sites. Il ne reste plus maintenant aux développeurs qu’à trouver un moyen de relayer ces prédictions aux navigateurs et mettez-les à bon escient. C'est là qu'interviennent des "liens HTML" spéciaux.

Un rappel sur les requêtes HTTP

Avant d'examiner ces liens, il est temps d'actualiser notre mémoire sur le déroulement d'une opération typique d'extraction de fichier demandée par HTTP. Disons que quelqu'un nommé Joe veut visiter un site Web.

Voici ce qui se passe ensuite:

1. Joe saisit l'adresse du site Web qui peut être rappelé par l'homme dans la barre d'adresse du navigateur, puis appuie sur "Entrée"..
2. Une fois cette adresse reçue, le navigateur demande à l’adresse IP de l’adresse fournie par Joe à un serveur DNS (avec les compléments de l’ISP).
3. Le serveur DNS oblige.
4. Maintenant que le navigateur connaît l'adresse IP, il envoie un message (en dialecte TCP) au serveur du site Web, lui demandant de se connecter..
5. Si le serveur fonctionne bien, il envoie une réponse accusant réception de la demande du navigateur, qui répond et reconnaît le message du serveur. (Remarque: Oui, il s’agit d’une version extrêmement diluée d’une négociation TCP entre un client et un serveur.)
6. Lorsque les poignées de main sont terminées, une connexion est établie entre les deux.
7. Maintenant, le navigateur change son style de dialecte en HTTP et demande au serveur le site Web..
8. Le serveur, connaissant la page d'accueil du site Web, ne renvoie que le message reçu par le navigateur et montré à Joe qui attend très patiemment devant l'ordinateur.

Une requête HTTP typique passe par tout que (et plus) pour aller chercher un document sur Internet. Donc, si l'un de ces processus peut être relancé si possible, nous pouvons réduire le temps d'attente pour la livraison des ressources souhaitées.

Liens de liens HTML

Le W3C spécifie 4 relations de lien HTML (rel pour relation) nommé dns-prefetch, préconnecter, prélecture, et prérandre. Ensemble, ils s'appellent (par le W3C) le "Conseils de ressources". Maintenant, nous verrons ce qu'ils peuvent faire et où ils peuvent être utilisés.

1. DNS Prefetch

Dans DNS prefetch, le résolution de nom de domaine (aka obtenir l'adresse IP correspondante du serveur DNS) est fait à l'avance.

Supposons qu'un site Web comporte une page de référence contenant de nombreux liens de référence vers son site partenaire. Lorsqu'un utilisateur visite la page de référence, il y a un haute probabilité que l'utilisateur accédera au site associé. Donc, un recherche DNS précoce pour le site soeur peut réduire le temps nécessaire pour ouvrir le site (améliorant ainsi l'expérience utilisateur).

Ce réduction de la latence via le prélecture DNS peut être fait en ajoutant ce code à la page de référence.

Lorsqu'un navigateur traite ce code dans la page de référence, il ajoute la recherche DNS du site soeur à ses files d'attente de tâches et, lorsqu'il est exempt d'autres tâches hautement prioritaires de la file d'attente, il lance la résolution DNS du serveur. site soeur.

Ainsi, lorsqu'un utilisateur clique enfin sur l'un des liens qui le dirige vers le site associé, la résolution DNS de ce site est peut-être déjà terminée et le navigateur peut dès maintenant commencer à établir la connexion TCP client-serveur avec le site associé. serveur, ce qui accélère le chargement de la page.

Cette fonctionnalité est disponible dans presque tous les navigateurs modernes, à l'exception de Safari, à compter de mars 2016..

2. Préconnecter

Preconnect est un peu plus éloigné de la prélecture DNS, il établit une connexion avec le serveur auquel une demande peut être envoyée ultérieurement..

Le W3C énumère un cas d'utilisation idéal pour la préconnexion: redirections. Les développeurs utilisent les redirections pour un certain nombre de raisons.

Dans ce cas, la requête suivante du navigateur (site redirigé) est 100% prévisible, et peut être connecté à, à réduire la latence de navigation.

Imaginez qu’une page de site intermédiaire redirige vers "xyzsite", le lien HTML suivant permet au navigateur de se connecter au serveur xyzsite lorsqu'il se connecte à cette page intermédiaire.

À compter de mars 2016, il est disponible dans Chrome, Opera et Firefox..

3. Prefetch

Avec prélecture, pour une ressource, le navigateur commence à implémenter la résolution DNS du nom de domaine de la ressource, puis établit une connexion TCP avec le serveur de la ressource, fait la requête HTTP, et enfin récupère et stocke la ressource déjà extraite dans le cache du navigateur.

Si vous êtes sûr des ressources qui seront nécessaires ultérieurement, c’est la ressource à pré-lire au préalable; là est la prise. La prélecture nécessite des approximations, et si vous vous trompez, vous risquez de ralentir au lieu d’accélérer votre site..

Pour les livres, les galeries ou les portfolios en ligne, si l'utilisateur est le plus susceptible de parcourir la page suivante, pré-extraire les ressources telles que images, peut accélérer les choses de manière significative. Voici le code pour le faire.

Prefetch est pris en charge par Chrome, Firefox et Opera..

4. Prérender

Le prérendering est possible uniquement pour les pages HTML. Une page HTML prédéfinie est rendu hors ligne, et est peint à l'écran quand l'utilisateur en a réellement besoin. Le rendu coûte un travail de calcul plus important et une ressource mémoire; De plus, pour rendre une page, le navigateur peut avoir besoin de ressources supplémentaires (telles que des images ajoutées à la page), ce qui entraînera demandes plus conséquentes par navigateur.

Alors, prérandre doit être utilisé avec prudence, et pas trop utilisé. L'ajout du code suivant va prérender la page "À propos" au préalable.

Prerender est déjà disponible dans Chrome, IE et Opera à compter de mars 2016..

Quelques points à noter

(1) Aucun des conseils de ressource susmentionnés ne garantit l’exécution et l’achèvement des différentes étapes de la requête pour laquelle il a été conçu, car lorsque le navigateur est déjà occupé, il est en train de traiter les requêtes nécessaires pour les opérations de la page en cours dans laquelle se trouve l’utilisateur. peut entraver les tâches actuelles de l'utilisateur.

Alors, tout est mis en file d'attente et exécuté lorsque le navigateur se sent suffisamment libre pour le faire.

Ces indications de ressources ne doivent pas nécessairement être présentes dans la page avant même le chargement de la page. Ils peuvent être ajouté plus tard par JavaScript, et les conseils de ressources feront leur travail comme d'habitude.

(2) Le W3C spécifie un Attribut de lien HTML appelé indice de probabilité, pr (avec une valeur de 0 à 1) pour ces indicateurs de ressources, qui peuvent être utilisés pour fournir la probabilité de demandes futures. Je n'ai cependant pas encore vu cet attribut implémenté par un navigateur. A titre d'exemple, le code suivant indique qu'il existe 80% de chances que xyzsite soit demandé à l'avenir et 30% pour la page à propos..

Nous pouvons également ajouter l'attribut crossorigin facultatif aux indicateurs de ressources pour informer le navigateur des informations d'identification CORS de la demande liée..