{"id":76956,"date":"2024-05-07T11:46:35","date_gmt":"2024-05-07T10:46:35","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=76956&preview=true&preview_id=76956"},"modified":"2024-05-10T09:22:52","modified_gmt":"2024-05-10T08:22:52","slug":"chargement-speculatif","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/chargement-speculatif\/","title":{"rendered":"Comment le chargement sp\u00e9culatif peut am\u00e9liorer la vitesse des pages de votre site WordPress"},"content":{"rendered":"

Aujourd’hui, les pages web sont truff\u00e9es d’images, de vid\u00e9os et d’\u00e9l\u00e9ments interactifs qui visent \u00e0 am\u00e9liorer l’exp\u00e9rience de l’utilisateur. Toutefois, ces \u00e9l\u00e9ments peuvent ralentir le temps de chargement de votre page.<\/p>\n

\u00c0 mesure que la technologie progresse, un objectif reste constant : la performance<\/em>. Tout le monde esp\u00e8re que ses pages web se chargent \u00e0 la vitesse de l’\u00e9clair<\/a>.<\/p>\n

L’un des moyens d’acc\u00e9l\u00e9rer le chargement des pages web consiste \u00e0 les rendre pr\u00eates ou \u00e0 les r\u00e9cup\u00e9rer avant que l’utilisateur n’y acc\u00e8de.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Bref historique du pr\u00e9-rendu<\/h2>\n

En 2011, l’\u00e9quipe Chromium a introduit une premi\u00e8re forme de pr\u00e9-rendu<\/a> dans le navigateur Chrome par le biais de la balise <link rel=\"prerender\" \u2026 ><\/code>.<\/p>\n

Cette balise permettait aux d\u00e9veloppeurs<\/a> d’indiquer aux navigateurs<\/a> la ou les pages qu’un utilisateur pourrait visiter ensuite. Le navigateur r\u00e9cup\u00e8re alors silencieusement ces pages et les rend en arri\u00e8re-plan, ce qui r\u00e9duit consid\u00e9rablement<\/em> le temps de chargement lorsque l’utilisateur navigue vers ces pages.<\/p>\n

Malgr\u00e9 ses avantages, cette premi\u00e8re impl\u00e9mentation du pr\u00e9-rendu utilisait beaucoup de bande passante et de ressources d’unit\u00e9 centrale et pouvait entrainer des probl\u00e8mes de confidentialit\u00e9 si l’utilisateur ne visitait pas les pages pr\u00e9-rendues. En outre, vous deviez s\u00e9lectionner manuellement les liens \u00e0 pr\u00e9-rendre, ce qui n’\u00e9tait pas toujours efficace ou faisable.<\/p>\n

Pour r\u00e9pondre \u00e0 certains de ces probl\u00e8mes, Chrome a supprim\u00e9 le pr\u00e9-rendu utilisant le lien rel=prerender<\/code> hint en faveur de la m\u00e9thode NoState Prefetch<\/a>, qui consiste \u00e0 r\u00e9cup\u00e9rer les ressources d’une page sans ex\u00e9cuter de JavaScript ou d’autres actions susceptibles de porter atteinte \u00e0 la vie priv\u00e9e.<\/p>\n

La m\u00e9thode NoState Prefetch a am\u00e9lior\u00e9 le chargement des ressources, mais n’a pas permis de charger instantan\u00e9ment la page comme le ferait un pr\u00e9-rendu complet.<\/p>\n

Pr\u00e9sentation de l’API des Speculation Rules<\/h2>\n

L’API Speculation Rules<\/a> est une nouvelle API exp\u00e9rimentale d\u00e9finie par JSON qui pr\u00e9charge sp\u00e9culativement les URL avant de naviguer vers elles, ce qui permet d’acc\u00e9l\u00e9rer les temps de rendu et d’am\u00e9liorer l’exp\u00e9rience des utilisateurs.<\/p>\n

L’API permet aux d\u00e9veloppeurs de configurer des r\u00e8gles avec une structure d\u00e9finie au format JSON dans un site script type=\"speculationrules\"<\/code> que le navigateur peut utiliser pour d\u00e9cider quelles URL doivent \u00eatre pr\u00e9-rendues.<\/p>\n

<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"source\": \"list\",\n      \"urls\": [\"firstpage.html\", \"secondpage.html\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
Il en va de m\u00eame pour le prefetching, qui peut souvent constituer une bonne premi\u00e8re \u00e9tape sur la voie du pr\u00e9-rendu :<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prefetch\": [\n    {\n      \"urls\": [\"firstpage.html\", \"secondpage.html\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
Les extraits de code ci-dessus montrent comment l’API Speculation Rules fonctionne en sp\u00e9cifiant une liste d’URL \u00e0 pr\u00e9lever ou \u00e0 pr\u00e9-rendre.<\/p>\n
R\u00e9cemment, Google a annonc\u00e9 de nouvelles am\u00e9liorations de l’API Speculation Rules<\/a>, qui offre d\u00e9sormais l’option de recherche automatique de liens \u00e0 l’aide de r\u00e8gles documentaires<\/em>. Cette option permet de r\u00e9cup\u00e9rer des URL dans le document en fonction d’une condition where<\/code>.<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"source\": \"document\",\n      \"where\": {\n        \"and\": [\n          {\n            \"href_matches\": \"\/*\"\n          },\n          {\n            \"not\": {\n              \"href_matches\": [\n                \"\/wp-login.php\",\n                \"\/wp-admin\/*\"\n              ]\n            }\n          }\n        ]\n      },\n      \"eagerness\": \"moderate\"\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
Dans cet extrait de code, toutes les URL de la page sont prises en compte pour le pr\u00e9-rendu, \u00e0 l’exception de celles menant aux pages de connexion et d’administration de WordPress<\/a>. Vous pouvez \u00e9galement sp\u00e9cifier un niveau de eagerness<\/code> – eager<\/code> (tout de suite), moderate<\/code> (au survol de la page pendant 200 ms) et conservative<\/code> (au passage de la souris ou au toucher de la page).<\/p>\n
Les s\u00e9lecteurs CSS<\/a> peuvent \u00e9galement \u00eatre utilis\u00e9s comme alternative ou en conjonction avec les correspondances href<\/code> pour trouver des liens sur la page en cours :<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [{\n    \"source\": \"document\",\n    \"where\": {\n      \"and\": [\n        { \"selector_matches\": \".prerender\" },\n        { \"not\": {\"selector_matches\": \".do-not-prerender\"}}\n      ]\n    },\n    \"eagerness\": \"moderate\"\n  }]\n}\n<\/script><\/code><\/pre>\n
Lorsque vous utilisez l’API Speculation Rules, vous pouvez l’inspecter \u00e0 l’aide des services d’arri\u00e8re-plan des charges sp\u00e9culatives<\/strong> dans l’onglet Application <\/strong>de Chrome lorsque vous inspectez la page.<\/p>\n
\"Inspectez
Inspectez l’API Speculation Rules \u00e0 l’aide des services d’arri\u00e8re-plan de charges sp\u00e9culatives dans l’onglet Application Chrome.<\/figcaption><\/figure>\n
Il y a d’autres possibilit\u00e9s – nous les explorerons dans la section consacr\u00e9e au d\u00e9bogage.<\/p>\n
Prise en charge des navigateurs<\/h3>\n
L’API R\u00e8gles de sp\u00e9culation est prise en charge<\/a> dans les navigateurs modernes bas\u00e9s sur Chromium<\/a>, y compris Chrome et Edge, \u00e0 partir de versions sp\u00e9cifiques.<\/p>\n
\"Prise
Prise en charge de l’API Speculation Rules par les navigateurs (Source : Mozilla<\/a>).<\/figcaption><\/figure>\n
Cela permet aux utilisateurs des navigateurs pris en charge de b\u00e9n\u00e9ficier de temps de chargement plus rapides, tandis que les utilisateurs d’autres navigateurs ne subiront pas d’effets n\u00e9gatifs, car l’API est un outil d’am\u00e9lioration progressive.<\/p>\n
Le plugin WordPress Speculative Loading<\/h2>\n
Pour profiter des avantages de l’API Speculation Rules dans WordPress, l’\u00e9quipe de performance de WordPress<\/a> (qui comprend des d\u00e9veloppeurs de Google) a r\u00e9cemment publi\u00e9 l’extension Speculative Loading<\/a>. Cette extension permet le chargement sp\u00e9culatif des URL frontend li\u00e9es \u00e0 la page.<\/p>\n
Jusqu’\u00e0 pr\u00e9sent, l’extension a \u00e9t\u00e9 peu adopt\u00e9e car l’API est encore dans sa phase initiale, mais elle a re\u00e7u quelques critiques positives.<\/p>\n
\"Avis
Avis de la communaut\u00e9 WordPress sur l’extension Speculative Loading.<\/figcaption><\/figure>\n
Par d\u00e9faut, l’extension est configur\u00e9e pour afficher les URL de WordPress lorsque l’utilisateur survole un lien pertinent. Ceci peut \u00eatre personnalis\u00e9 via la section Speculative Loading<\/strong> sous R\u00e9glages<\/strong> > Lecture<\/strong>.<\/p>\n
\"Personnalisez
Personnalisez l’extension Speculative Loading dans les r\u00e9glages d’administration de WordPress.<\/figcaption><\/figure>\n
Cela signifie que toutes les URL li\u00e9es \u00e0 la page sont pr\u00e9-rendues avec une configuration eagerness<\/code> de moderate<\/code>, qui se d\u00e9clenche g\u00e9n\u00e9ralement lorsque l’utilisateur survole un lien. En tant que tel, vous n’avez pas besoin de faire quoi que ce soit apr\u00e8s avoir activ\u00e9 l’extension ; elle fonctionne tout simplement<\/em>.<\/p>\n
Par exemple, si vous avez d\u00e9j\u00e0 install\u00e9 l’extension Speculative Loading<\/strong> sur un site WordPress. Utilisez les Chrome DevTools<\/a> pour inspecter le site et cliquez sur l’onglet \u00c9l\u00e9ments<\/strong>. Lorsque vous faites d\u00e9filer le site vers le bas, vous remarquerez qu’une page script type=\"speculationrules\"<\/code> a d\u00e9j\u00e0 \u00e9t\u00e9 ajout\u00e9e pour vous avec les diff\u00e9rentes r\u00e8gles de sp\u00e9culation.<\/p>\n
\"Inspectez
Inspectez le site WordPress pour voir que les r\u00e8gles de sp\u00e9culation sont ajout\u00e9es automatiquement avec l’extension Speculative Loading.<\/figcaption><\/figure>\n
Elles utilisent une expression rationnelle pour sp\u00e9cifier les liens qui doivent \u00eatre pr\u00e9-rendus, les liens qui ne doivent pas \u00eatre pr\u00e9-rendus et le degr\u00e9 d’impatience. Les sections suivantes expliquent ces r\u00e8gles en d\u00e9tail.<\/p>\n
Limites pour \u00e9viter la surutilisation<\/h3>\n
Chrome a mis en place des limites pour \u00e9viter une utilisation excessive de l’API :<\/p>\n\n\n\n\n\n
Attente<\/strong><\/td>\nPr\u00e9visibilit\u00e9<\/strong><\/td>\nPr\u00e9-rendu<\/strong><\/td>\n<\/tr>\n
imm\u00e9diat\/affair\u00e9<\/td>\n50<\/td>\n10<\/td>\n<\/tr>\n
mod\u00e9r\u00e9\/conservateur<\/td>\n2 (FIFO)<\/td>\n2 (FIFO)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Ils emp\u00eachent la surutilisation gr\u00e2ce \u00e0 divers r\u00e9glages bas\u00e9s sur l’urgence et l’interaction avec l’utilisateur.<\/p>\n