Optimering af ikoner: Brug ikoner rigtigt og forbedr din hjemmesides hastighed

optimering af ikoner hjemmesides hastighed

Ikoner er vigtige – men brug dem rigtigt

Ikoner er en fast bestanddel af moderne webdesign, men mange hjemmesider lider under tunge ikonbiblioteker, der hæmmer hastigheden. Problemet opstår ofte, når der loades store ikonfonte som FontAwesome, hvor kun en brøkdel af ikonerne faktisk bruges, mens resten blot tager unødig plads og tid. Hvis du vil beholde ikonerne på din hjemmeside uden at gå på kompromis med hastigheden, er det vigtigt at optimere deres implementering.

De mest almindelige fejl ved brug af ikoner

  1. Ikoner loades, men bruges ikke: Mange hjemmesideejere er ikke opmærksomme på, hvilke ikoner der faktisk er installeret og loades. Det betyder, at ikoner, som aldrig vises på siden, stadig bliver indlæst, hvilket unødvendigt øger sidens vægt.
  2. Forkert indlæsning af ikoner: Det er ofte nemmere at indsætte et helt ikonbibliotek fremfor kun de nødvendige ikoner. Dette resulterer i, at der indlæses unødvendige CSS-filer og fonte, hvilket forsinker sidens rendering.
  3. Manglende optimering for over- og under-folden: Ofte tages der ikke hensyn til, om ikonerne vises over eller under folden, hvilket kan resultere i, at ikonerne indlæses på en ineffektiv måde.

Hvordan optimerer du brugen af ikoner?

Der er virkelig mange måder at optimere brugen og de ikoner som du benytter i dag. Fremgangsmåden kommer dog an på hvad du gør i dag, og hvilke ikonbiblioteker du bruger. Men i forhold til hastighedsoptimering af din hjemmeside, er dette et vigtigt område at tage hånd om.

Identificer de brugte ikoner

Start med at kortlægge, hvilke ikoner der faktisk bruges på din hjemmeside. Du kan bruge værktøjer som Chrome Coverage (via Chrome DevTools). Dette værktøj viser, hvor meget af din CSS-fil der faktisk bruges. Denne metode er især god når de ikoner du bruger kommer fra fx fontawesome eller lign. bibliotek. Her er et eksempel på, hvordan du kan bruge det:

Trin:

  • Åbn Chrome DevTools (F12 eller højreklik → “Inspect”).
  • Gå til fanen “Coverage” under “More Tools.”
  • Genindlæs siden, og Chrome vil vise dig en rapport, hvor du kan se, hvor meget af din CSS (inklusive ikon-CSS) der bliver brugt.
  • Find CSS-filen, der indeholder ikonerne, og noter, hvilke ikoner der rent faktisk bruges.

Indsæt ikoner som inline SVG’er

Hvis dine ikoner vises over folden, bør du indsætte dem direkte i HTML’en som inline SVG’er. Det sikrer, at ikonerne kan vises med det samme uden at vente på indlæsning af eksterne filer.

Eksempel: I stedet for at indlæse et ikon som en font via CSS, kan du indsætte SVG-koden direkte i din HTML:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <path d="M12 2L2 12h3v8h6v-6h2v6h6v-8h3z"/>
</svg>

Dette ikon er en simpel hus-form og vil blive indlæst direkte, når HTML’en er hentet, uden forsinkelse. Original ikonet er bare et helt almindeligt hus, men som du kan se, kan man style det med CSS og få det til at være mere end bare det. Stadig i samme gode kvalitet, og vektor format.

Lazy-load ikoner under folden

For ikoner, der vises under folden, kan du bruge lazy-loading for at forbedre hastigheden yderligere. I WordPress kan du aktivere lazy loading ved at bruge plugins som WP Rocket. Alternativt kan du manuelt tilføje lazy load på dine SVG-ikoner.

Eksempel med WP Rocket: Når WP Rocket er installeret og konfigureret til lazy-loading, skal du blot sørge for, at dine SVG-ikoner indsættes som billedfiler (f.eks. via <img>-tag), og WP Rocket vil automatisk sørge for, at de ikke bliver indlæst, før de er synlige.

<img class="lazyload" data-src="path-to-your-icon.svg" alt="Ikonbeskrivelse">

Her vil ikonet først blive indlæst, når brugeren når til det på siden.

Minimer brugen af ikonfonte

Hvis du bruger FontAwesome eller et lignende ikonbibliotek, kan du oprette en tilpasset version, der kun indeholder de ikoner, du faktisk bruger. Dette kan du gøre på FontAwesomes officielle hjemmeside, hvor du kan vælge specifikke ikoner og downloade en tilpasset CSS-fil. Dette kan du dog kun hvis du betaler for at bruge fontawesome. Benytter du derimod deres gratis udgave, så skal du lave noget arbejde selv.

Her skal du blandt andet identificere de ikoner der bruges, og lave en helt ny css kode som du enten laver som en ny ekstern CSS fil, eller indlejre det imellem head taggene, på hjemmesiden. Den sidste er selvfølgelig bedst, især hvis der er tale om ikoner over folden.

Eksempel: Hvis du kun bruger et par ikoner fra FontAwesome, kan du generere en minimal version af CSS-filen og derefter deaktivere den oprindelige CSS-fil.

add_action( 'wp_enqueue_scripts', 'tetzlaff_theme_dequeue_style', 100); 
function tetzlaff_theme_dequeue_style() {
   wp_deregister_style('font-awesome');
}

Dette stykke kode fjerner FontAwesome CSS fra indlæsningen, og du kan i stedet inkludere din tilpassede version. Det kan ske at navnet på den ikke er “font-awesome” men noget andet. Du kan oftest se hvad den hedder, ved at finde den ID der er tilknyttet css filen i html koden.

Preload kritiske ikoner

For ikoner, som er kritiske for din sides layout (f.eks. et logo eller navigationsikoner), kan du bruge preload i din HTML, så disse ikoner prioriteres under indlæsningen.

Eksempel:

<link rel="preload" href="path-to-your-critical-icon.svg" as="image">

Dette sikrer, at browseren henter dit ikon tidligt i indlæsningen og reducerer latenstiden.

Alternativ løsning: Optimeret CSS-metode

Hvis det ikke er muligt at implementere SVG-ikoner, eller hvis du foretrækker en nemmere løsning, kan du kopiere den nødvendige CSS-kode direkte til din sides <head>-tags, og selvfølgelig sætte det ind i <style>-tag. Og derefter deaktivere den eksterne ikon-CSS. Selvom denne løsning ikke er lige så effektiv som inline SVG’er, kan det stadig reducere indlæsningstiden ved at fjerne unødvendig CSS og css kald.

De mest brugte ikonbiblioteker og deres formater

FontAwesome

  • Beskrivelse: Et af de mest populære ikonbiblioteker, som tilbyder et stort udvalg af ikoner i forskellige stilarter (solid, regular, brands). FontAwesome er kendt for sin brugervenlighed og fleksibilitet.
  • Formater: SVG, Webfont (ikonfont), PNG (via eksport)
  • Brugstal: Over 8 milliarder downloads via CDN og npm, brugt på millioner af hjemmesider verden over.
  • Website: fontawesome.com

Material Icons (Google Material Design)

  • Beskrivelse: En del af Googles Material Design-system, som bruges bredt i Android-apps, Google-tjenester og moderne webprojekter, der følger Material Design-retningslinjerne.
  • Formater: SVG, Webfont (ikonfont), PNG (via eksport)
  • Brugstal: Millioner af downloads via Google CDN og npm, udbredt på både websites og mobile platforme.
  • Website: material.io/icons

Ionicons

  • Beskrivelse: Ionicons blev oprindeligt udviklet til Ionic-frameworket, men er nu også populært på tværs af andre web- og mobilprojekter. Det er kendt for sin moderne og minimalistiske stil.
  • Formater: SVG, Webfont (ikonfont), PNG (via eksport)
  • Brugstal: Millioner af downloads på npm og bruges på tusindvis af hjemmesider, især i mobile-first applikationer.
  • Website: ionicons.com

Bootstrap Icons

  • Beskrivelse: Udviklet af Bootstrap-teamet for at integrere problemfrit med Bootstrap-frameworket, men kan også bruges i andre projekter. Det er kendt for sin fleksibilitet og simple design.
  • Formater: SVG, Webfont (ikonfont), PNG (via eksport)
  • Brugstal: Millioner af downloads og anvendt på millioner af hjemmesider, især i forbindelse med Bootstrap-projekter.
  • Website: icons.getbootstrap.com

Feather Icons

  • Beskrivelse: Feather Icons er et minimalistisk ikonbibliotek med en enkel linjestil, der er populært for sin lille filstørrelse og letvægtsdesign.
  • Formater: SVG
  • Brugstal: Flere hundrede tusinde downloads på npm, populært blandt udviklere af moderne, minimalistiske webapplikationer.
  • Website: feathericons.com

Heroicons

  • Beskrivelse: Heroicons blev udviklet specifikt til at arbejde sammen med Tailwind CSS og tilbyder både kontur- og fyldte ikoner, der er nemme at integrere i moderne design.
  • Formater: SVG
  • Brugstal: Titlen titusindvis af downloads og udbredt blandt Tailwind CSS-brugere.
  • Website: heroicons.com

Zondicons

  • Beskrivelse: Zondicons er et mindre, men veldesignet ikonbibliotek, som ofte bruges sammen med Tailwind CSS. Det tilbyder simple og rene ikoner.
  • Formater: SVG
  • Brugstal: Mens det er mindre udbredt end de større biblioteker, er det populært i nicheprojekter og Tailwind CSS-baserede applikationer.
  • Website: zondicons.com

Eva Icons

  • Beskrivelse: Eva Icons er et open-source ikonbibliotek med over 480 ikoner, som er velegnet til både web- og mobilapplikationer på grund af sit konsistente og moderne design.
  • Formater: SVG, Webfont (ikonfont)
  • Brugstal: Eva Icons har titusindvis af downloads på GitHub og npm, ofte brugt i moderne applikationer.
  • Website: akveo.github.io/eva-icons

Octicons (GitHub Icons)

  • Beskrivelse: Octicons er GitHubs eget ikonbibliotek og bruges ofte til at give GitHub-projekter og webapps et konsistent, rent design. Det bruges også i forskellige udviklingsværktøjer.
  • Formater: SVG, Webfont (ikonfont)
  • Brugstal: Bruges i millioner af GitHub repositories og udviklingsværktøjer, der integrerer med GitHub.
  • Website: primer.style/octicons

Entypo

  • Beskrivelse: Et open-source ikonbibliotek med over 400 ikoner, kendt for sit lette og pixel-perfect design. Det bruges ofte i forskellige typer projekter, der har brug for enkle ikoner.
  • Formater: SVG, Webfont (ikonfont), PNG (via eksport)
  • Brugstal: Flere hundrede tusinde downloads på npm og andre distributionsplatforme, populært blandt udviklere, der ønsker små og præcise ikoner.
  • Website: entypo.com

Afsluttende ord om ikoner og optimering

Ved at optimere brugen af ikoner på din hjemmeside kan du forbedre både hastigheden og brugeroplevelsen. Start med at kortlægge, hvilke ikoner du bruger, og fjern alt unødvendigt. Indsæt kritiske ikoner som inline SVG’er og lazy-load dem der er indsat i img-tag, og er under folden. På den måde kan du beholde det visuelle udtryk, som ikoner giver, uden at det går ud over performance.

God arbejdslyst 🙂

Skriv en kommentar

Måske du også vil læse disse indlæg

Ja, jeg har også skrevet andre indlæg som måske kunne have din interesse