Javascript 字体真棒5-用JS SVG替换提高性能？

我使用的是带有有限图标集（大约30个）的字体Awesome5。我缩小了FA的javascript版本以删除所有未使用的图标。这使得js/all.min.js的文件大小约为116kb

我仍然看到主要的性能问题，我认为它们与布局/dom破坏有关，这可能是因为替换了

有没有关于如何提高性能的建议？还是我看错地方了

源HTML:

<i class="fa fa-shield"></i>

 <svg class="svg-inline--fa fa-shield fa-w-16" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="shield" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
    <path fill="currentColor" d="M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3z">
    </path>
 </svg>
 <!-- <i class="fa fa-shield"></i> -->

浏览器呈现HTML:

<i class="fa fa-shield"></i>

 <svg class="svg-inline--fa fa-shield fa-w-16" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="shield" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
    <path fill="currentColor" d="M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3z">
    </path>
 </svg>
 <!-- <i class="fa fa-shield"></i> -->

任何感兴趣的人的网站：

主css（）的总大小为55.51kb，也许你可以使用它进行比较，而不是使用js版本