Prefetch
Les temps de chargement des pages jouent un rôle important dans la convivialité et l’appréciation générale d’un site. La fonction opt-in prefetching d’Astro apporte les avantages d’une navigation quasi instantanée à votre application multi-pages (MPA) au fur et à mesure que vos visiteurs interagissent avec le site.
Activer le prefetching
Titre de la section Activer le prefetchingVous pouvez activer le prefetching avec la configuration prefetch
:
Un script de pré-lecture (prefetch) sera ajouté à toutes les pages de votre site. Vous pouvez ensuite ajouter l’attribut data-astro-prefetch
à n’importe quel lien <a />
de votre site afin d’opter pour le prefetch. Lorsque vous survolez le lien, le script va chercher la page en arrière-plan.
Notez que le prefetching ne fonctionne que pour les liens à l’intérieur de votre site, et non pour les liens externes.
Configuration de Prefetch
Titre de la section Configuration de PrefetchLa configuration prefetch
accepte également un objet option pour personnaliser davantage le prefetch.
Stratégies de prefetch
Titre de la section Stratégies de prefetchAstro supporte 4 stratégies de prefetch pour différents cas d’utilisation :
hover
(défaut): Préchargement lorsque vous survolez ou mettez l’accent sur le lien.tap
: Préchargement juste avant que vous ne cliquiez sur le lien.viewport
: Prédéfini lorsque les liens entrent dans la fenêtre de visualisation.load
: Prépare tous les liens de la page après le chargement de celle-ci.
Vous pouvez spécifier une stratégie pour un lien individuel en le passant à l’attribut data-astro-prefetch
:
Chaque stratégie est finement ajustée pour ne précharger que lorsque c’est nécessaire et économiser la bande passante de vos utilisateurs. Par exemple :
- Si un visiteur utilise le mode d’économie de données ou dispose d’une connexion lente, la stratégie de préchargement sera remplacée par la stratégie
tap
. - Un survol ou un défilement rapide des liens ne les récupérera pas.
Stratégie de prefetch par défaut
Titre de la section Stratégie de prefetch par défautLa stratégie de prefetch par défaut lors de l’ajout de l’attribut data-astro-prefetch
est hover
. Pour la changer, vous pouvez configurer prefetch.defaultStrategy
dans votre fichier astro.config.mjs
:
Prefetch de tous les liens par défaut
Titre de la section Prefetch de tous les liens par défautSi vous voulez récupérer tous les liens, y compris ceux qui n’ont pas l’attribut data-astro-prefetch
, vous pouvez mettre prefetch.prefetchAll
à true
:
Vous pouvez alors choisir de ne pas utiliser la fonction de préchargement pour les liens individuels en définissant data-astro-prefetch="false"
:
La stratégie de prefetch par défaut pour tous les liens peut être modifiée avec prefetch.defaultStrategy
comme indiqué dans la section Stratégie de prefetch par défaut.
Prefetch programmatique
Titre de la section Prefetch programmatiqueComme certaines navigations n’apparaissent pas toujours comme des liens <a />
vous pouvez aussi préfetcher de manière programmatique avec l’API prefetch()
du module astro:prefetch
:
L’API prefetch()
inclut la même détection de mode d’économie de données et de connexion lente de façon à ce qu’elle ne prenne en compte que ce qui est nécessaire.
Pour ignorer la détection de connexion lente, vous pouvez utiliser l’option ignoreSlowConnection
:
MVeillez à n’importer prefetch()
que dans les scripts côté client, car il s’appuie sur les API du navigateur.
Utilisation avec les transitions de vue
Titre de la section Utilisation avec les transitions de vueLorsque vous utilisez les transitions de vue sur une page, le prefetch est également activé par défaut. Il définit une configuration par défaut de { prefetchAll : true }
qui active le prefetch pour tous les liens sur la page.
Vous pouvez personnaliser la configuration de prefetch dans astro.config.mjs
pour remplacer la configuration par défaut. Par exemple :
Prise en charge du navigateur
Titre de la section Prise en charge du navigateurAstro utilise <link rel="prefetch">
si le navigateur le supporte, et revient à l’API fetch()
dans le cas contraire.
Les navigateurs les plus courants prennent en charge le système de préchargement d’Astro avec des différences subtiles :
Chrome supporte <link rel="prefetch">
. La fonctionnalité “prefetch” fonctionne comme prévu.
Firefox
Titre de la section FirefoxFirefox supporte <link rel="prefetch">
mais peut afficher des erreurs ou échouer complètement :
- Sans un en-tête de cache explicite (par exemple
Cache-Control
ouExpires
), le prefetch se terminera par une erreurNS_BINDING_ABORTED
. - Même en cas d’erreur, si la réponse contient un en-tête
ETag
correct, il sera réutilisé pour la navigation. - Dans le cas contraire, s’il n’y a pas d’autres en-têtes de cache, le prefetch ne fonctionnera pas.
Safari ne prend pas en charge <link rel="prefetch">
et se rabattra sur l’API fetch()
qui nécessite que les en-têtes de cache (par exemple Cache-Control
, Expires
, et ETag
) soient définis. Dans le cas contraire, le prefetch ne fonctionnera pas.
Edge case : Les en-têtes ETag
ne fonctionnent pas dans les fenêtres privées.
Recommendations
Titre de la section RecommendationsPour une meilleure prise en charge de tous les navigateurs, assurez-vous que vos pages ont les bons en-têtes de cache.
Pour les pages statiques ou pré-rendues, l’en-tête ETag
est souvent défini automatiquement par la plateforme de déploiement et est censé fonctionner dès le départ.
Pour les pages dynamiques et affiché côté serveur, définissez vous-même les en-têtes de cache appropriés en fonction du contenu de la page. Consultez la documentation MDN sur la mise en cache HTTP pour plus d’informations.
Migration depuis @astrojs/prefetch
Titre de la section Migration depuis @astrojs/prefetchL’intégration @astrojs/prefetch
a été dépréciée dans la version 3.5.0 et sera finalement entièrement supprimée. Utilisez les instructions suivantes pour migrer vers le prefetching intégré d’Astro qui remplace cette intégration.
-
Supprimez l’intégration
@astrojs/prefetch
et activez la configurationprefetch
dansastro.config.mjs
: -
Convertit les options de configuration de
@astrojs/prefetch
:-
L’intégration dépréciée utilisait l’option de configuration
selector
pour spécifier quels liens devraient être préfétrés en entrant dans la fenêtre de visualisation (viewport).Ajoutez
data-astro-prefetch="viewport"
à ces liens individuels à la place. -
L’intégration dépréciée utilisait l’option de configuration
intentSelector
pour spécifier quels liens devaient être préfécturés lorsqu’ils étaient survolés ou focalisés.Ajoutez
data-astro-prefetch
oudata-astro-prefetch="hover"
à ces liens individuels à la place : -
L’option
throttles
de@astrojs/prefetch
n’est plus nécessaire, car la nouvelle fonctionnalité prefetch va automatiquement planifier et prefetch de manière optimale.
-