Improve performance of your WordPress website

Nowadays, virtually each site administrator has wished their WordPress website would work faster. However, lots of people, especially those, who lack profound expertise in website development, are scared off by the problems that may occur in case they make any significant changes to their website’s functionality. In reality, though, this process is not as scary as it may appear. In fact, one can improve their site’s loading speed from 1.61 to 583 milliseconds in less than a couple hours of work. This process will not require tons of effort – by installing a bunch of plugins and fixing a couple of simple errors you can receive a 70.39% improvement. Mind this, no visual changes will be made in this case, so your website’s design will remain the way you intended it to be.

The 2009 Akamai study suggests that 47% of website visitors find it ok if it takes about 2 seconds for a page to load, however, in case a page loads in more than 3 seconds, 57% of visitors are very likely to abandon it. Furthermore, there’s a series of case studies that have confirmed that loading time has a considerable impact on sales.

What is also noteworthy, in 2006, Amazon announced that a 100-millisecond increase in page loading speed resulted in a 1% increase in its revenue. A couple years later, Google revealed in a blog post that, when ranking websites, its algorithm takes page speed into consideration.

For this matter, the following are twelve quick ways you can improve your site’s loading time dramatically. These fixes include:

• keeping your site’s database clean and organized;
• identifying the plugins that decrease your site’s loading speed
• proper browser caching set up
• compressing images, CSS files, Web pages and JavaScript automatically.

When your house is tumbling down, you don’t go tiling the roof – you fix its foundation. The same applies to your website. If its has a bloated theme or is hosted on a snail-like server, quick fixes will hardly be of any use. You need to take a step further and fix the basis.

Ergo, it is essential to start with identifying what a good foundation is like and how to set oneself up for a website that functions at a rate of knots.

Among a number of performance-related things, a great deal of your website’s speed depends on your Web hosting company and hosting package. Many people regard this aspect unimportant, yielding to the magnetism of cheap or free hosting. Yet when it comes to serious goals, hosting is definitely not the area to cut off on.

Let’s put it this way: imagine two similar websites with absolutely different hosting providers. Let’s say, one of these sites is based on WPEngine (which is a reliable hosting company), and the other is located on a low-cost shared server.

Now let’s take a look at the DNS response time (for those who are not familiar with this notion – it is the time needed for the browser to connect to the hosting server). The DNS response time of the WPEngine website is 7 milliseconds, while that of the site on the cheap shared hosting is 250 milliseconds. The difference is quite obvious, right?

Thus, if you are concerned about your site’s speed, start off by finding a good hosting company and a proper package.

Simple this may seem, finding a good theme for your website can be more troublesome than you may think, since not all WordPress themes are created equal in the first place. Sure, there are lots of themes that are well-coded and super fast, yet those bloated with tons of bells and whistles while being presented as “customizable and versatile” are still encountered even more often.

Several years ago, an interesting case study was conducted by Julian Fernandes of Synthesis. In his work, he updated his theme from WordPress’ default to the Genesis framework, keeping an eye on the page speed. Fernandes noticed that by merely changing his theme to Genesis, the loading time was reduced from 630 to 172 milliseconds.

Hence, we strongly recommend you to check the page speed of the theme’s demo when choosing a theme for your site. To do so, you can use such tool as Pingdom, which allows you to see how fast the theme runs with nothing added to it. This way, you can determine whether this theme is well-coded or not.

If you choose to use a content delivery network (CDN), most likely, you’ll notice a significant reduction in bandwidth usage along with considerable improvement in page loading speed.

With CDN, your files will be hosted across a giant network of servers around the world. Therefore, if a user from another part of the world – say, Brazil – visits your website, then they would be downloading files from the server that is located closest to them geographically. This way, since your bandwidth is spread across lots of different servers worldwide, any single server will not be overloaded.

Most likely, it will take you a couple hours to set up a CDN, however, there hardly is a quicker way to effectively improve your page loading speed.

Now that we’ve laid our foundation and let it solidify, it is about time to start fine-tuning our website. A nice way to begin speeding up a website is to find items that can be removed. Most commonly, a website is slow because of what it already has, not because of what is missing.

One of the best plugins you can use for this purpose is P3. This plugin shows how other plugins on your website impact page loading time. Thereby, you can spot all the plugins that slow down your website.

It often happens so that social sharing plugins are responsible for balks in page loading time. Yet this issue can easily be fixed by embedding social buttons into the theme’s source code. Not too difficult, after all.

Once you are aware which plugins cause problems with loading speed, you are ready to make an informed decision about keeping them, replacing them or removing them completely.

If you’ve compressed a file on your computer as a ZIP file, you know that as a result of this action, the total size of the file is reduced, so it becomes not only easier, but also faster to send this file to somebody. Gzip works the exact same way with your Web page files. Once you install Gzip, it automatically compresses your website’s files as ZIP files, which speeds up page loading times as it saves bandwidth. For this matter, when someone visits your site, their browser automatically unzips these files and displays their contents. This is a really time-saving method of transmitting content from the server to the browser, as well as far more efficacious. Basically, there are now drawbacks in installing Gzip, and the speed can be increased considerably.

While there is a number of plugins, which will add Gzip to your site in one click, installing it manually is not that hard as well. Just go to the root directory on your server and find the .htaccess file, then add the following code to this file:

AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript

Once you’re done adding this snippet of code to .htaccess file, it is best that you run Check Gzip Compression to test if Gzip is working properly on your website. If for some reason the abovementioned code fails to work, an article by Patrick Sexton called “Enable Gzip” may help you get past this problem.

Although some may find it hard to believe, images actually take up the majority of bandwidth on most websites. For this reason, we suggest you use WP Smush.it plugin, which will automatically compress images the moment you upload them to the media library. Don’t worry, since all compression is “lossless”, you won’t notice any difference in the quality between the original and the uploaded images. Another good thing about WP Smush.it is that it’s work is retroactive, meaning that if there are tons of images saved in your media library, you can run them through this plugin and compress them to the adequate size.

Browser caching can be really tricky. Even though there is a handful of awesome caching plugins available, in case they are not set up correctly, chances are, they will cause more harm than good. Expires headers tell the browser whether a specific file should be requested from the browser’s cache or from the server. Naturally, this will not work if the user doesn’t have a version of your Web page stored in their cache. Ergo, this technique will successfully speed up the website solely for those users, who have previously visited your website.

There are two ways expires headers speed up a website. First, they spare returning visitors of the need to download the same files from your server over again. Second, they decrease the number of HTTP requests made. If you want all of this done by a plugin, we suggest installing WP Super Cache. However, you may want to follow an installation guide if you want the plugin to work correctly, as proper setting up is crucial. In case you don’t feel like tinkering at plugins, you can add expires headers via adding the following code to your .htaccess file.

#
 # associate .js with “text/javascript” type (if not present in mime.conf)
 #
 AddType text/javascript .js

#
 # configure mod_expires
 #
 # URL: http://httpd.apache.org/docs/2.2/mod/mod_expires.html
 #

ExpiresActive On
 ExpiresDefault “access plus 1 seconds”
 ExpiresByType image/x-icon “access plus 2692000 seconds”
 ExpiresByType image/jpeg “access plus 2692000 seconds”
 ExpiresByType image/png “access plus 2692000 seconds”
 ExpiresByType image/gif “access plus 2692000 seconds”
 ExpiresByType application/x-shockwave-flash “access plus 2692000 seconds”
 ExpiresByType text/css “access plus 2692000 seconds”
 ExpiresByType text/javascript “access plus 2692000 seconds”
 ExpiresByType application/x-javascript “access plus 2692000 seconds”
 ExpiresByType text/html “access plus 600 seconds”
 ExpiresByType application/xhtml+xml “access plus 600 seconds”

#
 # configure mod_headers
 #
 # URL: http://httpd.apache.org/docs/2.2/mod/mod_headers.html
 #

Header set Cache-Control “max-age=2692000, public”

Header set Cache-Control “max-age=600, private, must-revalidate”

Header unset ETag
 Header unset Last-Modified

The way WordPress autosaves everything is awesome, we all know that, yet there is a downside to this feature. It won’t take long before your database gets stuffed with thousands of pingbacks, trackbacks, post revisions, trashed items and comments that did not receive your approval.

The solution is as easy as pie – simply install WP-Optimize plugin and let it clear out your database’s trash. This is how your database can be kept neat, organized and filled only with necessary data – with no effort of yours. Still, it is less than wise to do anything to your database without backing up first.

If you have more than a few plugins installed, it is quite possible that your website is linked to 10 to 20 JavaScript files and individual stylesheets. That is not exactly good. Instead, it will be more efficient to put all CSS into one CSS file and all JavaScript into a single JavaScript file.

This is where minification will come in handy. Such plugins as Better WordPress Minify allow combining all of your JavaScript files and stylesheets into one. This way, your browsers needs to make less requests.

WordPress uses pingbacks and trackbacks to inform other blogs, which your posts are linked to. Although interesting at times, they are also known for taking up a great deal of page speed, and usually it is better to have them turned off. To disable them, you need to navigate to Settings > Discussion tab.

Before a visitor’s browser displays your web page, it has to decide how the content is to be laid around the images. If the size of these images is unknown, it is the browser’s task to figure it out, which means it will have to work harder and it will take longer for a page to load.

To get rid of this problem, you can specify image dimensions. This way, you can speed things up considerably by saving the browser from the need to go through this step.

Likewise, we recommend you to specify a character set in your HTTP response headers. This way, the browser won’t have to waste time on working out which set you’re using. All you have to do is add the character set to the head section on your website.

We suggest you link your style sheets as close to the top of the page as possible, as browsers render the CSS file before rendering a page itself. However, since JavaScript prevents browsers from parsing anything after it until it has completed loading, it will be best if you locate it as close to the bottom of the footer as possible.

In most cases, these simple actions will benefit your page-loading speed, as this way files will be downloaded in the optimal order. Still, if your website relies heavily on JavaScript files, and in case it requires these files to load before the visitor sees any of the page, this fix may cause some issues.

A sprite is basically one large image file that includes all of your individual images next to one another. With the help of CSS, you are free specify the coordinates in order to hide everything in the image but the section you need.

Since loading a single big image is far faster than loading a bunch of small ones, CSS sprites can improve your website’s speed significantly.

The easiest way to employ CSS sprites is to use SpriteMe, a specific tool that turns all of your images into a CSS sprite.

Keep in mind, Safari doesn’t load large sprites, so it it is best you use William Malone’s calculator to see if your sprite is too large.

HTTP Keep Alive concerns the message, which is sent between the client’s computer and the Web server, asking for permission to download a file. If you turn Keep Alive on, the client’s machine will be able to download multiple files without asking for permission over and over again, hence saving bandwidth.

To enable Keep Alive, you just need to copy and paste the following code into your .htaccess file.

Header set Connection keep-alive

We all know how PHP is awesome for making a website efficient and curtailing the need to input the same information several times. Nonetheless, calling data through PHP is quite resource-consuming, so it is better to have it replaced with static HTML where it does not save any time.

In the near future, it is expected that mobile Internet usage will overtake desktop usage. This increasing tendency in using Internet-enabled mobile devices implies that having a fast website is crucial for achieving success. For this matter, users now expect websites to load at lightening speed, and developers that can’t catch up with these implicit standards will end up losing to those developers, who don’t cut back on delivering a superb experience.