Transitions instantanées : Comment étendre le cache Edge dans le navigateur avec Predictive Prefetch
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 sociétés 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 livraison et l’investissement est positif. Les visiteurs traîneront plus longtemps, feront plus d’achats et reviendront plus souvent. C’est logique, 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 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 Edge dans le navigateur avant que l’utilisateur clique, les transitions pourraient être instantanées, comme dans une application native.
“Pouvons-nous vraiment avoir des performances d’application web similaires aux applications natives pour les visiteurs de notre site ?”
Avec Edgio, c’est possible.
Commençons par examiner 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, chargez l’application, naviguez à travers les écrans et les transitions sont instantanées. Tab d’une chose à l’autre, ajoutez un article à votre panier et profitez d’une expérience sans friction. Rarement l’utilisateur voit-il un indicateur de « chargement », et, lorsqu’il le fait, 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 performante.
Accédez à Predictive Prefetch by Edgio. Maintenant, vos internautes peuvent profiter du même type d’expérience.
De nombreuses sociétés de CDN proposent des options de réchauffement du cache qu’elles appellent « préchargement » pour aider à amener le contenu de votre origine à la périphérie. Un excellent premier pas, mais il ne vous mène pas jusqu’au bout. L’utilisateur doit encore attendre pendant 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 de CDN traditionnels ne sont pas capables de.
« Eh bien, ça ressemble à 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 cette rapide explication ci-dessous, puis jetons un coup d’œil à ce que le préchargement est à sa base.
Qu’est-ce que le préchargement … vraiment ?
Examinons MDN pour une définition du préchargement tel que votre navigateur le comprend. Le préchargement de lien indique à l’agent utilisateur qu’il doit télécharger une ressource qui pourrait être nécessaire ultérieurement lorsque les ressources sont 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 saisira 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 originale. 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 CSS, JS et d’autres ressources supplémentaires peuvent avoir besoin d’être téléchargées, mais nous avons apporté les éléments les plus critiques du voyage dans le navigateur avant qu’il ne soit nécessaire. C’est un bon début et comme vous pouvez le voir dans l’exemple, cela fonctionne vraiment bien pour un petit cas d’utilisation. Sites de voyage séquentiel, peut-être une page de destination 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 chaque page dans la tête de toutes nos pages, n’est-ce pas ? »
Non, et tu n’as pas à le faire. En utilisant les plugins Predictive Prefetch et Deep Fetch d’Edgio, vous pouvez contourner l’ingénierie et les conjectures pendant que le navigateur de votre utilisateur travaille avec notre réseau Edge pour extraire des ressources critiques.
OK, alors comment faisons-nous ça ?
Le préchargement prédictif d’Edgio utilise ce qu’on appelle un service-worker. Un logiciel est quelque chose que tous les navigateurs modernes comprennent, il est en fait 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 un facilement avec l’un de nos prédéfinis techniciens de service.
L’enregistrement et l’installation d’un service-worker peuvent varier selon que vous utilisez ou non un framework frontal. 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’inscrit sur votre site, il a besoin de quelque chose à faire. Après avoir ajouté le package Edgio Prefetch, il est temps d’ajouter nos itinéraires pour faire fonctionner le navigateur de l’utilisateur. Par défaut, le cache du 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é le 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 le précharger, mais aussi de s’y accrocher pendant une heure.
Si vous connaissez Edgio, vous savez que vous pouvez le tester 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 capturer le code HTML brut pour les liens dans votre fichier de routes pendant que vous naviguez. Remarquez l’icône d’engrenage distinctive et « service-worker » noté comme initiateur.
Vous pouvez également afficher le cache du service worker séparément en vérifiant l’onglet de l’application et en regardant dans le cache.
Le script de préchargement Edgio fonctionne pour extraire des liens dans la fenêtre d’affichage de votre utilisateur pour qu’il clique 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ées ? 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 utilisez un site e-commerce, vos pages de produits sont probablement modélisées. Votre LCP pourrait 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 cet exemple, nous avons défini maxMatches sur 1. Ce qui signifie que nous ne récupérerons 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 préchargez.
Maintenant, votre service-worker va précharger les liens dans la fenêtre d’affichage, parcourir le 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 vous couvre. Notre WebCDN nouvelle génération ne transmettra pas de requêtes de lecture anticipée à votre point d’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 en place. Soyez assuré que votre origine est en sécurité avec Edgio. Le trafic naturel sur le site réchauffera le cache et 412 réponses diminueront. Pour garder votre site en ordre, assurez-vous et utilisez stale-while-revalidate afin que nous puissions livrer un article périmé pendant que nous recherchons un nouveau.
Vous voulez voir tout cela en action sans avoir à creuser dans les outils de développement de Chrome? Edgio peut aider là aussi. Nous avons vu à quel point le Predictive Prefetch est précieux pour nos clients. Nous avons donc un tableau de bord spécialement conçu à cet effet directement à 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 réussite.
Espérons que vous voyez 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.
