Making my website leaner
The detailed situation is shown using Firefox network monitor:
I decided to experiment with a lightweight CSS framework, to see the kind of improvements I could get and, in fact, there are many to choose from. See, for instance:
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.
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.
Here is the detailed situation:
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: