Hur vi ökar hastigheten för att ladda sidor på WPBeginner (6 tips avslöjade)

Om du inte är medveten om det ännu … Google gjorde några viktiga ändringar i sina mätvärden för webbplatsens prestanda som kallas Google Core Web Vitals.

Core Web Vitals innehåller nu den stabila Interaction to Next Paint (INP), som ersätter First Input Delay (FID).

Många av våra läsare har frågat hur vi upprätthåller snabba laddningstider på WPBeginner. Vi följer standardoptimeringsmetoder men vidtar ytterligare åtgärder för att hantera vår höga trafik.

I den här artikeln delar vi med oss av de extra tipsen för att öka sidans laddningshastighet, varav många kan tillämpas på alla webbplatser.

Här är en snabb översikt över alla objekt som vi kommer att diskutera i den här artikeln:

Varför är Page Load Speed import?

Page load speed är hur snabbt din website visas när en användare klickar på en länk till den.

Vårt mål är att se till att användarna snabbt får den information de behöver. En webbplats som laddar snabbare gör användarna nöjda eftersom de omedelbart kan få den information de söker.

Å andra sidan kan en webbplats med långsam laddning tvinga dem att lämna webbplatsen. Detta är vad vi vill undvika på alla våra webbplatser. Användare är mer benägna att bli prenumeranter eller kunder om de stannar längre på din webbplats.

Användare är 36% mer benägna att lämna (studsa) en website om det tar 3 sekunder att hämta den. Och de är 90% mer benägna att lämna webbplatser som tar 5 sekunder eller mer att ladda.

Source: ThinkWithGoogle

Här är några fler skäl till varför sidans laddningshastighet är så viktig:

• Förbättrar användarnas engagemang: En webbplats med snabb laddning håller besökarna engagerade och gör att de snabbt kan få tillgång till information. Användare som tillbringar mer tid på en webbplats är mer benägna att spendera eller konvertera.
• Förbättrar rankingen hos search engines: På grund av bättre användarupplevelse gynnar search engines snabbt hämtar hem webbplatser genom att ranka dem högre.
• Avgörande för mobila användare: Hastigheten är viss import för browsing i mobilen. Mobila användare är dubbelt så benägna att lämna en långsam website än stationära användare.
• Skapar förtroende och auktorisering: En webbplats som hämtar information snabbt appear more tillförlitlig and professional, which can help you convince users to buy from your business.

Sammanfattningsvis förbättrar sidladdningshastigheten den övergripande användarupplevelsen med högre kundnöjdhet och engagemang.

Hur vi förbättrar sidans hämtarhastighet på WPBeginner

Vi tillämpar all bästa praxis från vår handbok för prestanda- och hastighetsoptimering av WordPress.

Dessutom har vi vidtagit några ytterligare åtgärder för att ytterligare förbättra WordPress prestanda på WPBeginner.

Här är en senaste screenshot av vår prestandaoptimering före och efter de tekniker vi implementerade.

Om du vill göra ett liknande test för din webbplats och se din Google Core Web Vitals-poäng kan du använda verktyget PageSpeed Insights.

Ange bara den webbadress som du vill testa och klicka på knappen ”Analysera”.

Tools kommer att analysera web page under några sekunder och sedan visa dig testresultaten.

Låt oss nu titta på de steg vi tog för att uppnå den här prestandapoängen.

1. Snabbare plattform för webbhotell

Med många års erfarenhet av att run WordPress-baserade företag har vi lärt oss vikten av att välja det bästa WordPress webbhotell.

För små webbplatser kan du börja med något av de högst upp webbhotell som gillar Bluehost eller Hostinger.

WPBeginner är dock en större website med en hög trafikvolym. Delade eller VPS webbhotell planer är för limiterade i den skalan.

Det är därför WPBeginner är hosted på SiteGrounds Enterprise Cloud Infrastructure, som körs på Google Cloud Platform.

Varför vi använder SiteGround

• SiteGrounds infrastruktur för webbhotell i företagsklass har flera lager av redundans, vilket säkerställer maximal drifttid.
• Den körs på Google Cloud Platform, som är ansluten till Googles toppmoderna nätverk, vilket garanterar de snabbaste hastigheterna från alla punkter runt om i världen.
• Det minskar kostnaderna och svårigheterna med att hantera enskilda dedikerade servrar för webbhotell.
• SiteGrounds interna förbättringar, som gillar Ultrafast PHP, snabbare MySQL och Brotli-komprimering, ger en extra prestandaförbättring.
• Vi har förstahandserfarenhet av att arbeta med SiteGrounds support team. Expertisen hos deras ingenjörer, snabbare respons och övergripande hjälpsamhet har alltid imponerat på oss.

För mer detaljer kan du se vår artikel om varför WPBeginner bytte till SiteGround webbhotell.

För närvarande erbjuder de också en generös rabatt till WPBeginners användare med ett gratis domain name. Det börjar på $2,99 per månad, vilket är ganska överkomligt om du tänker på tekniken och nivån på tjänsten som tillhandahålls.

Det bästa är att SiteGrounds fördelar inte är begränsade till företagskunder. Alla SiteGrounds delade värdkonton är också värd på Google Cloud Platform.

2. CloudFlare DNS

I en tidigare WPBeginner Insider artikel delade vi vår fallstudie av att byta från Sucuri till Cloudflare.

Bortsett från säkerhet ger användningen av Cloudflare DNS WPBeginner en betydande fördel i prestanda.

DNS (Domain Name System) är som en telefonbok för webbplatser.

När du enter en webbplats adress i din webbläsare eller klickar på en link, letar en DNS tjänst upp domain name och dirigerar din webbplats till IP-adressen för den viss website.

Normalt sett använder webbplatser sitt webbhotells namnservrar för att hantera DNS. Dessa är inte lika snabba som Cloudflare, som tillåter DNS-upplösning vid nätverksgränsen i sina datacenter i över 310 städer över hela världen.

Varför vi använder Cloudflare DNS

• Snabbaste DNS-upplösningen: Cloudflares globala nätverk gör att DNS kan lösas på den plats som ligger närmast varje användare.
• Inbyggd säkerhet: Eftersom all trafik går genom Cloudflares DNS kan deras brandvägg för webbapplikationer (WAF) snabbt mildra och blockera DDoS-attacker, skräppost, onödiga bots, SQL-injektioner, hackningsförsök med mera.
• CDN Delivery – Deras nätverk cachelagrar automatiskt statiska filer och serverar dem via sitt globala nätverk, vilket gör att websites hämtar snabbare. Och eftersom detta sker på DNS-nivå behöver du inte ha separata subdomäner för CDN-filer.

Vi använder Enterprise-planen, men Cloudflare erbjuder gratis CDN och DNS för mindre webbplatser , vilket i princip gör samma sak med färre funktioner .

3. Prestandaoptimering med hjälp av WP Rocket

För ytterligare prestandaoptimering använder vi WP Rocket, som är ett av de bästa prestandapluginsen för WordPress på marknaden. Det hanterar bland annat cachelagring, vilket innebär att det sparar kopior av din webbplats så att sidorna laddas snabbare för återkommande besökare.

Det vi gillar mest med WP Rocket är att det är det mest omfattande plugin för prestandaoptimering av WordPress, så vi behöver bara ett verktyg för att hantera många olika uppgifter.

Varför vi använder WP Rocket

• Cache-förladdning – Vanligtvis väntar ett pluginför cache tills en användare besöker en pageför att skapa en cachad kopia av den. WP Rocket håller automatiskt din cache redo, vilket gör en stor skillnad i sidans laddningstid.
• Caching i webbläsaren – Om statiska filer som images, JavaScript och CSS lagras i webbläsarens cache går det snabbare att hämta dem vid nästa page view.
• Filoptimering – WP Rocket hjälper dig att minifiera och optimera leveransen av statiska filer som gillar JavaScript och stylesheets. Genom att göra dessa filer mindre minskar den totala laddningstiden för pages avsevärt.

Vi delade vår detaljerade erfarenhet av detta plugin i vår WP Rocket review med fördelar och nackdelar.

Vilka Settings använder vi i WP Rocket?

Vi har följande WP Rocket-inställningar aktiverade:

• Caching av hela pages
• Filoptimering(minifiering av JS och CSS-filer och leverans av critical CSS)
• JavaScript deferred (fördröjning av att hämta JS, vilket hjälper till att fixa render-blocking issue)
• Lazy loading av bilder och mediefiler

Behöver du hjälp med att använda dessa inställningar på din webbplats? Vi har en steg-för-steg-guide för hur du ställer in WP Rocket för att uppnå bästa resultat.

4. Sätta JavaScript och CSS i kö

Vi optimerar leveransen av JavaScript- och CSS-filer med WP Rocket, men innan dess ser vi till att vår webbplats bara laddar de JavaScript- och CSS-filer som behövs för en sida.

Det enklaste sättet att göra detta är genom att använda WordPress tillägg och teman som följer WordPress kodning bästa praxis. Dessa utvecklare kommer bara att hämta ett skript när det behövs.

Ibland kan dock en plugin- eller theme utvecklare inte fatta detta beslut åt you. De kan hämta skript globalt för en bättre upplevelse för användaren.

På WPBeginner har vi interna utvecklare som tittar på den här frågan. Vi dequeuear onödiga skript och CSS och enqueuear dem sedan där det behövs.

Användare med en grundläggande förståelse för WordPress-kodning kan dock göra detta genom att följa dessa steg.

Först måste du hitta de onödiga skripten. Det enklaste sättet att ta reda på vilka skript och formatmallar som hämtas är att använda pluginet Query Monitor.

Det visar dig de JavaScript- och CSS-filer som har laddats på en page, och du kan sedan räkna ut vilka som är onödiga.

Om du vill koppla bort ett skript måste du använda skripthandtaget som visas i Query Monitor. Följaktligen kan du använda följande kod för att avbeställa det:

function prefix_remove_scripts() {
	if ( is_front_page() ) {
		wp_dequeue_script( 'plugin-script-handle' );
	}
}
add_action( 'wp_print_scripts', 'prefix_remove_scripts', 100 );

På samma sätt kan du använda följande kod för att ta bort onödiga stylesheets:

/**
 * Remove unnecessary stylesheets 
 */
function prefix_remove_styles() {
	if ( is_front_page() ) {
	wp_dequeue_style( 'stylesheet-handle' );
	}
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_styles', 100 );

Mer detaljer finns i vår tutorial om hur du lägger till JavaScript och CSS på rätt sätt i WordPress.

5. Avlastning av Block Editor Styles

Vi använder standard WordPress Block Editor på WPBeginner. Den är extremt snabb och WordPress core utvecklare lägger ner mycket tid och resurser på att förbättra dess prestanda.

För att ytterligare öka prestandan avlastar vi några blockredigerarstilar som vi inte använder på WPBeginner.

Detta minskar DOM-storleken och gör det snabbare för webbläsare att bearbeta den begärda sidan.

I webbläsarens terminologi gillar DOM kartan över element och underelement på en page (ompekningar, text, images, stylesheets, skript och så vidare)

En större DOM innebär att webbläsaren kommer att ägna lite mer tid åt att Behandla den. En mindre DOM behandlas snabbt.

Prestandavinsten från detta är dock inte så stor, och vi skulle inte rekommendera det för de flesta användare med mindre WordPress websites.

6. Diverse prestandaförbättringar

Förutom de tips som nämns ovan har vi också bästa praxis på plats för att säkerställa bättre laddningshastigheter för sidor.

Här är några av dem som du enkelt kan implementera på din website:

• Optimerade Images – Vårt team ser till att screenshots, images och media som vi uploadar är optimerade för att minska filstorleken. Se vår guide om hur du optimerar images för WordPress.
• Optimera C ron-jobb – Cron-jobb är schemalagda WordPress-uppgifter som körs i bakgrunden för att kontrollera uppdateringar, publicera schemalagda posts och så vidare. Tillägg till WordPress kan också add to sina egna processer i bakgrunden. Optimering av cron-jobb minskar belastningen på servern och förbättrar prestandan.
• Minska externa HTTP-requests – Vissa tillägg och tools som du använder kan behöva hämta filer från externa domäner. För många av dessa requests kan öka sidans laddningstid. För att fixa detta kan du se vår tutorial om hur du inaktiverar dina tilläggs CSS-filer och JavaScript.

Du kan följa vår kompletta WordPress-guide om hastighet och prestanda för en mer detaljerad genomgång av dessa metoder och andra strategier för att förbättra sidans laddningstid.

Vi hoppas att den här artikeln gav dig insikter i hur du kan öka sidans laddningshastighet på dina egna websites. Du kanske också vill se hur vi utökar vår email list eller ta en titt på vår guide till sökmotorsoptimering i WordPress för att öka din organiska trafik.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.