Jag har listat de 9 mest effektfulla sätten att snabba upp din webbplats först. Det här är de absolut viktigaste stegen du kan ta för att få din webbplats att laddas snabbare.

Faktum är att om du inte använder någon taktik utöver de första 9, kommer du att klara dig bra.

Sedan efter det kommer du att hitta ytterligare 27 sätt att snabba upp WordPress. Var och en av dessa taktik kommer att göra din webbplats lite snabbare förenad med de resultat du redan har uppnått.

Och det finns en sak till du borde veta.

Det är den exakta taktiken jag använder

Jag listar ingen taktik här som jag inte använder just nu.

Faktum är att innan jag skrev det här inlägget kom jag med en enorm lista över prestationstekniker inklusive några saker som jag aldrig hade provat förut och testade dem alla.

Competethemes.com laddades redan snabbt, men efter att ha använt varje prestandataktik som listas nedan är det otroligt snabbt.

Här är GTMetrix- resultaten:

Första gången jag fick 100 % PageSpeed-poäng

Och om jag använder en närliggande plats i Pingdom rapporterar de att min webbplats laddas på bara 0,571 sekunder.

Några snabba riktmärken innan vi börjar:

>3s laddningstiden är långsam
2-3s laddningstid är bra
1-2 s laddningstid är snabb
0-1s laddningstiden är mycket snabb

Ditt första mål bör vara att få din webbplats att laddas på under tre sekunder. Det är verkligen viktigt att nå detta riktmärke, annars är du säker på att ha besökare som lämnar innan din webbplats är klar.

Om du implementerar de första 9 taktikerna nedan bör du inte ha några problem att få din laddningstid under 3s.

Om du vill att din webbplats ska laddas på bara 1s måste du använda de flesta om inte alla taktiker som listas här och det är mycket arbete. Jag klandrar dig inte om du rakar av dig några sekunder med taktik 1-9 och kallar det en dag 👍

Du längtar förmodligen efter att komma igång nu, så här är det viktigaste steget du kan ta för att snabba upp din webbplats.

Det här inlägget är vansinnigt långt! Du kommer förmodligen inte att avsluta det på en gång, så se till att bokmärka den här sidan för senare så att du kan fortsätta att komma tillbaka när du optimerar din webbplats.

1 Byt till en snabbare värd

Hosting är din webbplats hästkrafter.

Med mer kraftfull värd kommer hela din webbplats att laddas snabbare.

Du kan implementera alla andra tekniker med stor effekt, men de kommer alla att fungera bättre med en högpresterande värd. Dessutom är det väldigt enkelt att byta värd nuförtiden.

Jag använder Kinsta för Compete Themes och jag kan inte rekommendera dem tillräckligt.

Förutom de automatiska dagliga säkerhetskopieringarna, den vackra användarpanelen och genuint hjälpsam livechattsupport…

De kommer att få din webbplats att laddas snabbt.

Kinsta fungerar så bra eftersom det är byggt av Googles molninfrastruktur.

Normalt är den här typen av specialiserad teknik endast tillgänglig för företag på grund av kostnaderna och svårigheten att implementera, men Kinsta tar hand om allt det åt dig. Du får bara den otroliga prestandan.

Jag har använt Kinsta i sex månader nu och jag var redan nöjd med deras tjänst när de slumpmässigt höjde allas prestanda med 30-200% för ett par veckor sedan.

Efter nästan ett decennium av att driva WordPress-webbplatser har jag aldrig haft en värd att göra det.

Kolla in Kinsta →

Hosting är din webbplats prestandagrund, så om du hoppar över allt annat, se till att göra det här steget rätt.

Det näst viktigaste du kan göra för att snabba upp din WP-webbplats är att lägga till cachning.

2 Lägg till caching

Vad är 9 027 dividerat med 17?

För att svara på detta måste du ta fram en miniräknare, slå in siffrorna och sedan kan du med säkerhet säga svaret som är 531.

Nu ska jag fråga dig igen, vad är 9 027 dividerat med 17?

Den här gången visste du svaret direkt eftersom du har det lagrat i ditt minne.

Det är vad caching är.

När någon besöker din webbplats kör den en massa processer för att skapa sidan. Utan cachning händer detta varje gång någon besöker din webbplats. Det är som att använda en miniräknare för att få svaret om och om igen.

Som ni förstår är detta extremt slösaktigt.

Med cachning genererar din webbplats en sida en gång och sparar den sedan precis som du sparade numret 531 i ditt minne. Sedan när någon besöker din webbplats igen, visas den cachade kopian omedelbart utan att du behöver köra alla processer som ursprungligen användes för att skapa sidan.

Vettigt?

Låt oss nu prata om hur man drar fördel av denna teknik på din webbplats.

Hur man lägger till caching på din webbplats

För det första kan din värd tillhandahålla inbyggd cachning. Detta gäller för Kinsta och många andra högpresterande värdar. Så du kanske redan har lagt till caching.

Om din värd inte tillhandahåller cachning finns det massor av plugins att välja mellan. Enligt min mening är det bästa alternativet WP Rocket.

WP Rocket ger ultrasnabb cachelagring och massor av andra prestandaoptimeringar. Jag kommer att referera till det här pluginet hundra gånger till i det här inlägget, så att du kan se allt det kan göra.

Även om Kinsta tillhandahåller cachning använder jag också WP Rocket på grund av de andra prestandaverktygen som ingår.

Du kan följa min WP Rocket-inställningshandledning för att komma igång:

Kolla in WP Rocket →

Om du vill ha ett gratis alternativ rekommenderar jag WP Super Cache om du vill ha något lätt att använda och W3 Total Cache om du vill ha mer avancerade alternativ.

Högpresterande värd och cachning är definitivt de viktigaste hastighetsfunktionerna som din webbplats behöver. Som sagt…

Det finns bara en sak kvar som helt kan urholka din prestation.

Du MÅSTE använda dessa nästa tre steg

När du har konfigurerat din caching, rikta uppmärksamheten mot din webbplats bilder.

Om du inte optimerar dina bilder kommer din webbplats aldrig att nå 2-3 s laddningstider, du kommer aldrig att få en optimerad PageSpeed-poäng.

Bilder kan vara en helt enorm belastning på laddningstiderna, så jag inkluderar de tre sätten du kan optimera dem här.

Det första sättet att optimera dina bilder är att komprimera dem.

3 Komprimera dina bilder

Moderna bildkomprimeringsalgoritmer är fantastiska.

De kan krympa filstorleken på en bild med 70 % utan att påverka dess kvalitet på ett märkbart sätt. Poängen är att du kan få alla bilder på din webbplats att laddas mycket snabbare utan att försämra deras kvalitet. Det finns ingen nackdel – seriöst!

När det kommer till bildoptimering är mitt favoritplugin Optimole.

Du kommer att lära dig mer om Optimole i de kommande två stegen, men här är vad du behöver veta först:

Optimole använder en mycket effektiv komprimeringsalgoritm för att komprimera dina bilder till en bråkdel av deras tidigare filstorlek. Vad som är ännu bättre är att det är så lätt att använda.

Andra plugins för bildoptimering redigerar bilderna på din webbplats och använder dina serverresurser. Optimole rör inte dina original – de kopierar dina bilder till sin server och optimerar dem sedan där. Detta håller ditt mediebibliotek organiserat och din webbplats blir inte långsammare när bilderna komprimeras.

Om du vill lära dig hur du ställer in Optimole på din webbplats kan du följa min fullständiga genomgångsvideo:

Ett utmärkt alternativ är ShortPixel plugin. Det är lite mer arbete att ställa in, men ändå tillräckligt lätt att använda.

Jag använde med glädje ShortPixel på den här webbplatsen i flera år och bytte bara till Optimole för nästa taktik.

4 Ändra storlek på dina bilder

Var uppmärksam eftersom detaljerna är kritiska.

Här är den stora idén:

Ju större en bilds mått är, desto större blir dens filstorlek.

Till exempel kan en bild som är 3 000 px bred vara 900 kb, men när storleken ändras till 600 px bred är den bara 60 kb. Det är en 15x minskning av filstorleken!

Här är varför det är så viktigt.

Bilderna i det här blogginlägget kommer bara att visa 600px breda som bredast. Med mitt exempel har den här bilden ändrats till 600px bred och bara 60kb.

Om jag inte ändrade storleken på bilden och använde 3 000px-versionen, skulle den fortfarande bara dyka upp som 600px bred i det här inlägget. Bilden skulle se likadan ut för dig, men det skulle ta 15 gånger längre tid att ladda.

Med andra ord kan storleken på dina bilder rätt innan du infogar dem i dina inlägg göra en enorm skillnad i hur snabbt din webbplats laddas.

Här är problemet.

Du vet förmodligen inte exakt hur breda dina bilder visas i dina inlägg. Dessutom gör mobila enheter detta sätt mer komplicerat. När det kommer till skärmstorlek, om vi tar hänsyn till alla olika bildskärmar och mobila enheter, finns det bokstavligen tusentals att ta hänsyn till.

Om du vill visa bilder som har perfekt storlek för dina besökare måste de dimensioneras dynamiskt, och det var därför jag började använda Optimole.

Optimole genererar automatiskt perfekta versioner av dina bilder. Om någon besöker din webbplats och bilden skulle visas i 400px bred ger Optimole dem en version av den bilden som är 400px bred.

En annan besökare kan landa på sidan en sekund senare med en surfplatta som visar bilden i 510px bred och Optimole kommer att ladda en annan kopia av bilden som är exakt 510px bred.

Prestandavinsterna du får av detta är enorma och det bästa är att du inte behöver göra något förutom att installera Optimole-plugin. Det fungerar i samma ögonblick som du aktiverar det utan att ens röra några inställningar. Det är fantastiskt!

Prova Optimole på din webbplats →

Det finns ytterligare ett sätt att optimera bilder på din webbplats som potentiellt kan göra en enorm skillnad.

5 Lata ladda dina bilder

Det här blogginlägget är riktigt långt och har många bilder i sig.

Om du har läst så här långt har du troligen varit på den här sidan i minst en minut. När du vet detta, hur dumt skulle det vara att få dig att ladda alla bilder i hela inlägget när du först laddade den här sidan? Du har fortfarande inte nått många av bilderna, så det finns inget behov av att ladda dem ännu.

Med lazy loading laddas bara bilderna som visas på skärmen. Sedan när du rullar ner på sidan laddas de återstående bilderna när de kommer till skärmen.

Jag gjorde en visualisering i den här videon som illustrerar hur detta fungerar tydligare än jag kan förklara med att skriva:

Nu när du förstår hur lazy loading fungerar, låt oss prata om implementering.

Hur man lägger till lazy loading

Att lägga till lazy loading är väldigt enkelt, så det är en måste-ha taktik enligt mig.

För det första, om du installerade Optimole, lägger den automatiskt till lazy loading så att du redan är klar med denna taktik.

För det andra, om du inte använder Optimole men du bestämde dig för att använda WP Rocket, markera bara den här rutan här i inställningarna:

Slutligen, om du inte tänker använda någon av dessa två plugins, installera sedan a3 Lazy Load.

a3 Lazy Load är ett bra plugin och innehåller massor av konfigurationsalternativ.

På blogginlägg som denna är lat laddning så viktigt. Det är en av mina favoritprestandaoptimeringar.

De kommande två optimeringarna går hand i hand och är särskilt viktiga för WordPress-webbplatser.

6 Förminska dina filer

Du har precis lärt dig att komprimering av dina bilder gör att de laddas snabbare eftersom komprimerade bilder har en mindre filstorlek.

Vi refererar ibland till filstorlek som vikt, så att komprimera en bild minskar dess vikt.

Den stora idén är att om du minskar din webbplats vikt gör det att den laddas snabbare. Det betyder att du vill minska filstorleken för varje fil som din webbplats laddar.

Förutom bilder laddar din webbplats CSS-filer, Javascript-filer och teckensnittsfiler bland andra filtyper. Håll den tanken ett ögonblick och låt oss prata minifiering.

Minifiering är en snygg programmeringsterm som i princip betyder komprimering för textbaserade filer. Du komprimerar bilder och förminskar filer. För våra syften behöver vi inte bli mer detaljerade än så.

Precis som du komprimerade dina bilder kan du förminska dina CSS- och Javascript-filer (och HTML) för att göra dem mindre och minska sidans vikt.

Hur man förminskar filer

Återigen är det enkelt att lägga till minifiering på din webbplats.

Med WP Rocket finns det kryssrutor för att aktivera minifiering för CSS, JS och HTML.

Det är enkelt att förminska dina CSS-filer med WP Rocket

Det är allt du behöver göra.

Minifiering är så viktigt för WordPress-webbplatser eftersom du sannolikt har minst sex plugins och ett tema som laddar filer på din webbplats. Många gånger förminskar inte utvecklare filer själva, så WP Rocket tar hand om det åt dig.

Om du vill ha ett gratis alternativ för minifiering, kolla in Autoptimize- plugin.

7 Sammanfoga dina filer

Sammanfoga är en annan teknisk term som betyder "kombinera".

När du sammanfogar filer kombinerar du dem.

Återigen, eftersom du har alla dessa plugins på din webbplats som laddar filer, är det viktigt att använda ett plugin som WP Rocket för att kombinera dem till så få filer som möjligt. Här är varför…

Du har lärt dig att en minskning av din sidas vikt gör att den laddas snabbare, men det finns en annan viktig prestandafaktor att optimera för: HTTP-förfrågningar.

Jag vet att det här inlägget börjar bli ganska tekniskt, så jag ska hålla det så enkelt som möjligt.

Varje fil du laddar kräver en HTTP-begäran. Varje bild, JS-fil, CSS-fil, etc – de kräver alla en HTTP-förfrågan.

Din webbplats har ett fast antal HTTP-förfrågningar den kan hantera på en gång, så det finns en flaskhalseffekt som uppstår när filer laddas. Av denna anledning, ju färre HTTP-förfrågningar din webbplats gör, desto snabbare kommer den att laddas.

Som ett exempel, om din webbplats har 5 CSS-filer som alla är 5 kb stora, kommer den att laddas snabbare om du kombinerar dem till en CSS-fil som är 25 kb stor.

Med minifiering minskar vi vikten på din webbplats filer, och sedan med sammanlänkning kombinerar vi dem för att minska HTTP-förfrågningar.

Hur man lägger till sammanlänkning

Vi kan vända oss till WP Rocket-plugin för denna optimering också.

Det finns kryssrutor för att sammanfoga CSS-filer och JS-filer.

Du behöver bara markera båda rutorna, spara dina ändringar och du är klar.

Dessa alternativ är också tillgängliga i Autoptimize-plugin.

Det här nästa tipset kanske överraskar dig, men det är en annan måste-optimering enligt min mening.

8 Ladda filer med ett CDN

Internet är magi.

Höger?

Men egentligen, nej, det är det inte.

Det är ett nätverk av datorer och anslutningarna i detta nätverk är i slutändan fysiska.

Det kan tyckas konstigt att tänka på, men avståndet mellan servern där webbplatsens innehåll lagras och platsen för en besökare är mycket viktigt.

Om din server är i New York och någon från Tokyo besöker din webbplats, kommer det att ta längre tid för filerna att komma till dem än om någon annan i New York besöker den.

Jag sa att det var konstigt att tänka på 😜

Så vad händer om du lagrade en kopia av din webbplats på en server i Tokyo också? Skulle det inte laddas snabbare för besökare i Japan då?

ja!

Och det är precis vad en CDN gör.

CDN står för content delivery network och det är i huvudsak ett nätverk av servrar som lagrar cachade kopior av din webbplats över hela världen.

På så sätt, oavsett var någon är när de besöker, finns det en server i närheten av dem för att leverera din webbplats innehåll.

När du först aktiverar ett CDN kanske det inte verkar som att det hjälper om du bor i närheten av din värds ursprungsserver. Vad som är viktigare är hur snabbt webbplatsen laddas för resten av världen.

Hur man lägger till ett CDN på din webbplats

Det finns några solida alternativ för att lägga till ett CDN på din webbplats.

För det första, om du har registrerat dig hos Kinsta kan du använda deras inbyggda CDN. Allt du behöver göra är att aktivera det från menyn.

Även om jag använder Kinsta använder jag Cloudflares CDN som är tillgänglig på deras gratis prisnivå. Jag använder Cloudflares CDN eftersom jag också använder deras brandvägg för att blockera massor av bottrafik som denna webbplats fick.

Att ställa in Cloudflare är ganska enkelt och det kommer med en mängd andra fördelar. Du kan följa stegen här för att använda Cloudflare för din webbplats.

Det finns andra populära betalda CDN förutom Cloudflare, men jag har inte provat någon av dem personligen så jag kan inte ge ytterligare rekommendationer.

Jag har bara ytterligare en prestationshöjare till dig innan alla extramaterial.

9 Välj ett snabbt tema

Okej jag måste erkänna, det här sista tipset är lite annorlunda.

Många WP-bloggare kommer att berätta för dig att välja ett tema som laddas snabbt, men som en temautvecklare, låt mig förklara hur detta faktiskt fungerar.

Ett WordPress-tema kommer inte att påskynda din webbplats. Snarare letar du efter en som inte kommer att sakta ner din webbplats. Som sagt, om inte temat är riktigt dåligt gjort, kommer det inte att sakta ner din webbplats mycket om du använder taktiken jag har listat ovan. Jag ska förklara.

Med alla mina teman laddar jag det absoluta minimum samtidigt som jag skapar en snygg och modern användarupplevelse. Det betyder att teman bara laddas:

En CSS-fil
En förminskad Javascript-fil
En begäran om Google Fonts
Font Awesome-ikonens teckensnitt (för sociala ikoner)

Utan att göra uppoffringar av designen (som att använda ett systemteckensnitt), är det ungefär så minimalt som ett tema kan bli.

Alla teman är inte så optimerade, men det är inte nödvändigtvis ett problem. Det beror på att även om ditt tema inte är väl optimerat och laddar två CSS-filer och tre Javascript-filer och ingen av dem är minifierad, kommer ett plugin som WP Rocket fortfarande att sammanfoga och minifiera dem åt dig, så slutresultatet är praktiskt taget detsamma.

I grund och botten är det osannolikt att ditt tema kommer att sakta ner din webbplats mycket om du använder prestationsstrategierna som anges ovan.

Välj ett tema från en ansedd utvecklare och temaprestanda kommer att vara ett problem.

Ytterligare optimeringar

Oj!

Det här inlägget är redan mycket längre än jag förväntat mig, och om du har kommit så långt hoppas jag att du är sugen på att lära dig ännu mer om prestandaoptimering.

I resten av det här inlägget kommer jag att täcka mer specifika och tekniska optimeringar. Jag har gjort dessa tips så nybörjarvänliga som möjligt. Vissa av dem är lätta att implementera men om jag ska vara ärlig är vissa väldigt avancerade och det är precis så det måste vara 🤷‍♂️

Använd så många du kan på din webbplats och kom ihåg att om du har implementerat de första 9 taktikerna och du följer bästa praxis för prestanda så har du redan fått merparten av resultaten.

10 Skjut upp Javascript

Om du bara använder en taktik från resten av den här listan, använd den här.

Utan att gå vilse i de tekniska detaljerna är ordningen som du laddar filer på din webbplats mycket viktig. Detta koncept kallas rendering path optimization.

Tanken är att din webbplats CSS ska laddas först eftersom din webbplats kommer att vara en tom vit skärm tills det händer. När det gäller Javascript-filer används de förmodligen för saker som analyser som inte behöver laddas direkt.

Istället för att hålla en tom vit sida medan JS laddas, skjuter du upp JS-filerna tills allt annat på din webbplats har laddats. På så sätt laddas din webbplats på samma tid men den dyker upp visuellt tidigare vilket gör att den visas snabbare.

Konceptet är ganska avancerat, men återigen inte så svårt att implementera.

Hur man skjuter upp Javascript

Du kommer att älska det här.

Hur avancerad taktiken än är, allt du behöver göra är att markera en ruta i WP Rockets inställningar.

Om du inte vet vad du gör, rekommenderar jag starkt att du lämnar alternativet "Säkert läge" markerat också.

Det finns också ett sätt att optimera din CSS för renderingsvägen.

11 Optimera CSS-leverans

Precis som Javascript är CSS renderingsblockerande så att vi också kan skjuta upp det för bättre prestanda.

Nu vet jag vad du tänker: har vi inte bara skjutit upp JS så att CSS kan laddas, och nu skjuter vi upp CSS också??

Här är vad som händer…

För att ta bort renderingsblockerande CSS, infogar du den kritiska CSS som används för att utforma de delar av din webbplats som dyker upp direkt. Sedan laddas resten av din webbplats CSS senare. Återigen betyder det att din webbplats dyker upp visuellt ännu tidigare.

Det här är en mycket avancerad taktik och inte en jag skulle bry mig om om WP Rocket inte hade gjort det så jäkla lätt.

Hur man optimerar CSS-leverans

Du börjar nog vänja dig vid det här nu…

Allt du behöver göra för att optimera din CSS-leverans med WP Rocket är att markera den här rutan:

WP Rocket genererar sedan den kritiska CSS som behövs för varje sida och infogar den i HTML. Resten av CSS skjuts sedan upp.

Jag skulle aldrig försöka göra detta manuellt, så det är en mördande optimering att ha automatiserat på det här sättet.

Därefter har jag ytterligare två snabba vinster för att snabba upp din webbplats.

12 Stäng av WordPress emoji-stöd

WordPress lade till emoji-stöd tillbaka i version 4.2.

För att säkerställa att emojis fungerar på din webbplats laddar WordPress en liten Javascript-fil på varje sida på din webbplats. Så här är det…

Vi behöver faktiskt inte den här filen för emoji-stöd eftersom praktiskt taget alla enheter redan har ett emoji-teckensnitt installerat. Jag har till exempel tagit bort emoji-stöd från den här webbplatsen, men du ser fortfarande emojis eftersom din enhet har dem installerade 👍

Genom att ta bort emoji-stödet kommer din webbplats inte längre att ladda den extra Javascript-filen, vilket gör den lite snabbare.

Du kan markera den här rutan i WP Rocket för att ta bort emoji-stöd:

Den Inaktivera emojis plugin är ett enkelt, gratis alternativ.

13 Inaktivera WordPress-inbäddningar

När du klistrar in en länk från Twitter i ett inlägg kommer WordPress automatiskt att skapa en snygg inbäddningsruta.

Det är coolt, men det som irriterar mig är att det också gör det när man klistrar in länkar till WordPress-sajter som den här. Jag använder aldrig den här funktionen, så jag föredrar att inaktivera den.

Eftersom WordPress laddar en extra Javascript-fil för den här inbäddningsfunktionen, minskar din sidas vikt om du tar bort den och en annan HTTP-förfrågan blir av.

WP Rocket har en annan kryssruta för att enkelt lägga till denna optimering på din webbplats.

Det är en liten optimering, men varje bit hjälper.

14 Uppdatera din PHP-version

Moderna kodningsspråk är häpnadsväckande snabba.

De flesta prestationstaktiker har ingenting att göra med hur snabbt koden på din webbplats körs. Snarare optimerar vi hastigheten på din webbplats innehåll som levereras till besökarens enhet. Det är den delen som tar tid.

Denna taktik är annorlunda eftersom den faktiskt påskyndar hur snabbt koden på din webbplats körs.

Nyare versioner av PHP blir snabbare, men om du fortfarande använder PHP 5 kommer du att se enorma vinster genom att byta till 7.

Bild med tillstånd av Kinsta

Det är viktigt att förstå att en fördubbling av hastigheten på din webbplats PHP inte kommer att göra att din webbplats laddas dubbelt så snabbt. Det gör bara att PHP-koden körs dubbelt så snabbt vilket sannolikt är en liten del av din sajts laddningstid.

Som sagt, det är potentiellt en mycket enkel prestandavinst och det är också bättre för säkerhet och plugin-kompatibilitet.

Hur du uppdaterar din PHP-version

Här är något jag har lärt mig under åren.

Värdföretag av lägre kvalitet använder föråldrade versioner av PHP och de bästa webbhotellen håller sig uppdaterade med PHP-utgåvor.

Uppdatering till den senaste versionen av PHP kommer att påskynda din webbplats och beroende på din värd bör det vara väldigt enkelt att göra.

Kinsta har till exempel ett alternativ i instrumentpanelen som du kan använda för att byta PHP-version med ett klick.

Din värd kontrollerar vilken version av PHP som din webbplats kör och hur lätt den är att uppdatera. Kontrollera din kontrollpanel och du bör hitta ett alternativ där för att uppdatera.

15 Dra ner på plugins

Saknar plugins ner din webbplats?

Ungefär. Det är komplicerat. Jag ska ge dig några exempel.

Jag använder MonsertInsights plugin för att lägga till Google Analytics på min webbplats. Google Analytics laddar två Javascript-filer på varje sida på min webbplats, så det saktar ner (mer vikt och två HTTP-förfrågningar).

Jag använder plugin-programmet WPForms för alla mina kontaktformulär. WPForms laddar en CSS-fil och beroende på vilka funktioner du använder, några JS-filer också. Den laddar dock bara dessa filer på sidor som har kontaktformulär. Det betyder att det inte har någon inverkan på min webbplatss prestanda förutom kontaktsidan.

Slutligen använder jag ett plugin som heter Format Media Titles för att automatiskt lägga till titlar till mina bilder baserat på filnamnet. Denna plugin kör lite PHP i admin-panelen när jag laddar upp bilder och har ingen inverkan på min webbplats prestanda.

Nu kan du se varför det inte är sant att säga "plugins saktar ner din webbplats". Det gör de, de gör det inte, de gör det under vissa förutsättningar osv 🤷‍♂️

Den enda plugin av mina exempel som jag kan säga saktar ner min sida är MonsterInsights, men jag behöver min analys, så jag är okej med att byta ut en liten mängd extra laddningstid för den här funktionen.

Som en tumregel, om plugin-programmet ändrar något på fronten av din webbplats, kommer det att påverka prestandan. Omvänt, om plugin-programmet bara påverkar administratörspanelen kommer det förmodligen inte att sakta ner din webbplats.

"Front-end" på din webbplats är vad besökarna ser. "Back-end" är din administratörsinstrumentpanel.

Ta en titt på din Plugins-meny och välj ut eventuella plugins som gör ändringar i fronten av din webbplats. Om du hittar några som är aktiva men du inte använder kommer de sannolikt att sakta ner din webbplats, så inaktivera dem.

16 Använd webP-bilder

Jag är säker på att du är bekant med bildformat som JPG och PNG.

Nåväl, Google släppte ett nytt bildformat som heter webP som har konstruerats för optimal prestanda. När du använder webP-formatet ser bilden identisk ut men laddas snabbare.

Det låter bra till en början, men det är här det blir komplicerat.

Inte alla webbläsare stöder webbP-bilder ännu. Det betyder att om du använde webP för alla dina bilder kanske de inte visas alls i webbläsare som Safari. För närvarande måste du servera webbP-bilder och även ha en backup JPG- eller PNG-version av varje bild.

Uppenbarligen låter det som mer arbete än det är värt, men återigen, det finns en väldigt enkel lösning.

Hur man använder webP-bilder

Om du använder Optimole-pluginet hanteras det helt åt dig.

Det finns faktiskt inte ens en inställning för detta.

Optimole skapar automatiskt webP-versioner av dina bilder och visar dem till besökare om deras webbläsare stöder det. En liten Javascript-fil med en polyfill laddas för att visa JPG/PNG-versioner av bilderna när besökarens webbläsare inte stöder webP.

17 Använd DNS-förhämtning

DNS-förhämtning är supercool.

De flesta filerna på din webbplats kommer att laddas från din domän. Till exempel, CSS-filen i ditt tema som utformar din webbplats är värd för din webbplats.

Om du använder Google Analytics kommer din webbplats att ladda de Javascript-filer som behövs från Googles servrar istället för din. Detta tar längre tid än att ladda filer som finns på din domän.

I grund och botten, när du använder DNS-förhämtning, börjar din webbplats processen att ladda de externa filerna tidigare. Faktum är att när någon skriver in din domän i adressfältet, börjar DNS-förhämtning arbetet med att förbereda de externa filerna innan de ens besöker din webbplats.

Detaljerna är ganska tekniska, men det är tanken bakom den här taktiken.

Hur man använder DNS-förhämtning

Det finns ett enkelt alternativ från WP Rocket för förhämtning.

I Preload-menyn kan du ange URL:er för alla externa filer som din webbplats laddar.

Din webbplats använder förmodligen Google Fonts, så att lägga till "//fonts.googleapis.com" skulle möjliggöra förhämtning för det domännamnet.

18 gränsinlägg per sida

Om du driver en aktiv blogg är din huvudsakliga inläggssida din webbplats viktigaste sida. Det kan också vara en av de långsammaste.

Jag har sett bloggare visa varenda en av sina inlägg på sin hemsida. När du besöker snurrar och snurrar laddningsindikatorn och sidan laddas aldrig helt. Det är en fruktansvärd användarupplevelse och ännu värre, det kostar dem en enorm mängd bandbredd.

Vid någon tidpunkt blir den stora mängden HTML som behövs för inläggen ett problem, men huvudproblemet är alla bilder. Det är därför det är så viktigt att du lägger till lazy loading på din webbplats.

Dessutom bör du sätta en rimlig gräns för antalet inlägg du visar på varje sida i din blogg.

Hur man begränsar dina inlägg per sida

WordPress har ett inbyggt alternativ för att styra dina inlägg per sida i menyn Läsinställningar.

Så länge du har aktiverat lazy loading kan du visa 10-30 inlägg per sida utan problem. Som sagt, 10 är förmodligen det genomsnittliga antalet bloggare använder och jag skulle inte gå längre än 10 utan att använda lazy loading.

19 Kombinera Google Font-förfrågningar

Jag är ungefär 100 % säker på att ditt tema laddar Google Fonts.

Om det är ett välkodat tema bör det bara finnas en begäran om Google Fonts, så inga problem där.

Det finns dock en chans att plugins på din webbplats också laddar Google Fonts, eller så har du lagt till fler teckensnitt själv. Om så är fallet gör din webbplats flera Google Fonts-förfrågningar, vilket innebär flera HTTP-förfrågningar. Kom ihåg att ju färre HTTP-förfrågningar desto bättre.

Hur man kombinerar begäran om Google Fonts

Du är förmodligen van vid det här nu…

För att kombinera Google Fonts-förfrågningarna på din webbplats med WP Rocket, markera den här rutan:

Om du inte är säker på om din webbplats gör flera Google Fonts-förfrågningar är det ingen skada att använda det här alternativet så jag rekommenderar att du alltid aktiverar det.

20 Optimera Gravatar-förfrågningar

När folk lämnar kommentarer på din webbplats visas deras avatarer automatiskt. Det beror på att WordPress integreras med Gravatar för att få avatarerna.

Gravatar är en gratistjänst och allt den gör är att associera en avatar med en e-postadress. Om du skapar ett konto och lägger till en avatar kommer du att se den dyka upp på din webbplats och över hela webben automatiskt.

Här är problemet.

Varenda en av dessa bilder gör en annan extern begäran till Gravatar-servrarna. Det betyder att om du får 10 kommentarer på ett inlägg kommer din webbplats att göra upp till 10 externa HTTP-förfrågningar – det är mycket!

Det finns tre sätt att optimera Gravatar så att det inte saktar ner din webbplats.

Hur man optimerar Gravatar-avatarer

Det första alternativet är väldigt enkelt: ladda Gravatar-bilder på lata håll.

Tyvärr fungerar inte Optimoles lata laddning med Gravatar-bilder. För att lata ladda Gravatar-bilder kan du använda det kostnadsfria pluginet a3 Lazy Load.

Alternativt kan du inaktivera Gravatar helt. I diskussionsinställningarna, stäng av avatarer med det här alternativet:

Som inställningen antyder inaktiverar detta avatarer i kommentarerna helt. Om du fortfarande vill att standardavatarer ska dyka upp kan du installera insticksprogrammet Disable User Gravatar istället.

Om kommentatorer har sina egna konton på din webbplats kan du använda WP User Avatar- plugin för att låta dem ladda upp sina egna avatarer.

Det tredje alternativet är att cachelagra Gravatar-bilderna med ett plugin som FV Gravatar Cache, men detta plugin har fått blandade användarrecensioner.

Även om dessa tre alternativ är genomförbara, är nästa prestandaoptimering ett fjärde tillvägagångssätt och den lösning jag använder för den här webbplatsen.

Detta är en riktigt cool prestandaoptimering som jag precis börjat använda.

Kommentarer på din webbplats dyker inte upp förrän efter allt inläggsinnehåll, så varför ladda dem direkt?

Eftersom Optimole inte fungerade för att lata ladda Gravatar-bilder, installerade jag plugin Lazy Load for Comments för att lata ladda hela kommentarsektionen. Problemet löst!

Nu när någon besöker ett inlägg laddas ingen av kommentarerna eller Gravatar-bilderna förrän de rullar hela vägen ner till kommentarsektionen. Detta tar bort alla HTTP-förfrågningar från Gravatar till långt efter den första laddningen.

Medan vi pratar lat laddning, låt oss fortsätta med ytterligare en implementering.

22 Lata ladda alla videor

Bäddar du in Youtube-videor i dina inlägg?

Att ladda videor kan vara ett stort hinder för prestandan, särskilt om du har mer än en på sidan.

Du kan lata ladda dina videor (och iframes) precis som bilder.

Hur man lata laddar videor

Jag använder Optimoles lazy loading-funktion för bilder, men WP Rocket har ett alternativ specifikt för iframes och videor som du kan aktivera så här:

Det finns också ett alternativ att ladda en miniatyr i stället för videon, men personligen gillar jag inte det här alternativet eftersom det får besökare att klicka på videon två gånger vilket jag tycker är irriterande.

23 Minska omdirigeringar

Om du besöker den här webbplatsen med "http" kommer den att omdirigera dig till "https"-versionen istället.

Dessutom, om du besöker utan "www", kommer du att omdirigeras till versionen med "www."

Båda omdirigeringarna är väldigt snabba, men de tar fortfarande tid och när det kommer till prestanda så räknas varje bråkdel av en sekund.

När du länkar till din egen webbplats antingen internt eller från en annan webbplats, se till att alltid använda den slutliga webbadressen som besökarna kommer till. Jag använder alltid " https://www.competethemes.com/ " så att det inte finns några omdirigeringar.

Genom att alltid länka till rätt version av din webbadress undviker du att skicka besökare genom omdirigeringar som får din sida att verka långsammare.

24 Värd Google Analytics lokalt

Jag har nämnt Google Analytics några gånger hittills eftersom det är en oundviklig prestationsbrist.

En anledning till att det saktar ner din webbplats är att du måste ladda filerna från en extern server (Googles) vilket tar fler steg än att ladda en fil från din server.

Genom att lagra Google Analytics-filerna lokalt kan du ladda dem lite snabbare.

Hur man laddar Google Analytics lokalt

Återigen har plugin-programmet WP Rocket gjort detta otroligt enkelt och pålitligt.

I menyn Tillägg finns det ett enkelt alternativ som du kan aktivera för att vara värd för Google Analytics lokalt istället för att ladda det från deras servrar.

Det här alternativet fungerar med de flesta plugins som används för att lägga till Google Analytics inklusive MonsterInsights.

Ett utmärkt gratisalternativ är CAOS-plugin.

25 Använd färre typsnitt

Du har redan optimerat din JS och CSS, så låt oss ta det allvar med att optimera teckensnitt också.

När det kommer till prestanda är typsnitt dyra.

Om du läser mitt inlägg om hur du gör din webbplats vackrare, så vet du att jag förespråkar att använda ett eller två typsnitt som mest. Förutom att det är en bra designregel är det också en bra prestandaregel.

Varje typsnitt du laddar har en inverkan på din webbplats prestanda, så ju färre du använder desto bättre.

Låt oss nu bli lite mer detaljerade.

26 Använd färre teckensnittsvikter

Varje teckensnitts vikt multiplicerar prestandatullen för ditt teckensnittsval.

Om du till exempel använder Roboto-teckensnittet laddar du standardvikten. Om du också vill ha det kursivt och fetstilt är det helt andra teckenuppsättningar och det betyder att du nu laddar tre teckensnittsfiler som alla har ungefär samma storlek.

Om du också använder teckensnittet Playfair Display och laddar en fet och kursiv version, laddar du nu sex teckensnittsfiler som kommer att ha stor inverkan på din webbplatshastighet.

Din webbplats kan se bra ut och vara mångsidig med ett enda teckensnitt laddat i en standard, kursiv stil och fet stil. Om du absolut vill ha ett annat typsnitt, använd det för rubriker så att det inte behöver ha flera vikter eller kursivering.

27 Ladda bara ditt språks teckenuppsättning

Du har precis lärt dig att att ladda ett teckensnitt i olika vikter multiplicerar antalet filer som din webbplats behöver ladda.

Efter samma tråd, ju fler tecken i teckensnittet, desto större är filen. Poängen är att du bara vill ladda de tecken du behöver.

Se till att du bara laddar Google Fonts på det språk du använder. För engelska användare behöver du bara den latinska teckenuppsättningen och inte Latin Extended som ofta laddas som standard.

Beroende på hur du lägger till Google Fonts på din webbplats, kanske du har eller kanske inte har möjlighet att ändra detta, så kolla med de tillgängliga tema- eller pluginalternativen.

28 Stäng av OpenType-funktioner i Adobe Fonts

Om du använder Adobe Fonts (tidigare TypeKit) för dina typsnitt, har du förmodligen tillgång till vissa OpenType-funktioner.

Även om OpenType-funktioner är fantastiska för att lägga till vackra bråk, små bokstäver och många andra typografiska funktioner, behöver du förmodligen inte dem.

Eftersom OpenType innehåller massor av nya teckenglyfer, gör det teckensnittsfilerna större vilket resulterar i längre laddningstider.

När du redigerar ditt projekt, inaktivera OpenType-funktionerna här:

Som du kan se i mitt exempel laddar jag bara in de tre teckensnittsvikterna jag behöver och den engelska delmängden som förklarats i föregående taktik.

29 Ersätt Font Awesome med Fontello

Den här taktiken är väldigt teknisk, men eftersom den hjälpte mig, tar jag med den för alla andra som läser vars bekväma skrivande kod.

Om du använder Font Awesome eller ett annat ikontypsnitt för din webbplats, laddar du troligen hela teckensnittet, dvs. du laddar hundratals ikoner. Troligtvis använder du bara en handfull av ikonerna på din webbplats.

Med Fontello kan du bygga ditt eget ikontypsnittspaket med endast Font Awesome-ikonerna du faktiskt använder.

Eftersom jag bara använder 26 olika ikoner på den här webbplatsen, kunde jag kraftigt minska storleken på teckensnittsfilen och dess stilmall (ungefär 100 kb).

Om du har full teknisk kontroll över din webbplats, är att ta bort Font Awesome och ersätta det med ett anpassat webbteckensnittspaket från Fontello ett utmärkt sätt att ytterligare förbättra din webbplats prestanda.

Andra optimeringar

Jag ser andra webbplatser som rekommenderar nästa tips hela tiden, men här är grejen…

Dessa sista taktik kommer inte att göra att din webbplats laddas snabbare. De kommer att optimera din webbplats prestanda, men inte exakt på ett sätt som påskyndar den.

Du kommer att minska mängden diskutrymme som din webbplats använder, eventuellt göra din webbplats säkrare och till och med minska bandbredden du använder. Det räcker för att göra dessa taktiker värda i mina ögon, och det är därför jag har tagit med dem i slutet av det här inlägget.

Här är de senaste 7 taktikerna.

30 Stäng av pingbacks och trackbacks

Ingen använder längre pingbacks eller trackbacks av legitima skäl.

Förut innan sociala medier när folk drev personliga bloggar, var pingbacks ungefär som att @-a någon. Med andra ord, de skulle låta dig veta när en annan bloggare refererade till din webbplats.

Nuförtiden används de mer eller mindre uteslutande för spam och utnyttjande av säkerhetsbrister (som DDoSing). Det är bäst att helt enkelt inaktivera dem med dessa två alternativ i diskussionsinställningarna.

Inga plugins behövs.

31 Sakta ner Heartbeat API

Heartbeat API körs i WordPress för att hålla vissa funktioner igång i din webbläsare. Till exempel, WordPress sparar automatiskt dina inlägg medan du arbetar med dem för att förhindra att du förlorar något av ditt innehåll i händelse av ett misstag eller fel.

Detta API körs normalt en gång i minuten och du kanske tycker att det saktar ner dig lite när du arbetar med ett inlägg eller använder andra funktioner i din administratör.

Även om det inte är en stor sak för de flesta, kan du lika gärna sakta ner den med den här inställningen i WP Rocket-plugin:

Att minska aktiviteten säger helt enkelt till Heartbeat API att köras en gång varannan minut istället för varje minut.

32 Inaktivera hotlinking

Hotlinking är när någon visar en bild på sin webbplats men de använder en bild-URL från din webbplats för att visa bilden. Vad som händer då är att varje gång någon besöker deras sida så efterfrågas bilden från din server istället för deras.

Summan av kardemumman är att när någon hotlinkar en av dina bilder, betalar du för bandbredden och får ingen av fördelarna. Det är att stjäla.

Cloudflare inkluderar deras ScrapeShield-tjänst i den kostnadsfria nivån som har en möjlighet att förhindra att människor hotlinkar dina bilder.

Älskar du inte alla dessa enkla alternativ för att klicka för att aktivera?

Jag slog på detta nyligen och det sparade mig massor av bandbredd. Jag antar att hotlinking har börjat öka för min domän under åren, och det här alternativet omedelbart upphävde dessa förfrågningar.

33 Optimera din databas

Att städa upp din databas kommer förmodligen inte att göra din webbplats snabbare, men det kommer att minska mängden diskutrymme du använder.

Om du har mycket svullnad i din databas är det mer sannolikt att detta saktar ner din administratörsinstrumentpanel än fronten på din webbplats. Om du till exempel har tiotusentals skräppostkommentarer kan menyn Kommentarer ta längre tid att ladda på grund av den stora mängden data.

Det finns massor av plugins tillgängliga för att optimera din databas, men det här är något jag också gör med WP Rocket.

Databasmenyn i WP Rocket-inställningarna innehåller alternativ för automatisk radering av skräppostkommentarer och annan värdelös data från din databas också.

Ännu bättre, du kan schemalägga denna automatisering så att den körs åt dig varje dag, vecka eller månad.

34 Inaktivera eller begränsa postrevisioner

Du har precis lärt dig att WordPress använder Heartbeat API för att rutinmässigt spara utkast av dina inlägg. Tja, WordPress sparar också revisioner som du kan återställa senare om det behövs.

Problemet med att lagra massor av revisioner är att de tar upp utrymme i din databas. Ett inlägg med 19 revisioner är som att lagra 20 inlägg i din databas. Även om du kan inaktivera revisioner med ett plugin eller begränsa dem, kan du också helt enkelt ta bort dem.

Databasmenyn i WP Rocket innehåller ett alternativ för att ta bort postrevisioner.

Du kan köra det här alternativet manuellt eller schemalägga det.

Och bara en notis up, du bör alltid säkerhetskopiera din webbplats innan du kör några databasoptimeringar.

Jag har WP Rocket planerat att köra denna optimering varje dag eftersom Kinsta också säkerhetskopierar min sida dagligen.

35 Ta bort frågesträngar

Det finns mycket att förklara här, men eftersom det inte kommer att påskynda din webbplats, kommer jag bara direkt till slutsatsen.

Frågesträngar på filwebbadresser kan eventuellt förhindra att de cachelagras. Med de flesta caching-plugins, som WP Rocket, är detta inte fallet så närvaron av frågesträngar är inte ett problem.

Dessutom bör frågesträngar ofta inte tas bort eftersom de krävs för att plugins ska fungera korrekt.

Aktivera bara det här alternativet i WP Rocket och gör klart det:

De har optimerat den här funktionen så att den inte bryter sönder saker på din webbplats och du kommer inte att se varningar från GTMetrix och andra prestandarevisionsverktyg som du behöver för att ta bort frågesträngar från statiska resurser.

36 Ta bort inaktiva plugins

När du inaktiverar ett plugin stänger du helt enkelt av det. Du kan återaktivera den och dina tidigare inställningar kommer att återställas.

Men om du tar bort ett plugin raderar detta normalt dina inställningar och data som skapats av plugin. Detta beror på att de flesta plugins har en rensningsprocess som de kör när de raderas så att de inte lämnar en röra i din databas.

Om du har inaktiva plugins som du inte har tagit bort än kan det hjälpa dig att optimera din databas om du tar bort dem. Dessutom är det bara en bra övning i allmänhet 🙂

Njut av din snabbare webbplats

Med över 7 000 ord är detta officiellt det längsta blogginlägg jag någonsin skrivit. Jag ville ha med allt!

Det är bara en sak till jag måste berätta för dig…

När det gäller prestandaoptimering är ditt arbete aldrig riktigt klart. När du har implementerat taktiken du vill testa på din webbplats, se till att komma tillbaka hit en eller två gånger om året för att gå igenom listan igen och optimera din webbplats igen.

Jag tycker att jag måste optimera om min webbplats minst en gång om året för att hålla den i toppform.

Du kanske också upptäcker att första gången du använder den här listan var en del av taktikerna för tekniska för att förstå. När du blir mer av ett WordPress-proffs kan du återvända för att hitta dessa taktiker mycket enklare att tillämpa.

Om du har några frågor lämnar jag kommentarsfältet öppet, så skriv gärna nedan!

Inspelningskälla: www.competethemes.com