Miten sivuston nopeutta parannetaan? 12 käytännön keinoa
Listaa käytännön keinot, jotka nopeuttavat kuvia, välimuistia, koodia ja palvelinta; näyttää esimerkkikoodien avulla, mitä kukin keino korjaa ja miten sitä mitataan.
Aurora YazılımToimitustiimi
6 min lukuaika
Sivuston nopeuden parantamiseksi mittaa ensin PageSpeed Insightsilla; tarjoa sitten kuvat WebP- tai AVIF-muodossa oikeassa koossa, lataa näytön ulkopuoliset kuvat viiveellä, poista käyttämätön CSS ja JavaScript, kevennä fontit, ota käyttöön selaimen välimuisti ja pakkaus, lyhennä palvelimen vasteaikaa ja käytä tarvittaessa CDN:ää.
Miksi sivuston nopeus on tärkeää?
Hitaasti avautuva sivu tarkoittaa kävijän menettämistä ennen kuin hän on nähnyt sisällön. Erityisesti mobiiliyhteydellä muutaman sekunnin odotus riittää siihen, että käyttäjä painaa takaisin-painiketta. Sivulla, jota mainostat, tämä tarkoittaa maksettujen klikkausten menemistä hukkaan.
Nopeus vaikuttaa myös hakunäkyvyyteen. Google mittaa sivukokemusta Core Web Vitals -mittareilla: LCP:lle (suurimman sisällön latautuminen) 2,5 sekuntia, INP:lle (vaste vuorovaikutukseen) 200 millisekuntia ja CLS:lle (visuaalinen siirtymä) 0,1 pidetään “hyvän” rajoina. Mittareiden yksityiskohdat olemme käsitelleet artikkelissa mikä on Core Web Vitals.
Alla olevat 12 keinoa ovat vaiheita, jotka tekevät useimmilla sivustoilla suurimman eron. Kaikkia ei tarvitse toteuttaa kerralla; mittaa ensin ja aloita suurimmasta ongelmasta.
Mittaa ensin: mitä työkaluja käyttää?
Optimointi ilman mittausta on kuin ampuisi pimeässä. Alla olevat ilmaiset työkalut näyttävät, missä ongelma on.
- PageSpeed Insights: näyttää sekä todellisen käyttäjädatan (jos saatavilla) että laboratoriotestin.
- Chromen kehittäjätyökalujen Lighthouse-välilehti: paikalliset testit ja yksityiskohtaiset suositukset.
- Search Consolen Core Web Vitals -raportti: todellinen käyttäjäkokemus sivuston kaikilla sivuilla.
- Verkko-välilehti (Network): näyttää, kuinka kauan kunkin tiedoston lataus kestää ja minkä kokoinen se on.
Kuvien optimointi
Useimmilla sivustoilla kuvat muodostavat suurimman osan sivun painosta. Siksi nopein hyöty saadaan yleensä täältä.
1. Siirry moderneihin formaatteihin
Valokuvien tarjoaminen WebP- tai AVIF-muodossa tuottaa samalla visuaalisella laadulla paljon pienempiä tiedostoja kuin JPEG ja PNG. Vanhoja selaimia varten voit antaa varamuodon picture-tunnisteella.
<picture>
<source srcset="urun.avif" type="image/avif">
<source srcset="urun.webp" type="image/webp">
<img src="urun.jpg" alt="Tuotteen nimi" width="800" height="600">
</picture>2. Tarjoa oikeassa koossa
Puhelimessa 400 pikselin leveydellä näytettävälle kuvalle on turha ladata 3000 pikselin tiedostoa. Anna selaimen valita näytön koon mukainen tiedosto srcset- ja sizes-attribuuteilla.
3. Viiveellä lataus ja kokoilmoitus
Lisää näytön alapuolelle jääviin kuviin loading=lazy; silloin ne latautuvat vasta, kun käyttäjä lähestyy niitä. Älä lataa sivun yläosan pääkuvaa viiveellä, koska se on yleensä LCP-elementti. Leveyden ja korkeuden antaminen kaikille kuville estää sisällön hyppimisen (CLS).
Kevennä koodia ja resursseja
Selaimen on ladattava ja käsiteltävä CSS- ja JavaScript-tiedostot ennen sivun näyttämistä. Mitä suurempia ja useampia nämä tiedostot ovat, sitä myöhemmin sivu näkyy ja sitä myöhemmin se reagoi vuorovaikutukseen.
4. Poista käyttämätön koodi
Chromen kehittäjätyökalujen Coverage-paneeli näyttää, kuinka suuri osa kustakin tiedostosta todella käytetään. Karsi käyttämättömät komponentit ja kirjastot ja pienennä (minify) jäljelle jäävät tiedostot.
5. Lykkää estäviä skriptejä
Lataa JavaScript-tiedostot, joita ei tarvita sivun ensinäkymään, defer-attribuutilla. Silloin selain jatkaa HTML:n käsittelyä ja skriptit latautuvat taustalla.
<script src="/js/main.js" defer></script>6. Vähennä kolmannen osapuolen skriptejä
Kolmannen osapuolen chat-työkalut, seurantakoodit, sosiaalisen median liitännäiset ja videoupotukset voivat kuormittaa sivua merkittävästi. Kysy jokaisesta, onko se todella tarpeen; näytä videot pienellä esikatselukuvalla, kunnes käyttäjä klikkaa.
Kevennä fontit
Verkkofontit määrittävät sivuston ilmeen, mutta väärin ladattuina ne aiheuttavat tekstin myöhäisen ilmestymisen tai sivun siirtymisen.
7. Käytä WOFF2:ta ja osajoukkoa
Tarjoa fontit WOFF2-muodossa ja vain tarvitsemallasi merkistöllä (esimerkiksi latinalaiset merkit). Älä lataa käyttämättömiä paksuuksia; useimmille sivustoille riittää kaksi tai kolme paksuutta.
8. Säädä näkyvyys ja prioriteetti
font-display: swap saa tekstin näkymään järjestelmäfontilla, kunnes fontti on latautunut. Sivun yläosassa käytettävän pääfontin voit ladata etukäteen preloadilla.
<link rel="preload" href="/fonts/ana-font.woff2" as="font" type="font/woff2" crossorigin>@font-face {
font-family: "AnaFont";
src: url("/fonts/ana-font.woff2") format("woff2");
font-display: swap;
}Palvelin- ja välimuistiasetukset
Vaikka koodi ja kuvat olisivat kuinka kevyitä, sivu avautuu silti hitaasti, jos palvelin vastaa hitaasti. Tämän kerroksen parannukset vaikuttavat kaikkiin sivuihin kerralla.
9. Ota selaimen välimuisti käyttöön
Määritä pitkäkestoiset välimuistiotsikot tiedostoille, jotka harvoin muuttuvat, kuten logo, CSS, JavaScript ja fontit. Näin palaava kävijä ei lataa näitä tiedostoja uudelleen. Kun tiedosto päivittyy, voit rikkoa välimuistin lisäämällä nimeen versiotunnuksen.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/avif "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
</IfModule>10. Pakkaus ja moderni protokolla
Lähetä tekstipohjaiset tiedostot (HTML, CSS, JavaScript, SVG) Brotli- tai gzip-pakattuina. Varmista, että palvelimesi tukee HTTP/2:ta tai HTTP/3:a; nämä protokollat helpottavat monen pienen tiedoston rinnakkaista latausta.
11. Lyhennä palvelimen vasteaikaa
Jos ensimmäisen tavun saapumisaika (TTFB) on pitkä, ongelma on yleensä hitaat tietokantakyselyt, välimuistittomat dynaamiset sivut tai riittämättömät palvelinresurssit. Sivuvälimuistin käyttö, kyselyjen parantaminen tai siirtyminen sopivampaan hosting-pakettiin lyhentää tätä aikaa.
12. Käytä CDN:ää
Sisällönjakeluverkko (CDN) jakaa staattiset tiedostosi kävijää maantieteellisesti lähellä olevilta palvelimilta. Se vähentää viivettä selvästi sivustoilla, joilla vierailee eri kaupungeista ja maista, ja keventää pääpalvelimen kuormaa.
Mikä keino parantaa mitäkin?
Jokainen keino vaikuttaa eri mittariin. Keskity mittausraportissasi ensin niihin keinoihin, jotka ovat sen mittarin rivillä, joka on huonoin.
| Ongelma | Vaikuttava mittari | Ensisijaiset keinot |
|---|---|---|
| Pääkuva näkyy myöhään | LCP | 1, 2, 11, 12 |
| Klikkaukset saavat vastauksen myöhään | INP | 4, 5, 6 |
| Sisältö hyppii sivun latautuessa | CLS | 3, 8 |
| Ensimmäinen vaste viivästyy | TTFB | 10, 11, 12 |
| Palaava kävijäkin odottaa | Yleinen latautuminen | 9 |
Nopeus ei ole kertatyö
Uusi kampanjabanneri, ladattu suuri valokuva tai lisätty seurantakoodi voi purkaa kuukausien optimoinnin muutamassa päivässä. Tee siksi nopeusmittauksesta osa säännöllistä ylläpitoa; toista PageSpeed Insights -testi jokaisen suuren päivityksen jälkeen. Ylläpitorutiinin muut vaiheet löydät artikkelista verkkosivuston ylläpito.
Nopeus saadaan edullisimmin, kun se suunnitellaan mukaan jo suunnitteluvaiheessa. Kevyet komponentit, oikea kuva-asettelu ja yksinkertainen koodirakenne tekevät suurimman osan julkaisun jälkeisistä korjauksista tarpeettomiksi. Sovellamme tätä lähestymistapaa yhdessä hakukoneystävällisten verkkosivujen ja mobiiliystävällisen suunnittelun prosesseissamme; teknisen SEO:n tarkistuslistan olemme koonneet oppaaseen SEO-ystävälliset verkkosivut.
Yrityksille, jotka haluavat seurata mittausta ja raportointia säännöllisesti, SEO- ja analytiikkapalvelumme arvioi nopeusdataa yhdessä hakusuorituskyvyn kanssa.
Usein kysytyt kysymykset
01Pitääkö PageSpeed-pisteiden olla 100?
Ei. Laboratoriopisteet ovat suuntaa antava mittari; olennaista on, että Core Web Vitals -arvot ovat todellisilla käyttäjillä “hyvällä” tasolla. Toiminnoista luopuminen muutaman pisteen saamiseksi ei aina ole oikea ratkaisu.
02Nopeuttaako hosting-palvelun vaihto sivustoa?
Jos ongelma on palvelimen vasteajassa, kyllä, ero voi olla selvä. Jos sivusto kuitenkin hidastuu raskaiden kuvien tai suurten JavaScript-tiedostojen vuoksi, pelkkä palvelimen vaihto ei ratkaise ongelmaa.
03Heikentääkö kuvien pakkaus laatua?
Oikeilla asetuksilla tehdyssä pakkauksessa ero ei useimmiten näy paljain silmin. Kuvissa, joissa laatu on kriittistä, kuten tuotekuvissa, valitse sopivin tasapaino vertailemalla eri pakkaustasoja rinnakkain.
04Kuinka usein sivuston nopeutta pitäisi mitata?
Kuukausittainen yleistarkastus riittää useimmille sivustoille. Sen lisäksi toista mittaus heti, kun lisäät uuden osion, kampanjan, seurantakoodin tai ison kuvan; seuraa säännöllisesti myös Search Consolen Core Web Vitals -raporttia.
Kysymykseen, miten sivuston nopeutta parannetaan, vastaus alkaa mittauksesta ja tuottaa tulosta, kun kuva-, koodi-, fontti- ja palvelinkerrokset käsitellään yhdessä. Jos haluat tunnistaa sivustosi nopeusongelmat ja nostaa Core Web Vitals -arvot hyvälle tasolle, tutustu palveluumme nopeus- ja suorituskykyoptimointi; jos suunnittelet uutta projektia, tutustu suorituskyvyn alusta asti huomioivaan verkkosivujen suunnitteluun.
