Rasmus Lindroth

En blogg om Linux & teknik

Optimera sidan

Sidan är byggd med hjälp av Hugo, vilket är ett program gjort för att generera statiska HTML-sidor. Jag började göra mitt egna tema själv förut, men jag fick inte till det särskilt snyggt, så det projektet hamnade på hyllan. Nu bestämde jag mig för att börja blogga lite, så den här gången fick det bli ett färdigt tema. Temat jag använder heter Kiera och det valde jag för att det var minimalistiskt.

Jag har gjort lite småändringar av temat för att göra sidan snabbare att ladda. Det är nog några tips andra kan använda sig av också.

Font Awesome utan Font Awesome

När man använder sig av sidor som Font Awesome eller liknande sidor som erbjuder ikoner brukar det fungera som så att man inkluderas deras CSS på sin sida. CSS-filen drar sedan ner ett typsnitt som innehåller ikonerna. Mitt tips är att hoppa över det här om man bara ska använda sig av några få ikoner, för då behövs inte det. Jag har börjat att ladda ner ikonerna jag vill använda mig av som SVG-filer istället och sen inkludera bilderna direkt i källkoden. Jag har exemplvis logotypen för Mastodon på den här sidan och koden för den logotypen ser ut så här.

<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="mastodon" class="svg-inline--fa fa-mastodon fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"></path></svg>

Font Awesome har en knapp för nedladdning av varje ikon, så det är bara att tuta och köra. Har du alla ikoner direkt i källkoden blir det två färre HTTP-frågor som behöver skickas.

Minifiera din CSS

En annan smidig funktion jag hittade som är inbyggt i Hugo var möjligheten att minifiera resurser och jag har valt att minifiera min CSS. Det enda man lär ha koll på är att CSS-filen isåfall ska placeras i /hugo/themes/theme-name/assets och inte i mappen static. Så här ser det ut template-filen som har hand om header-elementen.

{{ $style := resources.Get "css/styles.css" | minify }}                                                                                                                                 
<style>{{ $style.Content | safeCSS }}</style>   

Istället för att dra in min CSS på sidan med link-taggar, så ligger sidans CSS direkt på sidan. De flesta har ganska lite CSS och då kan man lika gärna inkludera det direkt, så sparar man ännu en HTTP-förfrågan och sidan laddas lite snabbare.

Med de här två sakerna så är det bara en fil som webbläsaren behöver ladda ner när den här sidan besöks. Det är bara om ett inlägg innehåller bilder som fler förfrågningar behöver göras.