Vill du snabba upp din WordPress site? Vill du veta WordPress optimering tricks som kan hjälpa dig att minska din site hämtar tid? I den här artikeln kommer vi att visa dig hur du kan snabba upp WordPress genom att dela hur vi optimerade vår List25 site för att öka prestandan.
Du har förmodligen hört att WordPress hastighet är viktig för sökmotorsoptimering. En snabbare site har bättre engagemang hos användarna, fler sidvisningar och bättre försäljning. I en fallstudie från Strangeloop fann de att en fördröjning på en sekund kan kosta you 7% av försäljningen, 11% färre sidvisningar och 16% minskad kundnöjdhet.
Så hur gör du egentligen WordPress snabbare?
Istället för att bara dela en lista med hastighetstips bestämde vi oss för att göra en fullständig fallstudie för att visa dig resultaten från vår List25 site tillsammans med hur vi åstadkom alltihop.
Översikt
List25 är en blogg om underhållning som startades av vår grundare Syed Balkhi. Webbplatsen har över 1,5 miljoner prenumeranter och YouTube-kanalen har över en kvarts miljard views.
Innehållet på webbplatsen är mestadels images och videoklipp som tar upp terabyte av bandbredd, så övergripande hastighetsoptimering var avgörande för oss för att hålla kostnaderna nere, minska antalet övergivna sidor och förbättra tiden på webbplatsen.
Innan vi började optimeringen tog det 2,21 sekunder att ladda vår homepage enligt Pingdom. Efter att vi var klara sjönk laddningstiden för vår page till 1,21 sekunder ( ~45% snabbare).
Under denna optimering kunde vi snabba upp vår server responstid, förbättra vår page speed performance score, minska antalet totala request och förbättra den totala laddningstiden.
Låt oss ta en titt på de optimeringstekniker som hjälpte oss att snabba upp vår site WordPress.
WordPress Webbhotell
Att ha en bra server är avgörande för hastigheten på din website. I takt med att vår site blev mer populär växte vi helt enkelt ifrån vårt tidigare webbhotell (HostGator).
Deras servrar kunde helt enkelt inte hantera en site av den här storleken eftersom List25 får tiotals miljoner sidvisningar. HostGator är bra för mindre webbplatser, men ej för något av denna magnitud.
Vi klurade på olika hanterade alternativ för hosting av WordPress och valde till slut SiteGround som webbhotell för List25 eftersom de erbjöd det bästa totalvärdet för den här webbplatsen.
You can see the improvement in our server response time immediately. Vi gick från max 442 ms till 172 ms response time. Det är en förbättring med 256%.
Siteground har built-in prestandaförstärkare för specifika plattformar som WordPress, Joomla och Magento. Baserat på plattformen för din site optimerar de speciellt dina servrar vilket resulterar i en bättre övergripande prestanda.
Vi skrev en artikel om när du bör byta webbhotell där vi tar upp de 7 viktigaste indikatorerna.
Om du funderar på att byta server, ge definitivt SiteGround ett försök. WPBeginners användare får en exklusiv 60% rabatt på webbhotell + gratis domän.
Tillägg för caching
När det gäller att snabba upp WordPress är caching den näst viktigaste faktorn efter ditt webbhotell.
Normalt när en besökare kommer till din WordPress site, skickar din server PHP-förfrågan till MySQL Database som hittar den sida som begärs, genererar den i farten och visar den för besökaren. Detta tar upp en hel del resurser. När du har caching sparar du tid och resurser.
Diagrammet under belyser processen. I enkla termer kan du tänka på caching som att skapa en genväg på skrivbordet som hjälper dig att komma till filen snabbare.
För List25-webbplatsen använder vi SiteGround SuperCacher, ett plugin som de specialbyggt för sina customize. Högst upp på det har de lagt till avancerade dynamiska alternativ för caching med hjälp av Varnish (en del av deras prestandaförstärkare).
Om du ej har Siteground behöver du inte oroa dig. Du kan ställa in caching på din WordPress site genom att använda en av de många tillgängliga lösningarna som W3 Total C ache eller WP Super Cache.
På WPBeginner använder vi W3 Total Cache som tillhandahåller ett antal alternativ för page caching, database caching och object caching.
I takt med att fler webbhotell specialiserar sig för WordPress kommer vi att se fler customize caching-lösningar byggas. Page och WPEngine erbjuder också sina egna built-in system för caching.
CDN
Content Delivery Networks (CDN) kan hjälpa dig att öka hastigheten på din website. Vi har använt MaxCDN sedan början av List25, så den här delen förändrades inte.
Vi har skrivit en fullständig artikel om vad ett CDN är och varför du behöver det tillsammans med en infografik.
CDN allow oss att servera all CSS, JavaScript och images från ett Content Delivery Network. Detta fungerar genom att bestämma webbplatsens besökares location och servera content från en server som är närmast besökaren.
Om du ej är ute efter en premium CDN-lösning kan du använda Cloudflare.
Kombinera filer för att minska HTTP-requests
När du lägger till fler plugins lägger de ofta till sina egna JavaScript- och CSS-filer. Varje ytterligare fil är en new HTTP request.
Vi kombinerade dessa JavaScript- och CSS-filer till en enda fil för varje för att minska requests och påskynda laddningstiden. Du kan se mer detaljer om detta på hur WordPress tillägg påverkar laddningstiden.
Även om vi nu hämtar en del små funktioner som vi kanske inte behöver på en viss section av webbplatsen, cachelagras denna kod på CDN, och resultaten visar att färre requests för filer ger bättre prestanda än att hämta flera mindre JS-filer.
Det här är något du måste göra regelbundet eftersom de tillägg du använder ändras övertid.
Image Sprites
Vi använde oss av en image sprite som kombinerade flera sociala ikoner och webbplatsikoner i en enda image:
När vi behövde visa en viss icon använde vi CSS för att:
- Hämtar imagen som bakgrundsbild
- Definiera bredden och höjden på det element som vi behöver ikonen för
- Ställ in bakgrundspositionen för vår image för att ladda den nödvändiga ikonen
Till exempel, för att hämta sidebarens social media icons använder vi:
li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; } li.widget_social_icons ul li.twitter { background-position: 0 -50px; } li.widget_social_icons ul li.facebook { background-position: -36px -50px; } li.widget_social_icons ul li.pinterest { background-position: -72px -50px; } li.widget_social_icons ul li.google { background-position: -108px -50px; } li.widget_social_icons ul li.rss { background-position: -144px -50px; } li.widget_social_icons ul li.youtube { background-position: -180px -50px; }
CSS-egenskaperna bakgrund-position
, bredd
och höjd
hjälper oss att rikta in oss på den specifika sektionen av den image som vi vill mata ut:
Som ett resultat använder endast den första requesten för denna image-fil bandbredd. Efterföljande förfrågningar till CDN för bilden kommer att resultera i att den cachelagrade (vanligtvis lokala) versionen hämtar, samt att endast en enda image behöver requestas jämfört med 6 olika sociala icons.
Genom att kombinera JavaScript, CSS och images tillsammans minskade vi antalet requests avsevärt.
Minifiering av kod
Minifiering av kod innebär att man tar bort blanksteg och radbrytningar för att minska filstorleken och göra den snabbare att hämta när den requestas.
För List25 använder vi SCSS, en syntaxbaserad stylesheet (Intro to Sass). Detta allow oss att strukturera våra CSS-filer över flera områden av utvecklare i en lättläst layout:
Vi använder CodeKit för att sedan sammanställa SCSS-filerna till en enda CSS-fil. CodeKit tar också bort blanksteg och radbrytningar för att se till att filen är så liten som möjligt:
Som ett resultat kunde vi minska storleken på vår CSS-fil med 28%.
Optimering av images
Vi optimerade våra images på två area: vårt theme WordPress och uppladdat content.
För vårt WordPress theme använde vi CodeKit för att säkerställa att all images komprimerades förlustfritt. Detta säkerställer att filstorlekarna är så små som möjligt utan att kvaliteten försämras.
Vi utbildade också alla våra skribenter om vikten av att save images som är optimerade för webben. Se vår guide om hur man sparar images optimerade för webben.
Social delning utan JavaScript
Social delning för List25 är verkligen viktigt, gillar alla andra webbplatser. Tillägg för social delning kan dock avsevärt sakta ner din site.
Även om integreringen av dessa fyra sociala nätverks skript inte påverkade sidans laddningstid i våra tester, saktade det synligt ner webbplatsen när den viewades på en mobil device. Det tog några sekunder för delningsknappar att visas, trots att skripten hämtar asynkront, vilket resulterade i att innehållet i posten rörde sig när knapparna laddades in i view.
För att lösa detta problem gick vi över till en lösning som (nästan) är gratis JavaScript. Var och en av de sociala nätverkens delningsknappar återges av vårt custom WordPress Plugin, och temats JavaScript används endast för att öppna webbläsarens fönster när användaren klickar på en knapp.
Vi ville dock fortfarande visa det totala antalet delningar som ett post hade i alla sociala nätverk. För att göra detta producerade vi ett litet custom WordPress Plugin för att hämta och cachelagra antalet delningar från varje socialt nätverk i metatabellen för inlägg. Dessa räkningar uppdateras var 24:e timme, vilket säkerställer att tidskrävande sökningar ej konstant körs.
Du kan antingen använda ett API som Sharre eller dissekera den flytande sociala baren för customize.
Med hjälp av Pingdoms RUM (Real User Monitoring) minskade detta nya plugin för delning den ”sanna” laddningstiden för sidan från 6 sekunder till drygt 2 sekunder. Det såg också till att vi minskade antalet requests för skript från tredje part.
Resultat
Vi förbättrade hastigheten på vår site avsevärt. Hämtningstiden gick från 2,2 sekunder till 1,22 sekunder.
Vi kunde minska vår responstid på servern avsevärt.
Detta bidrog till att minska den tid som spenderas för att ladda ner en page av Google bot vilket hjälpte vår crawl rate.
Vår totala avvisningsfrekvens sjönk med 7% eftersom sajten hämtar snabbare och genom att byta server kunde vi minska antalet error på servern.
Som you kan föreställa sig med den lägre avvisningsfrekvensen ökade också tiden på webbplatsen med över 30 sekunder.
Slutsats
Som du kan se kan en webbplats som hämtar snabbare förbättra engagemanget hos besökarna. De tekniker som vi har diskuterat har täckt en rad grundläggande och mellanliggande förbättringar som du kan implementera för att optimera din WordPress site.
Vi hoppas att den här artikeln hjälpte dig att snabba upp din WordPress site. Du kanske också vill kontrollera vår artikel om 20 tillägg till WordPress som du måste ha 2015.
Om du gillade den här artikeln, vänligen prenumerera på vår YouTube-kanal för WordPress video tutorials. Du kan också hitta oss på Twitter och Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
I struggled a lot with the speed of WordPress when my blog grew to around 1000+ articles. Google Search Console started showing red numbers and indicating an unsatisfactory web speed. I tried everything possible, from various minifications to web adjustments. Several times, I even broke the site while tweaking it and had to restore from backups. In the end, the best solution, which I still use today, was the WP Rocket plugin. I don’t know of anything better for caching (especially thanks to the preload feature). And since I have a CDN from CloudFlare, I connected it directly through the plugin to the CDN. It’s a great combination that has incredibly sped up the website. For me, it’s the best duo for WordPress speed.
Peter says
I love Performance Guides so much
Thanks for Sharing with us. In Germany there not so many WordPress Blogs. But we have Great Guides too.
But don’t forget HTTP/2 this will change a lot. I mean combine fiels no longer good for optimize and priority are comes in the game
Gabe Livan says
To further reduce the number of HTTP requests I recommend ”WP Asset Clean Up” plugin as it removes all unnecessary styles and scripts that are not needed on the home page and other posts/pages.
Patrick Evans says
I’m using Rosehosting to host my WordPress websites and I’m very pleased with the speed and reliability of my VPS.
From your tutorials, I learned how to make use of image sprites and how to save images optimized for web and my websites are faster now.
Thanks!
Miro says
Switched to site ground recently and I am really happy with them. I also followed steps in this article and got quite good results except one thing. I failed in Combining Files to Reduce HTTP Requests. Plugins that are out there to do so don’t work well, moreover, they either break my site or make it extremely slow. Do you have an article / a tutorial on how to manually Combine Files to Reduce HTTP Requests? Would you suggest anyone who provides such a service (combining js and css files to reduce http requests). Thank you
Jane says
Thanks for the article guys.
We deffo needed something to optimize our speed due to large number of high res images
We use Wp Cache on our free photo site, but we also noticed that even though this helps, we still need to compress (resize) images cause it takes a lot of time to laod 20 images (on home page).
So, basically, resize everything and keep high resolution images in the background (for downloads)
Have a great weekend
Jane
Piet says
For the images you use a sprite you say, but the images you’re using can easily be replaced with a font icon such as FontAwesome. Depending how you install that (I would use Bower), it’s not even an outgoing http request, so you could save yourself the loading of that image file (and all the calculating to make it right of course).
Jay Castillo says
Wow! Your numbers for List25 with Siteground are awesome! Did you use the GoGeek plan or is there a bigger plan not listed on their website?
One more thing, what tool did you use to get server response times (the graph just above Google bot crawl rate)?
Editorial Staff says
We are using their Dedicated server plan with the WordPress Booster package. We used Pingdom for the server response time graph.
Administratör
Jay Castillo says
Got it, thanks!
Alberto Serrano says
Hello , I hosted my site on site ground but didn’t knew they had a cache plugin already installed so I installed WP supercache , should I disable one and which one would be better ?
Thanks
Editorial Staff says
Yup you probably don’t need SuperCache. I would confirm with SiteGround support just to make sure though
Administratör
Lawrence says
Thanks for this very helpful guide!
Please, did you setup Maxcdn together with Siteground’s SuperCacher?
I recently moved to siteground and will love to know how to setup Maxcdn, given that the supercacher plugin is already active on my account
WPBeginner Support says
Hi Lawrence,
When you cache content on your website, it is still served by the same server. MaxCDN, on the other hand serves your content using their content delivery network which improves your website’s performance. As for compatibility concerns, you may want to contact your hosting provider.
Ian Douglas says
Please consider letting loose your custom social sharing plugin into the wild (i.e., free to download for the public). Social sharing has always been a drain on pages, so it would be great to get a sleek and fast option.