Share
Prestaties zijn een van de belangrijkste aspecten van een website, maar het is iets waar mensen zelden rekening mee houden bij het kopen van WordPress-thema's. In deze samenvatting nemen we de tien best verkochte thema's op Themeforest, in volgorde van uiterlijk, voeren ze een aantal basistests uit, en zien we welke conclusies we kunnen trekken.
De lijst van bestverkopende WordPress-thema's van ThemeForest wordt wekelijks geüpdatet, maar je zult vaak bekende spelers tegenkomen die de topposities al geruime tijd vasthouden. We hebben de top tien (zie hieronder) genomen en hebben deze met elkaar vergeleken met enkele veel voorkomende prestatietests.
Bestverkopende WordPress-thema's - wekelijks bijgewerktEr zijn veel tools beschikbaar voor het testen van websites. We hebben enkele klassiekers gekozen: Google Pagespeed Insights, Webpagetest.org, Pingdom en Chrome dev-tools. De meesten zullen feedback geven over hoe snel een webpagina laadt, het totale gewicht, hoe efficiënt zijn activa worden doorgesluisd en uiteindelijk een soort score opleveren. We hebben met behulp van deze tools een demo van elk thema uitgevoerd en de figuren verzameld (zie tabel aan het einde van de post).
Naast deze tests hebben we de plug-in Toegankelijkheidscontrole voor Chrome dev-gereedschappen gebruikt. Dit is niet verbonden met de prestaties als zodanig, maar de resultaten geven altijd inzicht in hoe een thema is opgebouwd.
Een paar dingen om op te merken:
Avada: creatieve demoUitstekende scores over de hele linie. De eerste tests waren minder sterk, maar ThemeFusion wist de cijfers aanzienlijk te verbeteren door de afbeeldingen in deze demo te optimaliseren. De desktopscore van Pageview Insights steeg van 48% naar 88%, louter op basis van het beeldgewicht, en laat zien hoe belangrijk de beeldoptimalisatie is! Geweldig om te zien dat Avada ook is gebouwd met toegankelijkheid in het achterhoofd.
The7: Construction-demo
Accentsconagua
alt attributen, kleurcontrastverhouding kan beter zijn op een deel van de tekst (ten opzichte van de achtergrond). Maar over het algemeen zijn elementen goed gestructureerd en is de toegankelijkheid solide.Over het algemeen laadt deze demo vrij snel; de afbeeldingen en items zijn niet te zwaar en de pagina is relatief snel bruikbaar bij het laden. Toch is de Pingdom-score niet optimaal. Verbeteringen kunnen worden aangebracht door een deel van het JavaScript te combineren, net als de CSS, terwijl caching gemakkelijker kan worden gemaakt door versienummers op bestandsnamen niet te forceren (bijvoorbeeld: /assets/css/settings.css?ver=5.4.5.2).
BeTheme: 3D-demoDit thema laadt erg snel. Veel van de zichtbare inhoud wordt geprioriteerd door essentiële stijlen inline op te nemen in de hoofd, en veel van wat erin is geladen wordt verkleind en aaneengeschakeld. Zoals vaak het geval is, maken afbeeldingen het leeuwendeel van het paginagewicht uit (69,5%), dus het zou niet moeilijk zijn om de startpagina van deze demo onder de gouden drempel van 1 MB te krijgen.
Impreza: demo van het restaurantHoewel de laadsnelheid van Impreza's restaurantdemo niet slecht is, worden de prestatiescores gehinderd door meer dan 2 MB aan afbeeldingen. Ook van belang zijn het ontbreken van CDN en de slechte reactietijd van de server; twee aspecten die specifiek zijn voor de hosting van deze demo en diegene die u gemakkelijk kunt verbeteren.
Enfold: Gym-demoNogmaals, geen CDN gebruikt voor het hosten van deze demo, die het een paar punten verliest op webpagetest.org. Een gebrek aan HTTPS heeft Enfold mogelijk ook een zwarte vlek opgeleverd. Zoals gebruikelijk, valt deze demo in de val om zo visueel verbluffend mogelijk te zijn, en het paginagewicht te offeren voor de beeldkwaliteit. Bij meer dan 5Mb is dit het zware gewicht van het stel, maar de beeldgrootte is altijd iets dat gemakkelijk kan worden verholpen.
X: kerkdemonstratiealt attributen op sommige afbeeldingen, lage contrastratio op sommige gebieden (dit kerkthema is tamelijk gedempt) en afwezigheid van een titel attribuut op een iframe. Toch, gezien het feit dat het iframe van een YouTube-embed is, die standaard niet met een titelattribuut wordt geleverd, vergeven we dat overzicht.Deze demo is een van de weinige die een redelijk werk doet om de overheadkosten tot een minimum te beperken; webpagetest kent een solide 97/100 toe voor beeldcompressie. In plaats daarvan komen de lage scores grotendeels van de hosting; geen CDN, geen HTTPS, slechte initiële responstijd en een gebrek aan "keep alive" - ook bekend als een persistente HTTP-verbinding, iets dat gemakkelijk kan worden ingeschakeld. Zoals altijd, eenvoudige verbeteringen die u zelf kunt aanbrengen.
Bridge: Spa-demoEen van de lichtere demo's hier, maar met beeldschuifregelaars wordt het paginagewicht altijd omhoog gedraaid, zelfs met goed geoptimaliseerde afbeeldingen zoals deze. Het verkleinen van HTML en andere items zou de mobiele Pagespeed-insights hebben geholpen, hoewel de desktopscore extreem goed is. Verbeterde hosting zou opnieuw wonderen doen - betere serverreactietijd, een CDN en caching als laaghangend fruit.
Flatsome: Go Demo verkennenNiet gezien door gunstige ogen door Pagespeed Insights, hoewel de andere scoremetingen absoluut van Flatsome houden! Goede hosting dient de pagina op efficiënte wijze (auteurs van thema's houden er rekening mee), assets worden geminimaliseerd en luie loading-afbeeldingen helpen om wat anders een pagina met een middelmatig gewicht progressief zou zijn te laden.
Jupiter: Bellona-sjabloonIk zal hier als een gebroken plaat klinken, maar vijf minuten beeldoptimalisatie zou de overheadkosten van deze demo enorm verminderen. home-bg-08.jpg alleen weegt bijna een hele megabyte; het doorlopen van TinyPNG scheert 87% meteen. Waarom zou je niet? Zoals Pingdom en Webpagetest suggereren, zijn de meeste andere prestatieaspecten erg goed.
Krant: Tech nieuwsFantastische scores over de hele linie, standaardverbeteringen zijn van toepassing (beeldoptimalisatie, JS en CSS-compressie / aaneenschakeling), maar houd er rekening mee dat deze demo ook is uitgerust met een grote pull-out die andere versies van het thema promoot (extra complicatie die uw eigen versie zou hebben). waarschijnlijk niet nodig hebben). Zonder veel moeite zou deze demo in de sub-1Mb gewichtsklasse kunnen stappen.
Dus dat concludeert onze verzameling scores. Heb je een WordPress-thema gekocht, hoe zou je de site die je ermee bouwt kunnen optimaliseren??
Het zal u niet verbazen: een gemakkelijke eerste aanloophaven bij het optimaliseren van uw website zijn uw afbeeldingen. Verwijder ongewenste afbeeldingen, comprimeer de bestanden die u wel nodig hebt, sla JPEG's op als "progressief" (zodat er ten minste iets te zien is tijdens het laden) en u begint goed. Wellicht wilt u ook een Lazy Loading-plug-in installeren om een stap verder te gaan. We hebben gezien dat maar heel weinig van deze demo's prioriteit geven aan beeldoptimalisatie, maar dat betekent op zijn minst dat je hun scores kunt verbeteren.
Met betrekking tot de beruchte Pagespeed Insights-scores, heb je gemerkt dat al deze demo's (met uitzondering van één) beter scoren voor desktop dan hun mobiele versies. Dit weerspiegelt niet langer de manier waarop het web wordt gebruikt, dus om Google (en gebruikers) tevreden te houden, moet er zorgvuldig worden nagedacht over mobiele prestaties. Een mobiele eerste houding zal ook uw SEO helpen.
Hoe zou je dit kunnen doen? Het samenvoegen en verkleinen van CSS en JavaScript kan moeilijk zijn met WordPress; het gebruik van plug-ins van derden betekent dat bestanden veel kunnen zijn en dat je er zonder hulp weinig controle over hebt. Doe toch je best om essentiële "beginzicht" stijlen inline in de en maak uw website zo snel mogelijk bruikbaar door te voorkomen dat "render-blocking" -scripts het laadproces vertragen. Als de schuifregelaar boven aan uw startpagina vereist dat de hele pagina wordt geladen voordat deze wordt weergegeven, zal Google u bestraffen.
Buiten dat, overweeg je hosting. Schakel GZIP-compressie in. HTTPS doet ook geen kwaad. Gebruik ook een caching-service; installeren en configureren W3 Total Cache is kinderspel. Gebruik een CDN als uw inhoud is bedoeld voor een breed publiek. Bekijk ten slotte deze zelfstudies en cursussen voor meer informatie en hulp over het onderwerp:
