This is a transcription of my speech at Joomla Day Poland 2015. The subject of my presentation was "Speed up your website".
Fast website affects 4 important factors:
Increase of conversion rate
It is worth to speed up a website, because there is very high correlation between the speed of page load time and the amount of conversion rate. The conversion is a user action, which is desired by the owner of the site. Conversion for a blog is when someone displays an article or clicks on the ad banner, for an online store it is a product purchase.
There are many interesting examples regarding the effect of the page load on the conversion rate, here are some of them:
Better position in search results
Since April 2010, we know that Google's algorithm for positioning in search results takes into attention page loading speed. Remember, that position of your website in search results is influenced by a whole range of different SEO factors, and site speed shouldn’t be considered as a major factor, but only one of them.
More user-friendly site
Surely everyone has experienced such a situation that the website which was loading too long forced us to close the tab. No one likes slow websites. Fast website may result in lower bounce rate and increase in the number of visited pages.
Lower operating costs
By improving page load speed, we reduce its size so we can save on the data transfer on our server. Thus, we can reduce the cost of server maintenance.
So how fast a website should load? Here are some selected results of statistical surveys conducted on users:
We should optimize our website to load in less than 5 seconds, because at that time there is a good chance that we will keep the user on our website.
Here is a list of the most popular tools that allow us to check the performance of our website:
Google PageSpeed Insights
Probably needs no introduction. That tool will check the performance of our website in the 100-point scale, and will show a list of recommended actions that will help us to increase its performance.
Visit Google PageSpeed Insights
It is a similar tool to Google PageSpeed except that's by Yahoo. It has no analysis capabilities directly on the site, but you can download an extension for your browser.
It is a tool that will present us collective results of both of the above tools and additionally it will present us information such as page size, load time and number of HTTP requests.
The fact is that a fast server is the basis for optimization. If your server has a slow response time then optimization won't bring you the desired effects.
Hosting can be divided into 4 main types namely: shared, VPS, dedicated and cloud.
Low performance and price. Suitable for small business websites with a low traffic.
Good price-performance ratio. Suitable for a blog or a small online store.
High-performance and expensive. Suitable for large websites and online stores.
High performance and scalability. Suitable for large websites and online stores.
Having the latest version of Joomla and extensions is important not only from the security reasons but also from the point of website performance. New versions of extensions often contain improvements that may have a significant impact on the speed of our website.
Each installed extension takes some system and database resources. It frequently happens, that some extensions, for example an enabled plugin can load CSS and JS files into the head section of the page, despite the fact that the plugin isn't used on any subpage. It's a good practice to have only extensions that are actually used on your site. If you frequently test various extensions, remember to uninstall them later.
System -> Global Configuration -> Server -> Gzip Page Compression -> Yes
Here is a list of popular files and the level of compression using GZIP:
As you can see compression of such resources can be as high as 70-90%.
Worth to know:
How the cache works? When a user visits your site then a part of page or the whole page is initially generated and stored in the cache directory on your server. It means that the server doesn't have to perform the same query to the database and doesn't need to generate the same page each time a new user visits your website, but simply it takes the page from the cache.
In Joomla we can distinguish three types of caching: for component views, modules and pages. In the global configuration of Joomla you can find the cache settings that apply to the first two types. The recommended setting is conservative level.
System -> Global Configuration -> System-> Cache Settings
What is the difference between the conservative and progressive cache options? In the conservative option, the same content is served to all users, while at the progressive option the page is cached and served for each unique user.
In Extensions section in your Joomla back-end you will find a plugin, which is responsible for caching of the whole page, including components modules, plugins and templates:
Extensions -> Plugins -> System - Page Cache
In the parameters we can further enable caching in the browser.
Compress HTML, CSS and JS resources.
How does the compression works? It removes empty and unnecessary characters (spaces, tabs, line breaks, etc) from the code and this can result in relatively large savings. For example, uncompressed version of jQuery has 278KB of size and compressed version has only 94KB, which is three times smaller size.
Load scripts with the async attribute <script async> or defer attribute <script defer>
What is the difference between the async and defer attribute? Async script is being downloaded during HTML parsing and it will block the HTML parsing once it will be downloaded and executed.
Defer script is being downloaded during HTML parsing and it will be executed after the parsing will be complete. Defer scripts will also be performed in the order in which they appear in the document.
Divide CSS styles on critical and non-critical.
Critical CSS - the minimum number of CSS styles needed to render above the fold content. They should be placed inside the <style> tag in the <head> section of your template, and all other styles (non-critical) should be loaded using optimized CSS delivery.
More details about optimized CSS delivery.
Usually, images size if the largest part of the whole page size, so it is very important to take care of their proper optimization.
Use compression tools to optimize the images on the page:
Use a proper file extension for your images:
Use JPEG format for photos, PNG for graphics or less detailed images, GIF is suitable for simple and small images, don't use formats like BMP/TIFF
Avoid image resizing using CSS styles:
You should crop such an image and adjust its dimensions to the area where it will be displayed.
Avoid using too many images on a single page.
Use lazy load for images.
Use the WebP format for images.
Providing the website images in the new format (WebP) is one of the essential factors that can help in higher rankings for the websites.
With the DJ-WebP - Img to WebP free Joomla plugin you can convert .jpg and .png formats to .webp.
Another way to optimize website is to leverage browser caching. Using the appropriate code in the .htaccess file you can tell the browser not to download some resources from the server, if they are available in the browser cache.
The rules that are worth to be applied in the .htaccess file:
It tells browser whether to download a file from server or from the local browser cache.
It tells browser when the file should be refreshed and replaced in the local browser cache directory.
It compresses text resources, alternative to GZIP.
Optimized .htaccess file can be found here.
Leverage Joomla browser caching
Leverage Joomla browser caching is often recommended by Google. Extending the cache lifetime results in the user saving the time usually required to download the same files each time they visit the site. The whole process requires a modification in the .htaccess files.
Learn more about this method here: Joomla leverage browser caching expire headings
Content Delivery Network is a network of servers around the world that allows to serve static files to a user from a server that is geographically closest to him. As a result, files can be delivered much faster to the user.
In April 2015 Google announced that websites that don’t have a mobile version or aren’t responsive can fall down from their position in search results.
Using the below link you can test whether your website is friendly for phones and tablets:
Google Mobile Friendly Test
Here is a list of popular Joomla extensions that will help you to improve performance of your website:
Probably the most popular plugin for Joomla optimization. It has a lot of options, for example:
Very similar functionality as JCH Optimize and it’s completely free.
It gives you more control over what content should be cached than default Joomla cache.
Advanced Module Manager
It gives you more control over what content should be cached than default Joomla cache.
Lazy Load for Joomla
EF4 Framework is our framework for Joomla templates. When it comes to optimizing, we offer the following functionalities:
Optimization is an ongoing process and you have to perform it regularly.
Once you install some new extensions and add some new articles, your site may be slower again if you do not take the optimization rules into account.
Remember about testing the functionality of the site after each optimization.
Some optimization options like caching or JS compress are very sensitive and may cause some issues on your site. That is why it is very important to test every single page and every single functionality on your site carefully.