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”]
Skriv en kommentar
Vil du deltage i debatten?Du er mere end velkommen!
Stegemüller
Når jeg besøger din “nye” hjemmeside er der ingen aktuelle emner eller andre for den sags skyld. Trykker jeg opdater, er de der. Bruger Chrome. Problemet har ikkeværet der tidligere.
@ Søren
Jeg tror, det er helt normalt (men jeg er lidt usikker), fordi du ikke har besøgt den nye hjemmeside tidligere, så har du ikke et cached indhold, som den kan opdatere hver 10. time. Jeg tror ikke, browseren har betydning.
Du må sige til, hvis det bliver ved!
@Hanne
Nu har jeg genbesøgt dit websted, først med Chrome, samme problemstilling. Der vises først noget i blokkene ved opdatering.
Dernæst besøgte jeg dit websted med Edge, en browser jeg meget sjældent bruger. Her fungerede alt som du har udtænkt.
Så med Chrome en gang til. Problemstillingen fortsat den samme.
Så jeg hælder til, at det er et browser problem.
@ Søren
Jeg er fuldkommen enig i din logik. Det må være browserspecifikt. Der er dog også det at sige til det, at jeg har lavet nogle vigtige ændringer, hvorfor jeg måtte tømme cachen. Jeg er ikke klar over, om man kan skrive en kode, der specifikt retter sig mod en bestemt browser.
Bruger du af og til Firefox? Det er den, jeg selv bruger, og der er ingen problemer.
Du arbejder sandelig på forbedringer. Specielt synes jeg sidebjælken har vundet ved justeringerne – og det er fint at arkivet er kommet med.
Tak @ Jørgen
Det glæder mig, du kan lide det. Det var nogle gode ønsker Charlotte havde.
Jeg et par andre idéer til forbedringer. De kommer drypvis.
Det ser pænere ud, indrømmet. Fordi jeg er på en gammel PC, lægger jeg ikke mærke til indlæsningshastigheden. Jeg elsker din Gå til toppen af siden-knap – den burde bare ikke gå i et med omgivelserne, når man muser over den.
Kritik:
– Efter min mening og smag mangler der et arkiv, der er rigtig langt tilbage med Gå til forrige indlæg-pilene. Og så vidt jeg husker, virker de ikke hele vejen.
– Jeg bruger aldrig “Måske kan du også lide” eller “De mest sete” De er i mine øjne en slags reklamer, alså støj, der skal “ikke-ses”.
– Knappen Kategorier i toppen folder sig ud over hele skærmen, i stedet for at have en diskret drop down-menu.
Men dete r jo din hjemmeside, og du bestemmer 😉
@ Charlotte
Mange tak for dine kommentarer. Jeg vil gerne høre dem! Man bliver jo lidt blind på egne “fortræffeligheder”.
Det er dejligt, du kan lide “gå-til-toppen”. Faktisk bruger jeg den også selv. Hos mig bliver den hvid ved hover, men du har ret i, at den burde få en mere fremtrædende farve. Det vil jeg prøve, om jeg kan finde ud af.
Selv bruger jeg aldrig andres arkiv, så jeg troede heller ikke, nogen brugte mit. Jeg vil prøve, om jeg kan etablere et arkiv (for de seneste 18 år …), hvis det kan laves, uden at det går ud over hastigheden.
Du har fuldkommen ret i, at de to, du nævner, er reklame. Top-5 siger mig en masse om, hvem der læser gammelt indhold. Det er fx interessant (for mig) hvor mange, der læser om servicekatten. De indlæg er flere år gamle.
Jeg kan vist nemt sørge for, at kategorier bliver til en lang drop down-liste.
Igen: tak for din feed back!
Top fem – du kan se, hvad folk læser … mon ikke også mange af nysgerrighed trykker på dem. Så de bliver en slags selvopfyldende profeti?
Hos Blogger er arkivfunktionen noget meget enkelt, og jeg elsker når folk har den aktiv, så kan man gå igennem folks gamle opslag og lære dem lidt bedre at kende, se hvordan det hele startede og den slags.
@ Charlotte
Jo, det er da i nogen grad en selvopfyldende profeti men ikke kun, for der kan fs gå dage- eller ugevis mellem at nogen læser om servicekatten, men pludselig dukker den op på listen. Og så kan der være der nogle dage for derefter at forsvinde igen.
Så er du en rigtig fantastisk flittig læser. Det er rigtig, at arkiverne kan bruges til den slags. Du er da imponerende!
@ Charlotte
Nu har jeg prøvet at implementere dine ønsker. Når man beder om feed back, skal man også reagere på den! Det er ikke perfekt, men det er “det muliges kunst” og en afvejning af interesser.
Jeg ved ikke, hvor meget klogere, du bliver af “Arkiver”, når jeg kun viser måned og år. Alternativet “vis alle poster” ville ødelægge min svartid og få de fandens DOM til at eksplodere, idet du så ville få en liste med 2.200 indlæg, og det ville du nok heller ikke blive meget klogere af.
“Kategorier” ligner ikke rigtig de andre menupunkter, hvilket irriterer mig lidt, men hverken ChatGPT eller jeg kan gøre det meget bedre. Kan du leve med det?
“Scroll to top” er faktisk blevet noget bedre, synes jeg selv. Hvad siger du til den?
Jeps, fin gå til toppen-knap. Jeg opdaterede siden, den blev fin, dit sar dukkede op og i samme omgang blev Kategorier til en drop down-menu 😉 Jeg gætter på at min gamel PC sparer på kræfterne ved ikke automatisk at opdatere sider, der ikke beder om det selv.
Jeg har tjekket dit arkiv ud, det er rigtigt at det er lidt minimalistisk, men meget bedre end ingeting. Du starter lige som mig bare mist i det hele, med mindre der er nogle gamle opslag, du har taget ned.
@ Charlotte
Næh, det har nu ikke kun noget med din antikke PC at gøre. Det skyldes nere, at min hjemmeside viser dig kendt indhold, indtil du tvinger den til at inlæse nyt indhold – typisk med CTRL + F5
Det er nogle år siden, jeg slettede de første to års indlæg, for dels var de migreret et utal af gange, og herudover var de virkelig uinteressante