Configuring Server Side Page Caching in Joomla
- Google PageSpeed Webmaster Tool
- Native Joomla Caching and Compression
- Using Akeeba Admin Tools to Write .htaccess
- Using the JCHOptimize Extension to Compress, Minify, and Merge
- Using the JBetolo Extension to Compress, Minify, and Merge
- Image Compression with optipng
- Image Compression with jpegtran
- Client Side Caching
- Google Analytics Timing Results
Google PageSpeed Webmaster Tool
The article that follows is shows how to use Joomla settings and the JBetolo extension to improve page loading time and in particular, to improve the Google PageSpeed score for a page. PageSpeed is a utility for analyzing the way a page is optimized to reduce the time it takes to render the page in a browser. A good PageSpeed score is helpful in getting a good user experience in many cases. For a low volume web site where the server cache expires before every access, turning on the various settings for caching can actually slow down the render time as the server rebuilds the cache before serving the page. In this low volume case, getting a good PageSpeed score for your site will actually hurt your render times. You will have to experiment to determine what works best for rendering your web site.
The PageSpeed is located at
To use PageSpeed, just enter the URL of the page that you want to analyze. All of the examples in this article are from the page
https://www.mooresoftwareservices.com/loan-pricing/9-effective-yield-loan-fee-amortization on this site. The page contains basic HTML, tables, and calls to MathJax to render mathematical formulas, but it does not contain much in the way of images. Figure 1 shows the Google PageSpeed rating for this page with no compression or caching enabled.
The Google PageSpeed algorithm rewards a number of things, that generally fall in three categories for items that can be improved via Joomla and JBetolo configuration:
These three categories will be described in the following sections.
Minifying a file is the process of removing unnecessary characters from the file, typically spaces, line end characters, comments and other characters that are not needed to for correct execution of the file. A minified file does not need to be “un-minified” by the client browser. Minifying generally does not break things on a Joomla web site, but it does take server processing.
Compression is the process of reducing the size of the file using a compression program. Unlike a minified file, a compressed file DOES need to be uncompressed prior to execution by the client browser. Compression generally does not break things on a Joomla web site, but it does take server processing.
Native Joomla Caching and Compression
Joomla has a basic built-in compression and caching capability that is implemented by setting Joomla configuration variables in the
configuration.php file. Joomla does not have a native merging capability. The Joomla native caching has one major drawback--all article retrievals from cache will not be reflected in the hit counts for the articles. In the Global Configuration panel shown in Figure 2, setting the file type and cache time will set the cache variables as shown Figure 3:
Similarly, the native setting for GZIP compression is on the system panel as shown in Figure 4.
For my web page, the native Joomla cache and compression settings didn't really improve the PageSpeed score and that much and broke the Joomla internal hit counters for articles so that I didn't have accurate information on which articles were getting traffic. At this point, I started looking for extensions that would handle the caching and which would maintain accurate hit counts for all of my articles.
Using Akeeba Admin Tools to Generate .htaccess
Akeeba Admin Tools have the capability to generate a .htaccess file that will do a great deal to secure your Joomla web site, but which will also set up the compression and most of what you need to get a good score on Google PageSpeed. In the section Custom .htaccess rules shown in Figure 5, add the local caching rules listed in Figure 15.
Using the JCH Optimize Extension to Compress, Minify, and Merge
- Basic JCH Optimzie Configuration
- Getting in-Article Google Trends Scripts to Work Properly
- Getting MathJax Formulas to Render Properly
- Getting Google Analytics to Work Properly
- Getting Template Images to Work with Lazy Loading
- CSS Delivery
Basic JCH Optimzie Configuration
Getting in-Article Google Trends Scripts to Work Properly
The next section discusses the changes necessary to get MathJax working properly.
Getting MathJax Formulas to Render Properly
The next section discusses how to use the advanced settings to get Google Analytics to work.
Getting Google Analytics to Work Properly
Many Joomla sites use Google Analytics for search engine optimization (SEO) analysis, and use the sh404SEF to manage the insertion of the code to call Google Analytics for visit logging. To get this to work, you will need to exclude this script as shown in Figure 11. To test this, you will need to go to the “Real Time” section in Google Analytics without any filters for your home location and then open a browser that does not disable tracking to force activity in Google Analytics. If everything is working properly, you will see your browsing activity in the Real-time section of Google Analytics.
The next section shows how to enable lazy loading for images.
Getting Template Images to Work with Lazy Loading
If you have articles with a large number of screen captures or other images (like this article), you may want to enable lazy loading of images to reduce server load and improve page load times. With lazy loading enabled, an image does not load until the reader scrolls down to that portion of the article. With lazy loading enabled, you may need to exclude some images that are displayed as part of the template, as shown in Figure 13.
The next section talks about optimizing CSS delivery to improve render time.
In Google PageSpeed, one of the metrics discusses reducing the amount of data that must be downloaded before the first screen can be rendered. Under the Pro Options in JCH Optimize, you can attempt to do this using the “Optimize CSS” delivery option. This option can take some significant trial-and-error testing and is probably the option most likely to break after system maintenance.
Using the JBetolo Extension to Compress, Minify, and Merge
This article was originally written to describe setting up server side caching with jBetolo, but I had repeated problems getting it to work propery with MathJax, the Joomla print/email icons (an icon font) and other things so I switched to the paid JCH Optimize plugin and have had a much easier time getting that plugin to work.
Image Compression with optipng
PageSpeed will point out any PNG images that need to be compressed. For PNG images, the
optipng command line utility available from http://optipng.sourceforge.net/ will compress images and make PageSpeed happy. On Ubuntu, you can install this with the command
sudo apt-get install optipng, while on windows you will have to download and install the binary from the SourceForge web site. Figure 14 shows how to call
optipng from the command line to compress all of the files in a directory.
Image Compression with jpegtran
PageSpeed will point out any JPEG images that can be compressed. For JPEG images, the
jpegtran command line utility available from http://jpegclub.org/ will losslessly optimize the internal structures in JPEG images and reduce the size by 10-20% in many cases without loss of image quality. The command is not quite as simple as the optipng tool, as you will either need to write a script or run the command several times:
jpegtran -copy none -progressive -optimize input.jpg > output.jpg
Client Side Caching
The final step in setting up caching is to configure the client browser expiration settings for your web site. Google PageSpeed recommends setting the client side cache expiration to a minimum of one week (604,800 seconds), which works well for most content. The
.htaccess generator in Akeeba Admin tools will do this for you but if you are not using Akeeba Admin Tools, you will want a section in your
.htaccess that looks something like the example shown in Figure 15.
moonico.woff requires the
application/x-font-woff two entries in the expiration list, and may require others. This font is used for the print, email, edit and search icons and is the most difficult thing to get working reliably with Jbetolo. Without these entries, you will have a page that looks fine until it expires.
If you are not using a plugin to add the MathJax code, you can converting this synchronous script loading to asynchronous loading by adding
async to the call got rid of the red “You Should Fix” section of recommendations in the PageSpeed list for this page and improved the PageSpeed score by one point. The asynchronous syntax is shown below:
Google Analytics Timing Results
For a 30 day period where the no caching was enabled but compression was enabled (PageSpeed score of 67 for example page), Google Analytics reported an average load time of 5.12 seconds. Average load times with merging, minification and compression turned on in JCH Optimize will be added at a future date, but appear to be under 2 seconds.