Om du vill påskynda din WordPress-webbplats är användning av Instant Pages på WordPress en lite känd taktik som använder kraften i “förbelastning”.
I slutändan är webbplatsnavigering enkel. Du går till sidan, hittar länken som intresserar dig, klickar på den och upprepar processen. Bakom kulisserna laddar din webbläsare varje sida när du klickar på en länk. Föreställ dig dock om din webbläsare laddar en ny sida innan du klickar på den. I främre delen är den enda skillnaden att ladda den andra sidan snabbare än vanligt.
Det är förinstallerad – med kod för att berätta för besökarens webbläsare att ladda en specifik sida. Som ett resultat kan användare uppleva snabbare navigering, och om du implementerar dem på rätt sätt kommer de aldrig att se mer data laddas i bakgrunden.
I den här artikeln kommer vi att dela upp hur förbelastning fungerar och sedan lära dig hur du använder den Omedelbara sidor skript för att lägga till funktionalitet i WordPress. Vi kommer också att testa hur stor skillnad i förbelastning som händer i verkliga livet.
Låt oss börja!
Introduktion till “i tid” förladdning
Förbelastning är en en tagg som säger till webbläsaren att de måste ladda och spara resursen så snart som möjligt. Du kan till exempel använda den här koden så att webbläsaren hämtar din style.css-fil omedelbart efter att du har laddat din sida:
Vanligtvis använder du förbelastade taggar för att ladda ner stilark eller skript. En snabb förladdning går dock längre. Detta säger till din webbläsare att börja ladda andra sidor när du interagerar med vissa länkar.
Din webbläsare gör ingenting med den sida som laddas, annat än att spara den. Det betyder att när du klickar på länken måste laddningstiden vara snabbare än vanligt. Kom ihåg att förladdning i tid bara fungerar för:
- Interna länkar på din webbplats
- Länk till en extern sida (om du vill!)
Med andra ord, om du lägger till snabb inläsning till din webbplats bör det påskynda intern navigering. Det påverkar dock inte laddningstiden från sökmotorer eller från andra webbplatser.
Under våra egna tester fann vi att vi i genomsnitt behövde 200–300 ms för att klicka på länken från den tidpunkt vi riktade den. I ett verkligt scenario kommer detta att vara en bra bit från varje sidbelastningstid, även om det redan är snabbt att starta.
Det bör noteras att förbelastning inte är detsamma som “förhämtning”, vilket är en annan term du kan stöta på. Förhämtning berättar också för din webbläsare att ladda tillgångar i bakgrunden. Det gjordes dock med en lägre prioritering, vilket inte var i överensstämmelse med syftet med att starta lastningen omedelbart.
Instant Pages gör det enkelt att ställa in “just-in-time” -förbelastning
För dem som inte vet, Omedelbara sidor är ett open source-skript som du kan använda för att lägga till förbelastning i tid till din webbplats. Skriptet börjar ladda den nya sidan så snart användaren svävar över länken – även om den bara innehåller statiskt innehåll.
Enligt Instant Pages, när användare omdirigerar en länk runt 65 ms, finns det 50 procent chans att de klickar på den länken. Just nu har din webbläsare tid att börja ladda sidor i bakgrunden, vilket leder till kortare laddningstid.
Innan du lägger till skript till din webbplats vill du köra några interna hastighetstester. För att göra detta vill vi använda Chrome Dev Tool. Högerklicka bara på valfri sida på din webbplats och välj alternativet Inspektera. Med verktyget öppet till höger väljer du fliken Nätverk och klickar sedan på interna länkar:
Avsnittet DOMContentLoaded i nedre högra hörnet berättar hur lång tid det tar att ladda HTML. Kör några av dessa tester och registrera resultaten – det är din baslinje.
Låt oss nu diskutera hur man använder Instant Pages på WordPress.
Det enklaste sättet att använda Instant Pages på WordPress
Även om vi visar dig den manuella metoden för hur du använder Instant Pages på WordPress i nästa avsnitt, är det enklaste sättet att komma igång med Instant Pages på WordPress med en speciell plugin:
Ingen tutorial behövs här – du behöver bara installera plugin och börja fungera!
Hur man använder Instant Pages manuellt i WordPress
Vi rekommenderar plugin för de flesta användare, men du kan också manuellt lägga till Instant Page-skript till din WordPress-webbplats.
Den lilla fördelen med att använda den manuella metoden är att du har lite mer kontroll över hur din förbelastning fungerar.
Processen kommer att variera beroende på vilken metod du använder. Till exempel kan du använd krokar att lägga till kod i WordPress eller infoga kod direkt.
Vi kommer att använda den senaste tekniken eftersom Instant Pages bara behöver ett par kodrader för att fungera.
För att göra detta vill du komma åt din webbplats via File Transfer Protocol (FTP) och navigera till din WordPress-rotmapp.
När du är där, gå till wp-content/themes och leta efter mappar som matchar ditt barns tema.
Om du inte använder ett barntema eller inte är säker på hur du skapar det rekommenderar vi att du använder plugin-metoden ovan. Om du försöker lägga till ett kodavsnitt i din temamallfil utan att använda ett underordnatema kommer dina ändringar att skrivas över nästa gång du uppdaterar temat.
Sök sedan footer.php , som ska innehålla den sista delen av ditt tema taggen. Öppna filen med en textredigerare och leta efter den stängande kroppen-taggen (). Du kan se en del av exemplet footer.php fil nedan, men kom ihåg att du kan se lite annorlunda ut beroende på vilket tema du använder:
Klistra in följande kodavsnitt innan den taggen. Sedan vill du spara ändringar i filen innan du stänger den:
Som standard kommer skript bara att ladda interna länkar. Du kan dock ändra den för att aktivera extern förbelastning genom att lägga till attribut till tagg, så här:
Du kan också ändra fördröjningen när du håller musen genom att lägga till andra attribut. Om din sida till exempel innehåller många klickbara knappar och element kanske du vill öka svävtiden innan du läser in förut. Som sådan bör din webbläsare bara ladda länkar som besökaren verkligen planerade att klicka på:
Testa förinställning i tid på WordPress
Vi fortsätter och förbereder ett instant.page-skript på en av våra webbplatser för testning. Du såg resultaten från vår baslinje i föregående avsnitt, så låt oss försöka igen testet för att se om skriptet gör en betydande skillnad:
Under våra tester såg vi inte någon signifikant skillnad i laddningstid på WordPress. Det finns en liten minskning enligt Chrome Dev Tool, men det är bara några få millisekunder, som du kan se. Detta är inte dåligt, men vi nådde inte ens 100 ms i latensminskning.
Resultaten är verkligen bättre när du använder skript på en statisk webbplats. Under våra test lyckades vi skära ut ytterligare 200 ms latens från en helt statisk testwebbplats:
I slutändan är det enkelt att implementera förbelastning i tid om du är en WordPress-användare. Minskningen av latens är bra, men våra tester på WordPress visade inte någon signifikant minskning, vilket innebär att endast modifierare av spelet i vissa situationer baserades på dessa resultat.
Slutsats
Allt du kan göra för att öka din webbplats laddningstid är bra för affärer. Även trimning av några millisekunder kan ha en betydande inverkan på användarupplevelsen. Implementering av förbelastning är bra för att förbättra prestandan ytterligare. Särskilt gäller detta webbplatser med mycket innehåll och önskan att maximera “tid på webbplatsen”.
Att implementera förbelastning i tid är lika enkelt som att lägga till det omedelbar sida skript mellan dina webbplatser taggen. Om du använder WordPress, det finns till och med ett plugin det fungerar för dig. Våra test visar emellertid att latensminskningen inte är så dramatisk som för en WordPress-webbplats som på en statisk, som förväntat.
Om du letar efter andra sätt att påskynda din WordPress-webbplats vill du också lära dig mer om bildoptimering och lagring. Vi diskuterar andra taktiker i vårt inlägg om hur man påskyndar WordPress.
Har du frågor om hur Instant Pages eller förbelastning fungerar? Låt oss prata om det i kommentarerna nedan!
