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

hurtigere woocommerce del1

Langsom WooCommerce webshop – 3dec

Benytter du WooCommerce ligesom rigtig mange andre med en wordpress hjemmeside gør? så har du helt sikkert oplevet at din woocommerce hjemmeside bliver langsom. Og selv hvis du lige har installeret WooCommerce, så vil du også opleve at den bliver langsom med tiden. Det kan være mens du arbejder med shoppen, det kan også være … Læs mere

4 dec caching

Caching gør hjemmesiden hurtigere

For at gøre det nemt Der er ingen grund til at jeg på ny skriver en masse om caching, og hvorfor det er vigtigt. Jeg har i stedet samlet en række indlæg der beskriver netop caching, hvorfor det er vigtigt. Og så får du samtidig en masse andre tips. Der er masser at gå i … Læs mere

ikoner sloever hjemmesiden

Optimering af ikoner

Ikoner er kommet for at bliveIndhold1 Ikoner er kommet for at blive2 De største fejl med ikoner3 Ikoner på den rette måde3.1 Ikoner over folden3.2 Ikoner under folden3.3 Alternativet til ovenstående (CSS metoden)4 Til sidst Der er ingen tvivl om at ikoner er kommet for at blive, men langt de fleste hjemmeside bruger det forkert … Læs mere

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

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.