Comment accélérer site Web avec balise

ameliorer_vitesse_site_web

 » Prévoyant  » navigateurs sont l’avenir de haut débit surf, nous apportant des ressources que nous voulons avant même que nous savons que nous voulons . Les navigateurs d’aujourd’hui déjà faire quelques prédictions maintenant et puis pour accélérer la récupération et le rendu de documents. Pour prendre cela à la prochaine étape, nous cherchons à rien d’ autre que les développeurs web.

Les développeurs ont une assez bonne idée de la façon dont leurs sites sont parcourus , et qui les ressources sont demandées le plus souvent et donc, ils peuvent prédire certaines opérations futures navigateurs devraient faire pour les sites. Tout ce qui est nécessaire est maintenant pour les développeurs de trouver un moyen de relayer ces prédictions pour les navigateurs et les mettre à profit . C’est là quelques « liens HTML » spéciaux entrent en jeu .

A Refresher sur les demandes HTTP

Avant de jeter un oeil à ces liens, il est temps de nous rafraîchir la mémoire sur la façon dont une opération typique de HTTP demandé fichier-fetching arrive. Disons que quelqu’un nommé Joe veut visiter un site Web.

Voici ce qui se passe ensuite:

  1. Joe types d’adresse humainement révocables du site dans la barre et presses d’adresse d’un navigateur « Enter ».
  2. Une fois qu’il a reçu cette adresse, le navigateur demande un DNS serveur (compliments de ISP ) pour l’adresse IP de l’adresse donnée par Joe.
  3. Le serveur DNS oblige.
  4. Maintenant que le navigateur connaît l’adresse IP, il envoie un message (en TCP dialecte) pour le serveur du site, demandant une connexion.
  5. Si le serveur est bien vivant, il envoie une réponse reconnaissant la demande du navigateur et le navigateur répond et reconnaît le message du serveur. ( Remarque : Oui, ceci est une version très édulcorée d’une poignée de main de TCP entre un client et un serveur.)
  6. Lorsque les poignées de main sont plus, une connexion est établie entre les deux.
  7. Maintenant, le navigateur change son style de dialecte à HTTP et demande au serveur pour le site.
  8. Le serveur, connaissant la page d’accueil du site renvoie juste que, qui est reçu par le navigateur et montré à Joe qui attend patiemment devant l’ordinateur.

Une requête HTTP typique passe par tout ce que (et plus) d’aller chercher un document par le biais de l’Internet. Donc , si l’ un de ces processus peut être jumpstarted lorsque cela est possible , nous pouvons réduire le temps que nous avons à attendre la livraison des ressources que nous voulons .

HTML Relations Lien

W3C spécifie 4 relations de liens HTML ( rel pour la relation) nommés dns-prefetch , preconnect , prefetch et prerender .Ensemble , ils sont appelés (par le W3C) les « Conseils de ressources« . Maintenant, nous allons voir ce qu’ils peuvent faire et où ils peuvent être utilisés .

1. DNS Prefetch

Dans prefetch DNS, la résolution de noms de domaine (aka obtenir l’adresse IP correspondante du serveur DNS) se fait à l’ avance.

Disons qu’il ya une page de référence dans un site avec beaucoup de liens de référence à son site soeur. Lorsqu’un utilisateur visite la page de référence, il y a une forte probabilité que l’utilisateur de naviguer sur le site de soeur. Ainsi, une recherche DNS précoce pour le site de soeur peut réduire le temps qu’il faut pour ouvrir le site (ce qui améliore l’ expérience de l’ utilisateur).

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

1
< Link rel = "dns-prefetch" href = "//mysistersite.org" >

Lorsqu’un navigateur traite ce code dans la page de référence, il va ajouter la recherche DNS du site de soeur à ses files d’attente de la tâche, et quand il est exempt d’autres tâches prioritaires dans la file d’attente, il va commencer la résolution DNS du place soeur.

Alors, quand un utilisateur clique enfin l’un des liens qui les prend à l’emplacement de soeur, la résolution DNS de ce site aurait déjà été effectuée, et le navigateur peut tout de suite commencer à établir la connexion TCP client-serveur avec le site de soeur serveur, ce qui rend cette page charge plus rapide.

Cette fonctionnalité est disponible dans presque tous les navigateurs modernes , à l’ exception Safari de Mars ici 2016.

2. Preconnect

Preconnect est une étape supplémentaire de prélecture DNS, il établit une connexion avec le serveur auquel il peut y avoir une demande envoyée plus tard dans l’avenir.

Répertorie W3C un cas d’utilisation idéal pour preconnect: redirections . Les développeurs utilisent des redirections pour un certain nombre de raisons.

Dans ce cas, la prochaine demande d’un navigateur (site redirigé) est 100% prévisible , et peut être préconnectées à , pour réduire la navigation de latence .

Imaginez il y a une page de site intermédiaire qui redirige vers  » xyzsite« , le lien HTML suivant fera l’preconnect du navigateur avec le serveur xyzsite, quand il arrive à cette page intermédiaire.

1
< Link rel = "preconnect" href = "//xyzsite.com" >

En Mars 2016, cela est disponible dans Chrome, Opera et Firefox .

3. Prefetch

Avec prefetch , pour une ressource, le navigateur commence la mise en œuvre de la résolution DNS du nom de domaine de la ressource , puis effectue une connexion TCP avec le serveur de la ressource , en fait la demande HTTP, et enfin récupère et stocke la ressource prélu dans le cache du navigateur.

Si vous êtes sûr de quelles ressources qui seront nécessaires plus tard, c’est la ressource à précharger avance; est là que réside la capture.préchargement prend la conjecture , et si vous devinez tort, vous pourrait en fait ralentir la place de la vitesse de votre site.

Pour les livres en ligne, des galeries, ou portefeuilles, si l’utilisateur est le plus susceptible de naviguer à la page suivante, préchargement les ressources telles que les images , peut accélérer les choses de manière significative. Voici le code pour le faire.

1
< Link rel = "prefetch" href = "//xyzsite.com/nextimage.jpg" >

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

4. prérendu

Seulement pour les pages HTML peut être fait préchargement. Une page HTML prerendered est rendu hors ligne , et est peint à l’écran quand il est réellement nécessaire par l’utilisateur. Rendu coûte un travail et la mémoire des ressources de calcul plus élevée ; en plus, afin de rendre une page, le navigateur peut avoir besoin de ressources supplémentaires (comme les images ajoutées à la page) qui conduira à plus de demandes conséquentes par navigateur.

Donc, prerender doit être utilisé avec prudence , et non galvaudé.Ajout du code suivant prérendu la page « About » au préalable.

1
< Link rel = "prerender" href = "//example.com/about.html" >

Prerender est déjà disponible dans Chrome, IE et Opera de Mars ici2016.

Quelques choses à noter

(1) Aucun des conseils de ressources susmentionnées garantir l’exécution et l’ achèvement des différentes étapes de la demande , il est fait pour parce que lorsque le navigateur est déjà en train de traiter les demandes nécessaires pour les opérations de la page courante l’utilisateur est, l’ exécution de ces optimisations peuvent entraver les tâches courantes de l’ utilisateur .

Donc, tout est mis en attente et exécuté lorsque le navigateur se sent assez libre de le faire.

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

(2) W3C spécifie un attribut de lien HTML appelé indice probabilité, pr (avec la valeur 0 à 1) pour ces conseils de ressources, qui peuvent être utilisés pour fournir la probabilité de demandes qui seront faites dans le futur. Je ne l’ ai pas vu cet attribut mis en œuvre par un navigateur encore bien. A titre d’exemple, le code suivant indique qu’il ya une chance xyz site 80% sera demandé à l’avenir et 30% pour la page à propos.

1
2
< Link rel = "preconnect" href = "//xyzsite.com" pr = "0.8" >
< Link rel = "prerender" href = "//example.com/about.html" pr = "0.3" >

Nous pouvons également ajouter l’option crossorigin attribut à la ressource fait allusion à informer le navigateur de CORS le diplôme de la demande liée.

Be the first to comment on "Comment accélérer site Web avec balise "

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.


*