Hastighed er altafgørende på internettet. Brugere forventer, at websider indlæses øjeblikkeligt, og selv en forsinkelse på et sekund kan føre til højere afvisningsprocenter og tabt omsætning. Dette gælder især for WordPress-websteder, som ofte er afhængige af flere plugins og tungt indhold.
Spekulativ indlæsning tilbyder en smartere måde at få websteder til at indlæse hurtigere ved at forberede sider, før brugerne overhovedet klikker. I stedet for at vente på en brugerhandling for at hente data, bruger spekulativ indlæsning prædiktiv teknologi til at forudindlæse eller prærendere vigtige sider i baggrunden. Denne guide udforsker, hvordan det fungerer, hvordan man implementerer det i WordPress ved hjælp af Speculative Loading-pluginnet, og hvorfor det får opmærksomhed i performance-fællesskabet.
Hvis du ønsker at forbedre ydeevnen og sænke indlæsningstiden for dit WordPress-websted, er dette en teknologi, der er værd at forstå.
En hurtig introduktion til prærendering: Dengang vs. nu
For at forstå spekulativ indlæsning er det nyttigt at vide, hvordan prærendering har udviklet sig. Tilbage i 2011 introducerede Chromium-teamet<link rel=”prerender”> tag, som tillod browsere at indlæse hele sider i ro og mag på forhånd. Ideen var at gætte, hvilken side en bruger ville besøge næste gang, og gengive den i baggrunden. Når brugeren klikkede på linket, ville siden blive vist med det samme.
Denne funktion, selvom den var kraftfuld, havde sine problemer. Den brugte for meget båndbredde og CPU-ressourcer og indlæste nogle gange sider, som brugeren aldrig havde besøgt. Den gav også anledning til bekymringer om privatlivets fred, især på delte enheder. Som et resultat erstattede Chrome den med en mere forsigtig metode kaldet NoState Prefetch, som kun hentede sideressourcer uden at køre scripts eller gengive hele siden.
Selvom NoState Prefetch hjalp med at reducere unødvendige belastninger, kunne det stadig ikke levere den samme hastighedsforøgelse som fuld prærendering.
Kæmper du med langsomme indlæsningstider?
Vores eksperter kan optimere dit WordPress-websted for maksimal hastighed og ydeevne. Forbedr brugeroplevelsen og øg konverteringer i dag.
Hvad er spekulationsregler-API'en?
Speculation Rules API er en moderne løsning designet til at bringe prærendering tilbage – men med bedre kontrol, fleksibilitet og færre risici. Denne API giver udviklere mulighed for at definere et sæt regler i et JSON-script. Disse regler fortæller browseren, hvilke sider der skal forhåndshentes eller prærenderes, afhængigt af brugeradfærd og andre faktorer.
For eksempel ser en grundlæggende JSON-konfiguration til prærendering sådan ud:
<script type="speculationrules"> { "prerender": [ { "source": "list", "urls": ["about.html", "contact.html"] } ] } </script>Dette simple script fortæller browseren, at den skal forudrendere de anførte URL'er, så de indlæses næsten øjeblikkeligt, når der klikkes på dem. Du kan også bruge det samme format til at forudhente sider:
<script type="speculationrules"> { "prefetch": [ { "urls": ["services.html", "pricing.html"] } ] } </script>Nylige forbedringer tillader nu dokumentbaserede regler, hvilket gør det muligt for browsere automatisk at vælge links fra siden og anvende spekulativ indlæsning. Dette reducerer behovet for manuelt at angive URL'er og gør API'en mere dynamisk. Reglerne kan være baseret på href-matches, CSS-selektorer eller en kombination af begge, hvilket giver udviklere præcis kontrol over, hvilke links der påvirkes.
Denne funktion forbedrer ikke kun brugernavigationen, men sikrer også bedre WordPress-ydeevne på tværs af frontend-sider.
Sådan fungerer spekulativ indlæsning i WordPress
I WordPress er spekulativ indlæsning ikke længere bare et udviklereksperiment. Takket være den seneste indsats fra WordPress Performance Team er denne funktion nu tilgængelig for almindelige webstedsejere via en simpel plugin-integration.
Sådan fungerer det: spekulativ indlæsning gør det muligt for dit websted at forudsige, hvilket internt link en bruger sandsynligvis vil klikke på næste gang. Når det er forudsagt, forhåndshenter browseren enten de nødvendige ressourcer eller forhåndsrenderer hele siden stille i baggrunden. Det betyder, at når brugeren endelig klikker på linket, vises siden med det samme, fordi browseren allerede har gjort det hårde arbejde.
Kernen i denne proces er Speculation Rules API'en, der fungerer som en køreplan for browsere. Den bruger en JSON-defineret struktur til at skitsere, hvilke URL'er der skal forudindlæses, og under hvilke betingelser. I WordPress kan denne mekanisme anvendes på frontend-URL'er, især til blogs, butikssider eller servicelister, hvor brugerne sandsynligvis vil hoppe fra en side til en anden.
Det, der gør spekulativ indlæsning særligt kraftfuld, er iverkonfigurationen:
- Ivrig: Browseren indlæser siden med det samme.
- Moderat: Siden forhåndsrenderes, når brugeren holder musen over et link i kort tid (typisk 200 ms).
- Konservativ: Browseren venter på mere interaktion, f.eks. et museklik eller et tryk på start.
Denne lagdelte tilgang sikrer, at spekulativ indlæsning ikke spilder båndbredde, men stadig forbedrer indlæsningstiderne for sider med høj interesse. De fleste WordPress-websteder drager fordel af at bruge den moderate indstilling, som skaber en balance mellem hastighed og effektivitet.
Speculative Loading Plugin: Installer og konfigurer
For at få spekulativ indlæsning til dit WordPress-websted uden at skulle røre ved kode, er den nemmeste løsning Speculative Loading-pluginnet, der er udviklet af bidragydere fra Google og WordPress-kerneteamet. Dette plugin blev introduceret for at hjælpe webstedsejere med at udnytte spekulationsregler uden at skulle dykke dybt ned i manuelle konfigurationer.
Installationstrin:
- Gå til dit WordPress-dashboard.
- Naviger til Plugins > Tilføj nyt.
- Søg efter "Spekulativ indlæsning".
- Klik på Installer, og derefter på Aktiver.
Når pluginet er aktiveret, tilføjer det et speculationrules-script direkte til dit websteds HTML. Dette script bruger regler på dokumentniveau til automatisk at anvende prærendering på relevante WordPress-frontend-URL'er.
Som standard bruger plugin'et indstillingen moderat iver. Det betyder, at det venter, indtil en bruger holder musen over et link i et kort øjeblik, før det begynder at forudgengive destinationssiden. Denne funktion er optimeret til ydeevne og sikrer, at det ikke overbelaster systemressourcer eller forstyrrer brugerens privatliv.
Du kan administrere pluginets indstillinger ved at gå til Indstillinger > Læsning i dit dashboard. Her finder du en ny sektion kaldet Spekulativ indlæsning, hvor du kan:
- Skift spekulationstilstand (forhåndshentning eller prærendering)
- Se eller opdater standardkonfigurationen
- Angiv betingede udelukkelser for specifikke webadresser
For eksempel udelukker WordPress automatisk stier som /wp-admin/ og /wp-login.php fra at blive forudrenderet. Du kan tilføje dine egne udelukkelser for URL'er som /checkout/ eller /cart/ ved hjælp af WordPress-filtre.
Denne håndfri opsætning gør det utrolig nemt for selv ikke-udviklere at aktivere prærendering på deres websted og øge hastigheden på tværs af ofte besøgte sider.
Browserunderstøttelse og -kompatibilitet
Et af de mest spændende aspekter ved spekulativ indlæsning er, at det allerede understøttes i moderne browsere. Speculation Rules API'en fungerer indbygget i Chromium-baserede browsere som Google Chrome og Microsoft Edge, fra specifikke versioner og fremefter.
Hvis en besøgende bruger en kompatibel browser, vil spekulativ indlæsning straks aktiveres og forbedre den oplevede ydeevne. Hvis browseren ikke understøtter det, vil dit websted stadig fungere som normalt. Dette gør spekulativ indlæsning til en progressiv forbedring – det forbedrer oplevelsen, hvor det er muligt, men ødelægger aldrig noget.
Denne form for kompatibilitet er vigtig for WordPress-sider, der er rettet mod en bred målgruppe. Uanset om dine besøgende bruger en desktopbrowser eller en mobilenhed, giver spekulativ indlæsning hurtigere gengivelse, især når de hurtigt navigerer mellem interne sider.
Udviklere kan tjekke browserunderstøttelse via værktøjer som "Kan jeg bruge" eller ved at inspicere adfærd direkte i Chrome DevTools under fanen "Spekulative indlæsninger".
Avancerede regler og filtre for udviklere
Spekulativ indlæsning er effektiv fra starten, men udviklere kan tage det endnu videre ved at tilpasse, hvilke URL'er der skal inkluderes eller ekskluderes fra prærendering og prefetching. Dette kontrolniveau er især nyttigt for e-handelsbutikker, medlemssider eller dynamiske applikationer, hvor ikke alle sider skal indlæses på forhånd.
WordPress gør dette muligt gennem filtre som plsr_speculation_rules_href_exclude_paths. Dette filter giver udviklere mulighed for at angive betingede udelukkelser, der kun tillader forudindlæsning af bestemte URL'er baseret på tilstand (prærendering eller prefetch), sti eller endda forespørgselsparametre.
Eksempel 1: Ekskluder indkøbskurvs-URL'er
Hvis du vil stoppe spekulativ indlæsning på sider relateret til indkøbskurven, kan du bruge følgende kodestykke:
add_filter( 'plsr_speculation_rules_href_exclude_paths', function ($exclude_paths) { $exclude_paths[] = '/cart/*'; return $exclude_paths; }); } Bemærk: Funktionen "exclude_paths" er "/cart/*" og "exclude_paths" er "enabled"Dette sikrer, at enhver URL, der matcher /cart/ eller dens understier, ikke bliver forudrenderet eller forhåndshentet. Det er nyttigt til at undgå unødvendig serverbelastning eller at udløse handlinger for tidligt.
Eksempel 2: Tillad forhåndshentning, men deaktiver prærendering
Lad os sige, at du vil tillade forhåndshentning, men forhindre forhåndsgengivelse for følsomme produktsider. Du kan tilføje logik til at registrere tilstanden:
add_filter( 'plsr_speculation_rules_href_exclude_paths', function ($exclude_paths, $mode) { if ($mode === 'prerender') { $exclude_paths[] = '/produkter/*'; } return $exclude_paths; }, 10, 2); } * ..Dette giver udviklere granulær kontrol over, hvordan deres bestemte WordPress-kerne-URL'er opfører sig ved spekulativ indlæsning, hvilket forhindrer privatlivsproblemer, beskytter dynamisk indhold og forbedrer brugeroplevelsen.
Du kan også målrette links med CSS-klasser som f.eks. .no-prefetch eller .no-prerender, afhængigt af din frontend-opsætning. For eksempel kan links med disse klasser springes over fra at blive indlæst på forhånd ved hjælp af selector_matches i spekulationsreglernes JSON.
Med disse teknikker kan udviklere sikre, at den spekulative indlæsningsadfærd stemmer perfekt overens med deres websteds mål – især når det gælder brugere, der er logget ind, betalingsprocesser eller nofollow-links , der ikke bør forudindlæses.
Fejlfinding af spekulativ indlæsning i Chrome DevTools
Når spekulativ indlæsning er aktiv på dit WordPress-websted, er det vigtigt at kontrollere, at det fungerer som forventet. Heldigvis tilbyder Chrome DevTools en effektiv måde at inspicere spekulativ adfærd direkte i browseren.
For at starte fejlfinding skal du åbne dit websted i Chrome og trykke på F12 for at starte DevTools. Derefter:
- Gå til Program .
- Rul ned til Spekulative belastninger.
- Du får vist en liste over webadresser, der er blevet spekulativt indlæst – enten forudgengivet eller forudhentet.
Dette panel viser status for hver URL, f.eks.:
- Ikke udløst (ingen brugerinteraktion endnu),
- Udløst (ved musepeker eller klik),
- Forudrenderet, eller
- Forudhentet.
Når du holder musen over forskellige links på dit websted, opdateres fanen Spekulative belastninger i realtid. Dette giver dig mulighed for at se, hvilke URL'er der behandles i baggrunden baseret på dine spekulationsregler.
Hvis du f.eks. har aktiveret moderat iver, vil Chrome kun forhåndsrendere to URL'er ad gangen ved hjælp af et FIFO-system (First In, First Out). Det betyder, at efter at have holdt musen over tre links, kan det tredje link muligvis ikke forhåndsrenderes, hvis to andre stadig er aktive.
Du kan også udforske prærenderede sider mere dybtgående ved hjælp af:
- Fanen Elementer: Se HTML-koden for forudrenderet indhold.
- Fanen Netværk: Se filer, der allerede er anmodet om og cachelagret.
- Konsol og kilder: Bekræft, om scripts er forsinkede eller udføres korrekt efter aktivering.
Ved at skifte renderer-instansen i rullemenuen øverst til højre kan du isolere den forudrenderede side og inspicere dens netværksaktivitet eller DOM-struktur ligesom en live-fane.
Dette niveau af synlighed hjælper udviklere med at fejlsøge spekulationsregler, fejlfinde spekulative indlæsningsplugins og sikre, at opsætningen ikke påvirker brugeradfærd eller ydeevne.
Prefetch vs. Prerender: Hvad er forskellen?
Selvom spekulativ indlæsning omfatter både forhåndshentning og forhåndsgengivelse, fungerer de to forskelligt og tjener forskellige formål.
Forhåndshentning
- Downloader ressourcer som HTML, CSS og JavaScript.
- Gengiver ikke siden.
- Bruges til at reducere indlæsningstiden, når brugeren rent faktisk klikker.
- Lavere påvirkning af systemressourcer.
- Ideel til sider, der sandsynligvis vil blive besøgt, men som ikke bør udføres for tidligt.
Forhåndsgengivelse
- Indlæser og gengiver hele siden i en skjult fane.
- Siden er fuldt interaktiv, når brugeren navigerer.
- Bruger mere CPU og hukommelse.
- Bedst til links med høj prioritet eller almindelige navigationsstier.
For eksempel vil du måske forudgengive WordPress frontend-URL'er som blogindlæg eller produktkategorier, mens du kun forudhenter kontakt- eller supportsider, der muligvis ikke kræver øjeblikkelig interaktion.
Du kan konfigurere dette i Speculative Loading-pluginnet ved at skifte Spekulationstilstand til enten Prerender eller Forhåndshent i pluginnets indstillingspanel.
Den valgte tilstand vil påvirke, hvor hurtigt brugerne oplever indhold, hvor meget systemhukommelse der bruges, og hvordan dit WordPress-websteds ydeevne opfattes samlet set.
Chromes DevTools er igen nyttige her. Under fanen Spekulative indlæsninger kan du se forskellen: Forudrenderede sider viser en fuld DOM-forhåndsvisning, mens forudhentede sider vises som passive baggrundsressourcer.
Forståelse af denne sondring gør det muligt for webstedsejere og -udviklere at træffe smartere beslutninger baseret på brugeradfærd, tilgængelig båndbredde og webstedsarkitektur.
Indvirkning af Spekulationsregler-API'en på Analytics
Selvom spekulativ indlæsning kan forbedre sideindlæsningstider og brugeroplevelse dramatisk, introducerer det et par udfordringer, når det kommer til sporing af webstedsanalyser.
Når en side prærenderes, indlæses den i baggrunden – før brugeren overhovedet navigerer til den. Dette kan skabe en situation, hvor analyseværktøjer som Google Analytics, heatmaps eller event trackers kan registrere et besøg eller en begivenhed, før brugeren rent faktisk ser eller interagerer med siden.
For at forhindre falske positiver skal udviklere implementere betinget sporing baseret på den faktiske brugernavigation.
For eksempel understøtter ikke alle analyseplatforme prærenderingsdetektion som standard. Nogle logger muligvis en sidevisning, når siden indlæses i baggrunden, selvom den besøgende aldrig klikker på linket. Heldigvis håndterer værktøjer som Google Analytics, Google Publisher Tag og Google AdSense allerede dette effektivt. De forsinker hændelsessporing, indtil den prærenderede side bliver aktiv.
Hvis du bruger brugerdefinerede sporingsscripts eller tredjepartsværktøjer, skal du dog tilføje en kontrol for at sikre, at sporingen først starter, når siden er aktiv. Dette er muligt ved at bruge egenskaben document.prerendering kombineret med en prerenderingchange-hændelseslytter.
Her er et hurtigt eksempel med JavaScript:
const whenActivated = new Promise((resolve) => { if (document.prerendering) { document.addEventListener('prerenderingchange', resolve); } else { resolve(); } }); async function initAnalytics() { await whenActivated; // Initialiser din analysekode her } initAnalytics();Denne tilgang sikrer, at dine marketingdata afspejler den faktiske brugerinteraktion, ikke baggrundsprocesser. Det er især vigtigt for teams, der bruger Real User Monitoring (RUM), A/B-testeller hændelsesbaseret analyse, der påvirker forretningsbeslutninger.
Uanset om du bruger et plugin til indlæsning af spekulationer, brugerdefinerede spekulationsregler eller implementerer Speculation Rules API'en manuelt, skal du altid gennemgå, hvordan det kan påvirke analyserne, og justere din sporing i overensstemmelse hermed.
Med den rigtige konfiguration får du det bedste fra begge verdener – hurtigere ydeevne og præcise indsigter.
Potentielle faldgruber: Hvornår skal spekulativ indlæsning deaktiveres
Selvom spekulativ indlæsning er nyttig, er der scenarier, hvor det måske ikke er ideelt at aktivere den. I nogle tilfælde kan det forårsage uventet adfærd eller endda afbryde webstedets funktionalitet – især på dynamiske sider eller websteder med følsomme brugerdata.
Her er et par situationer, hvor du bør overveje at deaktivere spekulativ indlæsning for specifikke URL'er eller brugerroller.
1. Indloggede brugere og personligt tilpasset indhold
Undgå at forudgengive sider, der viser personligt tilpasset indhold, f.eks. kontodashboards eller medlemskabsområder. Indlæsning af dem i baggrunden ved hjælp af en andens sessionsdata kan forårsage forvirring eller endda afsløre følsomme oplysninger.
For at forhindre dette kan du udelukke loggede brugere helt fra at udløse spekulativ indlæsning eller filtrere specifikke URL'er med sessionsbaseret indhold fra ved hjælp af PHP.
2. E-handelskurv, kasse og betalingssider
Ekskluder sider som /cart/, /checkout/ eller enhver URL med forespørgselsparametre knyttet til produktvalg. Disse sider er ofte afhængige af opdateringer i realtid og kan vise forkerte oplysninger, hvis de forudgengives, før en bruger bekræfter sin hensigt.
Brug filteret plsr_speculation_rules_href_exclude_paths til at fjerne sådanne sider fra spekulativ indlæsning:
add_filter( 'plsr_speculation_rules_href_exclude_paths', function ($exclude_paths) { $exclude_paths[] = '/checkout/*'; $exclude_paths[] = '/cart/*'; return $exclude_paths; }); } * ..
Dette sikrer, at dine WordPress-kerne-URL'er kun er optimeret til sider, hvor spekulativ indlæsning tilføjer værdi – ikke hvor det kan forstyrre vigtige brugerhandlinger.
3. Sider med klientside JavaScript-tilstand
Sider, der er stærkt afhængige af JavaScript til at indlæse data dynamisk – f.eks. dashboards, formularer eller bookingsystemer i realtid – bør ikke forudgengives. Tilstanden kan blive forældet eller udløse hændelser, der ikke skulle køre, før en bruger klikker.
Hvis du stadig vil forhåndshente sådanne sider (uden at gengive dem), skal du bruge en betinget udelukkelse, der kun deaktiverer forhåndsgengivelsestilstand:
add_filter( 'plsr_speculation_rules_href_exclude_paths', function ($exclude_paths, $mode) { if ($mode === 'prerender') { $exclude_paths[] = '/live-dashboard/*'; } return $exclude_paths; }, 10, 2); } * ..4. Udelukk brug af CSS-klasser
Du kan også forhindre, at specifikke links hentes, ved at tilføje CSS-klasser som no-prefetch eller do-not-prerender. Speculation Rules API'en giver dig mulighed for at bruge selector_matches i din JSON-konfiguration:
Dette er især nyttigt for plugin-udviklere eller temaskabere, der ønsker at tilbyde mere detaljeret kontrol uden at redigere PHP-filer.
Spekulativ indlæsning er et fantastisk værktøj, men det er ikke en universel løsning. Med de rigtige udelukkelser og indstillinger kan du bruge det til at forbedre ydeevnen, samtidig med at du undgår faldgruber.
Afsluttende tanker: Byg et hurtigere WordPress-websted med selvtillid
Spekulativ indlæsning er en af de mest spændende fremskridt inden for moderne webperformance – og WordPress tager det allerede til sig. Med værktøjer som Speculation Rules API og Speculative Loading-pluginnet kan webstedsejere og -udviklere dramatisk reducere sideindlæsningstider, forbedre brugernavigationen og tilbyde mere jævne oplevelser over hele linjen.
Uanset om du bygger en indholdsrig blog, en WooCommerce-butik eller et dynamisk WordPress-websted, hjælper spekulativ indlæsning dine sider med at føles hurtigere uden at du behøver at røre ved kompleks kode. Og takket være smart browserunderstøttelse og brugerdefinerbare indstillinger passer det problemfrit ind i de fleste opsætninger.
Før du aktiverer det på hele dit websted, skal du sørge for at gennemgå dine WordPress-kerne-URL'er, kontrollere for dynamiske sider og anvende betingede udelukkelser, hvor det er nødvendigt. Brug Chrome DevTools til at validere adfærd, og overvåg altid, hvordan spekulative funktioner påvirker dine analyser og performance-målinger.
Hvis du er klar til at begynde at skabe hurtigere, smartere og mere engagerende hjemmesider , kan spekulativ indlæsning være dit hemmelige våben.
