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:

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.

Net als dat bootstrap slecht is voor page speed is font Awesome slecht voor page speed. Als we kijken naar versie hebben je meer dan 1500 iconen tot je gebruik. Hoeveel wordt hier daadwerkelijk van gebruikt? In al mijn werk ben ik nooit boven de 25iconen gekomen om te gebruiken. Dus waarom zou je ongeveer 1500 iconen te veel laden die niet worden gebruikt?

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.

Font Awesome is slecht voor page speed Freelance website ontwikkeling

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.

Sptie gebruiken voor page speed Freelance website ontwikkeling

Vraag vrijblijvende een offerte aan.

Offert Aanvragen

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..!!

Reageer

E-mailadres wordt niet gepubliceerd.
Verplichte velden zijn gemarkeerd met *

*
*
*