Dra nytta av moderna webbläsarfunktioner som förladdning, förhämtning, föranslutning för att göra WordPress-webbplatsen snabbare.
Som webbplatsägare, vem gillar inte att göra allt möjligt för att ladda webbsidan snabbare?
Att se till att webbplatsen laddas snabbare konsekvent över hela världen är en utmaning. Det finns flera saker du kan göra för att ladda webbplatsresurserna snabbt, inklusive att aktivera följande webbläsartips. De är också kända som för-surfningstekniker.
Obs: tekniker för webbläsartips hjälper inte mycket när du besöker webbplatsen för första gången, men efterföljande förfrågningar är snabbare.
Innehållsförteckning
Förladda
Du kan använda preload-taggen för att tala om för webbläsaren att hämta några av de statiska resurserna tidigt. De kan vara en bild, typsnitt, JavaScript, CSS, skript, video, etc. Det hjälper till att prioritera resursladdningen; därför förbättras prestandan.
Förladdning skulle vara en bra idé att implementera om du förväntar dig att dina användare ska besöka flera sidor efteråt. Gilla e-handelsbutiken där användaren besöker produktsidan och sedan kontrollera informationen, jämföra med annan produkt, lägga i varukorgen, betala osv.
Du kan använda följande plugins för att ställa in Preload-funktionen.
Bättre resurstips – ett gratis plugin för att konfigurera CSS- och JS-filer.
WP Rocket – ett premiumplugin för att överladda webbplatsens prestanda med många viktiga tekniker, inklusive förladdning av caching och webbplatskarta.
Hur vet du om förladdning är aktiverat?
Det snabbaste sättet att ta reda på det är genom att titta på sidkällan. Du bör se något liknande nedan.
<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">
Det är inte alla webbläsare som stöder Preload under skrivning. Så kolla in kompatibilitetsmatris före genomförandet.
Föranslut
Laddar du resurser från andra domäner? CDN kanske?
Om inte, och varje resurs laddas från din enda domän, kanske detta inte är användbart.
Föranslutning tipsar webbläsaren om att upprätta en anslutning till andra domäner i bakgrunden för att spara tid för DNS-sökning, omdirigering, TCP-handskakning, TLS-förhandling, etc. Tanken är att sänka latensen för att ge snabb resursladdning från en annan domän.
Återigen kan du använda ovan nämnda plugin för bättre resurstips eller premium-en som perfmatters.
När du har konfigurerat de nödvändiga resurserna bör du se dem i sidkällan som nedan.
<link rel="preconnect" href="https://ANOTHERSITE.com">
Obs: om du laddar resurserna från en domän som kräver CORS måste du ange det som korsorigin och utdata ska se ut.
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
Preconnect är kompatibel med den senaste versionen av Chrome, Edge, Firefox, Safari.
Förhämtning
Låt webbläsaren hämta nästa sida, som du tror kommer att behövas när användaren navigerar runt. Prefetch laddar ner de nödvändiga resurserna och lagrar dem i den lokala cachen och serverar dem snabbt när det behövs. Det finns två typer av förhämtning.
DNS-förhämtning – förklaras nedan
Länkförhämtning – konfigurerad med
as attribut stöder olika resurser som ljud, video, skript, spår, stil, typsnitt, objekt, dokument, etc. Länkförhämtning kan konfigureras med hjälp av Pre Party Resource Hints plugin.
DNS Prefetch
Laddar resurser från många domäner och vill lösa dem i bakgrunden?
Denna snabba installation kan hjälpa till att lösa alla potentiella domäner tidigare så när resurser efterfrågas laddas den snabbare. Detta hjälper till att sänka den totala latensen.
Låt oss säga att du laddar resurser från 3 domäner, och varje domän tar cirka 100 ms att utföra DNS-sökning, då sparar du 300 ms latens.
Är det inte coolt?
Du kan implementera genom att antingen använda perfmatters plugin eller lägga till följande i functions.php-filen för ditt tema om du är bekväm med att redigera temafilerna.
//* 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äsa mer på Mozilla webbdokument.
Förrendera
Förväntar du dig att dina webbplatsanvändare ska navigera på den potentiella sidan?
Förrendering kan hjälpa till att ladda dessa tillgångar i bakgrunden, och när användaren klickar på den får de det väldigt snabbt. Du kan uppnå detta med insticksprogrammet Pre Party Resource Hints.
Förrendering är lämplig för en lätt sida eller tillgång, men var försiktig med hela webbplatsen eller stora resurser eftersom det kan öka CPU-användningen och bandbredden och sakta ner webbplatsen. Så försök med den mindre resursen och testa den för att säkerställa att den inte har biverkningar.
Som du kan se är det fyra huvudplugins involverade för att implementera webbläsartips i WordPress. Välj den du gillar och passa kraven.
Pre Party Resource Hints plugin – ett gratis plugin erbjuder DNS-förhämtning, länkförhämtning, förrendering, föranslutning och förladdning.
Bättre resurstips – ett alternativ till ovanstående.
Det kostnadsfria pluginet är bra så länge det underhålls och stöds. Tyvärr händer detta inte för många plugins, och därför är det ibland bättre att välja den betalda versionen. Plugins för kommersiella versioner stöds professionellt och är uppdaterade med WordPress-standard- och säkerhetsfixar. Om du är villig att spendera några dollar på att optimera din webbplats prestanda, kan du kolla in följande.
WP Rocket – välrenommerad, betrodd av mer än 800 000 sajter. Det kostade $49 för en webbplats.
Perfmatters – en lättviktig med lätt att följa kostar $24,95 för en webbplats. När jag skriver erbjuder den följande funktioner.
Det är mycket optimering.
Slutsats
WordPress-kärnan är lätt, men den blir skrymmande beroende på vilket tema och plugins du använder. Och det är viktigt att optimera din webbplats prestanda för bättre sökrankning och omvandling. Ovanstående tekniker är lätta att följa, men du bör inte sluta där.
Du bör också överväga att använda ett CDN för att cache och leverera innehåll snabbare till dina användare globalt. Det finns många, men jag skulle rekommendera att prova SUCURI som erbjuder både CDN och säkerhet.