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

32
blog/content-007
View File

@ -1,34 +1,20 @@
<header>
<h1>Optimizing Web Pages and File Sizes</h1>
<h1>Some Website Design and CSS</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>
<p>I had some time to pick some - emphasis on some - CSS so that I can make this site more accessible. I was generally tackling several issues, such as a cumbersome navigation experience when browing this site.</p>
<h3>Relative Link Paths</h3>
<h3>Added navigation bar at the top</h3>
<p>For those who might have browsed here before, I previously did not have navbar. It was a nightmare to browse here because you would have to scrounge through text in paragraphs just to find my CV and links to nagivate the blog. So I went and added one. It's just a flexbox with space-between. I also went ahead and worked that class into the bottom bar which contained Prev and Next.</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>Hyperlink colours and underlines</h3>
<p>I didn't like how hyperlinks turned blue,red,etc. (Accent colours/theming of the site is still in progress) So, I added some class properties to remove the colours and only show the underline when under the cursor hover. That was all. Generally made the site browing experience more cohesive and consistent.</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>
<p>Overall, I added quite a bit of HTML/CSS and size to my pages, but I think it's worth it. IMO, the accessibility and user experience really improved. If you have any kind of input about these changes, I would certainly welcome an email about it.</p>
<hr>
<p><div class="navbar">
<div><a href="blog-006">Prev</a></div>
<div><a href="blog-008">Next</a></div>
<div><a href="blog-007">Prev</a></div>
<div><a href="blog-000">Next</a></div>
</div></p>