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.
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.
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 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.
- Cascading Style Sheets (CSS), MDN
- Cascading Style Sheets (CSS), Wikipedia
- Font Awesome Free
- Photo of Web Code HTML, photo by jamesmarkosborne, published Dec 4, 2015, Pixabay
- Scalable Vector Graphics (SVG), MDN
- Scalable Vector Graphics (SVG), Wikipedia
- Syntactically Awesome Style Sheets (SASS), Wikipedia
- grammar corrections
- remove tags bootstrap, fontawesome, purgecss, sass
- change topic
- fix clarity
- fix meta description too short