Home Blogs Réduisez les taux de rebond et améliorez l’expérience du site avec Predictive Prefetching par Edgio
Download
Applications

Réduisez les taux de rebond et améliorez l’expérience du site avec Predictive Prefetching par Edgio

About The Author

Outline

Transitions instantanées : Comment étendre le cache Edge dans le navigateur avec Predictive Prefetching

Il est de notoriété publique que les retards de navigation diminuent la conversion et augmentent les taux de rebond. Pour ceux d’entre vous qui gèrent et suivent la conversion sur des sites avec beaucoup de trafic, vous avez probablement vu ce scénario se dérouler. Espérons que vous avez également vu l’inverse. Vous avez vu la conversion augmenter lorsque la navigation et les temps de chargement des pages s’améliorent.

Performance et conversion vont de pair.

Les entreprises de CDN utilisent souvent cette illustration comme exemple pour prouver le retour sur investissement de leurs services. La solution est simple. Obtenez du contenu statique aussi près que possible de vos utilisateurs pour accélérer la diffusion et l’investissement est positif sur le retour sur investissement. Les visiteurs traîneront plus longtemps, feront plus d’achats et retourneront plus souvent. Cela a du sens, n’est-ce pas ? Si vous lisez ceci, alors vous savez probablement déjà que c’est vrai. Mais quelle est la prochaine étape ? Pouvons-nous aller plus loin et éliminer complètement les temps de réponse du réseau de l’expérience Web et la rendre similaire à une application native ? Si nous pouvions réduire le délai à zéro, ne maximiserions-nous pas la conversion ? Si nous pouvons mettre en cache le contenu périphérique dans le navigateur avant que l’utilisateur clique, les transitions pourraient être instantanées, comme une application native.

« Pouvons-nous vraiment avoir des performances d’applications Web similaires à celles des applications natives pour les visiteurs de notre site ? »

Avec Edgio, c’est possible.

Commençons par jeter un coup d’œil à ce qui rend les applications mobiles natives géniales. La plupart des utilisateurs d’applications mobiles ne savent pas ce qui se passe en coulisses, mais ils apprécient certainement les améliorations de performance obtenues en téléchargeant et en installant des applications sur leurs appareils. C’est simple, charger l’application, naviguer dans les écrans et les transitions sont instantanées. Tab d’une chose à l’autre, ajouter un article à votre panier et profiter d’une expérience sans friction. Rarement l’utilisateur voit un indicateur de « chargement », et, quand ils le font, cela a du sens ; comme soumettre des informations de paiement lors du paiement. Tout est possible avec un développement intelligent et une plate-forme capable.

Entrez Predictive Prefetch by Edgio. Désormais, vos internautes peuvent profiter du même type d’expérience.

De nombreuses entreprises de CDN proposent des options de réchauffement de cache qu’elles appellent le « préchargement » pour aider à amener le contenu de votre origine à la périphérie. Une excellente première étape, mais elle ne vous amène pas jusqu’au bout. L’utilisateur doit toujours attendre que le contenu se déplace vers son appareil. Alors, comment pouvons-nous aller plus loin? De l’origine au bord et jusqu’au navigateur avant qu’ils ne cliquent, le préchargement d’Edgio est une intégration de navigateur qui amène le bord directement dans l’appareil. Quelque chose dont les CDN traditionnels ne sont pas capables.

« Eh bien, ça sonne comme de la magie, comment ça marche ? »

Grande question et nous comprenons totalement votre scepticisme. Pour comprendre comment cela fonctionne, nous devons commencer par les bases. Regardez ce rapide explicatif ci-dessous, puis jetons un coup d’œil à ce que le préchargement est à son cœur.

Qu’est-ce que la prélecture … vraiment ?

Regardons MDN pour une définition du préchargement tel que votre navigateur le comprend. Le préchargement de lien est une indication à l’agent utilisateur qu’il devrait télécharger une ressource qui pourrait être nécessaire ultérieurement lorsque des ressources seront libérées. Tout d’abord, votre page se charge et commence à traiter les requêtes asynchrones. Lorsque le réseau et le processeur se libèrent, le navigateur récupère les ressources supplémentaires que vous avez ajoutées au document. Pour le préchargement de base, comme le navigateur le comprend, il peut ressembler un peu à ceci:

				
					<head>
…
<link rel="prefetch" href="/next-page.html" />
<link rel="prefetch" href="/next-image.jpg" />
…
</head>
				
			

Le résultat net est que next-page.html et next-image.jpg seront téléchargés et mis en cache par le navigateur pendant que l’utilisateur interagit avec la page d’origine. S’ils cliquent, ils auront le squelette de la page suivante et une image supplémentaire déjà mise en cache localement qui apparaîtra instantanément. Bien sûr, des fichiers CSS, JS et autres ressources supplémentaires devront peut-être être téléchargés, mais nous avons apporté les éléments les plus critiques du voyage dans le navigateur avant que cela ne soit nécessaire. C’est un bon début et comme vous pouvez le constater à partir de l’exemple, cela fonctionne vraiment bien pour un petit cas d’utilisation. Des sites de voyage séquentiels, peut-être une Landing page ou deux, mais ce que vous pensez probablement est ceci…

« Mon site a des milliers d’images et de pages, je ne peux pas le faire.

Nous ne pouvons pas lier chaque image et page dans la tête de toutes nos pages, non ? »

Non, et tu n’es pas obligé. En utilisant les plugins Predictive Prefetching et Deep fetch d’Edgio , vous pouvez contourner l’ingénierie et les conjectures pendant que le navigateur de votre utilisateur fonctionne avec notre réseau Edge pour extraire des ressources critiques.

OK, alors comment faire ça ?

Le préchargement prédictif d’Edgio utilise quelque chose qu’on appelle un service-worker. Un logiciel est quelque chose que tous les navigateurs modernes comprennent, il est effectivement supporté depuis Chrome 40. Le logiciel est un processus d’arrière-plan lié à votre site qui fonctionne lorsque les requêtes principales sont inactives. Vous avez peut-être été exposé à des travailleurs de service si vous avez déjà travaillé dans le développement front-end ou des applications Web progressives plus modernes. Si vous n’utilisez pas de service-worker sur votre site maintenant, vous pouvez facilement en ajouter un sans impact sur votre expérience utilisateur actuelle. Edgio peut vous aider à en configurer facilement un avec l’un de nos techniciens de service préconfigurés.

L’enregistrement et l’installation d’un service-worker peuvent varier selon que vous utilisez ou non une structure frontale. Assurez-vous de consulter notre documentation pour trouver des instructions plus détaillées pour plusieurs méthodes.

Maintenant que vous avez ajouté un service-worker et qu’il s’enregistre sur votre site, il a besoin de quelque chose à faire. Après avoir ajouté le package Edgio Prefetch, il est temps d’ajouter nos routes pour faire fonctionner le navigateur de l’utilisateur. Par défaut, le cache service-worker est stocké pendant deux minutes. Pour optimiser les performances, nous pouvons ajuster cela dans notre fichier routes:

				
					import {Router} from '@edgio/core';

export default new Router()
  .get('/api/products/:id.json', ({cache, proxy}) => {
    cache({
      edge: {
        maxAgeSeconds: 60 * 60,
        staleWhileRevalidateSeconds: 60 * 60 * 24,
      },
      browser: {
        serviceWorkerSeconds: 60 * 60,
      },
    });
  });
				
			

Avec une règle simple, nous avons configuré l’Edge pour maintenir la fraîcheur de la réponse de notre API en la validant pendant vingt-quatre heures et en demandant au navigateur non seulement de la précharger, mais de s’y accrocher pendant une heure.

Si vous connaissez Edgio, vous savez que vous pouvez tester cela localement. Ouvrez les outils de développement de votre navigateur et regardez l’onglet réseau pendant que vous parcourez le site. Vous verrez le service-worker récupérer le code HTML brut pour les liens dans votre fichier routes pendant que vous naviguez. Remarquez l’icône d’engrenage distinctif et le « service-worker » noté comme initiateur.

Vous pouvez également afficher le cache service-worker séparément en vérifiant l’onglet application et en parcourant le cache.

Le script de préchargement Edgio fonctionne pour extraire des liens dans la fenêtre de votre utilisateur pour qu’ils puissent cliquer dessus. S’ils cliquent, ils seront instantanément amenés à la page suivante.

Un bon début, mais que se passe-t-il si vous avez un site riche en contenu avec des images de produits ou d’articles qui doivent également être récupérés ? Ensuite, il est temps pour le plugin Deep fetch unique en son genre d’Edgio.

Activer le plugin Deep fetch est facile. Importez simplement le plugin dans votre projet existant et choisissez quelques sélecteurs HTML que le plugin devrait rechercher. Si vous exploitez un site de commerce électronique, vos pages de produits sont probablement modélisées. Votre LCP peut ressembler à ceci – où chaque page a une image différente mais vous utilisez le sélecteur CSS « main-image » pour maintenir le style sur votre site.

				
					<img src=”/images/product-image.jpg” class=”main-image” />
				
			

Essayez d’ajouter le sélecteur « main-image » au tableau Deep fetch et laissez le service-worker se mettre au travail.

				
					import {Prefetcher} from '@edgio/prefetch/sw';
import DeepFetchPlugin from '@edgio/prefetch/sw/DeepFetchPlugin';

new Prefetcher({
  plugins: [
    new DeepFetchPlugin([
      {
        selector: 'img.main-image',
        maxMatches: 1,
        attribute: 'src',
        as: 'image',
      },
    ]),
  ],
});
				
			

En bref, cela indique au plugin Deep fetch de rechercher le sélecteur main-mage et de précharger le src en tant qu’image. Dans l’exemple, nous avons défini maxMatches sur 1. Ce qui signifie que nous ne préchargerons que le premier match. Pas besoin de s’arrêter là cependant. Ajustez maxMatches comme bon vous semble en fonction du type de ressource que vous extrayez.

Maintenant, votre service-worker va précharger les liens dans la fenêtre d’affichage, parcourir le code HTML pour ce sélecteur et ajouter un lien de préchargement pour l’image en question. Lorsque votre utilisateur clique sur l’image, la page sera présentée instantanément.

« Qu’en est-il de notre origine ? Nous ne pouvons pas supporter une augmentation du trafic pour chaque utilisateur. »

Edgio t’a couvert. Notre WebCDN nouvelle génération ne transmettra pas les requêtes de préchargement à votre origine si l’actif n’est pas mis en cache. Edgio répondra simplement avec un 412. Si l’utilisateur clique sur le lien non mis en cache, nous le transmettrons à l’origine comme nous le ferions pour toute autre demande et respecterons les règles de proxy que vous avez mises en place. Soyez assuré que votre origine est en sécurité avec Edgio. Le trafic naturel à travers le site réchauffera le cache et 412 réponses diminueront. Pour garder votre site accroché, assurez-vous et utilisez périmé-while-revalidate afin que nous puissions livrer un article périmé pendant que nous en recherchons un nouveau.

Vous voulez voir tout cela en action sans avoir à creuser dans les outils de développement de Chrome? Edgio peut vous aider là aussi. Nous avons vu à quel point Predictive Prefetching est précieux pour nos clients. Nous avons donc un tableau de bord spécialement conçu à l’intérieur de la console Edgio. Surveillez facilement vos performances de préchargement à la fois pour votre requête de préchargement et votre taux de succès.

Espérons que vous verrez maintenant comment le préchargement prédictif d’Edgio peut offrir à vos utilisateurs une expérience numérique vraiment incroyable, augmenter les conversions et diminuer les taux de rebond en apportant le cache périphérique jusqu’à votre utilisateur.