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 deras metrics för webbplatsens prestanda som heter Google Core Web Vitals.

Core Web Vitals hjälper dig att mäta hur snabbt din website hämtar data, hur snabbt den blir synlig och hur snart den är redo för dina användare.

Google meddelade att Interaction to Next Paint (INP) nu är en stabil Core Web Vital metric, och har officiellt ersatt First Input Delay (FID).

Många av våra läsare har frågat oss hur vi hanterar dessa förändringar och hanterar bästa möjliga hastighet för att ladda sidor på WPBeginner.

Vi använder all standard WordPress bästa praxis för prestandaoptimering. WPBeginner får dock mycket trafik, så vi tar också några extra steg för att säkerställa bästa möjliga användarupplevelse.

I den här artikeln kommer vi att avslöja de extra tips som vi använder för att öka sidans laddningshastighet på WPBeginner. De flesta av dem kan användas på vilken website som helst med minimalistisk ansträngning.

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.

En website som hämtar data snabbare gör användarna glada eftersom de kan få den information de behöver direkt. Å andra sidan kan en website som hämtar information långsamt tvinga dem att lämna webbplatsen.

Källa: Google TänkmedGoogle

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

• Förbättrar engagemanget hos användarna: En website som hämtar information snabbt håller besökarna engagerade och allow dem att snabbt komma åt information. När användare tillbringar mer tid på en site är det mer sannolikt att de spenderar pengar eller konverterar.
• 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 sidans laddningshastighet 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 utförde vi några ytterligare åtgärder för att ytterligare öka 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 website och se din Google Core Web Vitals-poäng, använd då PageSpeed Insights-verktyget. Du behöver bara enter den URL du vill testa och clicka på knappen ”Analyze”.

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.

Det bästa är att alla dessa fördelar med SiteGround inte bara är begränsade till deras företagskunder. Alla SiteGround delade webbhotellkonton är också hosted på Google Cloud Platform.

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.

→ Click Here to Claim This Exclusive SiteGround Deal ←

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) gillar en telefonbok för websites.

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 använder websites 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 vart och ett av sina datacenter i över 310 städer över hela världen.

Varför vi använder Cloudflare DNS

• Snabbast DNS-lösning – Cloudflares globala nätverk gör det möjligt att lösa DNS på den närmaste location som finns för alla användare.
• Built-in Security – Eftersom all trafik går genom Cloudflares DNS kan deras web application firewall (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 för mindre webbplatser erbjuder Cloudflare gratis CDN och DNS, som 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 tilläggen för caching i WordPress på marknaden. Det innebär att den sparar kopior av din website så att pages laddas snabbare för återkommande visitors.

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 images och media files

Behöver du hjälp med att använda dessa Settings på din site? Vi har en Step-by-Step guide om 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 website bara hämtar de JavaScript- och CSS-filer som behövs för en page.

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 issue. 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 av block editor-stilarna som vi inte använder på WPBeginner.

Detta minskar DOM-storleken och gör det snabbare för webbläsare att bearbeta den requestade page.

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.

För en mer detaljerad genomgång av dessa metoder och andra strategier för att förbättra tiden för att hämta din page, kan du följa vår kompletta WordPress guide för hastighet och prestanda.

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.