Ytelsestest De bestselgende WordPress-temaene på ThemeForest

Ytelse er en av de viktigste aspektene på et nettsted, men det er noe folk sjelden ser ut til å ta hensyn til når man kjøper WordPress-temaer. I denne runden tar vi de ti bestselgende temaene på Themeforest, i rekkefølge av utseende, kjører dem gjennom noen grunnleggende ytelsestester, og ser hvilke konklusjoner vi kan tegne.

De valgte temaene

ThemeForests liste over bestselgende WordPress-temaer oppdateres ukentlig, men du vil ofte se kjente spillere som holder de øverste stedene i noen tid. Vi har tatt topp ti (sett under) og pitted dem mot hverandre med noen vanlige prestasjonstester.

Bestselgende WordPress Temaer - oppdatert ukentlig

de tester

Det er mange verktøy tilgjengelig for testing av nettsteder, og vi har valgt noen klassikere: Google Pagespeed Insights, Webpagetest.org, Pingdom og Chrome dev-verktøy. De fleste vil gi tilbakemelding om hvor raskt en nettside laster, dens samlede vekt, hvor effektivt dens eiendeler blir overført, noe som til slutt gir en slags poengsum. Vi løp en demo av hvert tema gjennom disse verktøyene og samler tallene (se tabell i slutten av innlegget).

I tillegg til disse testene brukte vi Accessibility Audit plugin for Chrome dev verktøy. Dette er ikke knyttet til ytelsen som sådan, men resultatene gir alltid et innblikk i hvordan et tema er bygget.

Noen ting å merke seg:

  • Disse demoene er alle vert for de enkelte temaforfatterne. Hosting spesifikasjoner er ikke alle like.
  • En tilfeldig demo ble valgt der flere alternativer var tilgjengelige. WooCommerce, BuddyPress eller andre plattformplugger ble unngått der det var mulig. Ingen åpenlyst image-forutbestemt temaer (som fotografiporteføljer) ble brukt heller.
  • Alle nettadresser ble testet fra California, hvor det er mulig.
  • Nøyaktige resultater kan variere fra dag til dag.
  • Tema demoer er ofte bygget for å gjøre en visuell innvirkning, fylt med høy kvalitet bilder og så mye funksjonalitet som mulig. Dette betyr at demoer sjelden er en nøyaktig refleksjon av hvordan en resulterende nettside kan se ut og oppføre seg. Det er sannsynlig at du, med din egen kopi, vil forbedre resultatene til alle disse demoene.
  • Alle temaforfattere er velkommen til å forbedre sine poeng på disse demoene. Artikkelen vil bli oppdatert for å gjenspeile de nye tallene.

Avada

Avada: Kreativ demo
  • Pagespeed-innsikt mobil: 73%
  • Pagespeed-innsikt skrivebord: 88%
  • Webpagetest.org: Straight A: AAAAA☑
  • Pingdom: 92% (A-klasse)
  • Pingdom lasthastighet: 0,97 s
  • Chrome Dev-verktøyets vekt på siden: 1.3Mb
  • Tilgjengelighetskontroll: 94% score (utmerket). ARIA-attributter følger beste praksis, elementene er godt strukturert, metakoder brukes riktig.

Utmerkede poeng over hele linja. Innledende tester var mindre sterke, men ThemeFusion kunne forbedre tallene betydelig ved å optimalisere bildene som ble brukt i denne demoen. Skriftspoengsummen for Sidevisning Innsikt gikk fra 48% til 88% bare på baksiden av bildevekten, og viser hvor viktig bildeoptimalisering er! Flott å se at Avada er også bygget med tilgjengelighet i tankene.

The7

The7: Construction demo
  • Pagespeed-innsikt mobil: 64%
  • Pagespeed-innsikt skrivebord: 91%
  • Webpagetest.org: A er over hele linja. AAAAA☑
  • Pingdom: 68% (D klasse)
  • Pingdom lasthastighet: 1,51 s
  • Chrome Dev-verktøyets vekt på siden: 1.3Mb
  • Tilsynsrevisjon: 83% score (ikke dårlig). Noen bildeelementer mangler alt attributter, fargekontrastforhold kan være bedre på noen av teksten (i forhold til bakgrunnen). Men i det hele tatt er elementene godt strukturert og tilgjengeligheten er solid.

Generelt sett lastes denne demonstrasjonen ganske raskt. dets bilder og eiendeler er ikke for tunge, og siden kan brukes relativt snart etter belastning. Likevel er Pingdom-karakteren ikke optimal. Forbedringer kan gjøres ved å kombinere noen av JavaScript, likevel CSS, mens caching kan gjøres enklere ved ikke å tvinge versjonsnumre på filnavn (f.eks: /assets/css/settings.css?ver=5.4.5.2).

BeTheme

Tema: 3D-demo
  • Pagespeed-innsikt mobil: 76%
  • Pagespeed-innsikt skrivebord: 87%
  • Webpagetest.org: Straight A er AAAAA☑
  • Pingdom: 98 (En klasse)
  • Pingdom lasthastighet: 1,27 s
  • Chrome dev verktøy side vekt: 1.8Mb
  • Tilsynsrevisjon: 80% Feller kort på kontrastforhold (dette er ganske mørkt, broody-tema), og dets ufullkomne bruk av ARIA-roller.

Dette temaet laster veldig raskt. Mange av sitt synlige innhold prioriteres ved å inkludere viktige stiler inline i hode, og mye av det som er lastet inn, er minifisert og sammenkoblet. Som det er tilfelle, står bildene for løvenes andel av sidevikt (69,5%), så det ville ikke være vanskelig å få denne demoens hjemmeside under den gyldne 1Mb-terskelen.

Impreza

Impreza: Restaurant demo
  • Pagespeed-innsikt mobil: 63%
  • Pagespeed-innsikt skrivebord: 68% 
  • Webpagetest.org: FAABF☒
  • Pingdom: 80% (B-klasse)
  • Pingdom lasthastighet: 2,34 s
  • Chrome dev verktøy side vekt: 2.5Mb
  • Tilsynsrevisjon: 94% (utmerket). Riktig brukte attributter på elementer, inkludert ARIA-roller. Identifiserbare elementnavn og godt beskrevet innhold.

Selv om lasthastigheten til Impreza's restaurantdemo ikke er dårlig, blir ytelsespoengene hindret av over 2 MB bilder. Også av note er mangelen på CDN og den dårlige serverens responstid; to aspekter som er spesifikke for hosting av denne demoen og de som du enkelt kan forbedre. 

enfold

Enfold: Gym demo
  • Pagespeed-innsikt mobil: 60%
  • Pagespeed-innsikt skrivebord: 60%
  • Webpagetest.org: AAADB☒
  • Pingdom: 70% (C-klasse)
  • Pingdom lasthastighet: 2,79 s
  • Chrome dev verktøy side vekt: 5.2Mb
  • Tilsynsrevisjon: 89% En av de høyere målteamodemene for tilgjengelighet, som viser en underliggende styrke i byggekvaliteten.

Igjen, ingen CDN som brukes til hosting av denne demoen, som mister den noen få poeng på webpagetest.org. Mangel på HTTPS kan også ha tjent Enfold et svart merke. Som vanlig faller denne demonstrasjonen i fellen for å være så visuelt imponerende som mulig, og avlaster sidevikt for bildekvalitet. På over 5 MB er dette tungvekten av gjengen, men bildestørrelsen er alltid noe som lett kan løses.

X

X: Kirke demo
  • Pagespeed-innsikt mobil: 77%
  • Pagespeed-innsikt skrivebord: 74%
  • Webpagetest.org: DFAAB☒
  • Pingdom: 87% (B-klasse)
  • Pingdom lasthastighet: 2,45 s
  • Chrome Dev-verktøyets vekt på siden: 2.1Mb
  • Tilsynsrevisjon: 91% En veldig sunn A11y-poengsum, skuffet bare ved mangel på alt attributter på noen bilder, lav kontrastforhold på enkelte områder (dette kirketema er ganske dempet) og fravær av a tittel attributt på en iframe. Likevel, gitt at iframe er fra en YouTube-embed, som ikke har et tittelattributt som standard, vil vi tilgi det tilsynet.

Denne demoen er en av de få som gjør en fornuftig jobb, og holder bildomkostningene til et minimum. webpagetest tildeler det en solid 97/100 for bildekomprimering. I stedet kommer de lave resultatene i stor grad fra hosting; ingen CDN, ingen HTTPS, dårlig innledende svartid og mangel på "holde i live" -hvordan kjent som en vedvarende HTTP-tilkobling, noe som lett kan slås på. Som noen gang, enkle forbedringer som du selv kunne få i kraft.

Bro

Bro: Spa-demo
  • Pagespeed-innsikt mobil: 78%
  • Pagespeed-innsikt skrivebord: 91%
  • Webpagetest.org: AAAAA☒
  • Pingdom: 80% (B-klasse)
  • Pingdom lasthastighet: 1,11 s
  • Chrome dev verktøy side vekt: 1.6Mb
  • Tilsynsrevisjon: 91% (veldig bra). Små poeng som bringer den samlede poengsummen ned, men ARIA-attributter følger beste praksis, og sideelementer har kjennebare navn, beskriver innholdet godt og er riktig strukturert.

En av de lettere demoer her, men bildestyrene skal alltid svekke sidevikten opp, selv med godt optimaliserte bilder som disse. Minifisering av HTML og andre eiendeler ville ha hjulpet den mobile Pagespeed-innsiktsklassen, selv om skrivebordsscore er ekstremt god. Bedre hosting ville igjen gjøre underverk - bedre server responstid, en CDN, og caching er lavhengende frukt.

Flatsome

Flatsome: Go Utforsk demo
  • Pagespeed-innsikt mobil: 53%
  • Pagespeed-innsikt skrivebord: 57%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 96% (A-klasse)
  • Pingdom lasthastighet: 1,02 s
  • Chrome dev verktøy side vekt: 3.7Mb
  • Tilgjengelighetsrevisjon: 83% Poeng som går tapt på A11y-fronten ved ikke å gi knapper riktig navn (WooCommerce-ønskeliste-ikonknappene kan ikke leses riktig av skjermlesere) og noen koblinger er like vage. Lav kontrast på enkelte elementer og dupliserte element-IDer er også enkle reparasjoner.

Ikke sett gjennom gunstige øyne av Pagespeed Insights, selv om de andre scoring-tallene absolutt elsker Flatsome! God hosting serverer siden effektivt (temaforfattere noterer seg), eiendeler minimeres, og lat bilder legger til rette for hva som ellers ville være en midtsidig side lastes gradvis.

Jupiter

Jupiter: Bellona mal
  • Pagespeed-innsikt mobil: 38%
  • Pagespeed-innsikt skrivebord: 44%
  • Webpagetest.org: AAAFA☑
  • Pingdom: 92% (A-klasse)
  • Pingdom lasthastighet: 1,07 s
  • Chrome dev verktøy side vekt: 3.3Mb
  • Tilsynsrevisjon: 91% (veldig bra). På grunn av den imponerende naturen til grafikken (som jeg elsker, forresten), gir tekst på noen av bildene svake kontrastforhold. Sidestrukturen og beskrivende bruk av elementer, sammen med riktig ARIA-bruk, gjør alt for kontrastfeilene.

Jeg skal høres ut som en ødelagt plate her, men fem minutter med bildeoptimalisering vil redusere kostnadene på denne demonstrasjonen sterkt.. hjemme-bg-08.jpg alene veier inn på nesten en hel megabyte; kjører den gjennom TinyPNG barberer 87% med en gang. Hvorfor ville du ikke? Som Pingdom og Webpagetest foreslår, er de fleste andre ytelsesaspekter veldig gode.

Avis

Avis: Teknisk nyheter
  • Pagespeed-innsikt mobil: 76%
  • Pagespeed-innsikt skrivebord: 77%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 93% (A-klasse)
  • Pingdom lasthastighet: 1,19 s
  • Chrome dev verktøy side vekt: 1.5Mb
  • Tilgjengelighetskontroll: 86% En god poengsum - kan forbedres ved å beskrive lenker og knapper som er brukt til JavaScript-kontroller, bytter og lignende.

Gode ​​poeng på tvers av bord, standardforbedringer gjelder (bildeoptimalisering, JS og CSS-komprimering / sammenkobling), men husk at denne demoen også kommer innredet med en stor uttrekking som fremmer andre versjoner av temaet (komplikasjon som din egen versjon ville ha er lite sannsynlig å trenge). Uten mye innsats kunne denne demonstrasjonen gå inn i vektklassen under 1Mb.

Slik gjør du ditt WordPress-nettsted raskere

Så det konkluderer med at vi har slått av poengsummen. Har du kjøpt et WordPress-tema, hvordan kan du optimalisere nettstedet du bygger med det?

Det vil ikke overraske deg: en enkel første anløpshavn når du optimaliserer nettstedet ditt, er bildene dine. Fjern uønskede bilder, komprimere dem du trenger, lagre JPEG som "progressive" (slik at det er minst noe å se mens de lastes), og du kommer til en god start. Du vil kanskje også installere et Lazy Loading-plugin for å ta ting et skritt videre. Vi har sett at svært få av disse demoene prioriterer bildeoptimalisering, men det betyr i det minste at du kan forbedre deres score.

Når det gjelder de beryktede, svake sidene i Pagespeed Insights, har du lagt merke til at alle disse demoene (med unntak av en) score bedre for skrivebordet enn deres mobile versjoner. Dette gjenspeiler ikke lenger måten nettet brukes på, for å holde Google (og brukere) glade, må du nøye vurdere mobilytelsen. En mobil første holdning vil også hjelpe din SEO.

Hvordan kan du gjøre dette? Sammenkobling og minifisering av CSS og JavaScript kan være vanskelig med WordPress; ved hjelp av tredjeparts plugins betyr at filer kan være mange, og du vil ikke ha mye kontroll over dem uten hjelp. Fortsett, gjør ditt beste for å inkludere viktige "innledende visninger" stiler inline i og gjør nettstedet ditt brukbart så raskt som mulig ved å hindre "gjengoblokke" skript fra å senke lastprosessen. Hvis skyvekontrollen øverst på hjemmesiden din krever at hele siden lastes inn før den vises, vil Google straffe deg.

Utover det, vurder din hosting. Aktiver GZIP-komprimering. HTTPS vil heller ikke skade noe. Bruk også en caching-tjeneste; installere og konfigurere W3 Total Cache er barnas spill. Bruk en CDN hvis innholdet ditt er beregnet for et bredt publikum. Til slutt, ta en titt på disse opplæringene og kursene for mer informasjon og hjelp om emnet:

WordPress Performance Resources

  • Optimaliser nettstedet ditt uten AMP av Kezz Bracey
  • Hvorfor (WordPress) Performance Matters av Rachel McCollin
  • Fremskynder WordPress av Barış Ünver
  • Optimalisering av Google PageSpeed ​​til 100 i WordPress av Jeff Reifman
  • Slik bruker du WordPress-plugins uten å skade ytelse av Barış Ünver