Optimizing Web Pages and File Sizes

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.

Relative Link Paths

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.

Optimizing Image Size

In A SBC Change, 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 :

• Use webp instead of PNG or JPEG because webp retains more detail with smaller file sizes.
• Strip all EXIF data from the image.
• Compressed to 85% with webp's lossy algorithm.
• Reduce the picture's resolution.

async property when loading CSS stylesheet

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.

Removing the annoying favicon 404 request

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.