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

Do you need to speed up your WordPress website? Need to know the WordPress optimization tips that may assist you to cut back your website load time? On this article, we’ll present you find out how to speed up WordPress by sharing how we optimized our Checklist25 website to spice up efficiency.

You may have most likely heard WordPress speed is essential for search engine optimization. A sooner website has higher consumer engagement, extra pageviews, and higher gross sales. In a strangeloop case research, they discovered {that a} one-second delay can price you 7% of gross sales, 11% fewer pageviews, and 16% lower in buyer satisfaction.

So how do you really speed up WordPress?

Effectively, as an alternative of simply sharing an inventory of speed ideas, we determined to do a full case-study to indicate you the outcomes from our Checklist25 website together with how we achieved all of it.

Overview

Checklist25 is an leisure weblog began by our founder Syed Balkhi. The location has over 1.5 million subscribers, and the YouTube channel has over quarter BILLION views.

The content material on the location is usually photos and movies which takes up terabytes of bandwidth, so total speed optimization was essential for us to maintain the prices down, cut back web page abandonment and enhance time on website.

Earlier than we began the optimization, our homepage took 2.21 seconds to load in response to Pingdom. After we had been achieved, our web page load time dropped to 1.21 seconds (~45% sooner).

Throughout this optimization, we had been in a position to speed up our server response time, enhance our web page speed efficiency rating, cut back the variety of complete request, and enhance the general load time.

Let’s check out the optimization methods that helped us speed up our WordPress website.

WordPress Hosting

Having a great net host is essential in your web site speed. As our website grew to become extra widespread, we merely outgrew our earlier internet hosting firm (HostGator).

Their servers merely couldn’t deal with a website of this measurement as a result of Checklist25 receives tens of thousands and thousands of pageviews. HostGator is nice for smaller websites, however not for one thing of this magnitude.

We checked out numerous managed WordPress internet hosting choices, and ultimately ended up utilizing SiteGround for internet hosting Checklist25 as a result of they provided the perfect total worth for this website.

You may see the advance in our server response time instantly. We went from max 442ms to 172ms response time. That’s a 256% enchancment.

Siteground has constructed efficiency boosters for particular platforms like WordPress, Joomla, and Magento. Based mostly on the platform of your website, they specifically optimize your servers which ends up in a greater total efficiency.

We wrote an article about when it’s best to swap your webhosting which talks in regards to the 7 key indicators.

Caching Plugin

In the case of rushing up WordPress, caching is the second most essential issue after your webhosting.

Usually when a customer involves your WordPress website, your server passes the PHP request to the MySQL Database which finds the web page that’s being requested, generates it on the fly, and present it to the customer. This takes up a number of assets. When you’ve gotten caching, it saves time and assets.

The diagram beneath highlights the method. In layman phrases, consider caching as making a desktop shortcut which helps you get to the file sooner.

For Checklist25 website, we’re utilizing the SiteGround SuperCacher, a plugin they specifically constructed for his or her prospects. On high of that, they added superior dynamic caching choices utilizing Varnish (a part of their efficiency booster).

In case you are not on Siteground, then don’t fear. You may setup cache in your WordPress website through the use of one of many many out there options like W3 Complete Cache or WP Tremendous Cache.

At GyanHiGyann, we’re utilizing W3 Complete Cache which gives quite a few web page caching choices, database caching and object caching.

As extra internet hosting corporations specialize for WordPress, we’ll see extra customized caching options constructed. Pagely and WPEngine additionally provide their very own built-in caching system.

CDN

Content material Supply Networks (CDN) might help you enhance your web site speed. We have now been utilizing MaxCDN because the starting of Checklist25, so this half didn’t change.

We have now written a full article on what’s a CDN and why you want it together with a infographic.

CDN permits us to serve all CSS, Javascript and pictures from a Content material Supply Community. This works by figuring out the location customer’s location, and serving content material from a server nearest to the customer.

If you happen to’re not available in the market for a premium CDN answer, then you should utilize Cloudflare.

Combining Information to Cut back HTTP Requests

As you add extra plugins, usually they add their very own JavaScript and CSS recordsdata. Every further file is a brand new HTTP request.

We mixed these JavaScript and CSS recordsdata right into a single file for every to cut back requests and speed up load time. You may see extra particulars about this on how WordPress plugins have an effect on load time.

While we are actually loading some small performance that we’d not want on a specific part of the location, this code is cached on the CDN, and outcomes present that fewer requests for recordsdata present higher efficiency than loading a number of smaller JS recordsdata.

That is one thing it’s a must to do frequently as a result of the plugins you utilize change time beyond regulation.

Picture Sprites

We made use of a picture sprite which mixed a number of social and website icons right into a single picture:

Each time we would have liked to show a specific icon, we’d use CSS to:

  1. Load the picture as a background picture
  2. Outline the width and top of the component we’d like the icon for
  3. Set the background place for our picture to load the required icon

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

1
2
3
4
5
6
7
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-positionwidth and top CSS properties helps us goal the particular part of the picture that we need to output:

Consequently, solely the primary request for this picture file is utilizing bandwidth. Subsequent requests to the CDN for the picture will consequence within the cached (usually native) model being loaded, in addition to solely needing to request a single picture vs. 6 completely different social icons.

By combining JavaScript, CSS and pictures collectively, we lowered the variety of requests considerably.

Code Minification

Code minification includes eradicating whitespace and line breaks to cut back the file measurement making it faster to load when requested.

For Checklist25, we use SCSS, a syntax-based stylesheet (Intro to Sass). This enables us to construction our CSS recordsdata throughout a number of areas of improvement in a simple to learn format:

We use CodeKit to then compile the SCSS recordsdata right into a single CSS file. CodeKit additionally removes whitespaces and line breaks to make sure the file is as small as potential:

Consequently, we had been in a position to cut back our CSS file measurement by 28%.

You May Also Like : 12 Most Useful WordPress Custom Post Types Tutorials

Picture Optimization

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

For our WordPress theme, we used CodeKit to make sure that all photos had been losslessly compressed. This ensures that the file sizes are as small as potential, with no lack of high quality.

We additionally educated all of our writers in regards to the significance of saving photos optimized for net. See our information on find out how to save photos optimized for net.

Javascript-free Social Sharing

Social sharing for Checklist25 is basically essential identical to every other web site. Nevertheless social sharing plugins can considerably decelerate your website.

While integrating these 4 social community’s scripts didn’t impression web page load time in our assessments, it visibly slowed down the site when viewing on a cellular system. Social sharing buttons would take a number of seconds to look, regardless of the scripts loading asynchronously, ensuing within the publish content material transferring round because the buttons loaded into view.

To deal with this downside, we moved to an (nearly) Javascript-free answer. Every of the social community’s sharing buttons are rendered by our customized WordPress Plugin, and the theme’s Javascript is barely used to open the net browser window when the consumer clicks a button.

Nevertheless, we nonetheless needed to show the full variety of shares a publish had throughout all social networks. To do that, we produced a small customized WordPress Plugin to retrieve and cache the social share counts from every social community into the Submit meta desk. These counts are up to date each 24 hours, guaranteeing time consuming queries aren’t continually working.

You may both use an API like Sharre or dissect the Floating Social Bar for personalisation.

Utilizing Pingdom’s RUM (Actual Consumer Monitoring), this new share plugin decreased the ‘true’ web page load time from 6 seconds to only over 2 seconds. It additionally ensured that we lowered the variety of requests made for third social gathering scripts.

Outcome

We considerably improved our website speed. Load time went from 2.2 seconds to 1.22 seconds.

We had been in a position to cut back our server response time considerably.

This helped cut back the time spent for downloading a web page by Google bot which helped our crawl price.

Our total bounce price dropped by 7% as a result of the location was loading sooner, and by switching hosts we had been in a position to cut back server errors.

As you possibly can think about with the decrease bounce price, time spent on website went up as nicely by over 30 seconds.

Conclusion

As you possibly can see a sooner loading site can enhance customer engagement. The methods we’ve mentioned have coated a spread of fundamental and intermediate enhancements which you can implement to optimize your WordPress website.

We hope this text helped you speed up your WordPress website. You may additionally need to try our article about 20 should have WordPress plugins for 2015.

If you liked this article, make sure to hit the bell for getting our latest updates and share this article with your friends in every social media platforms.

1 thought on “Speed up WordPress: How We Optimized List25 Performance by 256%”

  1. Pingback: Ultimate Guide to Using MailChimp and WordPress

Leave a Comment

Your email address will not be published. Required fields are marked *