Make your WordPress powered Website load with Lightning Speed

Elegant Themes The Style Theme Have you noticed how fast this website is? Just click on some pages and you’ll fell like flying through them. We’ll share with you in this article how we increased our WordPress powered website’s loading speed and and how you can do it yourself to your website. This article however does not apply only to WordPress powered websites; most advice are valid for all websites, however because in WordPress we have some simple and non-technical way to achieve it, we’ll focus on WordPress.

Having your website load faster doesn’t mean just choosing a good or a localized hosting service. There are many other factors that contribute to your website’s load time. This isn’t necessarily to your disadvantage. You’ll see that with little effort you can achieve fast loading times even on shared hosting. Let go through the steps we’ve done to make our website load faster:

Why make your Website load faster anwyay?

Maybe you’re still wondering why it’s worth going through all this or all you heard is Google is considering page load time as a ranking factor for your website or that slow loading times result in less sales. While both of these are true, you need to understand the mechanisms behind it to figure out what makes website speed so important. The part of your website’s experience affected by loading time is its usability. In more rough words said, waiting kills usability. Slower loading websites make users wait. When users wait, they don’t use your website, they’re not engaged in anything and have all the temptation to engage in something else, of course unless you’ve already captured their attention with some catchy title but that’s not what we’re discussing right now. Bottom line is this: The more seamless your website is loading the more engaged your users will be.

Check your current Website’s loading Speed

First of all, check to see how your website currently behaves in your visitors browsers. This will determine whether page load speed is a high priority issue for your website to which you’ll have to dedicate much attention to or not. To do this just making a simple test on your machine isn’t enough. Your visitors don’t have your location, your computer, your internet connection or your browser. To test this you need accurate results from several users from your target audience. Fortunately there are several tools available on the internet that give you pretty accurate results.

Google’s Webmaster Tools has a section called Site Performance where it gives you the average load time of your website and Pingdom Tools also shows you detailed information like waterfall charts and browser load times, however our personal favorite tool is Loads.in because it allows checking your website from several hosts across the globe while also giving you detailed information like waterfall charts and screenshots showing the progress of the page’s load at several times. Here’s a screenshot of Loads.in waterfall chart for onedesigns.com:

Waterfall chart for onedesigns.com

Note that the first114ms are a 301 redirect from onedesigns.com to www.onedesigns.com. 301 redirects presume additional HTTP requests and thus affect page load speed.

Based on these results you can assess the importance of this aspect on your website and decide how much you need to invest in it. Here are some preliminary conclusions we’ve come up with:

  • under 2 seconds – Little to no concern regarding site speed. Websites loading this fast should have no problem. However if you find aspects you could improve, making it perform better can never hurt.
  • between 2 and 6 seconds – Medium concern. Website probably could use some optimizing and improving after which a performance increase will be highly visible.
  • over 6 seconds – High concern. You’re probably doing something very wrong. If your website is loading this slow it’s possible you should even consider a redesign.

That being said let’s see what you could do to increase your website’s performance:

Optimize Images

Probably one of the easiest and most helpful steps to increase your website’s performance. Images can be pretty big in size and if you don’t optimize them properly they can add a huge load, sometimes up to several megabytes to your website. There are several tools to optimize images and the Save for Web and Devices feature in Photoshop is pretty good. Images can be optimized lossless if the format permits but you can also do a lossy optimization if the image is big or its details are not so important.

Also, consider serving images to scale to make them smaller in size and avoid the browser needing to redraw them. Setting the height and width attributes for images is also known for contributing to the website’s performance since it tells the browser before the image loads of the surface needed to draw it.

Reduce Number of HTTP Requests

Consider this: Every HTTP request, whether an image, a stylesheet or a script is a call to the server back and forth which adds to your loading time. While modern browsers and web servers have the ability to multitask requests and deliver them in parallel, having too many might exceed their capacity and not only make your website load slower but also the browser respond slower. Here are some things you can do to reduce the number of HTTP requests:

Combine Background Images using CSS Sprites

The traditional way of implementing background images is to have a separate image for each background or some smaller images that keeps repeating over a block. However, even if these images are small in size, each of them represent a separate HTTP request. It would be more efficient if you could concatenate all these images into a single file reducing the number of requests to 1.

Example of Sprite with Social Networks Icons

To technique to combine all these requests into one is to put all the background images in one file called a sprite and display the needed image using background-position. Here’s an example:

This declaration will show the element located 64 pixels from the left edge of the image and 256 pixels from the top of it.

Concatenate Scripts and Stylesheets

If your website has several scripts and stylesheets each of them means a separate HTTP request. However, if all scripts and all stylesheets are placed in one file they would perform the same, but would reduce the number of HTTP requests to 2. In WordPress, the plugin W3 Total Cache can do this automatically for you.

Ditch useless Design Elements

If your design features elements like seamless background patterns consider removing them entirely. Either replace them with a CSS3 technique if possible or give them up. Repeating background patterns are difficult to render using CSS sprites and if they are subtle then they add little impact to your design. If they affect performance they’re definitely not worth keeping.

Optimize Request Serialization

If you look at a waterfall chart you’ll see some requests are loading in parallel and some other are delayed. While some of them may be delayed due to browser load, most of them need to wait for another resource to load before they can begin loading. For example for a background image to begin loading, the stylesheet where it is called needs to finish loading first. This may not be a problem and actually doesn’t even have a solution, but when you are calling several resources from several files including importing stylesheets from other stylesheets and loading scripts from other scripts then the serialization will be much longer, increasing the website’s load time.

To keep the serialization as low as possible you should consider the following:

  • Call all images, stylesheets and scripts from the HTML document.
  • Call all background images and web fonts from the CSS document.
  • Call any resources from scripts only if absolutely necessary.

This ensures the serialization takes place is maximum 3 steps. Here are also things you should avoid:

  • Don’t call stylesheets using @import rule.
  • Don’t call scripts from within other scripts.
  • Don’t call images from other files than the HTML and CSS documents.

Minify your Scripts and Stylesheets

Code is written to be human understandable. However browsers don’t care about its arrangement as long as it is syntactically correct. Removing all the spaces and tabs used for code indentation may reduce the size of these files up to some KB. Optionally you can also minify the HTML code if you feel it adds to the website’s performance.

There are several tools that can do this for you; in WordPress the plugin WP Minify is known to do it best, however the plugin W3 Total Cache which also offers other features that help increase website’s load speed can do it for you and additionally it stores the minified files in a separate cached location so you can still have the well organized code if you wish to make changes to it.

Cache dynamic Content Pages

WordPress, like any other CMS, generate HTML pages on the fly on each request. This means the server parses, compiles and executes the PHP files upon each request which slows down the first HTTP request response. However, since it is a content publishing platform, in most cases the generated content is identical each time and the content generation process is just redundant. The solution in this case is to use a plugin that caches dynamically generated pages statically on the web server and serves them on every request until they expire or are modified. Don’t worry, changing them or adding a comment takes effect immediately as the plugin detects them and updates the pages accordingly.

There are several WordPress plugins that perform the task extremely well, one of the best considered being WP Super Cache and Quick Cache; however the plugin W3 Total Cache which achieves similar performance and has the advantage of offering many more features that help you increase the website’s load speed, which is why we recommend it. We’ll get into details about this plugin later.

Optimize Server Settings for Speed

Servers are by default configured to serve resources as they are and browsers get to cache and refresh them how they want. However, with some simple server-side settings the way requests are being handled can be controlled. Resources can be set an expiration time and they can even be sent compressed. Changing these settings usually requires tweaking the .htaccess file but with help from the plugin W3 Total Cache you can handle these settings from the WordPress admin. Here’s what you should do:

  • Set an expiry header for static resources of at least one week
  • Set Pragma, Cache-Control and ETag headers to encourage browsers to cache static resources
  • Enable GZip compression

Place Stylesheets in Head and Scripts in Footer

Stylesheets should be in the document’s <head> to make it load and render as soon as possible. Some browsers don’t render the page at all before all stylesheets have been loaded and parsed.

Scripts that are not crucial for the website’s rendering should be placed in the document’s footer. This ensures the browser does not begin executing them before the page has finished loading, affecting its performance.

Use a Cookie-Free Domain for static Resources

Web servers have the drawback that if during a page request they serve a resource with a cookie, they will serve the cookie with every resource sent to the browser. This adds a lot of redundant information to each request increasing its load time. However, if static resources are served from a different domain than the one serving the dynamic content, the cookies will not be sent along. Using a Content Delivery Network or CDN solves this but there are also other solutions. Delivering them from a sub-domain of the original domain though does not solve it though.

Use a Content Delivery Network

In terms of hosting, what is more important nowadays is to have the web servers located as close as possible to the users making the request deliver faster, increasing the page’s load speed. This may be problem if your website’s target audience is worldwide but Content Delivery Networks come here to help. Content Delivery Networks, abbreviated CDNs, are data centers located worldwide in target locations that cache static resources of websites and serve them to visitors nearby. CDNs may add to your hosting bill, but if your target audience is worldwide then it’s worth it. The plugin W3 Total Cache automatically integrates your WordPress website with CDNs so you don’t need to bother with settings things up each time you upload something.

Keep in mind however CDNs have one drawback: Since they only cache static resources and the first request being the HTML document and is usually a dynamic one, the request is transferred through a DNS translation to the original server and is served back to the visitor’s computer. This makes the very first request always take much longer, sometimes up to a second. This is not a problem if the other resources are transferred fast enough, however if you have very few static resources, or in contrast many dynamic resources, the CDN could actually hurt your websites performance. If this is the case do some testings before going with a CDN.

Use CloudFlare

If your budget doesn’t allow you to get a CDN for your website, the free of charge service CloudFlare is here to help. CloudFlare is a global network of data centers that act as a proxy between your web server and the internet. The original purpose of this service was to be a security shield between web sites and internet users, but additionally to that CloudFlare caches the website’s static resources in their data centers before sending them thus acting like a CDN. While not offering all the features of a dedicated CDN, its performance may get close to it. The plugin W3 Total Cache can also integrate with CloudFlare.

However, the dynamic requests are still served from the original server through a DNS translation so if you serve few static resources or many dynamic ones, do some tests before. CloudFlare has a section on their dashboard where they show you the performance of a normal request compared to a request backed by their data center and give you a comparison of website load speed. However, they’re tricky. If their service actually hurts the website’s performance they may just display a message saying the page load score is not available. Don’t trust them if you see this message and do some tests yourself.

Beside the security shield and caching static resources CloudFlare also offer features like minifying files and deferring loading of scripts which might also help with website performance.

Use W3 Total Cache

The plugin W3 Total Cache offers a complete set of features to help you increase you website’s performance. It does most server-side tasks automatically from one place without having to tweak the server settings yourself or install a different plugin for each one. Here are the features the plugin offers:

  • Caching of dynamically generated content pages
  • Minifying scripts, stylesheets and HTML documents
  • Concatenating all scripts and stylesheets into a single file
  • Caching of database queries and objects
  • Set up server-side settings like cache validators, ETags, Vary-Accept headers and document compression
  • Integration with CDN services and CloudFlare

Now that we have seen how we can increase the website’s speed with some simple tricks let’s take a look at some things to avoid:

Don’t use third-party Plugins

This is a highly subjective one and bald to bring it up, however if you do some tests yourself you’ll reach a conclusion: Third-party plugins increase website’s load time. The Facebook Like button, the Twitter button and the Google +1 button are all known to increase the website’s loading speed. The reason is because each of them loads its own iframe, which loads its own resources. Their functions can also be implemented with some simple query URLs. They won’t look the same though.

However, these plugins are highly optimized and their effect on the page’s loading speed is not that high. If you want to have the behavior of those buttons on your website then put them, just don’t put more than 2-3 or the website’s performance will be affcted. Also, check each of them and see how many HTTP requests each performs. The Facebook Like Box for example does an awful number of HTTP requests because it loads an image for each displayed user who liked the page. You should definitely not use that one if you want your website to perform fast.

Don’t use Query Strings for static Resources

Query strings appended to static resources are completely useless. The only purpose they serve is to prevent the browser from caching it, which is exactly what you do not want. Additionally some browser don’t cache these resources at all so they’re sent all over again on each request even if the query strings don’t change.

Avoid Requests with 404 Response

Requests that return a 404 take longer. Any simple test will prove it to you. Even if calling some elements that return a 404 do not affect the way the website looks, it definitely makes it load slower. Additionally any other HTTP response which implies a new HTTP redirect affect the page’s load time. 301, 302 redirects, 405 forbidden and similar responses all affect the site’s performance. You should be careful not to do such redirects for the main links and in document resources like stylesheets or scripts.

Useful Tools to help you increase your Website’s Speed

Now that we’ve seen what you can do to increase your website’s loading speed, let’s check out some tools that can help you along the way:

  • Loads.in – Tool to check website load speed from different locations. Offers detailed information such as waterfall charts and screenshots.
  • Pingdom Tools – Tool to check website load speed. Offers some detailed information and advice how to improve its performance.
  • Google Webmaster Tools – Has a section called Site Performance where you can see the average loading time for your website. It gives you a history of the last months progress and a comparison with the fastest loading 20% which they consider to make the difference between slow and fast loading pages. The time however may be a bit unrealistic: 1.5 seconds. Why would a page that loads in 2 seconds be considered slow? It also tells you how accurate these results and from how many users they have been gathered. Keep in mind though these results are gathered only from users who have the Google Toolbar installed.
  • Google Page Speed – An addon for Firefox and Chrome that analyzes a webpage’s performance, puts up a page score and gives advice on how to improve its performance. Also available as an standalone online tool.
  • YSlow – A plugin available for several browsers that compares the page with a set of rules and puts up a page score. Also offers advice on how to increase the page’s performance. Note that the report on the CDN service is not accurate as a list of CDN is not available with the plugin and must be manually set up.

Remember not to implement all these steps at random. Always do intensive testing and reporting and find out what fits best for you. Also, you shouldn’t stop at the steps presented in this article. It was written from a personal experience and there’s probably more to research and implement on this subject.

28 thoughts on “Make your WordPress powered Website load with Lightning Speed

  1. The worst thing is 301 redirect. If someone puts infolotnicze.pl it first goes to http://www.infolotnicze.pl and then to https://www.infolotnicze.pl. This takes the longest part for me but I do not know how to fix it.

    As for the rest. Used the tips and they work!!! For me WP super Cache works better as w3 total Cache (probably because of wrong settings) gave errors like error 500 or no input file specified white screen.

    Thanks for the hard work!

    1. Not really. Indeed a redirect can add some hundreds of milliseconds to the page load time, however 301 redirects are cacheable as opposed to 302 redirects which are not. If you want to avoid it at all costs, simply host your site at infolotnicze.pl instead of http://www.infolotnicze.pl. Also, you don’t need the SSL for the front-end, because you’re not exchanging any sensitive information. Just use it for the admin and let the front-end in standard http, you’ll get rid of another request.

  2. So we went to all this trouble and the site’s loading nice and snappy. It’s great when you directly type in the address and the initial page pops up and you flip through the site like pages in a book.

    Now for the stumper. People searching for our site on Google have a 30-60 second page load when they click on the search results link. Once they’re on the site, things are speedy again. Go back to Google, do a search that gives another search result for our site, click the link, 30-60 seconds to load the next page.

    What’s up with the Google junk when I right click and copy link location. It used to give me a link. Now it gives me a Line of Junk which if I pare all the garbage off of and deencode our web link, gives me a 650ms page load instead of half a minute or more.

    Anybody else have this problem? What’s the purpose of making our websites faster if it’s going to take a century to get the page to load for someone coming off Google?

      1. We got it sorted. A plugin we had installed was doing some sort of Google Pagerank check for some reason. Disabling the function killed the godawful delay and our site now loads quickly from Google SERP links.

  3. I have installed and activated W3 Total Cache but when I checked my website on PageSpeedOnline, it still suggested cache for my website. I don’t understand why. Does it take some time for PageSpeedOnline to understand that there is a cache turned on. (Note: I removed the plugin after this little frustration.)

    1. You need to configure the plugin after activation. The part you see in Google Page Speed is related to browser caching but I recommend setting up the other caching methods as well.

    1. The article explains in general words how to do it. If you can’t go further with the available information you’re better off hiring someone to do it for you.

  4. Cor! what a swizz, I thought I would come back here and see a 10,000 word tutorial :-)
    Nevertheless Daniel, this is a very useful post even for divvy’s like me, who doesn’t know my php from my elbow!

    Can you recommend a fast WP them to use? I looked at the Swift theme and tested the claim it is the fastest free theme using Yslow, and apparently it is not as fast as they say, at least in my test, it didn’t load as fast as Magazine Basic. Any suggestions?

    1. I’m not aware of any themes that are optimized for speed. Those that claim so usually aren’t as fast as they claim. It’s difficult to make a theme general purpose in a way that it sells and have it optimized for speed.

  5. Wow … didn’t know that my site loaded so slow lol. A 9.23 in Safari 4. I really need to work on your advice and increase my loading speed.

    It might be my video, I’ll try the test without the video see what it will do.

    Anyway thanks a million for your tips.

    Rob

  6. This page is not fast. Unfortunately your server is so slow that there are no speed-efforts noticable.

    In FIrefox the forum pages don’t load at all, and every 2nd or 3rd click I get a 500-error.

    So what?

    Before tuning WordPress, get a fast and stable server ;=)

    1. Hi Connie,
      Thanks for noticing, in fact this website has been under a constant DDoS and spam attack for the last 2 months and that’s the reason the server timeouts. A lot of users have complained about this and I’m the first to be frustrated about it. I’m currently searching for a solution to get rid of all the bad traffic the website is getting.

  7. Are you using varnish system on your server? In your request headers I found : Via
    1.1 varnish.

    If it’s a case, it could also be mentioned in this tutorial.

    1. Yes I am, though I wasn’t at the time this article was written. I had several issues with the web server the last weeks and several more optimizations have been added to it. They will probably be wrapped in a new article. The facts in this article still stand though.

  8. Brilliant tips on how to optimise speed, its one of those things that can happen to anyone site. Do you think using a shared server will also have an effect on speed? Do you think its worth getting dedicated hosting?

  9. To be honest you just need to get the yslow plugin in google this tells you excatly the same thing that your post has covered.
    You need to give more information about doing such work on your site.
    The one thing I have learned after days of research is that using a cdn hosting such as cloudflare and a plugin wp super cache will make a hell of a difference.
    I had a loading time of 12 secs and reduced it to 2.

  10. Nice post and effort, although I think, to ignore 404 error and other such pages we can use plugin like “404 Redirection” it simply takes the visitor to the homepage of the website, which is quite good because it doesn’t show any broken pages to our visitors. Another thing that I am curious about is the maximum number of plugin to install on WordPress sites, as we all know installing more and more plugin will only result in increase of website load time.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Current day month ye@r *