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.
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 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 with companies such as SiteGround will be reasonable but heavyweight sites use more resources and cost more than slimmer alternatives.
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:
- the number of HTTP requests
- the size of downloaded assets
- the efficiency of the page
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.
Finally, server speed, compression and caching are other important considerations.
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:
Your browser’s Developer Tools network tab also provides information about layout and the time required before the page is ready to user events.
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
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
Remove Unnecessary Assets
Have a clear out and remove anything you don’t need.
Replace Social Network Buttons
(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
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.
- 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
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.
- 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!