YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Faster loading with Warp5

Our new template framework Warp5 unites awesome design and fast loading times.

Faster loading with Warp5

A couple of days ago we introduced our new template framework Warp5. Today we want to show you how fast it is.

Coding our templates we always have one thing in mind: Speed. When we created Warp5 we were thinking about how we can make our future templates perform the best they possibly can.

Despite its beauty, the first Warp5-based template "Phoenix" only loads 9 kb of CSS, 3 kb of images and optional 22 kb of JavaScript for all animated effects (Mootools library is included)!

Very few file requests

When you use a Warp-based template you will encounter very few file requests. Warp5 comes with two compression modes for CSS and JavaScript. The first one merges all CSS and JavaScript of a YOOtheme template each in a single file so that there is only one file request each instead of multiple ones. It is also possible to add the CSS and JS of extensions to these single files.

Gzip compression

The second compression mode, gzip mode, adds extra gzip compression to these single CSS and JS files to make them extra small. The file that all our JS gets delivered in then only has 22 kb ... and MooTools is already included! In the screenshot from Firebug you see that two JS files get loaded, one of them is Joomla's own caption.js file which has 1 kb:

The fastest templates

All our templates' CSS put together in a single file only has 9 kb when gzipped, including the styles for all modules and their color variations:

The fastest templates

So you see, when you add it up, the CSS and JS responsible for all module variations, all our fancy effects, the typography and so on only take up roughly 32 kb. And if you don't like JavaScript at all, you can even switch it off in the backend of your template. The template would stay fully functional.

CSS sprites

Another reason for why there are only so few file requests is that since Warp5 we minimize the requests by merging image slices into so-called CSS sprites. This means that we put as many image slices as possible into a single image file which significantly reduces the loading time of your website. Some of the sprites that we built the Phoenix template's modules with contain up to 11 slices. This reduces the file requests from 11 to 1! To save you some bandwidth we also optimize the file size of all our templates' PNG images. Even with all its rounded corners, in a basic layout without modules and with a dropdown menu, Phoenix only uses 11 background images that altogether only use 3.6 kb:

The fastest templates

Even with all different modules and their color variations displayed on a page, you still only load 16 kb of images. To get a clue about all the features of the Warp framework please check out its new website we just set up!

By Sascha | | Posted in Warp

Comments (11)

  • farnoush.ghavami


    | Profile |
    Great , Very Great.
  • mark


    I am very impressed by the speed of the framework ! so if I understand it correctly, then you can put all the css and js files from other extensions (like comment or mini frontpage) into one file ? what about the google analytics js file and additional ad sense script files ?
  • ball


  • deco


    WOOOOOOOWW!! very impressed!!!!
  • Daniel


    This really does make huge improvements to site loading time.
    I have been using Godaddy, And one of the main issues users have complained about was speed.

    Ever since the Jackie Chan Fansite updated to this template, I have even had people asking who i Host with.
    I explain.... It is not the hosting, It is the template.

    Thankyou very much yootheme, You have helped us improve our site 1 Million percent.
    Keep up the good work,
    JCFS team
  • hubert.cole


    | Profile |
    This is the best of the best flexible ... FAST wow
  • im now on a conversion of scoop to phoenix :D
  • That's great, finally a Template Design company that ensures that they use a good framework.
    Can't wait for more templates based on it.
  • This framework actually opens a new way for templating with Joomla, also for non-programmers. I like very much the SEO friendly philosophy of this framework too; I've seen too many apparently good looking templates that are filled with very obtrusive code that makes optimization a very difficult task.
    Great work!
  • amin


    how downloding this temlate
  • zadbui


    I love yoo somuch, great work!

Leave a comment

Please login to leave a comment.