Key Takeaways
- Performance of a WordPress theme is affected by the number of HTTP requests, the size of downloaded assets, and the efficiency of the page. Reducing these factors can significantly improve the performance of your WordPress theme.
- Quick wins to improve WordPress performance include contacting your web host for advice, activating GZIP compression, enabling WordPress and browser caching, disabling unused plugins, removing unnecessary assets, and replacing social network buttons.
- Images are a major cause of website bloat. Optimizing images by removing or replacing unnecessary ones, using the correct format, resizing large bitmap images, maximizing image compression, and implementing lazy loading can significantly reduce page weight and improve performance.
- More radical solutions for improving WordPress performance include adopting a build process, considering Progressive Web App techniques, avoiding third-party code, assessing WordPress themes carefully, simplifying your site, and changing your development lifestyle to consider performance from the start.
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
What Factors Affect Performance?
Performance is affected by:- the number of HTTP requests
- the size of downloaded assets
- the efficiency of the page
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: 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.
- 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 theimg
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.
Frequently Asked Questions about Improving WordPress Theme Performance
How can I optimize my WordPress theme for better performance?
Optimizing your WordPress theme for better performance involves several steps. First, choose a lightweight theme that is designed for speed. Avoid themes that are loaded with features you don’t need, as these can slow down your site. Second, use a good caching plugin. This will store a version of your site on the server and serve it to visitors, reducing the amount of work the server has to do. Third, optimize your images. Large, high-resolution images can slow down your site, so use an image optimization plugin to reduce their size without losing quality.
What are some common issues that can slow down my WordPress site?
There are several common issues that can slow down your WordPress site. These include a slow hosting provider, not using a content delivery network (CDN), too many plugins, large images, and not using a caching plugin. It’s important to regularly monitor your site’s performance and address any issues that arise.
How can I choose a fast WordPress theme?
When choosing a WordPress theme, look for one that is lightweight and designed for speed. Avoid themes that come with lots of features you don’t need, as these can slow down your site. Also, check the theme’s ratings and reviews to see if other users have had issues with its speed.
How can a CDN improve my WordPress site’s performance?
A CDN, or content delivery network, can greatly improve your WordPress site’s performance. It works by storing a copy of your site on servers around the world. When a user visits your site, the CDN delivers the content from the server closest to them, reducing the time it takes for the content to load.
How can I optimize images on my WordPress site?
You can optimize images on your WordPress site by using an image optimization plugin. These plugins reduce the size of your images without losing quality, which can significantly improve your site’s load times. You can also manually optimize images before uploading them by reducing their resolution or compressing them.
How can too many plugins affect my WordPress site’s performance?
While plugins can add useful features to your WordPress site, having too many can slow it down. Each plugin adds some amount of code that your site has to load, which can increase load times. It’s important to only use plugins that you really need and to regularly review and remove any that are no longer necessary.
How can I monitor my WordPress site’s performance?
There are several tools you can use to monitor your WordPress site’s performance. These include Google PageSpeed Insights, GTmetrix, and Pingdom. These tools can provide valuable insights into how your site is performing and identify any issues that need to be addressed.
How can a slow hosting provider affect my WordPress site’s performance?
Your hosting provider plays a crucial role in your WordPress site’s performance. If your hosting provider’s servers are slow, your site will be slow as well. It’s important to choose a hosting provider that offers fast, reliable service.
How can I reduce the number of HTTP requests on my WordPress site?
Reducing the number of HTTP requests on your WordPress site can improve its load times. This can be done by combining CSS and JavaScript files, using sprite images, and reducing the number of posts shown on a page.
How can I use browser caching to improve my WordPress site’s performance?
Browser caching can significantly improve your WordPress site’s performance by storing a version of your site in the user’s browser. This means that when the user revisits your site, it will load faster because the browser doesn’t have to download all of the content again. You can enable browser caching by using a caching plugin or by adding code to your .htaccess file.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.