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

over under folden

Over folden / under folden

Hvorfor lige over / under foldenIndhold1 Hvorfor lige over / under folden2 Hvad er over folden og under folden?3 de typiske regler4 ja det kan virke forvirrende Der tales meget i min verden om over og under folden og det gør der af den simple årsag at det har positiv indflydelse på hastigheden og renderingstiden, … Læs mere

seo fejl find dem 1

Tekniske seo fejl kan findes

Det kan være svært at finde de tekniske seo fejl som der er på ens hjemmeside. Dagens tip er hvilke programmer og metoder jeg blandt andet benytter i kampen mod dårlig teknisk seo samt seo generelt på hjemmesider. Lad os starte med det øjet ser At sørge for at UX er godt, at CTR bliver … Læs mere

seo lex start din seo her

Nutidens SEO tips

Når man skal i gang med SEO kan det være svært at vide hvor man skal starte og hvad der er vigtigt og ikke helt så vigtigt. Hvad angår SEO har jeg selv været med i mange år, men jeg tyr alligevel til dette tip hver gang jeg lige skal have frisket op hvad der … Læs mere

julekalender kim tetzlaff tips

Årets Julekalender

Hastighedsoptimering Ordbogen

font optimering jul

Font optimering

Når man har med fonte at gøre, hvilket du med stor sandsynlighed har. Så har du sikkert også oplevet at hjemmesider som bruger mange fonte, også loader langsommere end en side der fx kun bruger system fonte. Det er ikke sjældent at jeg møder hjemmesider der har op imod 15 fonte installeret på hjemmesiden, og … 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.

KTJ-Media.dk - Hastighed, SEO og Teknisk optimering