www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

Performance Test: The Best Selling WordPress Themes on ThemeForest

Performance is one of the most important aspects of any website, but it’s something people rarely seem to take into account when buying WordPress themes. In this roundup we’ll take the ten best selling themes on Themeforest, in order of appearance, run them through some basic performance tests, and rank them top to bottom.

The Chosen Themes

ThemeForest’s list of best selling WordPress themes is updated weekly, but you’ll often seen familiar players holding the top spots for some time. We’ve taken the top ten (seen below) and pitted them against each other with some common performance tests.

2017s Best Selling WordPress Themes - updated weekly
Best Selling WordPress Themes – updated weekly

The Tests

There are many tools available for testing websites, we’ve chosen some classics: Google Pagespeed Insights, Webpagetest.org, Pingdom, and Chrome dev tools. Most will give feedback about how fast a web page loads, its overall weight, how efficiently its assets are piped over, ultimately giving some kind of score. We ran a demo of each theme through these tools and collated the figures (see table at the end of the post).

In addition to these tests we used the Accessibility Audit plugin for Chrome dev tools. This isn’t connected to performance as such, but the results always give an insight as to how a theme is built.

Some things to note:

  • These demos are all hosted by the individual theme authors. Hosting specs are not all equal.
  • A random demo was chosen where multiple options were available. WooCommerce, BuddyPress, or any other platform plugins were avoided where possible. No overtly image-biased themes (such as photography portfolios) were used either.
  • All URLs were tested from California, where possible.
  • Precise results may vary day to day.
  • Theme demos are often built to make a visual impact, filled with high quality imagery and as much functionality as possible. This means that demos are rarely an accurate reflection of how a resultant website might look and behave. It’s probable that, with your own copy, you would better the performance scores of all these demos.

Avada

Creative demo
Avada: Creative demo
  • Pagespeed insights mobile: 46%
  • Pagespeed insights desktop: 48%
  • Webpagetest.org: Straight A’s, except for a big fat F on image compression. AAAFA☑
  • Pingdom: 91% (A grade)
  • Pingdom load speed: 1.94 s
  • Chrome dev tools page weight: 2.8Mb
  • Accessibility audit: 94% score (excellent). ARIA attributes follow best practices, elements are well structured, meta tags used properly.

Heavy images are a huge contributor to the low pagespeed insights score; 77.2 % of the page weight being attributed to images. Files such as avada-creative-home1.jpg could have been reduced from 344.6 KB to ~40 KB without much effort. Certainly fair to say that, with common sense, your own install of Avada could be made much lighter and faster. Good to see that Avada is built with accessibility in mind.

The7

The7 Construction demo
The7: Construction demo
  • Pagespeed insights mobile: 64%
  • Pagespeed insights desktop: 91%
  • Webpagetest.org: A’s across the board. AAAAA☑
  • Pingdom: 68% (D grade )
  • Pingdom load speed: 1.51 s
  • Chrome dev tools page weight: 1.3Mb
  • Accessibility audit: 83% score (not bad). Some image elements are missing alt attributes, color contrast ratio could be better on some of the text (relative to its background). But on the whole, elements are well structured and accessibility is solid.

Generally speaking this demo loads quite quickly; its images and assets aren’t too heavy, and the page is useable relatively soon upon load. Yet its Pingdom grade isn’t optimal. Improvements could be made by combining some of the JavaScript, likewise the CSS, whilst caching could be made easier by not forcing version numbers on filenames (eg: /assets/css/settings.css?ver=5.4.5.2).

BeTheme

BeTheme 3D demo
BeTheme: 3D demo
  • Pagespeed insights mobile: 76%
  • Pagespeed insights desktop: 87%
  • Webpagetest.org: Straight A’s AAAAA☑
  • Pingdom: 98 (A grade)
  • Pingdom load speed: 1.27 s
  • Chrome dev tools page weight: 1.8Mb
  • Accessibility audit: 80% Falls short on contrast ratios (this is quite a dark, broody theme), and its imperfect use of ARIA roles.

This theme loads very quickly. Lots of its visible content is prioritized by including essential styles inline in the head, and much of what’s loaded in is minified and concatenated. As is often the case, images account for the lion’s share of the page weight (69.5%), so it wouldn’t be difficult to get this demo’s homepage under the golden 1Mb threshold.

Impreza

Impreza Restaurant demo
Impreza: Restaurant demo
  • Pagespeed insights mobile: 63%
  • Pagespeed insights desktop: 68% 
  • Webpagetest.org: FAABF☒
  • Pingdom: 80% (B grade)
  • Pingdom load speed: 2.34 s
  • Chrome dev tools page weight: 2.5Mb
  • Accessibility audit: 94% (excellent). Properly used attributes on elements, including ARIA roles. Discernable element names and well described content.

Whilst the load speed of Impreza’s restaurant demo isn’t bad, its performance scores are hindered by over 2Mb of images. Also of note are the lack of CDN and the poor server response time; two aspects which are specific to the hosting of this demo and ones which you can easily improve. 

Enfold

Enfold Gym demo
Enfold: Gym demo
  • Pagespeed insights mobile: 60%
  • Pagespeed insights desktop: 60%
  • Webpagetest.org: AAADB☒
  • Pingdom: 70% (C grade)
  • Pingdom load speed: 2.79 s
  • Chrome dev tools page weight: 5.2Mb
  • Accessibility audit: 89% One of the higher-scoring theme demos for accessibility, showing an underlying strength in its build quality.

Again, no CDN used for hosting of this demo, which loses it a few points on webpagetest.org. A lack of HTTPS might also have earned Enfold a black mark. As usual, this demo falls into the trap of being as visually stunning as possible, sacrificing page weight for image quality. At over 5Mb this is the heavyweight of the bunch, but image size is always something easily remedied.

X

X Church demo
X: Church demo
  • Pagespeed insights mobile: 77%
  • Pagespeed insights desktop: 74%
  • Webpagetest.org: DFAAB☒
  • Pingdom: 87% (B grade)
  • Pingdom load speed: 2.45 s
  • Chrome dev tools page weight: 2.1Mb
  • Accessibility audit: 91% A very healthy A11y score, let down only by a lack of alt attributes on some images, low contrast ratio on some areas (this church theme is quite muted) and absence of a title attribute on an iframe. Still, given that the iframe is from a YouTube embed, which doesn’t come with a title attribute as standard, we’ll forgive that oversight.

This demo is one of the few which does a reasonable job keeping image overheads down to a minimum; webpagetest awards it a solid 97/100 for image compression. Instead, its lowly scores come largely from the hosting; no CDN, no HTTPS, poor initial response time, and a lack of “keep alive”–otherwise known as a persistant HTTP connection, something which can easily be switched on. As ever, easy improvements that you yourself could bring into effect.

Bridge

Bridge Spa demo
Bridge: Spa demo
  • Pagespeed insights mobile: 70%
  • Pagespeed insights desktop: 83%
  • Webpagetest.org: DAAAF☒
  • Pingdom: 85% (B grade)
  • Pingdom load speed: 2.12 s
  • Chrome dev tools page weight: 1.6Mb
  • Accessibility audit: 91% (very good). Small points bringing the overall score down, but ARIA attributes follow best practices, and page elements have discernable names, describe their content well, and are properly structured.

One of the lighter demos here, but image sliders are always going to crank the page weight up, even with well optimized images like these. Minifying HTML and other assets would have helped the pagespeed insights score, and improved hosting would again do wonders–better server response time, a CDN, and caching being low-hanging fruit.

Flatsome

Flatsome Go Explore demo
Flatsome: Go Explore demo
  • Pagespeed insights mobile: 53%
  • Pagespeed insights desktop: 57%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 96% (A grade)
  • Pingdom load speed: 1.02 s
  • Chrome dev tools page weight: 3.7Mb
  • Accessibility audit: 83% Points lost on the A11y front by failing to name buttons correctly (the WooCommerce wishlist icon buttons can’t be read properly by screenreaders) and some links are equally vague. Low contrast on some elements and duplicated element IDs are also easy fixes.

Not seen through favorable eyes by Pagespeed Insights, though the other scoring metrics absolutely love Flatsome! Good hosting serves the page efficiently (theme authors take note), assets are minimized, and lazy loading images help what would otherwise be a mid-weight page load progressively.

Jupiter

Jupiter Bellona template
Jupiter: Bellona template
  • Pagespeed insights mobile: 38%
  • Pagespeed insights desktop: 44%
  • Webpagetest.org: AAAFA☑
  • Pingdom: 92% (A grade)
  • Pingdom load speed: 1.07 s
  • Chrome dev tools page weight: 3.3Mb
  • Accessibility audit: 91% (very good). Owing to the impactful nature of the graphics (which I love, by the way), text upon some of the images makes for weak contrast ratios. The page structure and descriptive use of elements, along with proper ARIA usage all make up for the contrast shortcomings.

I’m going to sound like a broken record here, but five minutes of image optimization would vastly reduce the overheads on this demo. home-bg-08.jpg alone weighs in at nearly a whole megabyte; running it through TinyPNG shaves off 87% straight away. Why wouldn’t you? As Pingdom and Webpagetest suggest, most other performance aspects are very good.

Newspaper

Newspaper Tech news
Newspaper: Tech news
  • Pagespeed insights mobile: 76%
  • Pagespeed insights desktop: 77%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 93% (A grade)
  • Pingdom load speed: 1.19 s
  • Chrome dev tools page weight: 1.5Mb
  • Accessibility audit: 86% A good score–could be improved by properly describing links and buttons which are actually used for JavaScript controls, toggles and the like.

Great scores across the board, standard improvements apply (image optimization, JS and CSS compression/concatenation) but bear in mind that this demo also comes furnished with a large pull-out promoting other versions of the theme (added complication which your own version would be unlikely to need). Without much effort this demo could step into the sub-1Mb weight class.

Table of Results

Bearing in mind all the caveats we’ve listed along the way, this table puts the themes in some kind of order. Pingdom’s rating serves as a fairly round score to base things on; you’ll see that page weight, load speed, and even Pagespeed Insights scores fall into a similar pattern (to a degree).

Pagespeed Insights (average) Pingdom Load Speed Page Weight
BeTheme 81.5% 98% 1.27 s 1.8Mb
Flatsome 55% 96% 1.02 s 3.7Mb
Newspaper 76.5% 93% 1.19 s 1.5Mb
Jupiter 41% 92% 1.07 s 3.3Mb
Avada 46.5% 91% 1.94 s 2.8Mb
X 75.5% 87% 2.45 s 2.1Mb
Bridge 76.5% 85% 2.12 s 1.6Mb
Impreza 65.5% 80% 2.34 s 2.5Mb
Enfold 60% 70% 2.79 s 5.2Mb
The7 78% 68% 1.51 s 1.3Mb

How to Make Your WordPress Themes Faster

Having purchased a WordPress theme, how could you optimize it?

It won’t surprise you: an easy first port of call when optimizing your website is your images. Remove unwanted images, compress those you do need, save JPEGs as “progressive” (so that there’s at least something to see while they’re loading) and you’ll be off to a good start. You may also want to install a Lazy Loading plugin to take things a step further. We’ve seen that very few of these demos prioritize image optimization, but that at least means you’ll be able to improve on their scores.

Regarding the notoriously fickle Pagespeed Insights scores, you’ll have noticed that all these demos (with the exception of one) score better for desktop than their mobile versions. This no longer reflects the way the web is used, so to keep Google (and users) happy give careful consideration to mobile performance. A mobile first attitude will also help your SEO.

How might you do this? Concatenating and minifying CSS and JavaScript can be difficult with WordPress; using third party plugins mean that files can be many and you won’t have much control over them without help. Still, do your best to include vital “initial view” styles inline in the <head> and make your website usable as quickly as possible by preventing “render-blocking” scripts from slowing down the load process. If the slider at the top of your homepage requires the whole page to be loaded before it shows up, Google will penalize you.

Beyond that, consider your hosting. Enable GZIP compression. HTTPS won’t do any harm either. Use a caching service too; installing and configuring W3 Total Cache is child’s play. Use a CDN if your content is intended for a wide audience. Lastly, take a look at these tutorials and courses for more details and help on the subject:

WordPress Performance Resources