Implementering av förbelastning, förhämtning, föranslutning i WordPress

Dra nytta av moderna webbläsarfunktioner som förinställning, förhämtning, föranslutning för att göra WordPress-webbplatsen snabbare.


Som webbplatsägare, som inte gillar att göra allt möjligt för att ladda webbsidan snabbare?

Att se till att webbplatsen laddas snabbare och konsekvent över hela världen är utmanande. 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öre surfningstekniker.

Obs: webbläsartips-tekniker hjälper inte så mycket när du öppnar webbplatsen för första gången, men efterföljande förfrågningar är snabbare.

preload

Du kan använda förbelastnings-taggen för att berätta för webbläsaren att hämta några av de statiska resurserna tidigt. De kan vara en bild, teckensnitt, JavaScript, CSS, skript, video etc. Det hjälper till att prioritera resursbelastningen; Därför förbättras prestanda.

Förbelastning skulle vara en bra idé att implementera om du förväntar dig att dina användare kommer att besöka flera sidor därefter. Liksom eCommerce-butiken där användaren besöker produktsidan och sedan kontrollera informationen, jämföra med annan produkt, lägga till i kundvagnen, betala osv..

Du kan använda följande plugins för att ställa in funktionen Preload.

Bättre resurstips – ett gratis plugin för att konfigurera CSS- och JS-filer.

WP Rocket – ett premium-plugin för att ladda webbplatsens prestanda med många viktiga tekniker, inklusive förladdning av cache och webbplatskarta.

Hur vet du om förbelastning är aktiverad?

Det snabbaste sättet att ta reda på det är genom att titta på sidkällan. Du borde se något som nedan.

Inte alla webbläsare stöder Preload under skrivning. Så kolla in kompatibilitetsmatris före genomförandet.

Preconnect

Laddar du resurser från andra domäner? Kanske CDN?

Om inte, och varje resurs laddas från din enda domän, kan det inte vara till hjälp.

Föranslutning antyder webbläsaren för 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örhandlingar etc. Tanken är att sänka latensen för att ge snabb resursbelastning från en annan domän.

Återigen kan du använda ovannämnda bättre resurs tips plugin eller premium en liknande perfmatters.

När du har konfigurerat de nödvändiga resurserna bör du se dem i sidkällan som nedan.

Obs! Om du laddar resurserna från en domän som kräver CORS måste du ange att crossorigin och output ska se ut.

Preconnect är kompatibel med den senaste versionen av Chrome, Edge, Firefox, Safari.

prefetch

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 nödvändiga resurser och lagrar dem i den lokala cachen och serverar dem snabbt vid behov. Det finns två typer av förhämtning.

DNS-förhämtning – förklaras nedan

Länk förhämtning – konfigurerad med. Används för att hämta HTML eller statiska resurser. Du kan förhämta resurser med ett attribut.

eftersom attribut stöder olika resurser som ljud, video, skript, spår, stil, teckensnitt, objekt, dokument etc. Länkförhämtning kan konfigureras med hjälp av Prepart Resource Tips-plugin.

DNS Prefetch

Laddar resurser från många domäner och vill lösa dem i bakgrunden?

Denna snabbinställning kan hjälpa till att lösa alla potentiella domäner tidigare, så när resurser begärs laddar 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 för att utföra DNS-sökning, så kommer du att spara 300 ms latens.

Är det inte coolt?

Du kan implementera genom att antingen använda perfmatters-plugin eller lägga till följande i features.php-filen för ditt tema om du är bekväm med att redigera temafilerna.

// * Förhandshämtning av DNS
funktion dns_prefetch () {
echo ‘

}
add_action (‘wp_head’, ‘dns_prefetch’, 0);

Du kan läsa mer på Mozilla webbdokument.

renderare

Förväntar du dig att dina webbplatsanvändare navigerar på den potentiella sidan?

Prerender kan hjälpa till att ladda dessa tillgångar i bakgrunden, och när användaren klickar på den får de det mycket snabbt. Du kan uppnå detta med plugin-programmet för resurshints för partiet.

Prerendering är lämplig för en liten 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 se till att den inte har biverkningar.

Som ni ser är det fyra huvudplugins involverade för att implementera webbläsartips i WordPress. Välj den du gillar och passa kravet.

Prepart Resource Tips-plugin – ett gratis plugin erbjuder DNS-prefetch, länk prefetch, prerender, pre-connect och pre -laddning.

Bättre resurstips – ett alternativ till ovanstående.

Den gratis plugin är bra så länge den underhålls och stöds. Tyvärr händer det inte för många plugins, och därför är det ibland bättre att gå till den betalda versionen. Plugin för kommersiell version stöds professionellt och uppdaterat med WordPress-standarden & säkerhetsfixar. Om du är villig att spendera några dollar på att optimera din webbplatsprestanda kan du kolla in följande.

WP Rocket – välrenommerat, betrodd av mer än 800 000 webbplatser. Det kostar 49 dollar för en webbplats.

Perfmatters – En lätt vikt med lätt att följa kostar 24,95 USD för en webbplats. När jag skriver erbjuder det följande funktioner.

Det är mycket optimering.

Slutsats

WordPress-kärnan är en lätt vikt, men den blir skrymmande beror på vilket tema och plugins du använder. Och det är viktigt att optimera din webbplats för bättre sökrankning och konvertering. Ovanstående tekniker är enkla 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 du försöker SUCURI som erbjuder både CDN och säkerhet.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map