Web Code HTML by jamesmarkosborne, Pixabay

How I Optimized My Website's Download Performance

  • Adam Douglas

I’ve always found it an interesting challenge to try and keep a website’s overall download size to a minimum but within reason. When a website’s download size is optimized and focused on using minimal resources possible it then provides an enjoyable end user experience with fast download performance.

Adventure Begins

This adventure all started when I recently upgraded from Bootstrap v4.6.1 to v5.1.0. You see Bootstrap no longer requires jQuery, and therefore I was able to remove jQuery as a dependency. This wasn’t hard to accomplish since I only had to refactor copy link to clipboard and the search engine. I’m happy to see jQuery finally gone.

I began to think what more can be removed to reduce the website overall download size. Compressing CSS with SASS has already been done, and unfortunately I’m not able to use jekyll-compress-html due to the syntax highlight bug. I would love to find another solution for compressing HTML. However, the use of PurgeCSS along with jekyll-purgecss will definitely help in removing unused CSS to reduce the website download size.

Looking into removing the use of Font Awesome Free font files I discovered I’m using less than 3% of the 1,608 icons. The font files are quite large in size and so I should be able to reduce the size by quite a lot. So I began on switching to using SVG files for the necessary icons. Unfortunately this all turned out to be far more challenging than I originally thought. Originally I thought that I would just have to delete the Font Awesome Free font files and then reference the new SVG files. However, as I learned you cannot use svg, img or object HTML element tag if you want to apply CSS upon it due to valid security reasons. I wanted to achieve two things using SVGs, still be able to reference a file to load allowing for the file to be cached by the browser agent and be able to apply a CSS. I’m happy to say though that I was able to finally come to a solution using a CSS mask. At some point I should write up a post talking in detail about this challenge.

There is not much to say in regard to optimizing the SVG files other than I just used Inkscape and saved the files out as an optimized SVG. Now that leaves with only having to compress my JavaScript files. I have yet to do this but in all honesty it will have very little impact in my present situation as I only have 57 lines to compress. All other JavaScript files are already minified.

Conclusion

Here is a list shown below of what I’ve been able to accomplish. Overall I went from a website download size of approximately 600 KB to 800 KB depending upon the web page to 200 KB to 300 KB. The majority of the reduction was from removing jQuery and then the Font Awesome Free font files.

  • Compress HTML
  • Compress JavaScript
  • Compress CSS
  • Optimize SVG files
  • Refactor all icons to an SVG
  • Remove Font Awesome font files
  • Remove jQuery
  • Remove unused CSS

I’m publishing this as part of 100 Days To Offload. You can join in yourself by visiting 100DaysToOffload.com.

References
Changelog
    • grammar corrections
    • remove tags bootstrap, fontawesome, purgecss, sass
    • change topic
    • fix clarity
    • fix meta description too short

Comments

Reply via email