For the whole January, Marko and I were working on the new HTML template we released the previous week: Organique!
We dare to say it is quite a masterpiece, we put so many good things into it, from Jaka who designed it, to coding with many tools and best techniques for the optimal experience.
The initial goal set by Marko was to keep the initial page load weight for the index.html under 500 kb. While we done some manual statistics on the popular ThemeForest items we discovered that most of the templates greatly exceed the 1 MB for the initial load time while it is not hard to find the ones that weight 2.5 MB or more! This is waaaay too much. Ideally we would strive to have the website as light as possible, something like 100 – 150 kb would be great, but to achieve something like that we should remove many big images (which sell the template), so that was a no-go. But 500 kb is something that can be achieved without too many trade offs.
Base HTML
Before everything started at all, in December Marko and I prepared an awesome HTML starter template called HTML Base: https://bitbucket.org/primozcigler/html-base. It is basically the empty HTML template with Gruntfile configured just the way we want it. Look at the project description for the specific Grunt plugins used, but what added most impact to the optimized page load time is the lossless image optimization (imagemin), autoprefixer, usemin and requirejs. Fork it and give it a try!
Mobile-First
For Organique to be fully mobile friendly, it is coded with the mobile-first in mind. That means that we only add additional styles and functionality with the @media queries and features detection. The default version is therefore light in terms of weight and easier to render also for slower mobile devices.
For the JavaScript @media-like conditional loading/execution we used the Enquire.js by Nick Williams.
Images Optimization
On the image-heavy websites usually the easiest thing to do regarding the page weight is to optimize the images – first use the right type (JPG/PNG), then optimize it lossy, then finally optimize them losslessly. And that’s exactly what we did, with a great help of the Addy Osmandi’s article on the image optimization.
For the Linux there are awesome tools for the lossy optimization: for the PNGs we used the pngquant (usually with the default 0-100 quality settings) and for the JPGs the jpegoptim (usually with the max quality set to around 70-85).
Static Assets
Regarding the CSS and JS we did the regular uglifying the files and concatenating them into a single HTTP request – using the Grunt for these tasks. Additionally we reduced the original Twitter Bootstrap file in terms of vendor prefixes using the autoprefixer tool.
Regarding the JavaScript loading, we deferred the non-critical JS requests after the load event is triggered, following this article’s principles by Patrick Sexton.
Modularity
Everything in the Organique is a module. This isn’t really a performance-related feature, but we really put a lot of focus to build the template as modular as possible:
- the OOCSS using the BEM syntax
- source CSS files separated by components using SASS
- source HTML files separated by components using Assemble
- source Handlebars templates which compile to HTML files
- YAML flat file database with products
- source JavaScript files defined as AMD modules and coded as a classes, all wrapped with the RequireJS
Nutrisslim, Thank You For the Images!
When the project was near the release, we still didn’t have the images for our products. The first options was that we buy stock photos of the fruit and vegetables, but this wasn’t really what we wanted. It would be much better if we had some actual products in the shop than stock images.
So that evening Manca and I went to the shop after the work and Manca noticed the nice packaged eco products by the Slovenian company Nutrisslim. I called them by phone the next day and they generously allowed us to use their images on our demo site. We both benefit that way.
In addition they gained (at least) two new customers 😀
Summary
There is still some room for the improvements. The final index.html page weight is now 543 kb with 30 images.
I am thinking about the CDN. And also loading some APIs like Google Maps JS scripts only when necessary (not on all pages).
Anyway, we did some amazing job so far and have a very solid HTML Base project to start the new templates from.
Do you think I forgot any optimization technique we should use as well? Fire away in the comments below! And you should buy Organique HTML if you like it!
