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

Split header and quotes from content

Browse Source
This commit is contained in:
clement
2020-06-08 15:54:09 +08:00
parent b2b433c08d
commit 99730489a6
20 changed files with 50 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
blog/content-007 Normal file
View File

@ -0,0 +1,34 @@
<header>
<h1>Optimizing Web Pages and File Sizes</h1>
</header>
<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>
<h3>Relative Link Paths</h3>
<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-006">Prev</a></div>
<div><a href="blog-008">Next</a></div>
</div></p>