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
- Hjemmesideejer ved ikke hvilke ikoner der er installeret og loades
- Der loades ikoner som ikke bruges
- Ikoner loades typisk forkert, fordi det er nemmest
- 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.
