2020-03-12-lightweight-website.md (2780B) - raw


      1 <!-- title: A lightweight website -->
      2 <!-- slug: lightweight-website -->
      3 <!-- categories: Personal domain -->
      4 <!-- date: 2020-03-12T00:00:00Z -->
      5 
      6 Since the start of this site, having a lightweight website has been one of my
      7 priorities. Every file served has been minimized, you won't see any pictures
      8 that aren't vector graphics (except for the `favicon.ico` file) and users don't
      9 need to download fonts or JavaScript libraries. On top of that, the amount of
     10 JavaScript required is minimum. Indeed, as of right now, the only JS that runs
     11 is a very simple function to toggle the theme and another one to open the
     12 navigation menu on small screens. That results in super lightweight pages, which
     13 keeps the loading time to a minimum and reduces the bandwidth usage of the
     14 server.
     15 
     16 The one thing I've had doubts about is minimizing HTML. Some friends argued that
     17 minimizing the code obscures it, while I argued that it is easy to *prettify*
     18 HTML with one of the many tools online. However, lately, I have been a bit
     19 frustrated with Hugo's minimizing tool as it had some unexpected behavior with
     20 SVG's, so I decided to investigate the pros and cons of file minimization a bit
     21 further.
     22 
     23 When you access a webpage it is normally compressed (if the server supports it),
     24 and this compression makes the previous minimization of files almost useless.
     25 Let me explain: my main blog page's size is about 18.3KB, but it can be reduced
     26 down to 17.2KB with Hugo's minimizing tool[^errors]. Once compressed with
     27 [gzip][gz], the sizes are 5845 and 5747 bytes respectively, so the bandwidth
     28 save is only 100 bytes! Similar results have been obtained for all the pages of
     29 the site that I have tested, so it looks like minimizing isn't helping that
     30 much.
     31 
     32 [^errors]: It is actually 15.5KB, but that includes errors on the SVG's
     33   minified, once fixed, it becomes the 17.2KB mentioned.
     34 
     35 On the other hand, I see the point made by the friends who argue that having the
     36 code available when pressing `view source` can be useful, even if code could
     37 potentially be prettified. Given this, I have decided not to minimize the HTML
     38 files. A similar argument could be made to not minimize CSS and JS (indeed, in
     39 the future I might change my mind), but they will stay minimized for
     40 now[^css-js].
     41 
     42 [^css-js]: These files can be found more easily on the source code since they
     43   are not build up from templates, and it is uncommon to view the source code of
     44   those files, as they are normally viewed from the browser's inspection tools.
     45   On top of that, CSS is "compiled" from SCSS files, and once again, these files
     46   are easily reachable at the public repository of the website. Finally, the
     47   change in size is higher (1.5KB for the CSS file).
     48 
     49 
     50 [gz]: <https://en.wikipedia.org/wiki/Gzip> "gzip — Wikipedia"