Fontforge font scaling7/4/2023 ![]() ![]() Let’s embark on the next step in our efficiency quest to reduce both the stylesheet and font file sizes. This is 73% of that recommended 1MB in the icon stylesheet and font alone! We could minify 'materialdesignicons.css' to look similar to '' from the original download which is 298KB but that's still too large. The average web page is around 2-3MB, but the recommended size is 1MB. woff2 file is 361KB, and yet we’re only using 19 icons! The page load time will be bloated, our bandwidth is being consumed and the visitor experience badly affected as a result. The major problem from the image above is that the 'materialdesignicons.css' file is over 26,000 lines of code for over 5,000 icons, and is 369KB, and the. Stylesheet and font self-hosted and served locally Download the Material Design icon font and extract the contents. We’re going to swap this out for a locally hosted icon font and stylesheet. There was something still bothering me though, I had a Lighthouse error indicating “ensure text remains visible during webfont load”. Caching or precomputing results for expensive operations.Reducing payload sizes for data requests.Lazy loading images and videos below the fold.Compressing images with tools like TinyPNG.I recently optimised this site and ticked off the following improvements: It’s a continuous process of improvement. I try to identify any opportunity to improve performance and page speed I can. Not only that, lower page sizes saves bandwidth usage and in turn saves money. It is especially important for serving web pages to mobile devices and/or locations with poor network connectivity. Website performance is critical for delivering a solid user experience. If you want to follow along you can download the distribution code before continuing. We’ll go through a full end-to-end tutorial of the process. This article will cover how I reduced the total size of loading Material Design Icons Font from 361KB to 7KB, and then automated that process using PyAutoGUI. ![]()
0 Comments
Leave a Reply. |