Typical mobile-friendly pages call for special CSS to handle the different viewing sizes. Often this comes in the form of Bootstrap, and then add-ons with Font Awesome and JQuery to make it look extra nice. Here’s a breakdown you might expect from a typical website:

Includes Compressed Size
Content HTML 10 KB 10 KB
Font Awesome 7 KB 30 KB
Bootstrap CSS + JS 35 KB 156 KB
JQuery 33 KB 94 KB
Google Analytics 11 KB 25 KB
Disqus 22 KB 64 KB
Total 118 KB 379 KB

The content HTML of the site is less than a tenth the actual bandwidth used to transfer it, for a typical site. Of course, connections are faster than ever (and cheaper too), so this shouldn’t really matter. You have me there. However, I like the principle that when information is transfered, the information is utilized. When I have used all the fancy mobile stuff, I found that I wasn’t using most of it.

This prompted me to create a new theme that does the major things (navigation, nice font awesome-like icons, searching, mobile-friendly) without all the bloat from the major HTML packages. My solution is the Tiny Feet theme for Jekyll.

Creating my own theme with my own custom CSS reduced the landing page to only 8 KB compressed (24 KB uncompressed), total! Here are some details of the theme:

  Jekyll Tiny Feet theme

  • Very small footprint for landing page (CSS+JS < 10 KB uncompressed)
  • SVG Icons for fast loading (< 4 KB uncompressed)
  • Dynamic description loading on main page
  • Fixed navbar
  • SEO and Opengraph
  • Tag page and tags underneath each post title
  • Optional Disqus comments on posts
  • Optional Google analytics

Acknowledgements