I started getting more and more SEO related questions both on Themeforest and in our Support Forum so I decided to write this Blog Post and explain everything in details. Search Engine Optimization is an endless discussion with unlimited opinions but there are some basic things you must do in order to optimize your Joomla website and make it "SEO friendly". Grab cup of coffee or tea and enjoy reading :)
As you can see in the image above, Search Engine Optimization is a complicated mixture of many different things. But in general, these things can be grouped in two separate aspects - On-site SEO and Off-site SEO. This article will focus on the On-site part and more specifically on the technical part related to improving the code, the speed and the general performance of your website. Basically, I will focus on the GTmetrix related stuff.
GTmetrix is a free tool that analyzes your page's speed performance. Using Google Page Speed and Yahoo YSlow, GTmetrix generates scores for your pages and offers actionable recommendations on how to fix them.
The screenshots below illustrate what GTmetrix is and what the score of couple of our templates is after doing some very basic optimization of their demos.
You can run our template demos through GTmetrix and see the results on your own. Do not forget that I have done some very basic optimization, you can achive even better results if you dig deeper. So let's get started...
1. Choose a good, reputable Hosting!
This is where everything starts! Yes, this is one of the most important things. Guys, if you really care about your website and its SEO, just purchase a VPS or Dedicated Server in a reputable, well-known company. Just do not try to save few bugs by purchasing a Shared Hosting in some cheap company. Just don't do it!
Another thing you need to consider is the server location. This is something you cannot escape from. I mean it is absolutely normal - if your server is physically located in USA, the loading speed will be a bit slower for the European visitors. And the other way around - if your server is located in Europe, the loaded speed will be a bit slower for the USA visitors. Please do not be confused by the loading time shown for our templates in the above screenshots. Seven seconds loading time is quite not perfect but if you look closely you will notice that the Test Server is located in Canada while our templates are hosted in Bulgaria! You can use tools like Pingdom in order to find out the real speed of a website from particular location (Dallas, New York and Amsterday).
2. Enable and configure the RokBooster extension.
RokBooster will compress and combine your CSS and JavaScript into as few files as possible each. RokBooster can also convert page and background images to data URLs for increased performance. It is a must-have extension and it comes bundled with the Gantry Framework.
RokBooster and JCH Optimize have the same purpose, basically they do the same things. Since JCH Optimize is the more popular one, RokBooster is the better one. Yes, I mean it! JCH Optimize is an over-complicated extension and it usually causes more harm than good (if not properly configured, and believe me it has a lot of options that you need to play with in order to make it work).
You also need to play with the RokBooster extension in order to prevent any conflicts and get most out of it. Our templates work best with the default settings, you might just consider disabling the "Compile Imported CSS files" option if you have any issues with the FontAwesome icons.
3. Optimize your images.
Images are the most size consuming elements on every website. Sometimes images might be 90% of a 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 Smush.it™ and TinyPNG. Just give these tools a try and you will be amazed how much of the total website size will be reduced.
4. 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. The exact code I use for www.JoomFX.com is:
<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>
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. Peter has proved himself as a great Joomla developer over the years. We are also using CDN for Joomla on this website (only on www.JoomFX.com, not in the Template Demos). My advice is 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.
The above is just a small part of your SEO strategy!
Yes, that's right! The above tips are just a small part of your overall SEO strategy. As I mentioned in the beginning, this article is focused on your GTmetrix results. From here on you need to do a lot of other things like Readable (SEF) URL's, www or non-www URL's, Sitemap and much, much more!
A great website about Joomla SEO is JoomlaSEO.com. Make sure you visit it and read everything carefully.
And if you want to understand everything about the Search Engine Optimization in general, the MOZ website is a great website to start from.
I really hope you will find this article useful. Just make sure your website is optimized so you can get a better ranking in the search results. And don't forget - one of the most important factors in SEO is the content of your website. Make sure you post good, original content on a regular basis, make sure your website brings real value to your visitors! Content is King :)
