Implementere Preload, Prefetch, Preconnect i WordPress

Dra nytte av moderne nettleserfunksjoner som forhåndsinnlasting, forhåndshenting, forhåndstilkobling for å gjøre WordPress-nettstedet raskere.

Som nettstedeier, hvem liker ikke å gjøre alt mulig for å laste nettsiden raskere?

Det er utfordrende å sikre at nettstedet lastes inn raskere konsekvent over hele verden. Det er flere ting du kan gjøre for å laste nettstedressursene raskt, inkludert å aktivere følgende nettlesertips. De er også kjent som pre-surfing-teknikker.

Merk: teknikker for nettlesertips hjelper ikke mye når du går inn på nettstedet for første gang, men påfølgende forespørsler er raskere.

Forhåndslast

Du kan bruke preload-tag for å fortelle nettleseren å hente noen av de statiske ressursene tidlig. De kan være et bilde, font, JavaScript, CSS, skript, video osv. Det hjelper å prioritere ressursinnlastingen; dermed forbedres ytelsen.

Forhåndsinnlasting vil være en god idé å implementere hvis du forventer at brukerne dine besøker flere sider etterpå. Som eCommerce-butikken hvor brukeren besøker produktsiden og deretter sjekke informasjonen, sammenligne med andre produkter, legge i handlekurven, betale osv.

Du kan bruke følgende plugins for å sette opp forhåndsinnlastingsfunksjonen.

Bedre ressurstips – en gratis plugin for å konfigurere CSS- og JS-filer.

WP Rocket – en førsteklasses plugin for å overlade ytelsen til nettstedet med mange viktige teknikker, inkludert forhåndsinnlasting av caching og nettstedskart.

Hvordan vet du om forhåndslasting er aktivert?

Den raskeste måten å finne ut av det på er ved å se sidekilden. Du bør se noe slikt 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 nettlesere støtter forhåndsinnlasting mens du skriver. Så sjekk ut kompatibilitetsmatrise før implementeringen.

  8 Ultimate Impact Effort Matrise-maler for å ta informerte beslutninger

Forhåndskoble

Laster du ressurser fra andre domener? Kanskje CDN?

Hvis ikke, og hver ressurs blir lastet fra ditt enkelt domene, kan dette ikke være nyttig.

Forhåndstilkobling antyder at nettleseren oppretter en tilkobling til andre domener i bakgrunnen for å spare tid for DNS-oppslag, omdirigering, TCP-håndtrykk, TLS-forhandling osv. Tanken er å senke ventetiden for å gi rask ressursinnlasting fra et annet domene.

Igjen kan du bruke den ovenfor nevnte plugin-modulen for bedre ressurshint eller premium-en som perfmatters.

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

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

Merk: Hvis du laster inn ressursene fra et domene som krever CORS, må du spesifisere det som crossorigin og output skal se ut.

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

Preconnect er kompatibel med den nyeste versjonen av Chrome, Edge, Firefox, Safari.

Forhåndshenting

La nettleseren hente neste side, som du tror vil være nødvendig når brukeren navigerer rundt. Prefetch vil laste ned de nødvendige ressursene og lagre dem i den lokale hurtigbufferen og betjene dem raskt når det trengs. Det finnes to typer forhåndshenting.

DNS-forhåndshenting – forklart nedenfor

Forhåndshenting av koblinger – konfigurert med . Brukes til å forhåndshente HTML eller statiske ressurser. Du kan forhåndshente ressurser som et attributt.

  13 beste robotmopper for rene gulv

som attributt støtter ulike ressurser som lyd, video, skript, spor, stil, font, objekt, dokument osv. Forhåndshenting av koblinger kan konfigureres ved hjelp av Pre Party Resource Hints-plugin.

DNS-forhåndshenting

Laster du inn ressurser fra mange domener og ønsker å løse dem i bakgrunnen?

Dette raske oppsettet kan bidra til å løse alle potensielle domener tidligere, så når ressurser blir forespurt, lastes det raskere. Dette bidrar til å senke den totale ventetiden.

La oss si at du laster ressurser fra 3 domener, og hvert domene tar rundt 100 ms å utføre DNS-oppslag, så sparer du 300 ms ventetid.

Er det ikke kult?

Du kan implementere ved å enten bruke perfmatters-plugin eller legge til følgende i functions.php-filen til temaet ditt hvis du er komfortabel med å redigere temafilene.

//* 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 lese mer på Mozilla nettdokumenter.

Forhåndsgjengivelse

Forventer du at brukerne av nettstedet skal navigere på den potensielle siden?

Prerender kan bidra til å laste disse eiendelene i bakgrunnen, og når brukere klikker på det, får de det veldig raskt. Du kan oppnå dette med Pre Party Resource Hints-plugin.

Forhåndsgjengivelse er egnet for en lett side eller eiendel, men vær forsiktig med hele nettstedet eller store ressurser, da det kan øke CPU-utnyttelsen og båndbredden og senke nettstedet. Så prøv med den mindre ressursen og test den for å sikre at den ikke har bivirkninger.

  Reparer feilkode 130 Kunne ikke laste nettsiden Ukjent feil

Som du kan se, er det fire hovedplugins involvert for å implementere nettlesertips i WordPress. Velg den du liker og passer til kravene.

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

Bedre ressurstips – et alternativ til det ovennevnte.

Gratis plugin er bra så lenge den vedlikeholdes og støttes. Dessverre skjer ikke dette for mange plugins, og det er derfor noen ganger det er bedre å gå for den betalte versjonen. Programtillegg for kommersielle versjoner støttes profesjonelt og oppdatert med WordPress-standarder og sikkerhetsrettinger. Hvis du er villig til å bruke noen få dollar på å optimalisere nettstedets ytelse, kan du sjekke ut følgende.

WP Rocket – godt kjent, klarert av mer enn 800 000 nettsteder. Det koster $49 for ett nettsted.

Perfmatters – en lettvekt som er enkel å følge koster $24,95 for ett nettsted. Som jeg skriver, tilbyr den følgende funksjoner.

Det er mye optimalisering.

Konklusjon

WordPress-kjerne er en lettvekts, men den blir klumpete avhenger av hvilket tema og plugins du bruker. Og det er viktig å optimalisere ytelsen til nettstedet ditt for bedre søkerangering og konvertering. De ovennevnte teknikkene er enkle å følge, men du bør ikke stoppe der.

Du bør også vurdere å bruke et CDN for å bufre og levere innhold raskere til brukerne dine globalt. Det er mange, men jeg vil anbefale å prøve SUCURI som tilbyr CDN og sikkerhet, begge deler.