Speeding up WordPress: How We Optimized List25 Performance by 256%

Do you want to speed up your WordPress site? Want to know the WordPress optimization tricks that can help you reduce your site load time? In this article, we will show you how to speed up WordPress by sharing how we optimized our List25 site… Read More »

To leave a comment please visit Speeding up WordPress: How We Optimized List25 Performance by 256% on WPBeginner.

Do you want to speed up your WordPress site? Want to know the WordPress optimization tricks that can help you reduce your site load time? In this article, we will show you how to speed up WordPress by sharing how we optimized our List25 site to boost performance.

You have probably heard WordPress speed is important for SEO. A faster site has better user engagement, more pageviews, and better sales. In a strangeloop case study, they found that a one-second delay can cost you 7% of sales, 11% fewer pageviews, and 16% decrease in customer satisfaction.

Strangeloop Speed Case Study

So how do you actually speed up WordPress?

Well, instead of just sharing a list of speed tips, we decided to do a full case-study to show you the results from our List25 site along with how we accomplished it all.

Overview

List25 is an entertainment blog started by our founder Syed Balkhi. The site has over 1.5 million subscribers, and the YouTube channel has over quarter BILLION views.

The content on the site is mostly images and videos which takes up terabytes of bandwidth, so overall speed optimization was crucial for us to keep the costs down, reduce page abandonment and improve time on site.

Before we started the optimization, our homepage took 2.21 seconds to load according to Pingdom. After we were done, our page load time dropped to 1.21 seconds (~45% faster).

During this optimization, we were able to speed up our server response time, improve our page speed performance score, reduce the number of total request, and improve the overall load time.

Let’s take a look at the optimization techniques that helped us speed up our WordPress site.

WordPress Hosting

Having a good web host is crucial for your website speed. As our site became more popular, we simply outgrew our previous hosting company (HostGator).

Their servers simply couldn’t handle a site of this size because List25 receives tens of millions of pageviews. HostGator is great for smaller sites, but not for something of this magnitude.

We looked at various managed WordPress hosting options, and eventually ended up using SiteGround for hosting List25 because they offered the best overall value for this site.

You can see the improvement in our server response time immediately. We went from max 442ms to 172ms response time. That’s a 256% improvement.

List25 Server Response Time After Switching to SiteGround

Siteground has built performance boosters for specific platforms like WordPress, Joomla, and Magento. Based on the platform of your site, they specially optimize your servers which results in a better overall performance.

We wrote an article about when you should switch your web hosting which talks about the 7 key indicators.

If you are looking to switch hosts, then definitely give SiteGround a try. WPBeginner users get an exclusive 60% discount on hosting + free domain.

Caching Plugin

When it comes to speeding up WordPress, caching is the second most important factor after your web hosting.

Normally when a visitor comes to your WordPress site, your server passes the PHP request to the MySQL Database which finds the page that is being requested, generates it on the fly, and show it to the visitor. This takes up a lot of resources. When you have caching, it saves time and resources.

The diagram below highlights the process. In layman terms, think of caching as creating a desktop shortcut which helps you get to the file faster.

What is Page Cache?

For List25 site, we are using the SiteGround SuperCacher, a plugin they specially built for their customers. On top of that, they added advanced dynamic caching options using Varnish (part of their performance booster).

If you are not on Siteground, then don’t worry. You can setup cache on your WordPress site by using one of the many available solutions like W3 Total Cache or WP Super Cache.

At WPBeginner, we are using W3 Total Cache which provides a number of page caching options, database caching and object caching.

As more hosting companies specialize for WordPress, we will see more custom caching solutions built. Pagely and WPEngine also offer their own built-in caching system.

CDN

Content Delivery Networks (CDN) can help you boost your website speed. We have been using MaxCDN since the beginning of List25, so this part didn’t change.

We have written a full article on what is a CDN and why you need it along with a infographic.

What is a CDN

CDN allows us to serve all CSS, Javascript and images from a Content Delivery Network. This works by determining the site visitor’s location, and serving content from a server nearest to the visitor.

If you’re not in the market for a premium CDN solution, then you can use Cloudflare.

Combining Files to Reduce HTTP Requests

As you add more plugins, often they add their own JavaScript and CSS files. Each additional file is a new HTTP request.

We combined these JavaScript and CSS files into a single file for each to reduce requests and speed up load time. You can see more details about this on how WordPress plugins affect load time.

Whilst we are now loading some small functionality that we might not need on a particular section of the site, this code is cached on the CDN, and results show that fewer requests for files provide better performance than loading several smaller JS files.

This is something you have to do on a regular basis because the plugins you use change overtime.

Image Sprites

We made use of an image sprite which combined several social and site icons into a single image:

List25 Sprite

Whenever we needed to display a particular icon, we’d use CSS to:

  1. Load the image as a background image
  2. Define the width and height of the element we need the icon for
  3. Set the background position for our image to load the necessary icon

For example, to load the sidebar’s social media icons, we use:

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; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

The background-position, width and height CSS properties helps us target the specific section of the image that we want to output:

List25 Sprite, Edited

As a result, only the first request for this image file is using bandwidth. Subsequent requests to the CDN for the image will result in the cached (typically local) version being loaded, as well as only needing to request a single image vs. 6 different social icons.

By combining JavaScript, CSS and images together, we reduced the number of requests significantly.

Code Minification

Code minification involves removing whitespace and line breaks to reduce the file size making it quicker to load when requested.

For List25, we use SCSS, a syntax-based stylesheet (Intro to Sass). This allows us to structure our CSS files across several areas of development in an easy to read layout:

List25 SCSS

We use CodeKit to then compile the SCSS files into a single CSS file. CodeKit also removes whitespaces and line breaks to ensure the file is as small as possible:

As a result, we were able to reduce our CSS file size by 28%.

Image Optimization

We optimized our images in two areas: our WordPress theme and uploaded content.

For our WordPress theme, we used CodeKit to ensure that all images were losslessly compressed. This ensures that the file sizes are as small as possible, with no loss of quality.

List25 Image Optimisation

We also educated all of our writers about the importance of saving images optimized for web. See our guide on how to save images optimized for web.

Javascript-free Social Sharing

Social sharing for List25 is really important just like any other website. However social sharing plugins can significantly slow down your site.

List25 Social Sharing Buttons

Whilst integrating these four social network’s scripts didn’t impact page load time in our tests, it visibly slowed down the web site when viewing on a mobile device. Social sharing buttons would take a few seconds to appear, despite the scripts loading asynchronously, resulting in the post content moving around as the buttons loaded into view.

To tackle this problem, we moved to an (almost) Javascript-free solution. Each of the social network’s sharing buttons are rendered by our custom WordPress Plugin, and the theme’s Javascript is only used to open the web browser window when the user clicks a button.

However, we still wanted to display the total number of shares a post had across all social networks. To do this, we produced a small custom WordPress Plugin to retrieve and cache the social share counts from each social network into the Post meta table. These counts are updated every 24 hours, ensuring time consuming queries are not constantly running.

You can either use an API like Sharre or dissect the Floating Social Bar for customization.

Using Pingdom’s RUM (Real User Monitoring), this new share plugin decreased the ‘true’ page load time from 6 seconds to just over 2 seconds. It also ensured that we reduced the number of requests made for third party scripts.

Result

We significantly improved our site speed. Load time went from 2.2 seconds to 1.22 seconds.

6

We were able to reduce our server response time significantly.

List25 Server Response Time After Switching to SiteGround

This helped reduce the time spent for downloading a page by Google bot which helped our crawl rate.

Webmaster Tools time spent crawling page

Our overall bounce rate dropped by 7% because the site was loading faster, and by switching hosts we were able to reduce server errors.

List25 Bounce Rate

As you can imagine with the lower bounce rate, time spent on site went up as well by over 30 seconds.

Conclusion

As you can see a faster loading web site can improve visitor engagement. The techniques we’ve discussed have covered a range of basic and intermediate improvements that you can implement to optimize your WordPress site. 

We hope this article helped you speed up your WordPress site. You may also want to check out our article about 20 must have WordPress plugins for 2015.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

To leave a comment please visit Speeding up WordPress: How We Optimized List25 Performance by 256% on WPBeginner.

When Should You Change Your WordPress Web Hosting (Top 7 Key Indicators)

Are you frustrated with your WordPress hosting provider? Not sure whether you should switch hosts? In this article, we will share 7 key indicators to help you know when it’s time to change your web hosting. Overcoming The Biggest Fear Most beginners are afraid to… Read More »

To leave a comment please visit When Should You Change Your WordPress Web Hosting (Top 7 Key Indicators) on WPBeginner.

Are you frustrated with your WordPress hosting provider? Not sure whether you should switch hosts? In this article, we will share 7 key indicators to help you know when it’s time to change your web hosting.

Frustrated User

Overcoming The Biggest Fear

Most beginners are afraid to switch hosts.

Why? because it requires technical knowledge to move a website without any downtime.

If you’re somewhat savvy, then you can probably follow our tutorial on how to move WordPress to a new host without any downtime. Even though it doesn’t require any code thanks to BackupBuddy, it is still scary for a lot of beginner users.

Thankfully, most good hosting companies will migrate your site for you (specially if you ask nicely).

How much would they charge? That depends on how big your site is. In most cases, it’s free. Sometimes, you may pay a small fee. But this service is definitely available even if it’s not advertised. You just have to ask.

Now that you are relieved of your biggest fear, let’s take a look at 7 reasons why you should change your web host.

1. Frequent Unexpected Downtimes

Website Downtime

Downtimes are bad for your overall reputation (SEO rankings, traffic, etc). Nobody wants to visit a site that doesn’t open half the time.

If your site is down multiple times a week, then it’s a crystal clear indication that you need to switch.

How to tell if your site is down? Since you’re not visiting your site 24/7, it’s hard to know without a monitoring service. Thankfully there are services like Pingdom available that helps you monitor your site’s uptime for free.

You can always ask the hosting support staff about downtimes that occured. If they’re not convincing, then it’s time to move.

2. Error Establishing Database Connection

Error Establishing Database Connections

If you regularly see error establishing database connection on your site, then it means that you’re outgrowing your host servers or have a bad plugin.

In either case, your host support should be able to help you. If they’re unable to help, then you should switch to someone who will help.

3. Bizarre Internal Server Errors

Internal Server Error in WordPress

Internal server error is one of the most common WordPress errors and perhaps the most frustrating one as well. The error message itself is unable to point user in the right direction to fix it.

If these internal server errors are becoming too frequent on your site, then that’s a bad sign. Find your self a WordPress hosting provider that knows how to properly configure their servers for WordPress.

4. Site Suspension

Website Suspended

Most web hosting providers reserve the right to take down your site specially if there’s illegal activity going on.

However certain hosting companies suspend accounts without notifications for silly things such as overages.

Your host should care about your website because you’re trusting them with your digital real-estate. If a hosting company suspends your site without notification, then you need to have a serious conversation with them.

If that conversation doesn’t go anywhere, then it’s time to switch to a company that cares.

Also it’s important to keep backups because some hosts will hold your data hostage.

5. Poor Customer Support Service

Poor Customer Service

You’ll never find a host with 100% great customer service record. It’s just impossible to keep everyone happy. Not to mention, only the most pissed off users leave web hosting reviews.

Having that said, good customer service is crucial when it comes to web hosting.

You need to ask yourself the following questions: Is your hosting support staff quick to respond? Are they knowledgeable and helpful?

Sometimes the hosts simply deny assisting with WordPress claiming their support policy doesn’t cover software. If you don’t get good support, then it’s time to move.

6. Slow Page Speed

Strangeloop Speed Case Study

Speed is a really important factor to optimize your site for better user experience and higher search rankings.

Usually slow sites are caused by too many requests or too many users on the server. In either case, your host should be able to help you figure out why your site is running slow.

If the issue is too many requests, then it can be fixed with some tweaking, whether it’s removing a plugin or further optimizing the server. However if the issue is too many users, then the host will ask you to upgrade your plan.

7. Your Site Has Outgrown Your Host

Out Grown

If you have been blogging for a while, then it’s possible that your site has outgrown your host. On a shared hosting platform, your site shares the server resources with many other sites hosted on the same server. While you can control and limit the resources you use by using caching + CDN, you have no control on what other sites are doing.

If your site is much busier than other sites on the same server, then you will be actually slowing down other sites. Many shared hosting providers will then start terminating your resources without any warning.

If you start having issues with slow sites or finding yourself spending more time explaining the problem to customer support, then it’s probably likely that you’ve outgrown your host.

Ready to Switch?

Chances are if you are reading this article, then you have probably considered switching your web host.

Looking for a host that can deal with all the scenarios, provide rock-solid uptime, and top-notch support?

We recommend using Siteground. We recently switched our top site, List25, to their platform.

Their servers are highly optimized to run WordPress, offers built-in caching, CDN support, and the support is truly best in the industry (first-hand experience).

Best of all, it won’t break your bank as they have a plan for users of all levels. WPBeginner users get exclusive 60% discount on Siteground.

If you have a bigger budget and really large site, then you should consider looking at other managed WordPress hosting providers that only host WordPress sites such as Pagely and WPEngine.

We hope this article helped clear any doubts on your mind about when is the right time to change your WordPress host.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

To leave a comment please visit When Should You Change Your WordPress Web Hosting (Top 7 Key Indicators) on WPBeginner.