Making my Website leaner

I decided to make my website a bit leaner, by reducing the size of its JavaScript and CSS assets.

Here are the results of experimenting with two frameworks, Foundation and Spectre.css.

Starting Point

The starting point is my website as of Sep 2018, which comes with Foundation 6.5.0-rc.2 and jQuery 3.2.1. No specific optimizations are performed: both packages come in their default distribution.

To view my homepage one has to download about 530K, 357K of which are JavaScript and CSS assets. More in details, there are 259K of JavaScript (jQuery is 85K and Foundation takes the rest) and 98K of CSS (mainly Foundation and some custom CSS). The remaining 175K are content: of these 171K are images and the remaining 4K are text and markup.

The detailed situation is shown using Firefox network monitor:

my home page inspected with firefox network monitor

Spectre.css

I decided to experiment with a lightweight CSS framework, to see the kind of improvements one can get. There are many lightweight responsive frameworks one can choose from: see for instance, Awesome CSS Frameworks and 100+ best CSS frameworks for responsive design.

After a quick review I decided to stick with Spectre.css for layout, because it is simple to install and use, it is based on Sass for customization, it has many components, and it does not take too much space. Bulma, Vital, and Min were close matches.

I also decided to try Zepto as a replacement for jQuery.

The transition to the new framework was relatively quick. I had to change some markup in the layout files to account for the syntactic differences between the different frameworks, while Zepto worked as a drop-in replacement for jQuery.

The improvement is significant. The homepage now weights 261K, of which only 85K are for assets: 60K of CSS and 25K of JavaScript. The data actually transferred is even less, because of compression.

Here is the detailed situation:

my home page inspected with firefox network monitor

Conclusions and Lesson Learned

There is a lot one can do to improve performances of websites and web applications and lightweight CSS frameworks can do a lot without sacrificing too much.

To be fair on Foundation side, which I use and like quite a lot, I could have stuck with ZURB’s framework and improved performances by excluding from the Sass compilation the Foundation components I don’t use.

It also has to be remarked that assets get cached by browsers. Their importance in determining performances of a website decrease as visitors return.

Still, I believe there is growing interest in building leaner websites. It helps make the web more accessible to low-end devices and, let me add, more focused on content, rather than bells and whistles.

If you want to learn a bit more on the subject, you might also want to read: Low tech magazine, Clean, Fast, and Readable: lightweight versions of popular news sites, Text-only news sites are slowly making a comeback. Here's why.

Now I have no more excuses: I need to work on getting rid of some fat … from my body!