Using SVG with JavaScript is 20x large than Using Web Fonts with CSS.
This is a big problem if I use Using SVG with JavaScript, not counting other js, jquery, bootstrap. Loading only FontAwesome 5 almost used 1MB.
Anyone know how to reduce the file size ?
You probably don't need all of Font-Awesome. Don't load all of it. Choose only the icons you need, and load them individually as <img src='path'> where path points to an .svg file you download from here. If you're fancy, you could combine all of these images into a spritesheet like Google does [google.com spritesheet].
If you insist on loading all of these assets just to support Font Awesome, gzipping your text assets (html, js, css) will greatly reduce file size. There are lots of tutorials on how to gzip and upload assets to a static file server example.
You may also wish to combine your JS files into a single file to minimize network traffic. For this you'd want some kind of "build system" like rollup or webpack.
If you really want to tune performance, check out High Performance Websites and Even Faster Websites, both phenomenal O'REILLY books that can help you increase performance of content delivery.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments