Hjemmesiden er hurtigere og lidt pænere
Webdesign og optimering
ChatGPT kan hjælpe med ufatteligt mange ting.
I dag har “vi” brugt tiden på at optimere stegemueller.dk, og også i dag har jeg sparet penge på udefrakommende bistand.
Hjemmesiden er hurtigere og lidt pænere
🖥️ Sådan gjorde jeg min gamle hjemmeside hurtigere og pænere
Mit domæne stegemueller.dk er ikke ligefrem nyt. Jeg har skrevet her siden 2005, og noget af mit ældste indhold går helt tilbage til 2007.
I dag er det blevet til mere end 2.200 indlæg, 117 sider og mere end 11.000 kommentarer.
Det er jeg tilfreds med, men det betød også, at jeg pludselig stod med en side, som var blevet lidt sløv og lidt rodet.
Her kan du læse om, hvordan jeg optimerede siden uden at miste indholdet, og hvordan du selv kan gøre det samme, hvis du har en hjemmeside, der er blevet lidt “slap i koderne”.
🚦 Hvorfor gik jeg i gang?
Jeg startede med at måle min hjemmeside med GTmetrix og Google PageSpeed Insights.
GTmetrix viser, hvor hurtigt siden loader – og peger på store problemer, f.eks. for mange billeder, for store billeder, langsomme scripts eller for mange DOM-elementer. I udgangspunktet mente GTmetrix, at jeg havde 859 DOMs. Man bør vist holde sig under 600.
PageSpeed Insights viser, hvordan Google ser en side – især på mobil, som 36 pct. af mine besøgende læser med.
Mine første målinger viste:
-
Desktop var rimelig OK.
-
Mobilscore var for lav.
-
Jeg havde alt for mange DOM-elementer (det er alle de små HTML-bokse, en side består af).
⚙️ De vigtigste værktøjer
Jeg valgte at købe et par gode værktøjer. Jeg har brugt penge på dem, men de er virkelig godt givet ud:
✅ WP Rocket
Et smart cache-plugin, der gemmer færdige versioner af siderne, så de hentes hurtigere til dim enhed (computer, tablet eller telefon).
Det kan også optimere CSS og JavaScript, så koden bliver lettere at indlæse. Det sparer tid.
✅ Imagify
Et billedoptimerings-plugin, som automatisk gør billederne mindre, uden at de mister kvalitet.
Jeg har mange gamle billeder, og Imagify har helt automatisk sparet 363 MB. Jeg har sparet 64 pct. stort set uden at røre en finger.
📌 Sådan gjorde jeg
Jeg har ikke brugt en fancy page-builder; jeg er nok lidt “old school” og foretrækker at skrive det meste selv.
Her er, hvad jeg konkret har gjort:
1) Færre indlæg pr. blok
Jeg har sektioner som “Aktuelle emner”, “Lær om Aspergers syndrom” osv., hvor jeg før viste 6 indlæg ad gangen.
Jeg satte dem ned til 3, så hver blok fylder mindre. Det betyder, at siden skal hente færre billeder og mindre HTML-kode. Ønsker man alligevel at se flere indlæg, klikker man bare på “Load more”.
Det skærer hundredvis af DOM-elementer væk uden at fjerne indhold.
2) Mega Menu
Jeg bruger temaet Enfold, som har en Mega Menu-funktion.
Her lagde jeg mine vigtigste kategorier ind som et nyt menupunkt. I starten så det temmelig rodet ud:
- Læsbarheden var elendig
-
Alt stod med fed skrift
-
Punkterne stod tæt
-
Der var ingen hover-effekt (dvs. der skete ikke noget, når man holdt musen over en tekst)
Sammen med min hjælper – her ChatGPT 😉 – fik jeg lavet en lille CSS-tilføjelse, der:
-
Fjernede fed skrift.
-
Gjorde skriften lidt mindre.
-
Lagde en lys baggrund bag punkterne, når man holder musen over.
-
Tilføjede en knap-effekt, så det ser ordentligt ud.
Det hele blev ordnet med 10 linjers Quick CSS, som jeg bare indsatte i Enfolds indstillinger.
/* Mega Menu underpunkter – base-styling */
#header .main_menu .avia_mega_div ul.sub-menu li a {
font-weight: normal !important;
font-size: 90% !important;
line-height: 1.5em !important;
display: block !important;
width: 100% !important;
padding: 6px 12px !important;
transition: all 0.2s ease !important;
}
/* Hover: baggrund + farve + knap-følelse */
#header .main_menu .avia_mega_div ul.sub-menu li a:hover {
background-color: #f2f2f2 !important;
color: #c3512f !important;
border-radius: 3px !important;
}
3) Lidt oprydning i widgets
Jeg havde mange små bokse (widgets) i min sidebar på forsiden, fx “Seneste indlæg”, “Seneste kommentarer” og andet godt. De var med til at give det store antal DOM.
Jeg ryddede grundigt ud i dem på forsiden ud fra en tanke om, at de sikkert alligevel ikke bliver brugt. De var nok mest til pynt, og fordi jeg selv fandt dem pæne. Så er der ingen grund til, at de skal sløve siden.
Har du nogensinde brugt dem? Savner du noget nu? Send gerne en kommentar, så ser jeg om jeg kan rette op på det uden at ødelægge hastigheden.
4) “Måske kan du også lide:”
I lang tid har det generet mig, at boksen “Måske kan du også lide:”, som findes i bunden af hver artikel, ikke var pæn og ikke var centreret, men jeg synes ikke, jeg har villet bruge penge på at få hjælp til det. Og det er flere år siden, jeg opgav at lære at skrive CSS. Min hjerne er ikke skruet sammen til det.
Det klarede ChatGPT også med lidt kode:
.related_posts {
text-align: center !important;
}
.related_entries_container {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 20px !important;
max-width: 900px !important; /* max bredde for hele blokken */
margin: 0 auto !important; /* centrer containeren */
}
.related_column {
background: #f5f5f5 !important;
padding: 15px !important;
border-radius: 5px !important;
box-sizing: border-box !important;
flex: 0 0 calc(50% - 20px) !important; /* to i bredden med luft */
max-width: 400px !important;
}
Nu er den blevet lidt pænere:
✅ Hvad har jeg fået ud af det?
Efter at have arbejdet en hel dag er min PageSpeed-score på desktop typisk 95–97 og på mobil 74–80 afhængigt af, hvad jeg måler.
🚀 Min side loader på under 1 sekund.
🗂️ DOM-advarslen er næsten væk. Den kommer kun lidt igen på lange blogindlæg med mange kommentarer, men det gør ikke noget.
For en privat hobbyhjemmeside, hvor SEO er uinteressant, og hvor jeg ikke sælger noget som helst og aldrig kommer til det, er dette vist i orden:
Hvad kan du lære af det?
Hvis du selv har en hjemmeside, du synes er blevet lidt sløv, kan du tit gøre meget uden at pille ved alt:
Brug et godt cache-plugin (jeg anbefaler WP Rocket).
✔️ Brug billedoptimering (jeg kan bedst lide Imagify).
✔️ Tjek hvor mange indlæg du viser pr. side – færre indlæg pr. blok giver ofte størst effekt.
✔️ Puds dine menuer til. En pæn menu gør siden nemmere at bruge. Og jeg synes, den øger sidens læsbarhed.
📝 Det behøver ikke være svært
Jeg er ikke udvikler. Jeg er bare mig selv med en hobbyhjemmeside, der er blevet til et stort arkiv og stort projekt på de ca. 18 år, der er gået. Og så beder jeg ChatGPT om hjælp til (alt) det, jeg ikke selv kan. Skulle jeg have betalt en udvikler for det, havde det været dyrt.
Jeg har lært meget undervejs – måske kan du bruge noget af det som inspiration?
Hvis du selv går i gang, kan du altid måle din side gratis med:
-
GTmetrix
Tak fordi du læste med 🙌
Og tak fordi du læser med på Stegemueller.dk — nu lidt hurtigere og lidt pænere end før!
Har du kommentarer til artiklen?
Så er jeg glad for at modtage dem i relation til artiklen, dvs. i artiklens kommentarfelt herunder, ikke på facebook og ikke via Messenger. Det skyldes, at kommentarer og artiklen jo ellers dekobles, og så er din kommentar ikke noget værd i fremtiden. Det er ærgerligt for os begge. Jeg svarer dig også relation til artiklen til morgenkaffen, kl. 13:00, kl. 18:00 og ved sengetid.
Hvis du ikke tidligere har kommenteret en af mine artikler her på siden, skal din kommentar først godkendes (spamhensyn). Min responstid er under normale omstændigheder kort. Jeg svarer til morgenkaffen, kl. 13:00, kl. 18:00 og ved sengetid. Herefter vil du stryge lige igennem.
[wpforms id=”96385″ title=”true” description=”true”]
