Speed up website load times

Clients and their web site visitors appreciate not only well designed sites, but well designed sites that load fast. The best web site loading speed enhancements used to be available only to major sites. Speed is an important factor for all sites, though, and with HiFi you can ensure your clients' sites utilize the same cutting-edge speed techniques as Google and Yahoo.

In this mini-challenge you will compile and minify your site's CSS and JavaScript to speed up your site's download and page load times.

Getting Started

Step 1) View the source of your trial site's home page. Look in the head tag for stylesheet link tags. These each link to the original source CSS file.

Step 2) In a new tab, login to your HiFi site's backend. (Place 'edit.' in front of your tryhifi.com subdomain.) Open up the 'Developer' tab. Then open up the Template 'index.html'. This is your site's master template, from which most other templates will reuse the structure of.

Step 3) Locate the {% css %} template tag. Notice how this tag is followed by a string of css stylesheet file names (you can open the actual files from the left hand sidebar under 'Styles').

Step 4) Add the keyword 'min' after the string of stylesheet names. This turns on compilation and minification. It should look like this:

{% css "reset,colorbox,typography,master,hifi-types" min %}

Step 5) Back on the front-end of your website, refresh the browser and view your source again. Open the stylesheet to find that all of your stylesheets have been brought into a single file and minified!


The Challenge

Now that we've turned on compilation and minification for CSS, try enabling JavaScript's compilation and minification. (Hint: the {% script %} tag is at the bottom of index.html, another recommended technique for improving page rendering speed.)


Speeding up your client's web sites is really easy with HiFi. They will get the benefits of the same techniques used by Google, Facebook, and Yahoo. Most Y-Slow and Google PageSpeed recommendations are always on. Here are some more performance enhancing techniques you will benefit from right out of the box:

  • Add an Expires or Cache-Control Header
  • Split components across domains
  • Enable GZIP compression
  • Minify CSS
  • Minify JavaScript
  • Don't scale images in HTML, serve scaled images