Philipp Trommler's Blog - Tiny Bitshttps://blog.philipp-trommler.me/en/2020-05-23T18:57:05+02:00Sitemaps for (Small) Static Sites2020-05-23T18:57:05+02:002020-05-23T18:57:05+02:00Philipp Trommlertag:blog.philipp-trommler.me,2020-05-23:/en/posts/2020/05/23/tb-sitemaps-for-static-sites/<p>You may know that I run a <a href="https://cv.philipp-trommler.me">small CV
site</a> and since I'd like our precious
observers to regularly scan my toy sites, I tend to provide a sitemap
for them. I've implemented the updates of those sitemaps with a git
commit hook I'd like to share with you here.</p><p>First of all, I've created a standard sitemap within the root of the repository
that feeds my CV website. It goes like the following and should contain no
surprises if you're used to them:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6
7
8
9</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="cp"><?xml version="1.0" encoding="utf-8"?></span>
<span class="nt"><urlset</span> <span class="na">xmlns=</span><span class="s">"http://www.sitemaps.org/schemas/sitemap/0.9"</span><span class="nt">></span>
<span class="nt"><url></span>
<span class="nt"><loc></span>https://cv.philipp-trommler.me/<span class="nt"></loc></span>
<span class="nt"><lastmod></span>2020-05-21<span class="nt"></lastmod></span>
<span class="nt"><changefreq></span>monthly<span class="nt"></changefreq></span>
<span class="nt"><priority></span>1.0<span class="nt"></priority></span>
<span class="nt"></url></span>
<span class="nt"></urlset></span>
</pre></div>
</td></tr></table>
<p>Updating this file whenever I change something on my site seems like a
cumbersome and error prone task, thus I've written a really small shell script
that I use as a pre-commit hook by moving it to <code>.git/hooks/pre-commit</code>:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="ch">#!/bin/sh</span>
sed -i <span class="s2">"s#<lastmod>.*</lastmod>#<lastmod></span><span class="k">$(</span>date --rfc-3339<span class="o">=</span>date<span class="k">)</span><span class="s2"></lastmod>#g"</span> sitemap.xml
git add sitemap.xml
</pre></div>
</td></tr></table>
<p>This script simply exchanges everything inside of <code><lastmod></lastmod></code> with the
output of <code>date --rfc-3339=date</code> which is the current date in the format
expected by the search engines and adds the resulting changes to the index.
Therefore, the commit I'm currently editing automatically contains the current
date within the sitemap.</p>
<p>Of course this solution doesn't scale well onto bigger sites, there you'd
probably go better with a full fledged static site generator. But maybe you also
have some kind of one-pager, portfolio site or online CV, that you want to
upgrade with an automatic sitemap.</p>
<p>This was a rather short blog entry, but since I haven't written anything in
quite some time I thought I share it with you nonetheless. If you have any
improvements or found an error, please let me know!</p>Tiny Bits: DNS TTLs2019-11-06T10:12:13+01:002019-11-27T13:53:20+01:00Philipp Trommlertag:blog.philipp-trommler.me,2019-11-06:/en/posts/2019/11/06/tb-dns-ttls/<p>Often overlooked but still important: The right choices for your DNS
TTLs. tl;dr Make them longer!</p><p><a href="https://00f.net/2019/11/03/stop-using-low-dns-ttls/">This blog
post</a> I've found via
Hacker News talks about the importance of the right choices for DNS TTLs. These
values tell anyone asking how long the DNS entry should be considered valid
before the DNS server should be asked again (how long the value can be cached).
The caching duration has impact on various topics: The named article talks of
latency, privacy and reliability, and I'll add the environment. A busy DNS
server has a higher energy consumption than an idling one (let alone the
intermediate networking gear)! Those are more than enough reasons for me to take
this seriously.</p>
<p>The cited article suggests a TTL of <em>at least</em> 40 minutes (2400 seconds) or
– better – one hour (3600 seconds), because the latter can
theoretically decrease the number of needed DNS queries down to 17 %! So
– of course – I've decided to check my own settings in order to make
them comply with the suggested settings. Using <code>drill</code> I got the following value
for my blog:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="err">blog.philipp-trommler.me. 1800 IN A 199.188.200.96</span>
</pre></div>
</td></tr></table>
<p>Ouch! The first miss. That's only 30 minutes for a domain that will probably
<em>never</em> change. Let's check my old blog:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="err">www.philipp-trommler.me. 1800 IN CNAME ferruck.github.io.</span>
<span class="err">ferruck.github.io. 3600 IN A 185.199.111.153</span>
<span class="err">ferruck.github.io. 3600 IN A 185.199.108.153</span>
<span class="err">ferruck.github.io. 3600 IN A 185.199.109.153</span>
<span class="err">ferruck.github.io. 3600 IN A 185.199.110.153</span>
</pre></div>
</td></tr></table>
<p>Here I even get embarrassed by Github, that choose the right values. From here
on the value for my CV website is quite unsurprising:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="err">cv.philipp-trommler.me. 1800 IN A 199.188.200.96</span>
</pre></div>
</td></tr></table>
<p>Setting these values is easy, though, you can do this usually in the web
frontend of your domain registrar. This is what I've done and when you now check
my domain you should see 60 minute TTLs everywhere.</p>
<p>What can <em>you</em> do? Well, if you're a domain holder, you can do as I did and
choose appropriate TTLs. If you're an end user, well, your options are few. The
one I took is <a href="https://pi-hole.net/">Pi-hole</a>. Apart from its ad-blocking
capabilities, it also caches DNS requests and thus lowers the number of public
observable DNS queries that leave your home network even further.</p>
<figure>
<img alt="Pie chart showing the distribution of DNS queries that were handled by my
Pi-hole installation: Around one quarter has been blocked, one quarter has been
answered from the cache and the other half has been forwarded to upstream DNS
servers." src="https://blog.philipp-trommler.me/en/images/2019/tb-dns-ttls-pie.png" title="My Pi-hole installation stops half of the DNS queries from within my network either via blocking or by answering them from the cache.">
<figcaption>My Pi-hole installation stops half of the DNS queries from within my network either via blocking or by answering them from the cache.</figcaption>
</figure>
<p>But you can go even further by adjusting the settings of <code>dnsmasq</code>, the DNS
server underlying Pi-hole. In an up-to-date Pi-hole installation you can add
custom settings to <code>dnsmasq</code> by creating an additional file in <code>/etc/dnsmasq.d/</code>
and putting your configuration options in there.</p>
<p>To increase the minimum TTL for all domains requested via Pi-hole
<code>min-cache-ttl</code> is the right value. Of course you could just set it to 2400 in
order to give all your network clients a TTL of 40 minutes for all domains. But
keep in mind that this may break sites making use of services like Cloudflare or
that use their DNS entries for load balancing. But even setting a value of 300
(five minutes) should decrease the number of DNS queries needed significantly
without breaking too much. Thus, the content of the newly created configuration
file should be the following:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="err">min-cache-ttl=300</span>
</pre></div>
</td></tr></table>
<p>Additionally you could set a TTL for all blocked domains by using <code>local-ttl</code>
but alas Pi-hole already sets this value in an automatically regenerated config
file and <code>dnsmasq</code> doesn't allow you to override options. Thus, your only chance
to change this value is to edit <code>/etc/dnsmasq.d/01-pihole.conf</code> after each
upgrade. If you do, you can choose a really high value since you don't want to
visit those sites anyway. In that case you have to set <code>dhcp-ttl</code> to zero as
well, though, in order to prevent the former setting to have influences on your
DHCP (see <code>dnsmasq(8)</code>). Keep in mind that whitelisting a mistakenly blocked
domain may take up to <code>local-ttl</code> seconds to have an effect!</p>
<p>I hope I could arouse some interest for DNS TTLs. If not, I urge you to have a
look at the <a href="https://00f.net/2019/11/03/stop-using-low-dns-ttls/">aforementioned
article</a> again. Happy
configuration!</p>Tiny Bits: SVG icons2019-08-31T21:50:48+02:002019-11-27T13:53:20+01:00Philipp Trommlertag:blog.philipp-trommler.me,2019-08-31:/en/posts/2019/08/31/tb-svg-icons/<p>Tiny Bits is (hopefully) going to be a more or less regular series of
posts about small ideas, actions or changes, that are important
regardless of their size. This time: SVG icons for my curriculum vitae
website.</p><div class="toc">
<ul>
<li><a href="#initial-situation">Initial situation</a></li>
<li><a href="#the-solution">The solution</a></li>
<li><a href="#outcome">Outcome</a></li>
</ul>
</div>
<h3 id="initial-situation">Initial situation<a class="headerlink" href="#initial-situation" title="Permanent link">¶</a></h3>
<p>My <a href="https://cv.philipp-trommler.me/">curriculum vitae website</a> used the two
<a href="https://fontawesome.com/">Font Awesome</a> free fonts "solid" and "brands" to
display four icons (for location, Github, e-mail address and a link to this
blog) right at the top. I think this is a nice way to give recruiters the most
important links at a quick glimpse, which is why I've taken this over from the
LaTeX CV that the website is based on. Alas, this has made the site not exactly
smaller.</p>
<p>Of course, my CV site wasn't that remarkable in terms of modern web design, but
bearing in mind that I'm always striving for efficiency and minimalism, the
state could not be tolerated any longer. In addition, my privacy paranoia
emerged in this context, too: Since I don't use Font Awesome's CDN (or any
other) in order to prevent my visitors from being tracked and because my site is
usually viewed once – thus always for the first time –, browser caching
could not reduce the problem.</p>
<figure>
<img alt="A pie chart showing the percentual shares of different parts of my
CV website. HTML, CSS and the profile picture have a share of 96.02 KB
(29.7 %), the Raleway font 81.41 KB (25.2 %) and Font Awesome 145.94 KB
(45.1 %)."
src="https://blog.philipp-trommler.me/en/images/2019/tb-svg-icons-pageweight-before.png" />
<figcaption>The pageweight before switching to SVG icons in terms of
transmitted bytes. The web fonts are taking up nearly three fourths of the size
with Font Awesome alone weighing in nearly the half, just for four
icons. Note that the weight of the profile picture depends on the visitor's
display resolution.</figcaption>
</figure>
<p>Speaking about the hard numbers, web fonts made up nearly three fourths of the
transmitted bytes for my visitors (227.35 KB, 70.3 %), with Font
Awesome alone taking nearly half of the page weight. (145.94 KB,
45.1 %). This was just as horrible as it sounds, all that for just four
icons.</p>
<p>You may ask how it could come to this situation. Well, I was (and still am
*cough*) in a phase of a "professional re-orientation" and the site just had
to be finished. Styling a HR-facing website just as this one here was no option
and I knew that I would come back later and clean up the mess that I left. I
hope this is an adequate excuse 😉.</p>
<h3 id="the-solution">The solution<a class="headerlink" href="#the-solution" title="Permanent link">¶</a></h3>
<p>Of course the solution is plain SVG icons. Why should you include multiple web
fonts containing hundreds of icons when you could instead only include exactly
those four icons that you need? Thus, I've taken a look for available icons
fitting my needs.</p>
<p>I've found the <a href="https://github.com/edent/SuperTinyIcons">SuperTinyIcons</a> which
hold what they promise with their name. Each and every icon is under 1 KB
giving me a theoretic size reduction of about 97 %. Additionally, the
README claims that the size can be reduced even further by removing round edges
and the background in its entirety, which I'd have to do anyway.</p>
<p>Sadly, they don't really match the look of the Font Awesome icons that I used
before and that I still use for my LaTeX CV. Since I want both the PDF and the
website to look as identically as feasible and adding SuperTinyIcons to LaTeX
seemed not like an option, using these icons was not possible. Luckily,
Font Awesome is an Open Source font and you can find the SVGs it's based on <a href="https://github.com/FortAwesome/Font-Awesome">on
Github</a>. So I decided to stay with
the same icons I've used before even if that means a bit larger file sizes. I
mean, in the end it will still be <em>much</em> smaller than before.</p>
<p>From here on it's quite simple: Download the icons you use, open them in
<a href="https://inkscape.org/">Inkscape</a> and set the canvas size to 512 times 512
pixels. I've decided to scale the icons down to 50 % because the icon font
was "scaled down", as well, which was probably the only tricky part. If you use
Inkscape's built-in scale function, it'll add a <code>style="scale:50%"</code> to the path
element of the SVG, but this seems to be ignored by the browser (at least by
Firefox). Instead you'll have to use the width and height inputs at the top of
Inkscape's window and manually re-center the path afterwards (don't forget to
hit the lock icon in order to ensure proportional scaling).</p>
<p>With everything set up correctly in Inkscape, save the SVG and open it up in
your favorite text editor (we all know that it's vim 😜) because we need to get
rid off a lot of – for our use case – unnecessary meta data that
Inkscape has put into the SVG. What you see will probably be something like
this:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="cp"><?xml version="1.0" encoding="UTF-8" standalone="no"?></span>
<span class="nt"><svg</span>
<span class="na">xmlns:dc=</span><span class="s">"http://purl.org/dc/elements/1.1/"</span>
<span class="na">xmlns:cc=</span><span class="s">"http://creativecommons.org/ns#"</span>
<span class="na">xmlns:rdf=</span><span class="s">"http://www.w3.org/1999/02/22-rdf-syntax-ns#"</span>
<span class="na">xmlns:svg=</span><span class="s">"http://www.w3.org/2000/svg"</span>
<span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span>
<span class="na">xmlns:sodipodi=</span><span class="s">"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"</span>
<span class="na">xmlns:inkscape=</span><span class="s">"http://www.inkscape.org/namespaces/inkscape"</span>
<span class="na">viewBox=</span><span class="s">"0 0 512 512"</span>
<span class="na">version=</span><span class="s">"1.1"</span>
<span class="na">id=</span><span class="s">"svg841"</span>
<span class="na">sodipodi:docname=</span><span class="s">"rss.svg"</span>
<span class="na">width=</span><span class="s">"512"</span>
<span class="na">height=</span><span class="s">"512"</span>
<span class="na">inkscape:version=</span><span class="s">"0.92.3 (2405546, 2018-03-11)"</span><span class="nt">></span>
<span class="nt"><metadata</span>
<span class="na">id=</span><span class="s">"metadata847"</span><span class="nt">></span>
<span class="nt"><rdf:RDF></span>
<span class="nt"><cc:Work</span>
<span class="na">rdf:about=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><dc:format></span>image/svg+xml<span class="nt"></dc:format></span>
<span class="nt"><dc:type</span>
<span class="na">rdf:resource=</span><span class="s">"http://purl.org/dc/dcmitype/StillImage"</span> <span class="nt">/></span>
<span class="nt"><dc:title></dc:title></span>
<span class="nt"></cc:Work></span>
<span class="nt"></rdf:RDF></span>
<span class="nt"></metadata></span>
<span class="nt"><defs</span>
<span class="na">id=</span><span class="s">"defs845"</span> <span class="nt">/></span>
<span class="nt"><sodipodi:namedview</span>
<span class="na">pagecolor=</span><span class="s">"#ffffff"</span>
<span class="na">bordercolor=</span><span class="s">"#666666"</span>
<span class="na">borderopacity=</span><span class="s">"1"</span>
<span class="na">objecttolerance=</span><span class="s">"10"</span>
<span class="na">gridtolerance=</span><span class="s">"10"</span>
<span class="na">guidetolerance=</span><span class="s">"10"</span>
<span class="na">inkscape:pageopacity=</span><span class="s">"0"</span>
<span class="na">inkscape:pageshadow=</span><span class="s">"2"</span>
<span class="na">inkscape:window-width=</span><span class="s">"1920"</span>
<span class="na">inkscape:window-height=</span><span class="s">"1121"</span>
<span class="na">id=</span><span class="s">"namedview843"</span>
<span class="na">showgrid=</span><span class="s">"false"</span>
<span class="na">inkscape:zoom=</span><span class="s">"0.5"</span>
<span class="na">inkscape:cx=</span><span class="s">"288"</span>
<span class="na">inkscape:cy=</span><span class="s">"288.00062"</span>
<span class="na">inkscape:window-x=</span><span class="s">"-9"</span>
<span class="na">inkscape:window-y=</span><span class="s">"-9"</span>
<span class="na">inkscape:window-maximized=</span><span class="s">"1"</span>
<span class="na">inkscape:current-layer=</span><span class="s">"svg841"</span> <span class="nt">/></span>
<span class="nt"><path</span>
<span class="na">d=</span><span class="s">"m 201.18908,347.40454 c 0,20.21087 -16.38399,36.59489 -36.59483,36.59489 -20.21084,0 -36.59425,-16.38402 -36.59425,-36.59489 0,-20.21086 16.38399,-36.59489 36.59483,-36.59489 20.21084,0 36.59425,16.38459 36.59425,36.59489 z m 100.37705,27.00002 C 296.79243,286.06164 226.03191,215.21187 137.59485,210.433 132.37485,210.15071 128,214.34501 128,219.57244 v 27.46802 c 0,4.80858 3.70857,8.84115 8.50685,9.15315 63.90394,4.16229 115.12733,55.25833 119.29818,119.29839 0.31257,4.79829 4.34514,8.50686 9.15314,8.50686 h 27.46797 c 5.228,5.7e-4 9.42228,-4.3743 9.13999,-9.5943 z m 82.42793,0.16458 C 379.1975,240.9576 271.69416,132.82493 137.43028,128.00494 132.27028,127.8198 128,131.98837 128,137.15123 v 27.46745 c 0,4.92857 3.90571,8.94001 8.83028,9.14229 109.24505,4.47944 196.92954,92.18065 201.4084,201.40874 0.20171,4.92457 4.21314,8.83029 9.14228,8.83029 h 27.4674 c 5.16228,-5.7e-4 9.33085,-4.27086 9.1457,-9.43086 z"</span>
<span class="na">id=</span><span class="s">"path839"</span>
<span class="na">inkscape:connector-curvature=</span><span class="s">"0"</span>
<span class="na">style=</span><span class="s">"fill:#ffffff;fill-opacity:1;stroke-width:0.57142806"</span> <span class="nt">/></span>
<span class="nt"></svg></span>
</pre></div>
</td></tr></table>
<p>(If there's still no scroll bar for the code sample when you're reading this:
Sorry, I'm working on it! If there is one: You're welcome!)</p>
<p>When we boil the file down to the important parts, we end up with:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="nt"><svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">viewBox=</span><span class="s">"0 0 512 512"</span><span class="nt">></span>
<span class="nt"><path</span> <span class="na">fill=</span><span class="s">"#fff"</span> <span class="na">d=</span><span class="s">"m 201.18908,347.40454 c 0,20.21087 -16.38399,36.59489 -36.59483,36.59489 -20.21084,0 -36.59425,-16.38402 -36.59425,-36.59489 0,-20.21086 16.38399,-36.59489 36.59483,-36.59489 20.21084,0 36.59425,16.38459 36.59425,36.59489 z m 100.37705,27.00002 C 296.79243,286.06164 226.03191,215.21187 137.59485,210.433 132.37485,210.15071 128,214.34501 128,219.57244 v 27.46802 c 0,4.80858 3.70857,8.84115 8.50685,9.15315 63.90394,4.16229 115.12733,55.25833 119.29818,119.29839 0.31257,4.79829 4.34514,8.50686 9.15314,8.50686 h 27.46797 c 5.228,5.7e-4 9.42228,-4.3743 9.13999,-9.5943 z m 82.42793,0.16458 C 379.1975,240.9576 271.69416,132.82493 137.43028,128.00494 132.27028,127.8198 128,131.98837 128,137.15123 v 27.46745 c 0,4.92857 3.90571,8.94001 8.83028,9.14229 109.24505,4.47944 196.92954,92.18065 201.4084,201.40874 0.20171,4.92457 4.21314,8.83029 9.14228,8.83029 h 27.4674 c 5.16228,-5.7e-4 9.33085,-4.27086 9.1457,-9.43086 z"</span><span class="nt">/></span>
<span class="nt"></svg></span>
</pre></div>
</td></tr></table>
<p>As you can see, this retains newlines and indentation for readability and is
still a great improvement size-wise. You could use this as-is in your CSS as
long as you escape all special chars (i.e. <code><</code> and <code>></code>), but I prefer
<code>base64</code>-encoding it before usage. This can be easily done with the <code>base64</code>
command that is available on most GNU/Linux distributions. The encoded data
is then added to the CSS:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="nt">ul</span><span class="p">.</span><span class="nc">icons</span> <span class="nt">li</span><span class="p">.</span><span class="nc">icon-blog</span><span class="p">:</span><span class="nd">before</span> <span class="p">{</span>
<span class="k">content</span><span class="p">:</span>
<span class="nf">url</span><span class="p">(</span><span class="s1">'data:image/svg+xml;base64,\</span>
<span class="s1"> PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIg\</span>
<span class="s1"> NTEyIj4KICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJtIDIwMS4xODkwOCwzNDcuNDA0NTQgYyAwLDIw\</span>
<span class="s1"> LjIxMDg3IC0xNi4zODM5OSwzNi41OTQ4OSAtMzYuNTk0ODMsMzYuNTk0ODkgLTIwLjIxMDg0LDAg\</span>
<span class="s1"> LTM2LjU5NDI1LC0xNi4zODQwMiAtMzYuNTk0MjUsLTM2LjU5NDg5IDAsLTIwLjIxMDg2IDE2LjM4\</span>
<span class="s1"> Mzk5LC0zNi41OTQ4OSAzNi41OTQ4MywtMzYuNTk0ODkgMjAuMjEwODQsMCAzNi41OTQyNSwxNi4z\</span>
<span class="s1"> ODQ1OSAzNi41OTQyNSwzNi41OTQ4OSB6IG0gMTAwLjM3NzA1LDI3LjAwMDAyIEMgMjk2Ljc5MjQz\</span>
<span class="s1"> LDI4Ni4wNjE2NCAyMjYuMDMxOTEsMjE1LjIxMTg3IDEzNy41OTQ4NSwyMTAuNDMzIDEzMi4zNzQ4\</span>
<span class="s1"> NSwyMTAuMTUwNzEgMTI4LDIxNC4zNDUwMSAxMjgsMjE5LjU3MjQ0IHYgMjcuNDY4MDIgYyAwLDQu\</span>
<span class="s1"> ODA4NTggMy43MDg1Nyw4Ljg0MTE1IDguNTA2ODUsOS4xNTMxNSA2My45MDM5NCw0LjE2MjI5IDEx\</span>
<span class="s1"> NS4xMjczMyw1NS4yNTgzMyAxMTkuMjk4MTgsMTE5LjI5ODM5IDAuMzEyNTcsNC43OTgyOSA0LjM0\</span>
<span class="s1"> NTE0LDguNTA2ODYgOS4xNTMxNCw4LjUwNjg2IGggMjcuNDY3OTcgYyA1LjIyOCw1LjdlLTQgOS40\</span>
<span class="s1"> MjIyOCwtNC4zNzQzIDkuMTM5OTksLTkuNTk0MyB6IG0gODIuNDI3OTMsMC4xNjQ1OCBDIDM3OS4x\</span>
<span class="s1"> OTc1LDI0MC45NTc2IDI3MS42OTQxNiwxMzIuODI0OTMgMTM3LjQzMDI4LDEyOC4wMDQ5NCAxMzIu\</span>
<span class="s1"> MjcwMjgsMTI3LjgxOTggMTI4LDEzMS45ODgzNyAxMjgsMTM3LjE1MTIzIHYgMjcuNDY3NDUgYyAw\</span>
<span class="s1"> LDQuOTI4NTcgMy45MDU3MSw4Ljk0MDAxIDguODMwMjgsOS4xNDIyOSAxMDkuMjQ1MDUsNC40Nzk0\</span>
<span class="s1"> NCAxOTYuOTI5NTQsOTIuMTgwNjUgMjAxLjQwODQsMjAxLjQwODc0IDAuMjAxNzEsNC45MjQ1NyA0\</span>
<span class="s1"> LjIxMzE0LDguODMwMjkgOS4xNDIyOCw4LjgzMDI5IGggMjcuNDY3NCBjIDUuMTYyMjgsLTUuN2Ut\</span>
<span class="s1"> NCA5LjMzMDg1LC00LjI3MDg2IDkuMTQ1NywtOS40MzA4NiB6Ii8+Cjwvc3ZnPgo='</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
</td></tr></table>
<h3 id="outcome">Outcome<a class="headerlink" href="#outcome" title="Permanent link">¶</a></h3>
<p>The outcome is just as expected: The overall page weight could be reduced
drastically from 323.37 KB to 179.56 KB – a reduction of more
than 44 %. The size of the transmitted HTML file (that contains the now
added CSS) increased by about 2 KB (note that the lines of CSS including
the font files could be removed, though) whereas the Font Awesome files were
about 146 KB, which is more or less the expected size reduction <em>for the
icons only</em> of about 97 %, even though I've used the Font Awesome SVGs.</p>
<figure>
<img alt="A pie chart showing the percentual shares of different parts of my
CV website. HTML, CSS and the profile picture have a share of 98.15 KB
(54.7 %) and the Raleway font 81.41 KB (45.3 %)."
src="https://blog.philipp-trommler.me/en/images/2019/tb-svg-icons-pageweight-after.png" />
<figcaption>The pageweight after switching to SVG icons in terms of
transmitted bytes. The web fonts are now taking up less than the half of the
size. Note that the weight of the profile picture still depends on the visitor's
display resolution.</figcaption>
</figure>
<p>The Raleway font that is still left takes up about 45 % of the page size
now, but I can accept the weight that it adds way easier than the size of the
Font Awesome font for two reasons (besides that it's only half the size):</p>
<ol>
<li>Raleway adds more to the overall look of the website than the four icons at
the top. It's a really nice font and an eye-catcher. The size of the Font
Awesome font didn't stand in a <em>healthy relation</em> to what it added
design-wise.</li>
<li>The website works (technically) well without it. For people like me who have
web font loading disabled by default (for obvious reasons, take a look at
this article! 🤐), the website doesn't break because of the Raleway font.
Everything is still readable and looks reasonably decent.</li>
</ol>
<p>In other words: The icons are smaller now. And this is true both for the file
size as well as their appearance, because I didn't match their original size
exactly, as you can see on the following picture:</p>
<figure>
<img alt="Two screenshots of my CV website showing the logos from the top of
the page once using the font and once using the SVG icons. The icons using the
SVGs are noticeable smaller."
src="https://blog.philipp-trommler.me/en/images/2019/tb-svg-icons-old-new-comparison.png" />
<figcaption>Icon size comparison: On the left is the old version using Font
Awesome's web font and on the right is the new version using SVGs. The
difference is small but noticeable in direct opposition.</figcaption>
</figure>
<p>One last interesting thing I stumbled upon while working on this: When editing
the Github icon I decided to remove the small dots on the tail of the Octocat.
They aren't noticeable in the size the icon is displayed anyways. Before
removing them the <code>base64</code>-encoded SVG had 2906 bytes, afterwards it had
1451 bytes. I cannot imagine that this is solely because of the removed
dots but probably because Inkscape cleaned up the path element once it was
edited more than just resizing. Maybe making subtle changes on the other icons
before saving could reduce their size even further 🤔.</p>