Font Awesome is slecht voor page speed
Prachtig die icoontje maar font Awesome is slecht voor page speed. Sorry maar helaas kan ik niet anders zeggen. En heel veel website ontwikkelaars zullen juist zeggen dat het onmogelijk is een goede website te bouwen zonder het gebruik van font Awesome.
De vraag is niet of het mooi en/of handig is om te gebruiken maar of het goed is voor page speed of niet. En dat is precies het punt. Voor websites die Font Awesome gebruiken zullen ook bekend zijn met de volgende melding in de Google page speed test:
- Beperk niet-gebruikte CSS
- Vermijd enorme netwerkpayloads
- Houd het aantal verzoeken laag en de overdrachtsgrootte klein
- Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen
Dit zijn belangrijke onderdelen voor page speed en Web Vitals dus het is ook belangrijk voor SEO tegenwoordig.
Font Awesome is slecht voor page speed.
Wat is Font Awesome?
Font Awesome is een web lettertype dat wordt gebruikt door webdesigners website ontwikkelaars om iconen te gebruiken alsof het letters zijn. Hierdoor is het zeer flexibel. Net als met lettertype kan je met eenvoudige CSS de kleur en grote en kan je zelfs tekstschaduw gebruiken.
Font Awesome is ontworpen door Dave Gandy voor gebruik met Twitter Bootstrap. Het gebruik is vrij eenvoudig. Met enkele regels code kan het geladen worden in <head>. Daarna kan met <i> en enkele classes veel verschillend icoontje getoond worden op de website. Het begon met een redelijk aantal iconen dat tot versie 4.7 uitgroeide tot meer dan 700 iconen.
Met versie 5 is er heel vee veranderd. Er is een betaalde versie en er zijn meer dan 1500 iconen. En hiermee is ook de CSS enorm gegroeid.
Font Awesome is slecht voor page speed
Voor font Awesome werden iconen getoond door middel van afbeeldingen. Dit werd uiteraard veel makkelijker gemaakt en het werd zelfs flexibel omdat je het makkelijk met CSS kan aanpassen.
Het laden van versie 4.7 is op zijn minst 100KB, voor een lettertype en de CSS. Voor versie 5 zit je hier al snel boven. Veel van de CSS wordt niet gebruikt waardoor je hiervoor een melding krijgt in de Google page speed test. De lettertype moet ook goed geladen worden om te voorkomen dat hier ook een melding voor verschijnt.
Page speed is eigenlijk te zorgen dat je alleen laad dat nodig is en meer niet. Met Font Awesome worden heel veel iconen geladen die niet nodig zijn. Daarmee ook een hoop CSS dat niet nodig is.
De beste oplossing is het gebruik van een sprite en een klein beetje CSS. De afbeelding hieronder is de sprite die gebruikt wordt voor deze website en zelfs deze bevat enkele iconen die niet worden gebruikt. Punt is dat de sprite en het beetje CSS dat hiervoor nodig is niet meer is dan 25KB. Dat is een kwart van versie 4.7. En dan hebben we het nog niet over versie 5 en later.
Vraag vrijblijvende een offerte aan.
Font Awesome gebruiken of niet
Mensen kiezen vooral voor het gemak en als dat het motief is kies dan voor versie 4.7 en laad deze vanaf de website. De CDN van font Awesome staat er niet bekend om dat het snel is, dat is dus een ander nadeel hiervan. Vandaar het beter is lokaal te laden.
Bedenk goed of versie 5 nou echt nodig is en of daar iconen in zitten die gaat gebruiken. En zijn alle CSS optie echt nodig? Waarschijnlijk niet.
Het maken van een sprite kost wat meer tijd maar je kan hierdoor origineler zijn, mooiere icoontjes maken en het is ook nog eens goed voor page speed.
Er zijn nog geen reacties. Wees de eerste..!!