Optimizing for performance is a step one should not overlook if you want to get the most of your new or existing website. I am going to break this guide up into sections for image optimization, minification and caching. By following this guide and taking care of the items mentioned you should be able to achieve a respectable gtmetrix PageSpeed & YSlow score.
Image Optimization
Missing this step will result in huge hits to your page speed score and could potentially cause your loading time to raise by a good amount depending on how careless you get.
Resizing: if you are uploading images directly from your camera, make sure you resize them first. Modern cameras can output images over 7000px wide with file sizes larger than 20mb!! Even if you are using a full width page on your Website, there is just no need for the image to be over 2000px wide.
Resize unnecessarily large images in your go-to program before uploading them. If you don’t have a premium image editing tool such as Photoshop, there are free solutions out there such as Gimp or Irfanview.
Compressing: After you have ensured the images you are using are not massively oversized – you need to verify that you are compressing or optimizing them properly for the web. If you use Photoshop, leaving the default quality setting on 100% is a big no no. The goal here is to balance the quality with file size – if you compress too much you’ll end up with undesirable artifacts, but leaving it too high could double or triple the file size for no reason. Here is a great article covering the topic in detail over at tutsplus.
Compressing plays a huge role is file size and thus download speed to your user. It’s also worth noting there are two solid WP plugins (Smush it & EWWW) which you can use to bulk compress images on your setup.
Minification
Minification removes all unused spaces in the theme asset files to make the size smaller. By default the files are shipped to be human readable with normal spacing and comments to help you understand if you wanted to inspect it and make modifications through a child theme.
Besides just removing spaces to reduce file size, mification through the plugin we recommend will also combine all the javascript & css files into one .js and one .css file. This reduces the number of requests your server has to make, thus yielding more page performance and greater PageSpeed scores.
Some Plugins will do the Job for you BWP Minify
The reason I suggest BWP minify over other solutions is because it’s free and provides great control over the minification process. There are other plugins out there that can get the job done – but keep you in the dark over the process and don’t allow you to configure the settings deeply.
W3 Total Cache
There are many different types of caching offered in W3TC, but in this guide we’re going to focus on the simplest and the only one used on the demos: browser caching. This will allow the theme assets to be cached on your users computer after initially downloaded, to save your server from having to serve them more than once. The result significant performance increases.
If you would like a quick overview on what caching is and the various types please check this resource.
In the “Browser Cache” tab of your W3TC plugin panel, ensure these settings are checked.
GZip Compression
If you are new to optimizing for speed you may be missing out on the easiest yet most impactful steps. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the theme files, reduce data usage for the client, and improve the time to first render of your pages. This means that by simply telling your server to use this feature, all theme assets will be drastically reduced in size.
In the “General Settings” tab of your W3TC plugin admin panel, scroll down until you see the browser metabox and ensure that gzip compression is enabled
Conclusion
As you can see, all of the above techniques are essential to ensuring high performance for your website – basically with any Theme or CMS System you use. Once you’ve leveraged these web standard recommended items, you will notice much higher performance and significantly higher scores in PageSpeed testers such as GTMetrix, YSlow etc.