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

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

godt tema vaelg det rette fra start

Super godt tema

Når jeg skal vælge et tema til en kunde, eller til et af mine egne projekter, står jeg faktisk i samme situation som langt de fleste. Skal jeg gå med et der koster lidt, skal det være nemt at bruge, skal der være mange funktioner indbygget, skal det være med indbygget redigeringsværktøj og meget mere. … Læs mere

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

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