Wordpress Tema Yapımı - İkonlar için Fontawesome yerine PNG ikonları kullanma hakkında

Merhabalar,

Kendi kullanımım için wordpress teması kodluyorum. Performans açısından hangisi daha iyi olur konusunda fikir verecek arkadaşlara şimdiden teşekkürler.
Fontawesome ile başlamıştım projeye. Ama sonra png ikonlarına dönüştürdüm.
Şöyle ki ; Toplamda en fazla 40 tane ikon kullanıyorum tema içersinde. (Sosyal medya, view, comment, date vb.)
Fontawesome CDN kullansam, sıkıştırılmış hali bile 60 kb. Üstelik en fazla bana lazım olacak 40 tane iken, gereksiz (unused css) kullanmadığım bir çok stil olacak.
Hadi diyelim, css dosyasını kendine göre revize ettim, 5-10 kb'lara düşürdüm diyelim. Ama performans konusunda emin olamadığım şey; Bir de kullanıcıya "fontawesome-webfont" ları yükleniyor. (.eot, .svg, .ttf, .woff ve .woff2 dosyaları)
Bu gereksiz trafik yüzünden, png ikonlarına yönelmiştim.

Hangisi daha mantıklı veya hangisi performans açısından daha doğru olur ?
İkon kullanmamın bir diğer sebebi de, küçük renkli/farklı png'ler ile de çalışabiliyorum. (flaticon ve iconn8 sitesindeki free'ler.)
İkon kullanmanın tek dez avantajı, fazlaca objeye chrome istek atıyor olması olabilir.

Bu konuda fikir ve tecrübesi olan arkadaşların yorumlarını rica ederim.

Png değilde svg olursa daha iyi olur. Ek olarak font awesome png den daha iyi. Çünkü font awesome sitenin hızını oek etkilemez, dite açıldıktan sonra yüklenir.

Png'den önce Svg de denedim. Svg beklediğim gibi çok performanslı olmadı malesef. Html sayfasının boyutunu çok fazla büyüttü. Yani ürküttüğüm kurbağaya değmedi, daha da kötü oldu diyebilirim.
Örnek aşağıda kullandığım 1 tane svg'nin kodlarını paylaşayım. Buna benzer bir çok kod oluşmasına sebep oldu, o yüzden svg'yi iptal ettim. 2-3 tane olsa sorun değil ama 40 tane svg, çok fazla objeye sebep oluyor.

<svg id="svg-recent" enable-background="new 0 0 512 512" height="1rem" viewBox="0 0 512 512" width="1rem" xmlns="http://www.w3.org/2000/svg">            <g>                <g>                    <path d="m246.23 426.666h-195.039c-18.851 0-34.132-15.282-34.132-34.132v-34.134h261.957z" fill="#d3dcfb" />                    <path d="m460.825 153.6v143.398 95.534h-409.634c-18.851 0-34.132-15.282-34.132-34.133v-204.799l238.95-85.334z" fill="#ebf5fc" />                    <g fill="#3c58a0">                        <path d="m77.336 221.867h-18.133c-4.418 0-8-3.582-8-8v-18.133c0-4.418 3.582-8 8-8h18.133c4.418 0 8 3.582 8 8v18.133c0 4.418-3.582 8-8 8z" />                        <path d="m145.603 221.867h-18.133c-4.418 0-8-3.582-8-8v-18.133c0-4.418 3.582-8 8-8h18.133c4.418 0 8 3.582 8 8v18.133c0 4.418-3.582 8-8 8z" />                        <path d="m213.869 221.867h-18.133c-4.418 0-8-3.582-8-8v-18.133c0-4.418 3.582-8 8-8h18.133c4.418 0 8 3.582 8 8v18.133c0 4.418-3.581 8-8 8z" />                        <path d="m282.136 221.867h-18.133c-4.418 0-8-3.582-8-8v-18.133c0-4.418 3.582-8 8-8h18.133c4.418 0 8 3.582 8 8v18.133c0 4.418-3.582 8-8 8z" />                        <path d="m350.391 221.867h-18.133c-4.418 0-8-3.582-8-8v-18.133c0-4.418 3.582-8 8-8h18.133c4.418 0 8 3.582 8 8v18.133c0 4.418-3.581 8-8 8z" />                        <path d="m418.658 221.867h-18.133c-4.418 0-8-3.582-8-8v-18.133c0-4.418 3.582-8 8-8h18.133c4.418 0 8 3.582 8 8v18.133c0 4.418-3.582 8-8 8z" />                        <path d="m77.336 290.133h-18.133c-4.418 0-8-3.582-8-8v-18.133c0-4.418 3.582-8 8-8h18.133c4.418 0 8 3.582 8 8v18.133c0 4.419-3.582 8-8 8z" />                        <path d="m145.603 290.133h-18.133c-4.418 0-8-3.582-8-8v-18.133c0-4.418 3.582-8 8-8h18.133c4.418 0 8 3.582 8 8v18.133c0 4.419-3.582 8-8 8z" />                        <path d="m213.869 290.133h-18.133c-4.418 0-8-3.582-8-8v-18.133c0-4.418 3.582-8 8-8h18.133c4.418 0 8 3.582 8 8v18.133c0 4.419-3.581 8-8 8z" />                        <path d="m290.136 290.133v-25.6c0-4.713-3.82-8.533-8.533-8.533h-17.067c-4.713 0-8.533 3.82-8.533 8.533v17.067c0 4.713 3.821 8.533 8.533 8.533z" />                        <path d="m77.336 358.4h-18.133c-4.418 0-8-3.582-8-8v-18.133c0-4.418 3.582-8 8-8h18.133c4.418 0 8 3.582 8 8v18.133c0 4.418-3.582 8-8 8z" />                        <path d="m145.603 358.4h-18.133c-4.418 0-8-3.582-8-8v-18.133c0-4.418 3.582-8 8-8h18.133c4.418 0 8 3.582 8 8v18.133c0 4.418-3.582 8-8 8z" />                        <path d="m213.869 358.4h-18.133c-4.418 0-8-3.582-8-8v-18.133c0-4.418 3.582-8 8-8h18.133c4.418 0 8 3.582 8 8v18.133c0 4.418-3.581 8-8 8z" />                    </g>                    <path                        d="m418.417 187.733h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.219 4.178 5.219 7.662v17.65c0 3.484-2.165 6.456-5.219 7.662.937.37 1.954.58 3.022.58h17.65c4.552 0 8.242-3.69 8.242-8.241v-17.65c-.001-4.552-3.691-8.242-8.242-8.242z"                        fill="#2a428c" />                    <path                        d="m350.15 187.733h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.219 4.178 5.219 7.662v17.65c0 3.484-2.165 6.456-5.219 7.662.937.37 1.954.58 3.022.58h17.65c4.552 0 8.241-3.69 8.241-8.241v-17.65c0-4.552-3.689-8.242-8.241-8.242z"                        fill="#2a428c" />                    <path                        d="m281.895 187.733h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.22 4.178 5.22 7.662v17.65c0 3.484-2.165 6.456-5.22 7.662.937.37 1.954.58 3.022.58h17.65c4.552 0 8.242-3.69 8.242-8.241v-17.65c-.001-4.552-3.691-8.242-8.242-8.242z"                        fill="#2a428c" />                    <path                        d="m213.628 187.733h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.22 4.178 5.22 7.662v17.65c0 3.484-2.165 6.456-5.22 7.662.937.37 1.954.58 3.022.58h17.65c4.552 0 8.242-3.69 8.242-8.241v-17.65c-.001-4.552-3.69-8.242-8.242-8.242z"                        fill="#2a428c" />                    <path                        d="m145.361 187.733h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.219 4.178 5.219 7.662v17.65c0 3.484-2.165 6.456-5.219 7.662.937.37 1.954.58 3.022.58h17.65c4.552 0 8.242-3.69 8.242-8.241v-17.65c0-4.552-3.69-8.242-8.242-8.242z"                        fill="#2a428c" />                    <path                        d="m77.095 187.733h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.22 4.178 5.22 7.662v17.65c0 3.484-2.165 6.456-5.22 7.662.937.37 1.954.58 3.022.58h17.65c4.552 0 8.242-3.69 8.242-8.241v-17.65c-.001-4.552-3.691-8.242-8.242-8.242z"                        fill="#2a428c" />                    <path                        d="m77.095 256h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.22 4.178 5.22 7.662v17.651c0 3.484-2.165 6.456-5.22 7.662.937.37 1.954.58 3.022.58h17.65c4.552 0 8.242-3.69 8.242-8.241v-17.651c-.001-4.552-3.691-8.242-8.242-8.242z"                        fill="#2a428c" />                    <path                        d="m77.095 324.267h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.22 4.178 5.22 7.662v17.651c0 3.484-2.165 6.456-5.22 7.662.937.37 1.954.58 3.022.58h17.65c4.552 0 8.242-3.69 8.242-8.241v-17.651c-.001-4.553-3.691-8.242-8.242-8.242z"                        fill="#2a428c" />                    <path                        d="m145.361 256h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.219 4.178 5.219 7.662v17.651c0 3.484-2.165 6.456-5.219 7.662.937.37 1.954.58 3.022.58h17.65c4.552 0 8.242-3.69 8.242-8.241v-17.651c0-4.552-3.69-8.242-8.242-8.242z"                        fill="#2a428c" />                    <path                        d="m145.361 324.267h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.219 4.178 5.219 7.662v17.651c0 3.484-2.165 6.456-5.219 7.662.937.37 1.954.58 3.022.58h17.65c4.552 0 8.242-3.69 8.242-8.241v-17.651c0-4.553-3.69-8.242-8.242-8.242z"                        fill="#2a428c" />                    <path                        d="m213.628 256h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.22 4.178 5.22 7.662v17.651c0 3.484-2.165 6.456-5.22 7.662.937.37 1.954.58 3.022.58h17.65c4.552 0 8.242-3.69 8.242-8.241v-17.651c-.001-4.552-3.69-8.242-8.242-8.242z"                        fill="#2a428c" />                    <path d="m290.136 290.133v-25.892c0-4.552-3.69-8.241-8.242-8.241h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.22 4.178 5.22 7.662v17.651c0 3.484-2.165 6.456-5.22 7.662.937.37 1.954.58 3.022.58h25.892z" fill="#2a428c" />                    <path                        d="m213.628 324.267h-17.65c-1.068 0-2.085.21-3.022.579 3.055 1.206 5.22 4.178 5.22 7.662v17.651c0 3.484-2.165 6.456-5.22 7.662.937.37 1.954.58 3.022.58h17.65c4.552 0 8.242-3.69 8.242-8.241v-17.651c-.001-4.553-3.69-8.242-8.242-8.242z"                        fill="#2a428c" />                    <path d="m437.114 143.721v153.277 95.535h23.711v-95.535-143.398z" fill="#d3dcfb" />                    <path d="m460.825 153.6v-85.334c0-18.851-15.282-34.132-34.132-34.132h-375.502c-18.851 0-34.132 15.281-34.132 34.132v85.334z" fill="#ff4155" />                    <g>                        <g>                            <g>                                <path d="m124.609 75.993h-22.217c-4.268 0-7.726-3.459-7.726-7.726s3.459-7.726 7.726-7.726h22.217c4.268 0 7.726 3.459 7.726 7.726s-3.459 7.726-7.726 7.726z" fill="#e80054" />                            </g>                            <g>                                <path d="m179.191 75.993h-22.217c-4.268 0-7.726-3.459-7.726-7.726s3.459-7.726 7.726-7.726h22.217c4.268 0 7.726 3.459 7.726 7.726s-3.458 7.726-7.726 7.726z" fill="#e80054" />                            </g>                            <g>                                <path d="m320.887 75.993h-22.218c-4.268 0-7.726-3.459-7.726-7.726s3.459-7.726 7.726-7.726h22.218c4.268 0 7.726 3.459 7.726 7.726s-3.458 7.726-7.726 7.726z" fill="#e80054" />                            </g>                            <g>                                <path d="m375.47 75.993h-22.218c-4.268 0-7.726-3.459-7.726-7.726s3.459-7.726 7.726-7.726h22.218c4.268 0 7.726 3.459 7.726 7.726s-3.459 7.726-7.726 7.726z" fill="#e80054" />                            </g>                        </g>                    </g>                    <path d="m162.125 64c0 11.782-9.551 21.333-21.333 21.333s-21.333-9.551-21.333-21.333v-42.667c-.001-11.782 9.55-21.333 21.332-21.333s21.333 9.551 21.333 21.333v42.667z" fill="#ebf5fc" />                    <path d="m358.403 64c0 11.782-9.551 21.333-21.333 21.333s-21.334-9.551-21.334-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333s21.333 9.551 21.333 21.333v42.667z" fill="#ebf5fc" />                    <path                        d="m337.069 0c-4.38 0-8.448 1.324-11.836 3.588 5.725 3.826 9.498 10.343 9.498 17.746v42.666c0 7.402-3.773 13.92-9.498 17.746 3.387 2.263 7.456 3.588 11.836 3.588 11.782 0 21.333-9.551 21.333-21.333v-42.668c.001-11.782-9.55-21.333-21.333-21.333z"                        fill="#d3dcfb" />                    <path                        d="m140.791 0c-4.38 0-8.448 1.324-11.836 3.588 5.725 3.826 9.498 10.343 9.498 17.746v42.666c0 7.402-3.773 13.92-9.498 17.746 3.387 2.263 7.456 3.588 11.836 3.588 11.782 0 21.333-9.551 21.333-21.333v-42.668c.001-11.782-9.55-21.333-21.333-21.333z"                        fill="#d3dcfb" />                    <path d="m426.693 34.133h-23.703c18.851 0 34.132 15.281 34.132 34.132v85.335h23.702v-85.334c.001-18.851-15.281-34.133-34.131-34.133z" fill="#e80054" />                    <path d="m17.058 111.74h443.767v15.453h-443.767z" fill="#e80054" />                </g>                <circle cx="366.942" cy="384" fill="#4fabf7" r="128" />                <circle cx="366.942" cy="384" fill="#ebf5fc" r="93.867" />                <g>                    <g>                        <path d="m366.942 374.659c-4.268 0-7.726-3.459-7.726-7.726v-42.667c0-4.267 3.459-7.726 7.726-7.726 4.268 0 7.726 3.459 7.726 7.726v42.667c0 4.267-3.459 7.726-7.726 7.726z" fill="#3c58a0" />                    </g>                </g>                <g>                    <g>                        <path d="m409.609 391.726h-25.601c-4.268 0-7.726-3.459-7.726-7.726s3.459-7.726 7.726-7.726h25.601c4.268 0 7.726 3.459 7.726 7.726s-3.459 7.726-7.726 7.726z" fill="#3c58a0" />                    </g>                </g>                <path d="m366.942 256c-3.995 0-7.945.193-11.847.551 65.137 5.979 116.152 60.752 116.152 127.449s-51.016 121.47-116.153 127.449c3.902.358 7.852.551 11.847.551 70.692 0 128-57.308 128-128s-57.307-128-127.999-128z" fill="#1886ea" />                <path d="m366.942 290.133c-4.01 0-7.961.253-11.839.741 46.252 5.821 82.028 45.295 82.028 93.126s-35.776 87.305-82.028 93.126c3.878.488 7.829.741 11.839.741 51.841 0 93.867-42.026 93.867-93.867s-42.026-93.867-93.867-93.867z"                    fill="#d3dcfb" />                <circle cx="366.942" cy="384" fill="#ffdd40" r="17.067" />            </g>        </svg>

Svg en sağlam olanıdır. Fakat sayfa içerisinde aşırı kullanılırsa dediğiniz gibi html boyutunu yükseltir. Png olarak kullanmak en kötü yöntem olur. Çünkü tarayıcı her bir resim için sunucuya ekstra sorgu gönderecek. Bu durumda en mantıklı yöntem css sprite özelliği olacaktır. Png dosyalarını tek bir resimde birleştirip css background ile icon gibi kullanabilirsiniz. Google'dan css sprite generator diye aratırsanız bir sürü site çıkar karşınıza.

Ayrıca sadece css ile kullanılabilen icon paketleri de var. Bunlar da tercih edilebilir. Örnek:
https://css.gg/

Ben de en sağlamı svg diye düşünüyordum, o yüzden ilk onu kullanmaya başlamıştım. Ama sanırım ben meydanı boş bulup, biraz abartı svg'ler de seçmiş olabilirim. Çok daha sade ve basit svg'ler kullansaydım belki performans olarak sıkıntı yaşamazdım. Ama şimdilik Svg'yi ikinci plana atıyorum.

Verdiğiniz siteyi inceleyeyim, bu daha fazla işimi görebilir. Ekstra font yüklenmesine gerek kalmadan ve png isteğine de ihtiyaç olmadan, en azından sosyal medya ve benzeri standart ikonları buradan kullanabilirim, işime yarayacak bu link.
Teşekkürler.