Share
Prestanda är en av de viktigaste aspekterna på vilken webbplats som helst, men det är något som människor sällan verkar ta hänsyn till när man köper WordPress-teman. I den här sammanfattningen tar vi de tio bästsäljande teman på Themeforest i utseende, kör dem genom några grundläggande prestationstester och se vilka slutsatser vi kan dra.
ThemeForests lista över bästsäljande WordPress-teman uppdateras varje vecka, men du ser ofta kända spelare som håller de bästa platserna under en tid. Vi har tagit topp tio (se nedan) och pitted dem mot varandra med några vanliga prestationstester.
Bästsäljande WordPress-teman - uppdateras varje veckaDet finns många verktyg tillgängliga för testning av webbplatser, vi har valt några klassiker: Google Pagespeed Insights, Webpagetest.org, Pingdom och Chrome dev-verktyg. De flesta kommer att ge feedback om hur snabbt en webbsida laddar, dess totala vikt, hur effektivt dess tillgångar rörs över, vilket slutligen ger någon form av poäng. Vi körde en demo av varje tema genom dessa verktyg och samlade siffrorna (se tabell i slutet av posten).
Utöver dessa tester använde vi plugin för tillgänglighetskontroll för Chrome Dev-verktyg. Detta är inte kopplat till prestanda som sådant, men resultaten ger alltid inblick i hur ett tema byggs.
Några saker att notera:
Avada: Kreativ demoUtmärkta poäng över hela linjen. Initiala tester var mindre starka, men ThemeFusion kunde förbättra siffrorna avsevärt genom att optimera bilderna som användes i denna demo. Skärmbilden för sidvisningsinsikt insikten gick från 48% till 88% helt på baksidan av bildvikt, vilket visar hur viktigt bildoptimering är! Bra att se att Avada är också byggt med tillgänglighet i åtanke.
The7: Construction demo
Accentsconagua
alt attribut, färgkontrastförhållande kan vara bättre på en del av texten (i förhållande till dess bakgrund). Men på det hela taget är elementen välstrukturerad och tillgängligheten är solid.I allmänhet laddas denna demo ganska snabbt. dess bilder och tillgångar är inte för tunga, och sidan kan användas relativt snart efter belastning. Ändå är Pingdom-graden inte optimal. Förbättringar kan göras genom att kombinera några av JavaScript, liksom CSS, medan cachning skulle kunna bli enklare genom att inte tvinga versionsnummer på filnamn (t ex: /assets/css/settings.css?ver=5.4.5.2).
Tema: 3D-demoDetta tema laddas väldigt snabbt. Många av dess synliga innehåll prioriteras genom att inkludera viktiga stilar inline i huvud, och mycket av vad som laddas in minifieras och sammanfogas. Som vanligt är bilderna för lejonens andel av sidvikten (69,5%), så det skulle inte vara svårt att få den här demoens hemsida under den gyllene 1Mb tröskeln.
Impreza: RestaurangdemoMedan belastningshastigheten på Impreza's restaurangdemo inte är dålig hindras dess prestationspoäng av över 2 MB bilder. Också i noten är bristen på CDN och den dåliga serverns svarstid; två aspekter som är specifika för värd för denna demo och de som du enkelt kan förbättra.
Enfold: Gym demoÅterigen, ingen CDN som används för värd för denna demo, vilket förlorar det några punkter på webpagetest.org. En brist på HTTPS kan också ha tjänat Enfold ett svart märke. Som vanligt faller denna demo i fällan att vara så visuellt fantastisk som möjligt, vilket ger sidovikt för bildkvalitet. Vid över 5 MB är det tungvikten på bunten, men bildstorleken är alltid något lätt avhjälpande.
X: Kyrkans demoalt attribut på vissa bilder, låg kontrastförhållande på vissa områden (detta kyrktema är ganska dämpat) och frånvaron av a titel attribut på en iframe. Med tanke på att iframe kommer från en YouTube-inbäddning, som inte har en titelattribut som standard, kommer vi att förlåta det övervakningen.Denna demo är en av de få som gör ett rimligt jobb för att hålla bildomkostnaderna till ett minimum. webpagetest tilldelar det en solid 97/100 för bildkomprimering. Istället kommer dess låga poäng till stor del från hosting; ingen CDN, ingen HTTPS, dålig inledande svarstid och brist på "hålla sig levande" - annars känd som en beständig HTTP-anslutning, något som enkelt kan sättas på. Som någonsin, enkla förbättringar som du själv kan genomföra.
Bro: Spa-demoEn av de lättare demonerna här, men bildreglage kommer alltid att vrida sidovikten upp, även med väl optimerade bilder som dessa. Minifiering av HTML och andra tillgångar skulle ha hjälpt den mobila Pagespeed-insiktspoängen, trots att skrivbordsresultatet är extremt bra. Förbättrad hosting skulle återigen göra underverk, bättre serverrespons, CDN och caching är låghängande frukt.
Platsen: Gå Utforska demoInte sett genom gynnsamma ögon av Pagespeed Insights, men de andra poängsättningarna absolut älskar Flatsome! God hosting tjänar sidan effektivt (temaförfattare noterar), tillgångar minimeras och latade laddningsbilder hjälper vad som annars skulle vara en midviktssida laddas progressivt.
Jupiter: Bellona mallJag kommer att låta som en trasig rekord här, men fem minuters bildoptimering skulle avsevärt minska omkostnaderna på den här demo. hem-bg-08.jpg ensam väger i nästan en hel megabyte; kör det genom TinyPNG raderar av 87% direkt. Varför skulle du inte? Som Pingdom och Webpagetest föreslår, är de flesta andra prestationsaspekterna mycket bra.
Tidning: Tech nyheterStora poäng över bordet, standardförbättringar gäller (bildoptimering, JS och CSS-komprimering / sammanlänkning) men tänk på att den här demoen också kommer inredda med en stor utdragning som främjar andra versioner av temat (komplicerad komplikation som din egen version skulle är osannolikt att behöva). Utan mycket ansträngning kan denna demo gå in i viktklassen under 1Mb.
Så det avslutar vår sammanställning av poäng. Har du köpt ett WordPress-tema, hur kan du optimera den webbplats du bygger med den?
Det kommer inte att överraska dig: en enkel första anlöpshamn när du optimerar din webbplats är dina bilder. Ta bort oönskade bilder, komprimera dem du behöver, spara JPEG som "progressiv" (så att det finns åtminstone något att se medan de laddas) och du kommer att vara bra till en bra start. Du kanske också vill installera ett Lazy Loading-plugin för att ta saker ett steg längre. Vi har sett att mycket få av dessa demos prioriterar bildoptimering, men det betyder i alla fall att du kommer att kunna förbättra sina poäng.
När det gäller de notoriskt svaga sidorna i Pagespeed Insights har du märkt att alla dessa demos (med undantag för en) gör det bättre för skrivbordet än deras mobila versioner. Detta återspeglar inte längre hur webben används, så för att hålla Google (och användare) glada, noggrant överväga mobilprestanda. En mobil första attityd kommer också att hjälpa din SEO.
Hur kan du göra det här? Sammanfattande och minifiering av CSS och JavaScript kan vara svårt med WordPress; med hjälp av plugin från tredje part betyder att filer kan vara många och du kommer inte ha mycket kontroll över dem utan hjälp. Ändå gör ditt bästa för att inkludera viktiga "inledningsvisa" stilar inline i och gör din webbplats användbar så snabbt som möjligt genom att förhindra att "render-blocking" -skript sänker laddningsprocessen. Om reglaget högst upp på din hemsida kräver att hela sidan laddas innan den visas upp kommer Google att straffa dig.
Utöver det, överväga din värd. Aktivera GZIP-komprimering. HTTPS gör inte heller någon skada. Använd också en caching-tjänst; installera och konfigurera W3 Total Cache är barnspel. Använd en CDN om innehållet är avsett för en bred publik. Slutligen, ta en titt på dessa handledning och kurser för mer information och hjälp om ämnet:
