Make your WordPress powered Website load with Lightning Speed

Advertisment
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:

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.

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:

.comment-bubble {
	background-image:url(images/sprite.png);
	background-position:-64px -256px;
}

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.