Hvernig á að gera vefsíðuna þína hraðari: Hagnýtur gátlisti

Til að gera vefsíðu hraðari skaltu fyrst mæla hana með PageSpeed Insights og laga síðan stærstu orsökina sem hún bendir á — yfirleitt of stórar myndir, of mikið JavaScript, þung letur eða skriftur frá þriðja aðila. Stefndu að „góðu“ markmiðunum í Core Web Vitals frá Google: meginefnið sýnilegt innan 2,5 sekúndna, svör við snertingu innan 200 millisekúndna og nánast engin hreyfing á uppsetningu. Flestar síður ná þessu með handfylli breytinga, ekki endurskrifun.

Mældu áður en þú breytir einhverju

Ágiskanir sóa tíma. Tvö ókeypis verkfæri duga flestum:

• PageSpeed Insights (pagespeed.web.dev) — límdu inn lifandi vefslóð. Þar birtast gagnahlutinn frá raunverulegum Chrome-notendum (ef síðan hefur næga umferð) og prófunargögn úr hermdri hleðslu, ásamt lista yfir ákveðin vandamál.
• Lighthouse í Chrome DevTools — sama prófun úr prófunarumhverfi, keyrð á hvaða síðu sem þú getur opnað, þar á meðal forskoðun. Prófaðu í farsímastillingu; símar á hægari netum eru þar sem vandamálin koma fram.

Tölurnar sem skipta máli eru Core Web Vitals frá Google. Frá og með september 2026 gefur skjölun Google á web.dev þessi „góðu“ þolmörk, mæld í 75. hundraðshluta hleðslna síðu:

INP kom í stað eldri mælikvarðans First Input Delay árið 2024. Ef verkfæri sýnir enn FID er það úrelt.

Skrifaðu niður upphafstölurnar. Eftir hverja lagfæringu skaltu prófa aftur svo þú vitir hvað hjálpaði.

Hvert tíminn fer: valkostir og málamiðlanir

Hver algeng orsök hefur lagfæringu og hver lagfæring hefur kostnað. Byrjaðu á þeim efst — þær eru ódýrastar og algengastar.

Myndir

Myndir eru algengasta vandamálið og auðveldast að laga. 4.000 pixla ljósmynd sem birt er í 800 pixla breidd neyðir hvern gest til að sækja fimm sinnum meira en hann sér.

• Birtu myndir í þeirri stærð sem þær eru sýndar í, með svarandi srcset-stærðum fyrir síma og tölvur.
• Notaðu nútímasnið (WebP eða AVIF) og skynsamlega þjöppun.
• Settu width og height á hverja mynd svo vafrinn taki frá pláss. Þetta eitt lagar flestar hreyfingar uppsetningar.
• Seinhlaðaðu myndum fyrir neðan brotið með loading="lazy".
• Seinhlaðaðu aldrei aðalmyndinni efst á síðunni. Leiðbeiningar Google um LCP eru afdráttarlausar: seinhleðsla LCP-myndar tefur hana alltaf. Gefðu henni fetchpriority="high" í staðinn.

JavaScript

Margar síður byggðar með gervigreind eru einsíðu-öpp (SPA): vafrinn sækir JavaScript-pakka og teiknar síðan síðuna. Því stærri sem pakkinn er, því lengri er auði skjárinn. Lagfæringar, í röð eftir fyrirhöfn:

1. Fjarlægðu það sem þú notar ekki. Biddu um lista yfir háð (dependencies) og skerðu söfn sem var bætt við einu sinni og gleymdust — dagsetningasafn fyrir eina dagsetningu, heilan táknpakka fyrir fimm tákn.
2. Skiptu eftir leið. Hlaððu kóðanum fyrir stjórnborðið aðeins þegar einhver opnar það, ekki á forsíðunni.
3. Forbirtu opinberar síður. Markaðssíða sem er send sem raunverulegur HTML birtist áður en nokkurt JavaScript keyrir. Þetta hjálpar líka leitarvélum; sjá SEO fyrir vefsíður byggðar með gervigreind.

Hægt INP þýðir yfirleitt eitt langt verk sem stíflar síðuna — að sía risastóran lista við hvern innslátt, eða endurteikna heila töflu þegar einn reitur breytist. Performance-hlutinn í Chrome DevTools sýnir hvað.

Letur

Hver letur-fjölskylda og hvert snið er önnur skrá. Tvær fjölskyldur og þrjú til fjögur snið duga yfirleitt. Forhladdu letrið sem notað er fyrir ofan brotið, notaðu font-display: swap svo texti birtist strax, og hýstu letur sjálf ef ytri leturþjónustan er hæg fyrir gesti þína.

Skriftur frá þriðja aðila

Spjallgræjur, greiningartól, hitakort, auglýsingapixlar, innfelld myndbönd og samfélagsstraumar sækja allt kóða frá öðrum netþjónum. Hver og ein virðist lítil; saman eru þær oft hægasti hluti síðunnar. Haltu þeim sem þú raunverulega notar. Hlaððu restinni eftir að síðan er orðin gagnvirk, og skiptu þungum innfellingum (YouTube-spilara, korti) út fyrir léttan forskoðunarglugga sem hleður raunverulegu efni við smell.

Svar netþjóns

Time to first byte (TTFB) — hversu langan tíma netþjónninn tekur að byrja að svara — liggur undir öllum hinum mælikvörðunum. Kyrrstæðar síður sem þjónað er af CDN (neti netþjóna nálægt gestum þínum; sjá hvað er CDN) eru hraðar nánast alls staðar. Síður sem netþjónn byggir í hverri beiðni eru háðar honum og gagnagrunni hans. Skyndiminni endurtekinnar vinnu og gagnagrunnsvísitölur fyrir hægar fyrirspurnir eru algengustu lagfæringarnar.

Fyrirmæli sem virka

Vertu nákvæm/ur: nefndu síðuna, mælikvarðann og skorðið. Límdu inn niðurstöður PageSpeed Insights ef þú hefur þær.

PageSpeed Insights sýnir LCP upp á 4,8 s í farsíma fyrir forsíðuna, og LCP-elementið er hetjumyndin. Minnkaðu og breyttu hetjumyndinni í WebP, birtu svarandi stærðir, settu width og height, gefðu henni fetchpriority="high" og gakktu úr skugga um að hún sé ekki seinhlaðin. Seinhlaðaðu allar myndir fyrir neðan brotið. Ekki breyta hönnuninni.

Gerðu úttekt á háðum þessa apps. Taktu saman hvern pakka, hvað notar hann og hversu mikið hann bætir við pakkann í grófum dráttum. Fjarlægðu þá sem eru ónotaðir og skiptu leiðunum /admin og /settings í sérstaka búta sem hlaðast aðeins þegar þeim er flett upp.

Leitarreiturinn á /products virkar hægt. Settu síuna á biðtíma (debounce), forðastu að endurteikna allan listann við hvern innslátt, og síðuskiptu eða sýndarvæddu listann ef hann hefur fleiri en 200 atriði.

Skref fyrir skref

1. Prófaðu lifandi síðuna í PageSpeed Insights í farsíma. Skrifaðu niður LCP, INP og CLS og þrjú helstu vandamálin sem eru skráð.
2. Lagaðu myndir fyrst: stærðir, snið, mál, seinhleðsla fyrir neðan brotið, forgangur fyrir hetjumyndina.
3. Skerðu þriðju aðila skriftur sem þú notar ekki, og seinkaðu restinni.
4. Minnkaðu letur í það sem hönnunin þarfnast.
5. Minnkaðu JavaScript: fjarlægðu ónotaða pakka, skiptu eftir leið.
6. Forbirtu opinberar síður ef þær eru enn birtar í vafra og LCP er enn hægt.
7. Athugaðu netþjóninn: skyndiminni, gagnagrunnsvísitölur, kyrrstæð hýsing fyrir efni sem breytist sjaldan.
8. Birtu aftur og prófaðu aftur. Gagnahlutinn í PageSpeed Insights uppfærist á næstu vikum þegar raunverulegar heimsóknir berast, svo dæmdu fyrstu niðurstöður út frá prófunargögnum.

Algeng mistök

• Að prófa aðeins í hraðri fartölvu. Gestir þínir eru í meðalgóðum símum og óstöðugu farsímaneti. Prófaðu í farsímastillingu.
• Að elta fullkomna 100. Prófunareinkunnin er leiðarvísir. Þegar Core Web Vitals eru í góðu bili skipta efni og nothæfi meira máli en síðustu stigin.
• Að seinhlaða öllu, þar á meðal hetjumyndinni. Það gerir LCP verra.
• Að bæta við hraðviðbót eða safni ofan á. Að fjarlægja þyngd sigrar nær alltaf að bæta við kóða til að stjórna henni.
• Að bæta forskoðunina, ekki lifandi síðuna. Þróunarforskoðanir keyra óbestaðar smíðar. Mældu birtu vefslóðina.
• Að laga hraða einu sinni. Sérhver ný græja, mynd og eiginleiki bætir við þyngd. Prófaðu aftur eftir stórar breytingar.

Gátlisti fyrir hraða

• LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 í farsíma
• Myndir minnkaðar, þjappaðar, nútímasnið, með width og height
• Hetjumyndin ekki seinhlaðin; myndir fyrir neðan brotið seinhlaðnar
• Engin ónotuð JavaScript-söfn; þung leið skilin frá
• Tvær letur-fjölskyldur eða færri, aðalletrið forhlaðið
• Aðeins þær skriftur þriðja aðila sem þú notar, hlaðnar seint
• Opinberar síður forbirtar eða kyrrstæðar þar sem hægt er
• Prófað aftur á lifandi vefslóðinni eftir birtingu

Hraði og farsímauppsetning haldast í hendur; sjá hvernig á að gera vefsíðu svarandi í farsímum. Fyrir fulla yfirferð fyrir birtingu fjallar hvernig á að taka gervigreindarfrumgerð í framleiðslu um það sem eftir er.

Hraði á Mythex

Á Mythex gerir þú þessar breytingar með því að biðja um þær í spjallinu, eða í kóðaritlinum á Pro. Athugaðu birtu vefslóðina, ekki forskoðunina, þar sem forskoðunin keyrir þróunarþjón. Kyrrstæðir framendar eru birtir sem kyrrstæðar síður þegar þú birtir (kyrrstæðar vefsíður), sem hentar efnissíðum. Öpp með netþjóni skalast niður í núll: þau sofa þegar þau eru aðgerðarlaus og vakna við næstu heimsókn, þannig að fyrsta beiðnin eftir rólegt tímabil er hægari, og tengdur gagnagrunnur sefur eftir 5 mínútur án virkni (takmörk hýsingar). Ef opinber síða er hæg aðeins við fyrstu heimsókn er það líklega orsökin. Að halda markaðssíðum kyrrstæðum hjálpar. Eftir breytingar skaltu birta aftur og endurhlaða með harðri endurhleðslu.

Spurningar