<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>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>
