2020-03-21-lighter-website.md (3127B) - raw


      1 <!-- title: A lighter website -->
      2 <!-- slug: lighter-website -->
      3 <!-- categories: Personal domain -->
      4 <!-- date: 2020-03-21T00:00:00Z -->
      5 
      6 Following up with the [last post][post], I decided to make my website even
      7 faster (which probably doesn't make a difference anymore).
      8 
      9 ## The logo
     10 
     11 My pages (HTML only) were about 21KB (without compression), but 11KB of those
     12 consisted of an SVG that appeared in all of them: the logo. The logo wasn't
     13 requested from a different static file because I needed to modify it using CSS
     14 (so that colors would change when switching to the dark theme) and, at the time,
     15 I thought inlining was the only option to allow that. However, investigating a
     16 little I found out there are alternatives to inlining: we can take advantage of
     17 the `use` tag of SVGs to "inline" an SVG from a different URL. By using that, my
     18 pages are now around 10KB of size (plus the statics files, which have a total
     19 size of 37KB for the pages without MathJax).
     20 
     21 ## The static files
     22 
     23 Considering that the `favicon.ico` is already 15KB, 47KB for a page is very
     24 good! Nevertheless, I wanted to reduce it even more[^fun]. I looked into browser
     25 caching and liked the idea. I'll explain the basics. When our browser sends a
     26 request for a certain resource (URL/file), the server that responds can add
     27 information that tells the browser how long it should keep the file for. If the
     28 next time you browse that site and need the file again the file hasn't
     29 "expired", your browser will not request it, but instead make use of the copy
     30 previously downloaded. This reduces the number of requests made and the
     31 bandwidth used.
     32 
     33 [^fun]: By now you have probably figured out this is more of a hobby than
     34   something useful, as the size reduced is ridiculously small.
     35 
     36 The only problem with browser caching is that if the contents of a certain file
     37 change, your users will not see those until their copies expire. We want to
     38 maximize the time a file is used for before requesting it again while minimizing
     39 the time between update checks (unless our static files never change). To solve
     40 that, I used [Hugo's Pipes][hp], which allows you to add the SHA256 sum of a
     41 static file to its name automatically (and all the places where the file is
     42 referenced). Now when downloading the CSS file, your browser is requesting
     43 `https://oscarbenedito.com/css/style.min.<SHA256>.css`, which will (highly
     44 probably) change when the contents change. Since the URL will be different, the
     45 browser will request the new file.
     46 
     47 ## The uncompressed SVGs
     48 
     49 I found out that SVG files where not being compressed by default[^reason]. So I
     50 also enabled that!
     51 
     52 [^reason]: I don't really know the reason why. It might have something to do
     53   with `.svgz` files. No idea.
     54 
     55 ## Final comment
     56 
     57 My webpage is ridiculously small and all these optimizations aren't that
     58 important. However, it is fun to learn about all of this and it can also be
     59 helpful if in the future I have a site with bigger static files (or someone
     60 reading this has!).
     61 
     62 
     63 [post]: </blog/2020/03/lightweight-website/> "A lightweight website — Oscar Benedito"
     64 [hp]: <https://gohugo.io/hugo-pipes> "Hugo Pipes"