blog

New static website theme

demo website template

I have a need for speed, well speedy websites anyway. My goal is to build a bunch of super fast website themes that I can base my future work on, so here’s my first attempt. It’s a lightweight, responsive static website theme.

The entire website CSS is only 1.67 KB and the JavaScript is only 485 bytes gZipped! I’ve set up a demo version on my staging website and it runs like a scalded dog. 🙂
You can download the files on Github.

Putting Your CSS Framework On A Diet

I’ve worked on a couple of projects now that use Bootstrap. I like Bootstrap for prototyping, it’s quick and easy. However, I don’t care for the weight especially in public facing projects. Analyzing one Bootstrap project that I’m putting on a diet has a final stylesheet of 150k and over 3,000 unused classes (ouch).

Mobile users and users in rural areas with poor internet connections may be clients and customers. Getting users content delivered fast is crucial, well if you want to stay competitive. I believe speed is king and a couple of tools I’ve started investigating to speed up the projects are…

PurifyCSS and UnCSS, both of these tools are used with a task runner like gulp or grunt their basic mission is to strip out all unused classes. I’m not real clear about the dynamic classes yet. I guess this is another reason to prefix classes tied to JavaScript with “js-” or hey target the data-” attribute instead. Regardless I’m hoping one of these will slim the CSS down.

Real World Speed Test

In my quest to build the fastest website possible, I stay busier than a Colorado Taco Bell employee working the late shift. I have several methods of testing website speed; one of the automated tests I like to use is Google PageSpeed Insights.

In following their recommended techniques, websites will get a lower grade for using an external style sheet (if the style sheet is small). Therefore, I started testing inline styles as opposed to an external style sheet. I realize there are many different variables in determining the speed and my test are not the most scientific, but if you look at “exhibit A”, the page with the inline styles is over 100 milliseconds slower than “exhibit B” which is using an external style sheet. However, by using an external style sheet, the site loads faster in the real world, so I believe I am going to stay with the external file on my website for now.

I am using Typekit for my web fonts and that also brings down the score, but I am thinking it is still faster than using images, not to mention the time it takes to develop and optimize the images. I believe speed is king and it will always be a factor on the web. With the percentage of mobile web surfers climbing it will be even more of a factor. In the end, using automated tools for testing is good, but using common sense and real world test will always be a better solution.

Faster Websites Increase Profitability

When it comes to designing fast websites, I guess I’m a dinosaur. I remember the distinct sound of my 56k modem firing up and the challenges of trying to develop a website that would look good and load fast on slow connection. To me, a big part of user-centered design is fast loading pages and a snappy interface whether you are designing for 56k or 3g.

Like any pure blooded redneck- I believe faster is always better and It looks like having a fast website pays off where it counts, a recent internal study by Wal-Mart found that:

  • A 100 millisecond delay resulted in a 1% DROP in revenue
  • A 500 millisecond delay resulted in a 20% DROP in traffic

After

I’ve wrote about website speed being king before and it’s nice to see real results. I can’t begin to imagine what a 1% drop in revenue might look like for the Wal-Mart website? I’m guessing a redneck like me could probably buy a pretty fast truck with 1% of the profits from an hour or two. 🙂