How We Reduced List25‘s Load Time by 45% (WordPress Speed Optimization Case Study)
Does your WordPress site take forever to load? Slow page speed can hurt your search engine rankings, turn off visitors, and negatively impact your bottom line. But by implementing a few key optimizations, you can drastically reduce your load times and reap the benefits of a faster site.
In this post, we‘ll share a detailed case study of how we sped up List25.com, an entertainment news site with over 1.5 million subscribers. Using the tactics outlined here, we were able to slash the site‘s load time by nearly half and achieve a 256% improvement in server response time.
The Importance of WordPress Site Speed
Before we dive into the case study details, let‘s discuss why you should care about your WordPress site‘s speed in the first place:
Improved search engine rankings: Google has stated that page speed is a ranking factor for both desktop and mobile searches. All else equal, faster sites tend to rank higher in search results.
Better user experience: Visitors expect pages to load quickly. If your site is slow, users are more likely to get frustrated and bounce, leading to decreased pageviews and engagement.
Increased conversions and sales: Faster pages lead to higher conversion rates for forms and sales. Just a 1 second delay can result in 7% fewer conversions according to one study. For ecommerce sites, that directly impacts your revenue.
Simply put, a fast site will make both your users and the search engines happier, leading to more traffic and sales for your business.
List25 Case Study Overview
To show the impact of WordPress speed optimization, we‘ll use our work with List25 as a case study. List25 is an extremely popular site, but its performance was being dragged down by a combination of issues prior to our work.
Here‘s an overview of the site:
- Entertainment news site featuring list-style articles, images, and videos
- Over 1.5 million email subscribers
- YouTube channel with over 250 million video views
- Consistently high traffic levels, with tens of millions of pageviews per month
The sheer amount of traffic and content (particularly large images and video embeds) was causing severe slowdowns. Prior to optimization, the homepage took a sluggish 2.2 seconds to load. The situation was even worse on mobile, with the site often taking up to 6 full seconds to load.
This poor performance was leading to high bounce rates, as visitors got fed up waiting for pages to render. It was also holding back the site‘s SEO potential, as search engines were turned off by the slow speeds.
After implementing the full suite of optimizations detailed below, we were able to reduce the load time down to just 1.22 seconds – a 45% improvement. Let‘s look at each of the steps we took to achieve these results.
1. Upgrade to High-Performance WordPress Hosting
One of the biggest factors in WordPress site speed is your choice of hosting provider. Budget shared hosts are often fine for small sites, but they crumble under the load of high traffic or resource-intensive sites.
Prior to our work, List25 was hosted on a mid-tier plan from HostGator. While HostGator is a decent host for some use cases, their servers simply couldn‘t keep up with List25‘s needs.
We decided to migrate List25 to SiteGround, a host that specializes in high-performance managed WordPress hosting. SiteGround has WordPress-optimized servers and a built-in caching plugin called SuperCacher that‘s designed to make WordPress sites load lightning fast.
The performance improvement after the switch was immediate and dramatic:
- Server response times (TTFB) dropped from 1.26 seconds to just 180 milliseconds – an astounding 256% improvement
- Peak response times fell from 6.69 seconds to 229 milliseconds – a nearly 30x reduction
- Average response times decreased from 2.13 seconds to 266 milliseconds – a 13x improvement
SiteGround‘s servers were simply far better optimized for WordPress, allowing them to handle List25‘s traffic spikes and intensive queries with ease. The faster server response times alone nearly halved the total page load times.
If you‘re still using a budget shared host and suffering from poor speeds, upgrading to a reputable managed WordPress host is the single biggest change you can make for your site‘s performance.
2. Implement a Caching Plugin
Caching is an essential tool for speeding up WordPress sites. Here‘s how it works:
Normally, when a visitor accesses a page on your WordPress site, PHP has to execute various queries to assemble the page from your database, consuming valuable server resources and slowing down response times. With caching, frequently accessed pages are stored as static HTML files, reducing the need for repetitive queries.
For List25, we implemented two layers of caching to achieve maximum performance:
SiteGround SuperCacher: This proprietary plugin from SiteGround offers powerful WordPress caching. It was a natural choice since we were already using SiteGround for hosting.
Varnish: We were able to use SiteGround‘s built-in Varnish setup to implement advanced page caching on top of the SuperCacher. Varnish is an HTTP accelerator that serves cached pages lightning fast.
If your host doesn‘t offer a built-in caching setup, you can still take advantage of caching by using a plugin like WP Rocket or W3 Total Cache. Implementing page, database, and object caching can yield major improvements to WordPress performance.
3. Leverage a Content Delivery Network
A content delivery network (CDN) can further reduce page load times by distributed your site‘s static files (like images, CSS, and JavaScript) across a network of edge servers. When a visitor accesses your site, they‘re served content from the CDN server closest to their physical location, rather than from your main server.
List25 was already using MaxCDN to deliver static files prior to our speed optimization work. However, we made a few tweaks to ensure it was configured optimally.
If you‘re not already using a CDN, setting one up is fairly straightforward. In addition to paid CDN services like MaxCDN and Amazon CloudFront, there are free options like Cloudflare that can still make a meaningful impact on your load times.
4. Minimize HTTP Requests
Every time a visitor loads a page on your site, their browser has to send a separate HTTP request for each file needed to render the page (HTML, CSS, JavaScript, images, etc.). The more HTTP requests a page requires, the longer it will take to fully load.
Reducing the sheer number of HTTP requests needed is one of the most impactful ways to cut down your load times. We used a few different tactics to minimize requests on List25:
Combining CSS and JavaScript Files
By default, WordPress loads a separate CSS and JavaScript file for each plugin and theme you have activated. On a typical WP site, it‘s not unusual to have 20+ separate CSS/JS files loading on every page.
We used a minification plugin to combine all of the separate CSS files into one and all of the JS files into one, reducing dozens of HTTP requests down to just 2. While this means a bit of unnecessary code may be loaded on some pages, the reduction in requests more than makes up for it.
Implementing Image Sprites
Image sprites combine multiple small images into a single larger image file. You can then use CSS to display just a portion of the sprite image wherever the individual images are needed.
On List25, there were various small graphics (social media icons, logos, etc.) that were previously loading as separate files. We combined these into a single image sprite, dramatically reducing the number of HTTP requests needed to render the page.
To give you an idea, here‘s how loading the social media icons from a sprite works in CSS:
li.widget_social_icons ul li {
float: left; width: 36px; height: 36px;
margin: 0 10px 10px 0; padding: 0;
background: url(../images/sprite.png) no-repeat;
}
li.widget_social_icons ul li.twitter {
background-position: 0 -50px;
}
li.widget_social_icons ul li.facebook {
background-position: -36px -50px;
}Here the main sprite image is loaded as a background, then the background-position property is used to shift the sprite so that only the needed icon is displayed for each list item.
While this technique requires a bit more setup and maintenance vs. just using individual images, the payoff in reduced requests and load times is substantial.
5. Optimize Your Images
Images are typically the largest files loaded on any given webpage. Reducing their file sizes (without noticeably degrading quality) is one of the best ways to cut down page weight and improve load times.
We optimized images in two key areas for List25:
Theme Image Optimization
For the images included in List25‘s theme itself (logos, backgrounds, etc.), we used image optimization tools to cut down the file sizes as much as possible without reducing quality. Tools like ImageOptim (Mac) or FileOptimizer (Windows) are great for this – they can often shave 50%+ off an image‘s file size with no noticeable change in resolution or clarity.
Content Image Optimization
The images uploaded by List25‘s authors in their actual posts were a bit trickier, as the writers were scattered across the globe. We couldn‘t enforce image optimization at the source, so instead we used an automated WordPress image optimization plugin (Imagify) to compress images as they were uploaded to WordPress.
We also provided training to the writing team on best practices for saving images for the web (appropriate dimensions, using JPEGs over PNGs, etc.) to prevent massive files from being uploaded in the first place.
Between the automated compression and writer training, we were able to drastically reduce the image payload size across the site.
6. Streamline Social Sharing
Like most sites these days, List25 relies heavily on social shares for traffic. However, the standard way many social sharing plugins work (loading JavaScript files from the social networks) can add substantial overhead to your page speeds.
We implemented two tweaks to keep social sharing speedy on List25:
- Removed jQuery as a dependency, instead loading a lightweight, vanilla JavaScript sharing script.
- Moved share counts to an AJAX call, so the counts are loaded after the rest of the page content. This prevents the share count checks from delaying the main content from loading.
There are also plugins like Novashare that are built from the ground up for speed, if you want an out-of-the-box option. Whatever route you go, keeping an eye on the performance impact of your social sharing buttons is crucial for maintaining fast speeds.
7. The Final Results
By systematically working through the steps above, we were able to achieve dramatic improvements to List25‘s speed and performance:
- Page load times dropped 45%, from 2.2 seconds to 1.22 seconds
- Server response times decreased 256%
- The number of HTTP requests was cut by more than half
- Bounce rate fell by 7%
- Average time on site increased by over 30 seconds
Put simply, the site went from frustratingly sluggish to pleasantly snappy, leading to happier readers, better search rankings, and more revenue for the business.
Speed Up Your WordPress Site Today
As you‘ve seen with the List25 case study, putting in the work to speed up your WordPress site can pay major dividends.
While each site‘s specific needs will vary, the basic principles remain the same:
- Invest in quality, high-performance hosting
- Implement caching to reduce repetitive database queries
- Use a CDN to distribute your site‘s static files
- Minimize HTTP requests by combining files and using sprites
- Optimize your images to reduce file sizes
- Keep an eye on plugins and scripts that may slow down your social sharing and other features
By methodically working through these steps, you can slash your load times and create a faster, more enjoyable experience for your visitors. The effort is well worth it!
