WordPress Performance: Four Simple Steps For A Faster Site
Posted in: Speed Up Tips   -   August 6, 2013

WordPress is the most popular content management system in the world. It’s the number one choice of everyone from solo bloggers to corporations. However, it is far from being the fastest available option. The benefits that WordPress’s dynamic page generation model bring to content management are undeniable, but running PHP code and database queries imposes a performance overhead that can be harmful to user experience, SEO, and conversion rates.

The two best ways to speed up a WordPress site are caching and the use of a content distribution network, but there are a number of other techniques that can reduce page load time. We’re going to look at four strategies for making your WordPress site more snappy and show you how to deploy them on your site.

Compression

Squeezing the size of HTML, CSS, and JavaScript on the server can significantly reduce the amount of data that needs to be sent to clients. Processing power is rarely a problem at either end of web transactions these days; all major modern browsers support gzip compression, and the Apache web server is capable of compressing pages on-the-fly. Gzipping files typically results in file size reductions of about 70%.

If you’re already using the W3 Total Cache plugin, it will handle gzip compression for you.

Otherwise, check out the WP HTTP Compression plugin.

Optimize Images

Often images are the largest proportion of the bandwidth a page uses. JPEG images can’t be compressed on-the-fly (they already are) so they should be optimized before uploading.

Smush Images

Smush.it is an awesome service from Yahoo! that will get the most bang for the bandwidth out of your images. It can optimize JPEG compression and strip out metadata, convert GIFs to indexed PNGs, and remove unused colors from images. You can use the website directly, but there’s a WordPress plugin that takes advantage of the Smush.it API that will automatically run all images added to your posts and pages through the service.

Scale Images In Advance

It’s generally bad practice to use image scaling in the HTML to alter image sizes because, unless you intend to display different versions, the browser will be downloading far more data than it needs to display. Before uploading them, scale images in an image editor so they are the size you need them to be on the page.

Use CSS Sprites

If a site has lots of small images, each one requires its own HTTP request. CSS sprites include all the necessary images in one file and then use CSS properties to choose the right bit of the image to show. This doesn’t reduce the amount of data that browsers download, but it does cut down on the amount of time that it sits waiting for requests to be fulfilled.

Making the sprites is easy: a service like CSS Sprite Generator will do it for you.

However, deploying image sprites on WordPress isn’t a straightforward task, and it requires some knowledge of CSS and HTML. If you’re comfortable editing the CSS of your WordPress theme, then this can be a great way to cut down on load time for image-heavy sites. Otherwise, your best option is pay a developer to do it for you.

Lazy Loading

Lazy loading is a technique whereby only the parts of a site that are visible in the browser viewport are loaded. As the users scrolls through the page, elements which are about to appear are loaded. This doesn’t actually reduce the amount of time that a page takes to load, but it does reduce the perceived load time – the load time as the viewer experiences it. You’ll often have seen this technique used on popular blogs; sometimes if you scroll down very quickly you’ll catch the images loading.

BJ Lazy Load is the most popular JQuery-based lazy load plugin for WordPress.

Limit The Use Of External Services

These days, every serious site needs a bunch of additional services to provide functionality. They usually come in the form of JavaScript snippets that provide§ everything from analytics to social media buttons. Every one of those additional snippets means a call to a third party server and possibly a large download. Stripping out unnecessary JavaScript can seriously reduce the amount of time a site takes to load.

If you’re capable of delving into the inner workings of your theme, you can also speed up perceived load times by moving JavaScript down to the bottom of the page. JavaScript that loads in the <head> blocks parallel downloads, so the rest of the page won’t load while they are doing their thing. Be careful with moving JS about though: moving the JavaScript out of the head section can break some plugins.


About Graeme Caldwell -- Graeme works as an inbound marketer for Nexcess, a leading provider of Magento and WordPress hosting. Follow Nexcess on Twitter at @nexcess, Like them on Facebook and check out their tech/hosting blog, http://blog.nexcess.net/.

Tags: , , , , , , , , ,

  • Chris Ueland

    nice post Graeme!

  • http://donottellmyboss.com/ Prarinya Kamta

    Great tips.
    thx.

  • http://swellfire.com/blog Jacob Wise

    Good info, thanks for sharing! If you are using WP Engine there is no need for W3 Total Cache 🙂

    • http://frenchtogether.com/ Benjamin

      What about lazy load? Would it still improve the speed on WP Engine?

      • http://swellfire.com/blog Jacob Wise

        Lazy Load is not on the disallowed plugins list for WP Engine, so yes it would be applicable for WP Engine users. It should help your perceived load time on WP Engine. Here is the full list of disallowed plugins for your reference: http://support.wpengine.com/disallowed-plugins/

  • http://www.abinashmohanty.com/ Abinash Mohanty

    These are really good tricks! Thanks a lot for sharing 🙂

  • Arturo Emilio

    Hi! I like to share this plugin it will create the sprites for your site without your intervention. Just activate the pluging and ready to go.
    http://wordpress.org/plugins/sprites-in-css-for-google-pagespeed/