WordPress Optimization

Google and other search engines are now considering page speed as one of the performance matrices when displaying search results. This means that websites that load faster will appear more prominently in search results.

Performance measurement tools

I prefer GTmetrix, since it lets you save your site’s performances.

Here are some tricks to increase your speed score when testing with Google page speed or Yslow.

Install Cache Enabler

Install and activate Cache Enabler plugin.

Go to settings and:

  • Set 72 to Cache expiry
  • Tick Pre-compression of cached pages.
  • In Cache Minification select HTML (or HTML and inline JS for better results).

Leverage browser caching

First and foremost, please leverage browser caching. To do so, just install the Leverage Browser Caching Ninjas plugin. You will see a huge impact on your site’s performance.

Why? When a web browser displays your webpage it has to load several things like your logo, your CSS file, and other resources.

What browser caching does is “remember” the resources that the browser has already loaded. When a visitor goes to another page on your website your logo, CSS files, etc. do not need to be loaded again, because the browser has them “remembered” (saved). This is the reason that the first view of a web page takes longer than repeat visits.

When you leverage browser caching, your webpage files will get stored in the browser cache. Your pages will load much faster for repeat visitors and so will other pages that share those same resources.

Minify JavaScript and CSS

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.

Usually the javascript plugin that you’ll use will come with a minified version. It will have the extension .min.js. Use this.

If not, then you can use an online tool like the online JavaScript/CSS YUI Compressor and create it yourself.

Even better, you can install and activate Better WordPress Minify plugin.

Put Scripts at the Bottom

JavaScript is a client side programming language. It is executed and run by a user’s web browser and not by your web server. When you put JavaScript at the top, browsers may execute or process the JavaScript before loading the rest of your page. When JavaScripts are moved to the bottom, your web server would quickly render the page and then the user’s browser would execute JavaScripts. Since all the server side rendering is already done, the JavaScript will load in the background making the overall load faster.

To do this in WordPress, use for example:

wp_enqueue_script('bootstrap-scripts', get_template_directory_uri() . '/js/libs/bootstrap/3.1.1/js/bootstrap.min.js', '', null, true);

Compress components with Gzip

Just download and activate WordPress Gzip Compression. It will work only if your server has GZIP Compression enabled. If not, contact your hosting provider.

Minimize HTTP Requests

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

First of all, make sure you only use scripts and stylesheets that you actually use. For the remaining scripts and stylesheets you can use combined files.

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet.

To do so, just install and activate Better WordPress Minify plugin.

Optimize images

Install the EWWW Image Optimizer.

In general, make sure that the images that you upload to your WordPress site are web optimized. In PhotoShop the preferred way is to save images for web. This also strips the JPEG metadata which in some cases can reduce the image size dramatically. It is also advised to not let the user upload images more than 1MB.

Delete Old Post Revisions

By deleting old revisions of posts, you can cut the size of your database down quite a bit.

While this is said not to have any real effect on the speed of your site (revisions are only accessed in the backend), making the size of your database smaller should at least help in working with it (backing it up, moving it around, etc.).

To do so, you can use the WP-Sweep plugin. You can see a description on WP-Sweep here.

Remove Unused Media

Over time there are various ways that you may end up with unused and unreferenced images. You should delete these images in order to free up space from your server and your database.

To do so, you can use the Image Cleanup plugin.

Remove Unused Thumbnails

Many themes, may create thumbnails that you may never need in your site. To clean them, you can use the Thumbnail Cleaner plugin.

Don’t forget to stop the theme from regenerating the thumbnails in the future. Usually, the theme will use the add_image_size function in a filter. Just remove this filter in your functions.php and you are set!

Replace very large media

Maybe your site’s administrator has already fill up your server with very large photos. In order to make them smaller, download the uploads folder, use a software like ACDSEE to batch compress your images (for example resize the really big images using 1000px width and 75% quality) and reupload them using FTP. This way, you will compress your images without affecting the database connections of your media attachments (make sure that the filenames remain the same and overwrite your live server images).

Learning Resources

Post A Comment

Anti-Spam Quiz: