Implementering af Preload, Prefetch, Preconnect i WordPress

Udnyt moderne browserfunktioner såsom forudindlæsning, prefetching, preconnect for at gøre WordPress-webstedet hurtigere.

Hvem kan som webstedsejer ikke lide at gøre alt muligt for at indlæse websiden hurtigere?

Det er udfordrende at sikre, at webstedet indlæses hurtigere konsekvent på verdensplan. Der er flere ting, du kan gøre for at indlæse webstedets ressourcer hurtigt, herunder at aktivere følgende browsertip. De er også kendt som pre-browsing-teknikker.

Bemærk: teknikker med browsertip hjælper ikke meget, når du går ind på webstedet for første gang, men efterfølgende anmodninger er hurtigere.

Indholdsfortegnelse

Forudindlæs

Du kan bruge preload tag til at bede browseren om at hente nogle af de statiske ressourcer tidligt. De kan være et billede, skrifttype, JavaScript, CSS, scripts, video osv. Det hjælper med at prioritere ressourceindlæsningen; derfor forbedres ydeevnen.

Forudindlæsning vil være en god idé at implementere, hvis du forventer, at dine brugere besøger flere sider efterfølgende. Ligesom eCommerce-butikken, hvor brugeren besøger produktsiden og derefter tjekke oplysningerne, sammenligne med andre produkter, lægge i kurv, betale osv.

Du kan bruge følgende plugins til at konfigurere Preload-funktionen.

Bedre ressourcetip – et gratis plugin til at konfigurere CSS- og JS-filer.

WP Rocket – et premium plugin til at overlade webstedets ydeevne med mange vigtige teknikker, herunder forudindlæsning af caching og sitemap.

Hvordan ved du, om preload er aktiveret?

Den hurtigste måde at finde ud af det på er ved at se sidekilden. Du bør se noget som nedenfor.

<link rel="preload" as="style" href="https://wilku.top/implementing-preload-prefetch-preconnect-in-wordpress/IMPORTANT.css">
<link rel="preload" as="script" href="CRITICAL.js">

Ikke alle browsere understøtter Preload under skrivning. Så tjek ud kompatibilitetsmatrix før implementeringen.

Hitman Go ankommer til Google Play Butik [Paid]

Forbind

Indlæser du ressourcer fra andre domæner? Måske CDN?

Hvis ikke, og hver ressource bliver indlæst fra dit enkelte domæne, er dette muligvis ikke nyttigt.

Preconnecting antyder, at browseren etablerer en forbindelse til andre domæner i baggrunden for at spare tid til DNS-opslag, omdirigering, TCP-håndtryk, TLS-forhandling osv. Idéen er at sænke latensen for at give hurtig ressourceindlæsning fra et andet domæne.

Igen kan du bruge ovennævnte plugin med bedre ressourcetips eller premium-en som perfmatters.

Når du har konfigureret de nødvendige ressourcer, bør du se dem i sidekilden som nedenfor.

<link rel="preconnect" href="https://ANOTHERSITE.com">

Bemærk: Hvis du indlæser ressourcerne fra et domæne, der kræver CORS, skal du angive det, som crossorigin og output skal se ud.

<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>

Preconnect er kompatibel med den nyeste version af Chrome, Edge, Firefox, Safari.

Forhåndshentning

Lad browseren hente den næste side, som du mener bliver nødvendig, når brugeren navigerer rundt. Prefetch vil downloade de nødvendige ressourcer og gemme dem i den lokale cache og betjene dem hurtigt, når det er nødvendigt. Der er to typer forhåndshentning.

DNS prefetch – forklaret nedenfor

Forhåndshentning af link – konfigureret ved hjælp af . Bruges til at forhåndshente HTML eller statiske ressourcer. Du kan forhåndshente ressourcer ved at bruge som en attribut.

Beregn, hvor meget du skal betale og give drikkepenge, når du deler regningen

som attribut understøtter forskellige ressourcer som lyd, video, script, spor, stil, skrifttype, objekt, dokument osv. Forhåndshentning af link kan konfigureres ved hjælp af Pre Party Resource Hints plugin.

DNS Prefetch

Indlæser du ressourcer fra mange domæner og ønsker at løse dem i baggrunden?

Denne hurtige opsætning kan hjælpe med at løse alle potentielle domæner tidligere, så når der anmodes om ressourcer, indlæses det hurtigere. Dette hjælper med at sænke den samlede latenstid.

Lad os sige, at du indlæser ressourcer fra 3 domæner, og hvert domæne tager omkring 100 ms at udføre DNS-opslag, så sparer du 300 ms latency.

Er det ikke fedt?

Du kan implementere ved enten at bruge perfmatters plugin eller tilføje følgende i functions.php-filen til dit tema, hvis du er tryg ved at redigere temafilerne.

//* DNS Prefetching
function dns_prefetch() {
    echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);

Du kan læse mere på Mozilla web-docs.

Prærender

Forventer du, at dit websteds brugere navigerer på den potentielle side?

Prerender kan hjælpe med at indlæse disse aktiver i baggrunden, og når brugeren klikker på det, får de det meget hurtigt. Du kan opnå dette med Pre Party Resource Hints plugin.

Forgengivelse er velegnet til en let side eller et aktiv, men vær forsigtig med hele webstedet eller store ressourcer, da det kan øge CPU-udnyttelsen og båndbredden og sænke webstedet. Så prøv med den mindre ressource og test den for at sikre, at den ikke har bivirkninger.

Hvor bekymret bør du være for sundhedsrisiciene ved 5G?

Som du kan se, er der fire hovedplugins involveret til at implementere browsertip i WordPress. Vælg den, du kan lide, og passer til kravene.

Pre Party Resource Hints plugin – et gratis plugin tilbyder DNS-prefetch, link prefetch, prerender, preconnect og preload.

Bedre ressourcetip – et alternativ til ovenstående.

Det gratis plugin er godt, så længe det vedligeholdes og understøttes. Det sker desværre ikke for mange plugins, og derfor er det nogle gange bedre at gå efter den betalte version. Kommercielle version plugins understøttes professionelt og opdateret med WordPress standard & sikkerhedsrettelser. Hvis du er villig til at bruge et par dollars på at optimere dit websteds ydeevne, kan du tjekke følgende.

WP Rocket – velrenommeret, betroet af mere end 800.000 websteder. Det kostede $49 for en hjemmeside.

Perfmatters – en letvægts med let at følge koster 24,95 USD for et websted. Som jeg skriver, tilbyder den følgende funktioner.

Det er meget optimering.

Konklusion

WordPress kerne er en letvægts, men den bliver omfangsrig, afhænger af hvilket tema og plugins du bruger. Og det er vigtigt at optimere dit websteds ydeevne for bedre søgerangering og konvertering. Ovenstående teknikker er nemme at følge, men du bør ikke stoppe der.

Du bør også overveje at bruge et CDN til at cache og levere indhold hurtigere til dine brugere globalt. Der er mange, men jeg vil anbefale at prøve SUCURI, som tilbyder både CDN og sikkerhed.