0
Welcome Guest! Login
0 items Join Now

Our Cyber Monday Sale is almost over! Save 50% on templates and 35% on club memberships during our limited time sales event. Act fast!
motionmailapp.com

RocketTheme Blog

Afterburner2: A Fast Free Feature-Rich Joomla Template

alt showcase

Whenever the topic of Joomla template frameworks comes up, the big names get bandied around, along with a few less well-known solutions. Inevitably, Gantry is mentioned, and usually in disparaging tones along with adjectives such as "heavy", "bloated", and "slow.” I think this generally stems from a lack of education and understanding about what Gantry brings to the table, how it performs tasks, and how to get the best out of it.

I recently replied to one such conversation on LinkedIn. If you're interested, you can read more about it there.

Afterburner2, which we released last week, started off as an experiment in which we wanted a clean design that still offered all the power of the Gantry framework while showcasing that Gantry could in-fact be very fast. What started out as a simple modern design resulted in a fully-responsive template with full Bootstrap support, multiple presets, and module variations, while still maintaining the power of configurability that Gantry provides. The resulting template when used in conjunction with our free RokBooster extension, has far surpassed our modest aspirations, as the results below clearly show.

Afterburner2 Demo

Afterburner2 Performance

The RocketLauncher installation contains a reasonable representation of a real-world site hosted on a pretty average web server at Rochen Hosting that houses over 200 other Joomla, WordPress, and Magento installations. The performance is still impressive. The following results were performed running Afterburner2 RocketLauncher 1.0, Joomla 2.5 (Conservative Cache On, Gzip Page Compression On), RokBooster 1.1.6:

YSlow Score of 98/100

alt YSlow

Google PageSpeed Score of 93/100

alt YSlow

How Afterburner2 was born

When we created our original free AfterburnerJoomla template back in 2009, the Internet was a very different place than it is today. Back then, we focused on keeping the code as minimal as possible, reducing features to the bare-minimum and overall sacrificed usability in return for ultimate performance. This template was much-loved in the Joomla community and over the past few years, it has been downloaded over a quarter of million times!

alt Afterburner

Since that original release, we updated Afterburner for Joomla 2.5, but its limited feature set remained unchanged. The modern Web we work with now is no longer the realm of simple browsers running on desktops. Now, we have a vast multitude of modern browsers running on a wide variety of platforms including smartphones, tablets, desktops, laptops, gaming consoles, and much more. Responsive design is the best approach we have to solve the problem of serving sites to this wide variety of display types and sizes. Also, we have become used to having complete control over our layouts, being able to use a color-picker to choose colors, and enjoying the full range of CSS elements that frameworks such as Bootstrap provide, among other features.

Afterburner2 had to take the spirit of the original Afterburner template but update it for this modern web, and it had to do this using our Gantry Framework. We kept the feature set realistic, and didn't showcase every-single bit of functionality as we usually do for our RocketTheme 'Club' releases. Our RocketTheme templates often appear full-featured because we try to showcase them with as much functionality as possible to show our members as much of its capabilities as possible. Most production sites would never use all this functionality, but we have only one shot to demo the design, so it's turned on for our demo purposes. By disabling those extraneous advanced features and keeping our content in check we clearly show that the Gantry framework is capable of being very performant.

RokBooster is a key part of our optimization strategy and it employs several techniques such as CSS and JS compression and combination to minimize the amount of data, and the number of requests required. It also does some advanced things such as removing small references from the CSS and putting them in line with base64 encoding. This, again, has the benefit of reducing the number of requests.

alt Performance Graph

Even though the onload time running locally is barely affected, the number of requests and the total KB transferred is dramatically reduced.

Try it yourself!

Afterburner2 is a completely free GPL template from RocketTheme. The best way to see how fast Afterburner2 actually performs is to download it, install it, and test it yourself.

Afterburner2 Download

Advanced Tips & tricks

Caching and LESS compilation

We’re commonly asked why the first load on a fresh installation is so slow, but the site speeds up in subsequent loads? This is simply because the first load of the site has a fair amount of work to do. The LESS files are compiled into CSS, the Joomla articles, modules, etc are cached, and even the Gantry framework configuration information is cached. After this initial cache process has occurred, all subsequent page loads by your clients will utilize these compiled and cached files, so the site speed will be fast.

Apache .htaccess Configuration

The .htaccess we used on our demo server is as follows:

# YSlow STuff
FileETag MTime Size
#Expire Header
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 month"
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-javascript "access plus 1 week"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/ico "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 month"
  ExpiresByType text/css "access plus 1 week"
  ExpiresByType text/html "access plus 1 day"
  ExpiresByType text/plain "access plus 1 week"
  ExpiresByType video/x-flv "access plus 1 month"
  ExpiresByType application/x-font-woff "access plus 1 month"
</IfModule>