clement/personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move indexes backwards by 1

Browse Source
This commit is contained in:
clement
2020-06-08 19:10:45 +08:00
parent d4c86054f4
commit 761c2f0c5c
20 changed files with 173 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
blog/content-006
View File

@ -1,16 +1,34 @@
<header>
<h1>A Hit of Kubernetes</h1>
<h1>Optimizing Web Pages and File Sizes</h1>
</header>
<p>The website is back online after almost several months. This post is just to show that I'm still alive and well. So, yeah. I tried Kubernetes for my Raspberry Pi. Specifically k3s. It didn't turn out great. Surprise surprise, containers and k8s really turns the concept of system administration on its head. What are charts? Why are kubectl and kubeadm separate commands? Why is everything hidden behind layers and layers of administration and configuration?</p>
<p>In my last post, I mentioned moving the CSS stylesheet to a separate file so that browsers cache it when browsing the site. While the need to optimize file sizes is really unnecessary, I still do it as a learning exercise. My pages are only a few kB at most, but I plan to nickel and dime every byte I can.</p>
<p>It is obvious that Kubernetes is a extremely powerful and revolutionary tool. What's even more obvious is that I'm completely unprepared for this. Well, the takeaway here is that I need to read more documentation and tutorials.</p>
<h3>Relative Link Paths</h3>
<p>On a side note, I have moved the css stylesheet to a separate file to reduce the amount of HTML per page. Huzzah.</p>
<p>While this may come off as a obvious for most, I didn't know it was an option until I found it. Relative link paths encouraged me to finally organize my messy web root directory. Trimming off the full website path is probably the largest improvement I made. </p>
<h3>Optimizing Image Size</h3>
<p>In <a href="blog-005">A SBC Change</a>, I included a picture of my RPi. It was just too massive to add it to the website, so here's how I optimized it :
<ul>
<li>Use webp instead of PNG or JPEG because webp retains more detail with smaller file sizes.</li>
<li>Strip all EXIF data from the image.</li>
<li>Compressed to 85% with webp's lossy algorithm.</li>
<li>Reduce the picture's resolution.</li>
</ul>
These methods reduced the file size to about 55kB: a size that I'm much more comfortable with without losing too much detail.
</p>
<h3>async property when loading CSS stylesheet</h3>
<p>The CSS stylesheet was blocking the rendering of the web page so adding the async property shaved a whopping 20ms off the time it took to render this page.</p>
<h3>Removing the annoying favicon 404 request</h3>
<p>So, I don't plan on having a favicon for the site. The idea of the supporting so many sizes and formats just for a tiny icon just doesn't sit well with me. So, I redirected the icon to a "black hole". It no longer performs a HTTP request that will return a 404 error. Again, this shaves another 20ms off my loading time and tons of lines off my Apache access logs.</p>
<hr>
<p><div class="navbar">
<div><a href="blog-005">Prev</a></div>
<div><a href="blog-007">Next</a></div>
<div><a href="blog-006">Prev</a></div>
<div><a href="blog-008">Next</a></div>
</div></p>