Optimizing for performance is a step you shouldn’t overlook if you want to get the most of your new website. We’re going to break this guide up into sections of focus for image optimization, minification & caching. By following this guide and taking care of the items mentioned you should be able to achieve a respectable gtmetrix PageSpeed & YSlow score.
First up we’re going to cover 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’re uploading images directly from a camera, make sure you resize them first. Modern cameras can output images over 7000px wide with file sizes larger than 20mb. Even if you’re using a full width section in Salient, there’s just no need for the image to be over 2000px wide. In the demos we usually don’t use over 1700px 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.
Compressing: After you’ve ensured the images you’re using are not massively oversized – you need to verify that you’re compressing 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’s a great article covering the topic in detail over at tutsplus. As you can see from the example below, 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.
Quality set too low (15%) File size: 12kb
Balanced Quality (60%) File size: 40kb
Not web ready Quality (100%) File size: 180kb
Minifcation 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 & make modifications through a child theme.
Non minified (larger size, human readable)
$('#nectar_fullscreen_rows > .wpb_row').each(function(i){
$id = ($(this).is('[data-fullscreen-anchor-id]')) ? $(this).attr('data-fullscreen-anchor-id') : '';
//anchor checks
if($('#nectar_fullscreen_rows[data-anchors="on"]').length > 0) {
if($id.indexOf('fws_') == -1) $anchors.push($id);
else $anchors.push('section-'+(i+1));
}
//name checks
if($(this).find('.full-page-inner-wrap[data-name]').length > 0)
$names.push($(this).find('.full-page-inner-wrap').attr('data-name'));
else
$names.push(' ');
});
Minified (smaller sizer, hard to read)
$("#nectar_fullscreen_rows > .wpb_row").each(function(a){$id=$(this).is("[data-fullscreen-anchor-id]")?$(this).attr("data-fullscreen-anchor-id"):"",$('#nectar_fullscreen_rows[data-anchors="on"]').length>0&&($id.indexOf("fws_")==-1?$anchors.push($id):$anchors.push("section-"+(a+1))),$(this).find(".full-page-inner-wrap[data-name]").length>0?$names.push($(this).find(".full-page-inner-wrap").attr("data-name")):$names.push(" ")});
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.
W3 Total Cache is a complete framework for caching as well as minification and much more. In the next section we are going to cover the plugin settings we use on the live demos.
Note: minification can be handled with many different free & premium plugins, so if you already have your own in mind there’s no need to switch.
Fun fact: Enabling gzip(HTTP) 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.
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.
Note: If you encounter issues with your server loading or writing to the minfied files you can always deactivate the minfication features for CSS/JS assets and still keep W3 Total Cache active
As you can see, all of the above techniques are essential to ensuring high performance for your website – with or without using Salient. 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.