How to Improve the Performance of Your WordPress Theme

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

Average page weight reached 2,884kb in May 2017. Research by Google DoubleClick reported an average load time of 19 seconds on mobile devices. Yet performance matters more than ever: User Frustration Users will not wait. According to research by the Aberdeen Group, every one second delay results in:

• 11% fewer page views
• a 16% decrease in user satisfaction
• a 7% drop in conversions

Mobile Mobile access accounts for 55% of all web traffic. Device and bandwidth capabilities improve but not at the rate page weight is growing. Users are often charged per byte. Search Engine Ranking Google penalizes slow, heavyweight sites. Hosting Costs Hosting with companies such as SiteGround will be reasonable but heavyweight sites use more resources and cost more than slimmer alternatives. Maintenance The more assets your site requires, the more costly it is to maintain. Ultimately, a slow site costs you and your users money. Remind your boss of this simple fact the next time they demand a frivolous feature! Ideally, you should consider performance before the first line of code is written. However, you’re probably reading this article because you have a theme exhibiting performance issues. Fortunately, there are some cost-effective options to address the problem and there’s no downside. Every millisecond saved reduces your costs while increasing user satisfaction, engagement and revenue.

What Factors Affect Performance?

Performance is affected by:

1. the number of HTTP requests
2. the size of downloaded assets
3. the efficiency of the page

The number of HTTP requests is determined by the number of files and Ajax calls required to make your page work: the HTML, CSS, JavaScript, images, fonts, data, and all other assets. HTTP/2 addresses this issue but both your server and the user’s browser must be configured to enable support. Even with HTTP/2, twenty file requests remains less effective than ten. The main factor is the size of each file. To put this into context, 2,884kb is 20% larger than the original version of id Software’s Doom. Admittedly, we’re comparing modern web pages against a 25 year-old game but most pages show a few paragraphs of content while Doom implements a 3D engine, multiple levels, graphics, music and sound effects. Even a relatively lightweight page can be inefficient. For example, if your three-page website has a 500kb JavaScript framework dependency, that code must be downloaded, parsed and executed before the first character can be seen. A server-rendered HTML file will start to appear before it’s fully loaded — even if the assets total more than 500kb. Finally, server speed, compression and caching are other important considerations.

Measuring Performance

It’s important to measure performance to identify the bottlenecks and ensure that your updates have improved the page. The following tools provide a breakdown of request and response times with update suggestions:

• Pingdom
• Google Page Speed Insights
• GTmetrix
• WebPageTest

Your browser’s Developer Tools network tab also provides information about layout and the time required before the page is ready to user events.

Quick Wins

The following updates should take no longer than a few minutes — you have no excuses!

Contact Your Web Host

A good web host will analyse your usage and advise about service, hardware, and software upgrades. This can provide a cost-effective performance boost with minimal effort. Our partner SiteGround has a proactive and knowledgeable support team of WordPress experts who will be happy to help you with this. SiteGround provides a range of WordPress-specific plans, with up to 65% off for SitePoint users.

Activate GZIP Compression

Almost 30% of sites fail to activate GZIP compression. This can normally be enabled in the web server settings or WordPress plugins such as WP HTTP Compression and W3 Total Cache.

Activate WordPress Caching

Several WordPress plugins are available which render pages and store them in a cache on their first request. Subsequent requests fetch these pages from the cache rather than regenerating the database content within the template. Caching plugins include W3 Total Cache, WP Super Cache, Hyper Cache, WP Fastest Cache and Cache Enabler.

Your hosting provider may be able to enable caching for you. Our partner, SiteGround, has a bespoke caching tool that can drastically boost website speed.

Enable Browser Caching

The user won’t necessarily need to download an asset again if it’s cached by the browser. Simple solutions include setting an appropriate Expires header, Last-Modified date or adopting ETags in the HTTP header. The following .htaccess example asks browsers to cache images for one month:

<IfModule mod_expires.c>
ExpiresActive On

<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>

</IfModule>

Disable Unused Plugins

Most plugins will add code to your website such as additional CSS or JavaScript even if you’re not using it. WordPress administrators can disable plugins from the WordPress control panel or remove the plugin code entirely if they’re certain it’ll never be used.

Remove Unnecessary Assets

Does your template really need fifteen fonts? Have you added seven analytics systems? Is that third-party widget necessary? Is it necessary to show advertising from fifty ad networks? Do you need more than one JavaScript library? Could you replace JavaScript animations with CSS3 effects? Have a clear out and remove anything you don’t need.

Replace Social Network Buttons

Do you have Facebook, Twitter, Google+ and LinkedIn sharing buttons on your pages? Despite their innocent look, they can add several hundred kb of third-party JavaScript to your page. It’s a bloated security risk which have a negative affect on performance. Third-party code is unnecessary — you can add fat-free social buttons to your pages with a few lines of HTML. A little JavaScript can enhance the experience to use pop-up windows or record usage with event tracking in Google Analytics.

Concatenate and Minify JavaScript and CSS

It’s practical to split JavaScript and CSS files into self-contained modules during development. However, these should be concatenated and minified to remove comments and whitespace before hosting a single file on your production server. (Note your WordPress style.css file must retain the theme’s details at the top or it will break!)

Address Your Images

Images are the biggest cause of website bloat. Removing a single 500kb high-resolution image could reduce weight and download times by 25% or more.

Remove or Replace Unnecessary Images

I’m sure that hero image is lovely and on-brand but is it losing you customers? It may be possible to replace all or part of it with CSS3 gradients, borders, filters or other effects.

Use the Correct Image Format

Always use an appropriate image format. In general:

• use SVG for vector logos and diagrams
• use JPG for photographs
• use PNG for everything else
• but consider GIF for smaller, limited-color images or those with animations.

There are alternative formats such as WebP but browser support is limited. If in doubt, try all the appropriate options and pick the best. But note:

• JPG is a lossy format which removes details at higher compression. Find the best compromise between quality and file size for each image.
• PNG offers 256 and 24-bit color varieties. The 256 color version normally results in a smaller file.
• Both PNG and GIF offer transparency. Switch that off where possible to save further bytes.

Resize Large Bitmap Images

A basic camera or phone captures an image which is too large to display on any device. WordPress provides resizing options but, for best results, editors should crop and resize before upload. Image dimensions should never exceed the maximum size of their container. Those using high-density/Retina displays may appreciate a higher resolution image but you can serve alternatives using the img tag srcset attribute. Resizing images has a significant impact on page weight. Shrinking dimensions by 50% reduces the total area by 75% which improves the file size accordingly.

Maximize Image Compression

You can radically reduce the size of a bitmap image by removing meta data, reducing color depth and tweaking compression factors. WordPress plugins such as WP Smush, EWWW Image Optimizer, Imagify, Kraken Image Optimizer, ShortPixel Image Optimizer and CW Image Optimizer can handle this process for you. For best results, images should be processed prior to upload. Software options include OptiPNG, PNGOUT, jpegtran and jpegoptim. Windows users can try the fabulous RIOT. Alternatively, there are online tools such as TinyPNG / TinyJPG. SVG images can be compressed by rounding values to fewer decimal places, simplifying paths, and removing unnecessary comments, attributes and white space from the XML. Your SVG editor should have options to compress the file or there are tools such as SVG editor and SVGO. You may also be able to move styling directives to CSS.

Implement Lazy Loading

Finally, lazy loading techniques ensure images are only downloaded when their containing box is visible in the viewport. WordPress plugins to implement lazy loading include Lazy Load, jQuery Image Lazy Load WP, BJ Lazy Load, Rocket Lazy Load, Unveil Lazy Load and Lazy Load for Videos. Other resources:

• Five Techniques to Lazy Load Images for Website Performance
• How to Build Your Own Progressive Image Loader

More Radical Solutions

If your theme is still overweight, you can consider more drastic dieting options…

Adopt a Build Process

A build process can automatically optimize images and concatenate and minify CSS and JavaScript files. You can adopt a Gulp build process for your WordPress theme which can save hours of effort, increase page performance and make development more fun.

Consider Progressive Web App Techniques

Progressive Web App technologies allow a web application to work offline by caching essential and regularly-used assets. While this is typically used for applications, it’s possible to retrofit your website as a Progressive Web App and enjoy the benefits of fast loading and offline operation.

Avoid Third-Party Code

Would you grant an unknown developer unrestricted access to your site’s code? No? Then why trust third-party widgets such as social media sharing buttons and discussion forums? While it’s rare for these widgets to compromise security, you should check which hidden resources they’re loading and assess the impact on performance.

Assess WordPress Themes Carefully

Free and commercial WordPress themes can make financial sense. Why employ a developer when an off-the-shelf theme does everything you need for a few dollars? But beware of hidden costs. Generic templates must sell thousands of copies to recoup the development effort. To attract buyers, developers bundle numerous features you may never need. Check one: does the theme look good? Check two: does the theme perform well on a variety of devices and networks. See also: 10 Features to Look for in a Premium WordPress Theme.

Simplify Your Site

There is a trend toward simpler, more streamlined, customer-focused web experiences. This can be tougher than it sounds but the old days of throwing every conceivable feature at all users are over. Whether you can convince your boss/client is another matter!

Change Your Development Lifestyle

Who is responsible for web pages reaching 2.8Mb? We are. It doesn’t matter how or why a website became bloated — the developers let it happen. Rapid development and cost-cutting remains important but the whole process is futile when it results in a slow, clunky site no one wants to use. Your client/boss may not understand the technical issues but you should explain the consequences. Consider performance from the start. Like content, SEO, usability and accessibility, performance should never be an after-thought! Creating a fast WordPress theme is hard but “adding” performance later is considerably more difficult and expensive. Further suggestions:

• It’s easy to forget about bandwidth when you’re developing on a fast 200Mbps connection. Limit connectivity or try loading your site in an area with poor reception. If you’re frustrated, so are your users!
• Consider page weight and question every asset added to your theme. Consider a “scoring” policy, e.g. if you’re going to add a 20kb font, you must save 20kb from elsewhere.

Badly-performing web sites have become an epidemic but it’s evident few developers are concerned. Those that care will be rewarded with more visitors, higher conversions and higher salaries!

Frequently Asked Questions about Improving WordPress Theme Performance