[WordPress] How to improve page load time

speed lights

Increasing page speed, decreases its load time, which is best user experience you can do for your site visitors. In this article we are going to focus on WordPress powered blogs and sites. You don’t need to move your site to a dedicated server or CDN yet, unless your shared hosting server isn’t able to handle your site’s bandwidth usage. Now, we’ll take a look at each aspect of the page and how to optimize them for the best load time possible.  Let’s take a look at them one by one,

WP super cache with GZIP compression turned on to minify HTML

This is a plugin that allows you to take cache of the page and compress them for a faster load time. By default the caching is turned off. You need to turn it on for the plugin to be active.

You then need to apply some settings by going to WordPress settings page from the Dashboard, then Wp Super Cache, Advanced, then check the box next to “Compress pages so they’re served more quickly to visitors” like shown in the image below,

wp super cache settings(click on image for full view)

You can get the plugin here, or type “WP super cache” without quotes on the add plugin page’s search box.

This plugin alone would increase your page load speed score by a large amount, which you can check it here, Google PageSpeed. This plugin essentially minifies your HTML. Enter your site’s URL there, don’t just check the homepage but also the post URLs. Especially the ones that are large in size with more images. If you use Adsense, you can easily see those pages in the scorecard.

Compress child theme CSS and Javascript

You need to definitely use the child theme, because when the theme gets updated you loose all the changes you made to it, even as little change as installing analytics code. I have written an article on how to easily create child theme for WordPress Twenty twelve theme, this will apply for any other themes as well.

So, with that out of the way, let’s get into compressing css and javascript. You can compress these files from these links – minify CSS and minify Javascript. Paste your original CSS or Javascript code there, and hit the minify button, then copy the minified code to your theme style sheet  or where Javascript is on the editor.

This would reduce the file size and thus lower load times.

However you have no control when the plugins CSS or Javascript isn’t compressed. That’s not a big issue at all.

Asynchronous Javascript

You might have seen this when copying your Google Analytics code, use Asynchronous codes whenever available. Adsense’s asynchronous codes are in Beta stage now, and it works just fine.

Using Asynchronous Javascript, the other page elements’ loading are not halted until the Javascript is loaded. Hence the faster loading page.

Youtube and other videos – Google plus or Facebook like embed

youtube-page-loading(click on image for full view)
Image courtesy : Labnol

Amit of Digital Inspiration blog has written a great post on this. That is for Youtube embedding. When you embed a Youtube video, it loads some Javascript, images and CSS files, even when the video is not played. This can cost some loading time especially when you embed more than say 3 videos.

ondemand youtube videos loading

Image courtesy : Labnol

So embedding it lightly like you see it on Google Plus or Facebook or at Labnol, you can decrease your page loading time.

For videos hosted on site other than Youtube, Amit’s code needs to be modified a bit. Drop a line in the comments below, if you really want it and I will post the modified code.

Discus comments click to load

The Disqus comments if you are using on your site, probably you are, takes some loading time as well. You can use a code to only load it when clicked. A little optimization here and little there can add up and your pages will load faster.

The code I use on this site to load Disqus comments on the demand is simple and can be found here.

Paste this code where the Discus code goes on your content.php or single.php.

Resize images to fit the page column width, manually

Often times, you add images that are greater than your post’s column width. What happens is, it changes the size in the <image> tag, not resizing it literally. This will cause the image to load as is, and the manual resizing of it to fit the column width will take much less time to load.

optimize images

As you can see in the image above, it shows the reduction of the file size when resized to fit column width. My post page’s column width is 660 px, and I make sure that my images’ maximum width is 660 px or less. It’s a good practice and I am encouraging you to follow it as well.

Closing Words,

You can further optimize the page speed by reducing server load time to under 200 milliseconds, avoiding page redirects, and remove the external Javascript and CSS above the fold and focus on the visible content first. WordPress already takes care of these, so I have only included the ones that you can do with little effort to speed up your page loading.

While more focus is on the responsive side of the web pages, it’s also must to focus on page speed as well. Both are a must factor for a good user experience. Balancing responsiveness of a page and faster load time of a page will be a perfect combo for a better user experience as well as your site’s bottom line.

Leave a Reply

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