Hey guys, today's topic is website performance, why it is important and how to achive the best results.
The first and probably most important thing you should have in mind is that website performance directly impacts your search engine rankings! Yes, Google announced that officially - performance is weighed as a ranking factor. And they announced that almost 6 years ago, back in 2010. You can read more about it in this article. Nowadays, and not to speak in the future, the website speed will be one of the crucial ranking factors!
Other reasons why you should pay attention to your website's performance is that fast websites increase conversion rates, make your visitors stay longer on your website (which reduces the bounce rate), basically the faster your website is, the happier your users are.
Now, Joomla may not be extremely fast out of the box, but that's simply because not all performance options are switched on by default. And they should not be enabled by default, because each and every website has its specifics, which leads to different configuration and different optimization strategies.
Here at InspireTheme.com, we constantly have the performance in mind, while designing and developing our products! And we actually do the same steps to optimize our template demos.
So, let's get started. I always separate the website optimization in two independent parts - page/code optimization and server optimization. If you are not yet aware, the GTmetrix results for your website are mostly based on, and dependent of, your server setup! In order to achive any results, I assume that you are already using a good, reputable hosting provider. It is just not worth it to do any optimizations if you are on a cheap, crappy server!
Page/Code Optimization
1. Optimize your Javascript and CSS - here I mean combining and compressing the assets. By combining all separate CSS and JS files into just one CSS file and one JS file saves a lot of HTTP-requests. Next to that, also the size of the individual files is important. Minimizing these files will actually compress them by removing the empty spaces and putting the code on one line.
Two of the most popular Joomla! extensions for combining and compressing JS and CSS are JCH Optimize and RokBooster. While JCH Optimize is the more popular one, I do actually prefer RokBooster which is developed by the Rockettheme guys. In my opinion JCH Optimize is a bit over-complicated, while RokBooster is crazy simply and does the same job (if not better).
No matter which of the above extensions you choose, you do need to play with its configuration in order to prevent any possible conflicts and get most out of it. If you just enable the exension with its default settings, your website might look broken at first. You then need to start disabling different options, add exceptions, etc. The whole process is "trial and error". Try different configurations and see where you get the best results.
The following screenshots show the RokBooster configuration we use on our template demo sites:
2. Enable Caching - Caching is the mechanism that offers users a stored view of (part of) a web page so that does not have to be pulled from the database. This usually speeds up the load time of a webpage, but the disadvantage could be that a user looks at a stored view, while the actual page has been changed in the meantime. Whether or not this is a problem depends on the site.
I will not go in details about the different cache options in Joomla, you can just have a look at this article on OSTraining instead. It perfectly explains everything you need to know.
What I just want to add here is that I only recommend using the "Conservative caching" which you can find under System > Global Configuration > System. This is the most "conflictless" option. But of course, if you know what you are doing you can achive better results with the other options. For example, you will get the best results by enabling the "System - Cache" plugin because it takes snapshots of entire pages including everything - components, modules, plugins and a template, but this is quite a hardcore solution, especially for dynamic websites.
3. Enable GZip - by enabling GZip in Joomla, all pages are zipped on the server-side before they are sent to the browser. Your browser then unzips the content and displays the site. You can enable this option under System > Global Configuration > Server > Gzip Page Compression.
4. Optimize your images - Images are the most size consuming elements on every website. Sometimes images might be 90% of the website size! That's why optimizing their size is one of the crucial steps you need to perform.
Great tools for optimizing your images are TinyPNG, TinyJPG and Smush.it™. Just give these tools a try and you will be amazed how much of the total website size will be reduced. You can easily cut the website size and loading time in half!
5. Use a CDN (Content Delivery Network) - A Content Delivery Network is a network of servers around the world that can be used to offer resources to users without having to pull them from the source server which is limited to one location. This makes the use of a CDN especially useful for websites that operate globally.
A CDN fetches the files of your website, and distributes them to datacenters all over the world. Based on how you set it up, the static files will be served from the CDN, which will usually be images, CSS files, JavaScrips files and so on.
I strongly recommend you the CDN for Joomla extension by NoNumber. You might want to configure the extension so only the images will be served by the CDN. In most cases it is better to load the CSS and JS files from your own server. Configuring the extension this way, you will get better GTmetrix results and you will prevent possible script and styling conflicts.
Server Optimization
1. Leverage browser caching - every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, javascript and images.
Browser caching can help by storing some of these files locally in the user's browser. Their first visit to your site will take the same time to load, however when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally. This means the amount of data the user's browser has to download is less, and fewer requests need to be made to your server. The result? Decreased page load times.
In order to enable the Leverage Browser Caching you just need to add few lines of code at the bottom of your .htaccess file. Here's the code we use:
<IfModule mod_expires.c>
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"
</IfModule>2. Enable KeepAlive - Keep alive is a method to allow the same tcp connection for HTTP conversation instead of opening a new one with each new request. There is a great article about it, explaining everything that you need to know. Check it out!
Basically, this is it. Once you do the above steps you can rest asured that your website is properly optimized and Google will "like" it :) Of course, there are many other things you can do to further optimize it but the above are the "core" things you should start with.
I hope this article was interesting and helpful for you guys. Feel free to leave your comments below :))