JCH Optimize has been mentioned a few times already. It can be a great help to speed up your web site. It offers many options to optimize various aspects of performance of your web site. It is especially good for combining and compressing CSS and JavaScript files, but it is also capable of setting defer/async parameters, setting a CDN domain, lazy loading images, optimizing images with Smush.it, and creating sprite images.
Let’s see how we can configure it. The extension can be downloaded from www.jch-optimize.net (it is free to use, with a Pro version for only $10). Download and install it from your Extension Manager. In the Plugin Manager, look for JCH Optimize and select it.
Enable it and go through the options you require (see Figure 18-19). Having read the previous paragraphs, you should have no trouble understanding what the different options do. On smaller sites, or when testing on your PC, you can probably start by activating all options. Then check if everything on your web site is still functioning as it should. Quite often, you may see that there are no issues at all, while your site is much faster.
In the Advanced tab, you can further fine-tune your actions. If there is a problem with one of the JavaScript files, you can exclude it from being combined, leaving the rest of the files combined. Also, you can choose to either include or exclude extensions from compression.
The Pro version of the plug-in allows you some even more advanced parameters, such as asynchronous loading of JavaScript, inline CSS and JavaScript, lazy-loading of images, etc. (Lazy loading of images means that they are only downloaded if you scroll down to where these images are located in the web page.)
In addition, support for CDN and Smush.it image resizing is included.
Don’t be surprised, if things do break and stop working. Don’t panic and, one-by-one, work through the options until you determine the problem. The JavaScript options especially can sometimes be problematic, so if you want to switch things off, start there. For example, form extensions can fail to display properly with some of the options. After setting Defer javascript to No and disallowing the inclusion of inline javascript, the form may function correctly again.
Jbetolo
Jbetolo is a free extension provided by www.jproven.com. jbetolo stands for “quickly” in Ethiopian, which pretty much sums up what this extension is meant to do. Roughly, it provides similar features as JCH Optimize. In part, they overlap, as you immediately see when you install it and check the plug-in’s parameters, as shown in Figure 18-20. Figure 18-19. JCH Optimize plug-in options
Chapter 18 ■ Joomla performanCe and Speed
The main features are minification, combination, and compression of CSS and JavaScript files, while you can also include or exclude specific files and components. This is also what JCH Optimize has to offer.
Some features of JCH Optimize are not found in jbetolo, such as setting the defer attribute and asynchronous loading of JavaScript.
There are also some useful features, however, that are only available in jbetolo.
• In the Tools tab, there are options to set up the leverage browser caching code in .htaccess, without manually having to edit this.
• What is particularly interesting is the option to send the images from your Joomla site to Smush.it and receive the optimized versions, all simply with the click of a button!
• A big bonus is also the built-in CDN support, especially for MaxCDN and Amazon CloudFront, which can be implemented without an additional plug-in.
• Finally, lazy loading for images is available from the Miscellaneous tab.
Whether you would prefer to use JCH Optimize, ScriptMerge, or jbetolo depends on personal preference or the specific demands of your web site. If this is the first time you are using a plug-in such as this, JCH Optimize seems a bit easier to handle.
ScriptMerge
Another alternative with functionality similar to jbetolo is ScriptMerge by Yireo. You will recognize the same basic parameters to combine CSS and JavaScript files in the basic options, which also allow you to remove Mootools (see Figure 18-21).
The merge options are the basic options that will hold the biggest value for you. The other tabs allow you to specify and fine-tune further options.
• Compress Options: This sets whether and, if so, how you want to compress your files (simple rules or more advanced).
• Exclude Options: As every now and then performance plug-ins such as these don’t match with some other extensions, being able to set exclude options is vital. You can set exclude options on various levels (specific files, components, or menu items).
• Advanced Options: Various options. Unique options are the support for data URIs (Base64 encoding based on a maximum file size) and WebP (converts normal JPGs and PNGs into WebP images, reducing size, if supported by your host).
There are a few more extensions that aim to perform the same as JCH Optimize, jbetolo, and ScriptMerge, but these three are probably your best bet. If you run a performance test before and after installing one of the latter, you will be amazed at the results.