Temps de charge rapides grâce au préchargement, au préchargement et au prérendering

Grâce à de nouvelles techniques, le navigateur peut désormais très facilement pré-charger, pré-charger et pré-rendre des ressources externes, mais également des pages HTML complètes.

Bien que la prise en charge du navigateur reste encore insuffisante, l’utilisation de techniques de préchargement a déjà un sens et est relativement facile à mettre en œuvre. Les utilisateurs qui ont un navigateur moderne en bénéficieront, les autres n’ayant aucun inconvénient. Un bel exemple d'amélioration réussie progressive.

L'article suivant est destiné à donner un aperçu des techniques possibles. La structure de base est toujours identique et extrêmement simple. A propos du HTMLL'élément est défini dans l'attribut href auquel l'URL ou la ressource que le préchargement doit faire référence. Enfin, l'attribut rel spécifie le type de préchargement.

Sur les informations, quel navigateur prend en charge quelle fonctionnalité est délibérément omise dans cet article. D'une part, une indication est généralement obsolète après quelques semaines, d'autre part, elle n'est tout simplement pas nécessaire selon l'approche d'amélioration progressive.

Prefetch DNS

Au moyen de ce code de ligne, lequel des deuxÉlément du site Web, le navigateur est invité à effectuer uniquement la résolution DNS. Le "Domain Name System" a pour tâche de connecter les domaines avec leurs adresses IP correspondantes.

Chaque fois que vous tapez une URL dans la barre d'adresse d'un navigateur, il ne peut rien faire avec le domaine ou l'hôte seul. Au lieu de cela, l'adresse IP du serveur est nécessaire. Cette résolution DNS prend du temps; généralement entre 20 et 250 millisecondes. Avec l'aide de-Elements peut raccourcir ce processus, dans lequel la conversion d'un domaine ou d'une URL avant le clic ou le transfert a lieu.

preconnect

La préconnexion diffère à peine de la propriété DNS Prefetch. La seule différence est que cette étape est encore plus loin et qu'une négociation TCP et TLS est effectuée. En plus de déterminer les informations DNS, il s'agit également d'opérations importantes qui prennent généralement quelques millisecondes.

Surtout quand on veut pré-extraire des domaines avec un certificat SSL (par exemple, https://de.ryte.com), une utilisation de laLe sens de l'élément. De plus, bien entendu, les deux éléments peuvent être combinés:

prefetch

La valeur "prefetch" semble presque identique, mais ne doit pas être confondue avec le "dns-prefetch" décrit ci-dessus. Cette propriété doit principalement être utilisée pour précharger des ressources statiques telles que des images, des fichiers CSS et des fichiers Javascript. Le fichier entier est téléchargé et stocké dans la mémoire cache du navigateur. Bien que la pré-extraction de documents HTML soit également possible, des méthodes plus efficaces suivront plus tard au cours de l'article.

Il est à noter que vous ne pouvez pas compter sur une ressource téléchargée. Les navigateurs tentent de tirer parti de leurs capacités. Par exemple, Firefox en charge un parL'élément définit le fichier uniquement dès qu'il est inactif et que, par ailleurs, il n'a plus aucune tâche à accomplir. De plus, il ignore complètement les gros fichiers tant que l'utilisateur est sur un réseau lent.

Néanmoins, le préchargement est idéal pour le préchargement, par exemple pour les graphiques et les images nécessaires après une action Javascript ou un survol CSS. Dans un magasin en ligne, vous pouvez également préfetchen le fichier CSS pour la zone de paiement, dès que le visiteur a placé le premier article dans le panier.

sous-ressource

La propriété de sous-ressource encore relativement jeune est comparable au comportement, De nouveau, le fichier spécifié est téléchargé du serveur et stocké dans la mémoire cache du navigateur.

La différence réside toutefois dans la priorisation. Comme mentionné précédemment, le navigateur décide si et quand la ressource est nécessaire. Subresource, d’autre part, indique que le fichier revêt une importance énorme pour le site Web actuel et qu’il sera nécessaire sous peu. En conséquence, le navigateur attribue au téléchargement une priorité beaucoup plus grande.

Si vous n'êtes pas sûr à cent pour cent qu'une ressource est nécessaire dans un avenir proche, vous devez utiliser la propriété de pré-extraction. Lors de l'utilisation sinon, vous courez le risque de bloquer le téléchargement d'autres ressources importantes.

préchargement

À la date de cet article, la fonctionnalité de préchargement n'est que la première version de travail du W3C de juillet 2015. Celui-ci est similaire àmais bénéficie également d'une priorité plus élevée. De plus, l'attribut as peut être utilisé pour spécifier dans quel contexte de requête une ressource doit être demandée.

Cependant, comme la fonctionnalité n’est pas encore une norme adoptée et n’est supportée par aucun navigateur, il convient d’être prudent dans l’utilisation productive.

prerender

La propriété Prerender est de loin la plus puissante des techniques présentées; Cependant, cela comporte aussi le plus de dangers. En principe, assure qu'une URL incluant toutes les ressources statiques requises en arrière-plan est déjà entièrement chargée et configurée. Vous pourriez penser que vous ouvrez une URL à l'avance dans un nouvel onglet, qui reste masqué jusqu'à ce que le visiteur navigue sur la page. Le temps de chargement lors du passage à un site Web pré-rendu est généralement inférieur à 50 millisecondes; à peine perceptible à l'oeil.

Comme mentionné, il existe certaines sources de danger lors de l'utilisation de Prerender. Enfin, toutes les activités sont effectuées en arrière-plan, ce qui se ferait également dans une page réelle. Par exemple, si vous êtes connecté à une boutique en ligne et que vous téléchargez la page de désinscription via Prerender, vous êtes déconnecté à la prochaine page affichée. Même avec l'utilisation de propres scripts de suivi (Google Analytics peut traiter avec Prerender), il convient de rester prudent, car tous les javascripts sont également complètement exécutés. Une solution est l’API de visibilité des pages, qui peut détecter si une page Web est réellement affichée.

Figure 1: Si un fonctionne, peut être cochée dans les outils de développement de Chrome dans l’onglet Réseau.

Les ressources préchargées peuvent être affichées ici facilement en utilisant le filtre "Autre". Dans ce contexte, il convient également de noter l'en-tête de requête "Purpose", qui reçoit la valeur "prefetch" du navigateur.

Quand devrais-je utiliser quelle propriété?

Généralement, il n'y a pas de solution type ici. Chaque méthode a ses avantages et inconvénients à peser dans le contexte du site Web ou du projet. Toutefois, si vous avez une capacité de serveur suffisante, il est souvent judicieux de pré-charger du contenu. Surtout sur les sites Web sur lesquels on peut prévoir l’interaction suivante entre les visiteurs, il convient de toujours envisager de procéder à une prélecture ou à un pré-rendu.

Pour donner quelques exemples:

• Pages de destination où un clic sur le bouton d'appel à l'action mène à la sous-page suivante
• L'URL de la page suivante si le contenu a été divisé en plusieurs sous-pages
• Sections d'image composées de plusieurs sous-pages individuelles
• La page suivante d'un résultat de recherche ou un résumé d'article sur un blog

Königsdiziplin: préchargé dynamiquement sur la base d'une action de l'utilisateur

Une bonne précharge commence et tombe avec la précision de l'action suivante prédite par le visiteur. Les exemples ci-dessus montrent que le préchargement ou le préchargement initial peut avoir un sens dans de nombreux cas. Cependant, la précaution devient encore plus précise lorsqu'elle est basée sur une interaction réelle de l'utilisateur.

Voici quelques exemples:

• Dès que le visiteur déplace la souris sur les flèches de navigation d'un curseur d'image, l'image suivante est invoquée.
• Un dessous peut être préchargé si vous voyez que le pointeur de la souris se déplace dans la direction du lien correspondant.
• Pour les sites qui prennent en charge le chargement paresseux, vous pouvez permet de charger des images préchargées lors du défilement, sans compromettre les autres tâches du navigateur.

Enfin, un simple fragment de code JavaScript ou jQuery, avec tous les liens d’une page dans une souris au-dessus de leurs URL respectives via citation à comparaître. Sous cette forme, toutefois, le code ne convient pas expressément pour une utilisation productive.

résumé