Optimering af ikoner: Brug ikoner rigtigt og forbedr din 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

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 🙂