Bedste hastighedsoptimering de sidste 25 år
Er din hjemmeside også for langsom? Hurtigere hjemmeside fra 695,- ex moms

Optimering af ikoner

99 ud af 100 hjemmesider bruger ikoner

Stort set alle hjemmesider bruger ikoner på den ene eller den anden måde. Og størstedelen bruger dem forkert uden at tænke over om de overhovedet har brug for de ikoner eller ikke. Herunder vil jeg fortælle dig hvad du skal være obs på, hvor du med fordel kan sætte ind for at optimerer på hastigheden.

ikoner sloever hjemmesiden

Ikoner er kommet for at blive

Der er ingen tvivl om at ikoner er kommet for at blive, men langt de fleste hjemmeside bruger det forkert og med den bagside at det sløver hjemmesidens hastighed. Hjemmesiden bliver unægteligt langsommere af at bruge ikoner, og derfor skal du bruge dem rigtigt hvis det er den vej du vil gå. Og ja, din hjemmeside benytter sig med stort sandsynlighed også ikoner.

De største fejl med ikoner

  1. Hjemmesideejer ved ikke hvilke ikoner der er installeret og loades
  2. Der loades ikoner som ikke bruges
  3. Ikoner loades typisk forkert, fordi det er nemmest
  4. Der tages ikke højde for over og under folden

De fleste hjemmesider bruger ikoner ved at hjemmesiden loader fonte som indeholder disse ikoner, fx fontawesome. Problemet her er dog bare at der loades flere css filer, samt en font, nogle gange flere fonte, for at vise de 5-20 ikoner som de fleste hjemmesider rent faktisk bruger. Men der er så hundredvis andre ikoner som loades, fortolkes mm. Som ikke bruges. Og samtidig, fonten loader sent.

Ja man vil kunne lave en preload på fonten, som fortalt om her. Men det gør stadig at der er lidt latenstid på visningen og renderingen, uanset hvad. Især hvis du bare smider ikon css mm ind i html’en.

Ikoner på den rette måde

Først og fremmest, skal du finde ud af hvilke ikoner du rent faktisk bruger på hjemmesiden. Ofte bruger du kun 1 maks 2% af de ikoner du har installeret på hjemmesiden. Det gør du ved at se på hjemmesiden, eventuelt bruge Chrome Coverage, som kan se hvor meget af en css der benyttes, og ud fra det kan du også se på css til ikonerne og få registreret hvilke ikoner der benyttes.

Dernæst, skal du finde ud af hvor på siden de vises, vises de over eller under folden, på mobil, på computer etc. der er nemlig forskellige metoder alt efter hvor på siden de vises.

Ikoner over folden

Ikoner over folden, skal typisk indsættes direkte i html koden, som SVG kode. Det er nemt nok men kræver ofte at du har erfaring med at redigerer dine template filer for temaet mm. Når man gør det sådan, så fjerner man også alle mellemled der skal til for at kunne vise det ikon. Og det betyder at ikonet reelt vises så snart html koden er hentet ned.

Har du få ikoner, fx under 10, så kan du også bruge denne metode på alle ikoner både under og over folden.

Det fede ved denne metode er at du stadig kan definere farver, størrelser mm.

Ikoner under folden

Ikoner under folden, skal du indsætte som SVG filer, på samme vis som når du indsætter et billede. I wordpress kræver det dog at du lige aktiverer at SVG filer må blive oploadet til mediebiblioteket, alternativt skal du oploade SVG billederne til din temamappe via FTP.

Husk også at lazyload af de ikoner er vigtigt, for der er jo ingen grund til at loade ikoner som brugeren alligevel ikke ser, fordi de ikke scroller. Du kan evt benytte et plugin som WP Rocket til lazyload.

Alternativet til ovenstående (CSS metoden)

Som et alternativ, når ovenstående ikke er mulig, eller du heller vil lave en nemmere løsning som dog ikke er lige så god. Så skal du i stedet kopiere det CSS lidt som fortalt i indlægget om optimering af fonte. Og så derefter deaktiverer de css filer som ikke skal loades. Det eneste du skal huske her, er at det er al den css som rent faktisk bruges, der skal kopieres ind, ikke alt det som ikke bruges.

Til sidst

Det sidste du skal gøre, er at deaktivere load af de ikoner/fonte du ikke bruger. Det gør man typisk ved at fjerne den CSS fil som kalder ikonerne. I wordpress kan du deaktivere den ved at se på den ID css filen har fået, og deaktivere den via functions.php. fx:

add_action( 'wp_enqueue_scripts', 'tetzlaff_theme_dequeue_style', 100); 
function tetzlaff_theme_dequeue_style() {
   wp_deregister_style('CSS ID');
}

God arbejdslyst og god jul.

Årets julekalender

kim tetzlaff

Om forfatteren

Se mere Kim Tetzlaff

Jeg har siden 1995 arbejdet med og haft stor fokus på Teknisk SEO og hastighed på hjemmesider. Jeg er programmør, nørd og stolt af det. Jeg bygger hjemmesider, hastighedsoptimere, ser på det SEO tekniske og det er mere end 25 års erfaring der ligger bag – Du er i gode hænder når jeg laver noget for dig 🙂

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

Døde links / Broken link / dødt link / 404 / 410

Hvad er broken links?

Døde links / Broken links Hvad er døde links egentlig? og hvad kan du gøre ved døde links? Det og meget mere giver jeg dig svaret på her, i et kort indlæg om lige netop døde links/broken links Synonymer: broken … Læs mere

hvad er google

Hvad er Google?

Synonymer: google, søgemaskine google Google er nok verdens største søgemaskine, som ud over at være en søgemaskine også har en del andre både gratis produkter, betalings produkter men også produkter hvor du kan tjene penge. Når man søgemaskineoptimere sin hjemmeside, … Læs mere

Skriv en kommentar

Kim Tetzlaff ApS - Hastighed, SEO og Teknisk optimering

Målet er kvalitet

Det er mit mål at levere kvalitetsløsninger med høj fokus på hastighed og teknisk seo. Uanset om der er tale om små eller store løsninger, vil fokus altid være på hastighed og teknisk seo.