August 11, 2014 at 08:42Joomla optimizations. Competition "UPU for the year for the best ideas!"
Joomla is one of the most popular opensource CMS in the world. For many years now, she successfully competes with Wordpress for the title of the most popular.
An increase in site load time by 1 second has the following consequences:
In this article, we will cover the topic of Joomla optimization. For a better disclosure of the topic in future articles, we are holding a contest: send us Joomla optimization recommendations that are not included in this article. The author of the most complete and useful optimization tips will be provided with VPS 1024 for a year (the result of the Wordpress contest will be announced very soon). At the end of the article is a link to register a free Cloud VPS from Infobox for experiments with Joomla optimization.
Let's determine the site load time. For testing, we will use the GTMetrix service . Our experimental is big and old. Previously, nobody was just involved in its optimization.
Also check the site service WebPageTest. Check results below:
The main areas to focus on when optimizing Joomla:
Each Joomla extension can slow down your site. However, performance is affected not only by extensions, but also by:
etc.
When developing your own template, you should think about what is really necessary and what you can refuse. Do you really need images for the background or buttons, or can you use CSS3 for this?
You always have to compromise: a fast website is a minimalistic website. If you are creating a sophisticated website for photographers, get ready for more website resource consumption. However, even such sites can be optimized. Some get to the removal of Joomla core components, but this is already an extreme case. Often, safer actions are enough to get the desired result.
Caching is a mechanism for storing ready-made pages for the user without the need to access the database each time. These pages are stored in one of the folders used by Joomla: a cache folder. You can check the file system with Joomla for files that contain:
The main advantage that caching gives us is the faster loading of sites due to the fact that the already generated information is used. The problem with caching is that the information in Joomla can change after saving the page in the cache. Therefore, the activation and configuration of caching, especially on sites with frequently changing content (for example, news sites), must be checked by tests.
Another problem is that some functionality may simply break if the cache is enabled, for example, feeds or captcha when the System Cache plugin is enabled. Also, the cache in Joomla works only for guest users and does not work for logged-in users.
Global caching can be enabled in the Control Panel section of the System -> Global configuration -> System . Global caching creates component page files, the main Joomla content area in the / cache / com_ * section.
By default, module caching is activated by global caching, but you can set individual settings for each module in the Extensions -> Module Manager -> select module -> Advanced.
Browser caching allows you to reuse website resources that have already been downloaded to your computer when you visited the site earlier. Resources can be HTML, CSS, Javascript, fonts, and other static resources. Browser caching is safe for the site and does not break its functionality.
The disadvantage of this approach is that some resources will not be updated automatically when changing on the server (for example, CSS files). Most visitors will be able to fix this problem simply by clearing the browser cache, but the severity of the problem depends on the situation.
To activate browser caching, we need to perform 2 preparatory steps:
For each type of file, we will set the cache end time, showing how fast it will update: short for files that change frequently (for example, html) and more for CSS and Javascript.
The result is the snippet shown below, which must be added to .htaccess:
The default value is set for files that are not in the list (access plus 1 second). You can expand your browser caching settings to audio, video, @fontface, embedded fonts, etc.
You also saw the lines in the code:
This setting significantly improves performance. What is especially nice: using it allows you not to worry about problems with the lack of the required module on the host: at least nothing will break.
Joomla has built-in G-ZIP support. This is a mechanism when website content is packaged in a zip file. The packed file is sent to your browser, unpacked and displayed. All browsers now, including ancient IE from version 6, support G-Zip.
To activate this function, simply enable it in the System -> Global Configuration -> Server Settings section .
You can check the performance and degree of compression at: http://www.feedthebot.com/tools/gzip .
In our case, the compression size was 77%, which has a good effect on performance, especially for large sites.
If your site uses a large number of images, this is a very important point. Firstly, you need to make sure that all images are saved with the lowest possible quality without any visually noticeable difference. For .jpg, setting the quality to 60% can save more than 50% of the file size from the original value, despite the fact that the pictures will look good. You can set the quality of the image when saving, through Save for Web in Photoshop. Also be sure to use the correct file format (.jpg for photos, png for transparent pictures, logos, .gif for small, low-quality images).
For .jpg you can also choose progressive or baselinewhen saving. The difference is especially important for slow connections:
Often pictures can contain unnecessary information, such as the date of shooting, the model of the camera, etc. Even if you save a picture in Photoshop via Save for Web, not all such information is deleted.
GTMetrix finds images on your site that need such optimization, not only talks about it, but also provides links to optimized versions of images:
However, this is not enough. In the comments to the last article, readers suggested the wonderful ImageOptim program , which produces lossless compression. Copy the folder of the used theme from the host to the local drive, pass all the pictures through ImgageOptim. The volume of downloaded data will decrease significantly. You can also use the online tools Smush.it (from Yahoo!) andTinypng.com .
If you want to automate this process, use the Jbetolo extension . In addition to batch optimization of images from the selected folder, the extension allows you to optimize HTML, CSS and JavaScript: perform minification, merging and compression . Before each optimization, do not forget to backup. Otherwise, incorrect actions may lead to the need to restore the Joomla admin panel.
Adding CDN support will significantly increase site performance. Often, just installing the DNS CDN and turning on the optimization is enough. Many CDNs allow you to compress and optimize CSS and Javascript on the fly. The result is not long in coming.
GTMetrix site verification results .
Site load time was 2 seconds. Before optimizations, the time was 3.33 seconds.
As a result of optimizations, site loading time was reduced by 40%. The page size has decreased from 864 kb to 100 kb, which is especially important for slow Internet connections.
Now let's check the site with WebPageTest .
The first load time of the site is 1.586 seconds. Site reload time 0.563 seconds. Before the optimizations, the time of the first loading of the site was 3.11 seconds. The site reload time is 1.064 seconds.
As a result of optimizations, the time of the first loading of the site was reduced by 2 times. The site reload time was also reduced by 2 times.
We are sure that this is only the first step in optimizing Joomla. Send your optimization ideas confirmed by tests to trukhinyuri@infoboxcloud.com . For the best set of recommendations, the author will receive a year of VPS 1024 from Infobox . So that you can try to install and optimize Joomla, we provide a trial version of Cloud VPS for 15 days for free. Register here .
Successful Joomla!
An increase in site load time by 1 second has the following consequences:
- decrease in page views by 11%;
- 16% reduction in customer satisfaction;
- 7% decrease in the conversion rate of visitors to buyers.
- 40% of mobile buyers will leave the online store, the pages of which load for longer than 3 seconds.
In this article, we will cover the topic of Joomla optimization. For a better disclosure of the topic in future articles, we are holding a contest: send us Joomla optimization recommendations that are not included in this article. The author of the most complete and useful optimization tips will be provided with VPS 1024 for a year (the result of the Wordpress contest will be announced very soon). At the end of the article is a link to register a free Cloud VPS from Infobox for experiments with Joomla optimization.
Joomla performance testing before optimizations
Let's determine the site load time. For testing, we will use the GTMetrix service . Our experimental is big and old. Previously, nobody was just involved in its optimization.
Also check the site service WebPageTest. Check results below:
General direction of optimizations
The main areas to focus on when optimizing Joomla:
- Reducing the size of the downloaded data;
- Reducing the number of HTTP requests;
- Caching
- Parallel loading of resources, instead of sequential.
Each Joomla extension can slow down your site. However, performance is affected not only by extensions, but also by:
- Images;
- Fonts: both web fonts and embedded fonts @fontface;
- Social Networking Support Scripts
- Patterns
- Captcha
- Embedded video
- JavaScript libraries
- Plugins
etc.
When developing your own template, you should think about what is really necessary and what you can refuse. Do you really need images for the background or buttons, or can you use CSS3 for this?
You always have to compromise: a fast website is a minimalistic website. If you are creating a sophisticated website for photographers, get ready for more website resource consumption. However, even such sites can be optimized. Some get to the removal of Joomla core components, but this is already an extreme case. Often, safer actions are enough to get the desired result.
Joomla Caching
Caching is a mechanism for storing ready-made pages for the user without the need to access the database each time. These pages are stored in one of the folders used by Joomla: a cache folder. You can check the file system with Joomla for files that contain:
- com_ * files for storing components
- mod_ * files for storing modules
- page files for storing entire pages
The main advantage that caching gives us is the faster loading of sites due to the fact that the already generated information is used. The problem with caching is that the information in Joomla can change after saving the page in the cache. Therefore, the activation and configuration of caching, especially on sites with frequently changing content (for example, news sites), must be checked by tests.
Another problem is that some functionality may simply break if the cache is enabled, for example, feeds or captcha when the System Cache plugin is enabled. Also, the cache in Joomla works only for guest users and does not work for logged-in users.
Caching settings
Global caching can be enabled in the Control Panel section of the System -> Global configuration -> System . Global caching creates component page files, the main Joomla content area in the / cache / com_ * section.
By default, module caching is activated by global caching, but you can set individual settings for each module in the Extensions -> Module Manager -> select module -> Advanced.
Browser caching
Browser caching allows you to reuse website resources that have already been downloaded to your computer when you visited the site earlier. Resources can be HTML, CSS, Javascript, fonts, and other static resources. Browser caching is safe for the site and does not break its functionality.
The disadvantage of this approach is that some resources will not be updated automatically when changing on the server (for example, CSS files). Most visitors will be able to fix this problem simply by clearing the browser cache, but the severity of the problem depends on the situation.
To activate browser caching, we need to perform 2 preparatory steps:
- Include URL rewriting in .htaccess .
- Make sure that your web server supports the mod_expires module (now it is almost on all hosts). To prevent problems in the absence of a module, wrap our code in if, as will be shown below.
For each type of file, we will set the cache end time, showing how fast it will update: short for files that change frequently (for example, html) and more for CSS and Javascript.
The result is the snippet shown below, which must be added to .htaccess:
FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
The default value is set for files that are not in the list (access plus 1 second). You can expand your browser caching settings to audio, video, @fontface, embedded fonts, etc.
You also saw the lines in the code:
- ETag : Tells the browser that images already uploaded should not be reloaded;
- Expires headers : like ETag, but for the specified file type;
- AddOutputFilterByType DEFLATE : Enables compression for selected content types.
This setting significantly improves performance. What is especially nice: using it allows you not to worry about problems with the lack of the required module on the host: at least nothing will break.
Turn on G – Zip
Joomla has built-in G-ZIP support. This is a mechanism when website content is packaged in a zip file. The packed file is sent to your browser, unpacked and displayed. All browsers now, including ancient IE from version 6, support G-Zip.
To activate this function, simply enable it in the System -> Global Configuration -> Server Settings section .
You can check the performance and degree of compression at: http://www.feedthebot.com/tools/gzip .
In our case, the compression size was 77%, which has a good effect on performance, especially for large sites.
Image reduction
If your site uses a large number of images, this is a very important point. Firstly, you need to make sure that all images are saved with the lowest possible quality without any visually noticeable difference. For .jpg, setting the quality to 60% can save more than 50% of the file size from the original value, despite the fact that the pictures will look good. You can set the quality of the image when saving, through Save for Web in Photoshop. Also be sure to use the correct file format (.jpg for photos, png for transparent pictures, logos, .gif for small, low-quality images).
For .jpg you can also choose progressive or baselinewhen saving. The difference is especially important for slow connections:
- baseline images are loaded from top to bottom;
- progressive images are downloaded from a lower granularity to a larger one, with the loading becoming sharper. Google recommends using progressive, although such images may be slightly larger in size.
Lossless compression
Often pictures can contain unnecessary information, such as the date of shooting, the model of the camera, etc. Even if you save a picture in Photoshop via Save for Web, not all such information is deleted.
GTMetrix finds images on your site that need such optimization, not only talks about it, but also provides links to optimized versions of images:
However, this is not enough. In the comments to the last article, readers suggested the wonderful ImageOptim program , which produces lossless compression. Copy the folder of the used theme from the host to the local drive, pass all the pictures through ImgageOptim. The volume of downloaded data will decrease significantly. You can also use the online tools Smush.it (from Yahoo!) andTinypng.com .
If you want to automate this process, use the Jbetolo extension . In addition to batch optimization of images from the selected folder, the extension allows you to optimize HTML, CSS and JavaScript: perform minification, merging and compression . Before each optimization, do not forget to backup. Otherwise, incorrect actions may lead to the need to restore the Joomla admin panel.
Turn on the CDN
Adding CDN support will significantly increase site performance. Often, just installing the DNS CDN and turning on the optimization is enough. Many CDNs allow you to compress and optimize CSS and Javascript on the fly. The result is not long in coming.
Joomla performance testing after optimizations
GTMetrix site verification results .
Site load time was 2 seconds. Before optimizations, the time was 3.33 seconds.
As a result of optimizations, site loading time was reduced by 40%. The page size has decreased from 864 kb to 100 kb, which is especially important for slow Internet connections.
Now let's check the site with WebPageTest .
The first load time of the site is 1.586 seconds. Site reload time 0.563 seconds. Before the optimizations, the time of the first loading of the site was 3.11 seconds. The site reload time is 1.064 seconds.
As a result of optimizations, the time of the first loading of the site was reduced by 2 times. The site reload time was also reduced by 2 times.
We are sure that this is only the first step in optimizing Joomla. Send your optimization ideas confirmed by tests to trukhinyuri@infoboxcloud.com . For the best set of recommendations, the author will receive a year of VPS 1024 from Infobox . So that you can try to install and optimize Joomla, we provide a trial version of Cloud VPS for 15 days for free. Register here .
Successful Joomla!