Teet verkkosivustollesi nopeustestin, ja tulokset antavat pisteet, listan suosituksia ja lähes ei lainkaan ohjausta siihen, mistä aloittaa. Kun tiedät, miten verkkosivusto nopeutetaan, ymmärrät, mitkä parannukset toimivat latausjakson mihinkin osaan ja mitkä tuottavat suurimmat tulokset vaivaan nähden. Tässä artikkelissa käydään läpi tehokkaimmat muutokset, missä järjestyksessä ne kannattaa tehdä ja mitä tyypillinen pienyrityksen verkkosivusto voi odottaa kustakin parannuksesta.
Verkkosivuston nopeutta ei paranneta yhdellä korjauksella. Se on usean toisistaan riippumattoman tekijän tulos: kuinka raskas sivu on, kuinka nopeasti palvelin vastaa, kuinka tehokkaasti tiedostot toimitetaan ja kuinka paljon työtä selaimen täytyy tehdä _blocked_öidäkseen sen, minkä kävijä näkee. Suurimpien tekijöiden korjaaminen ensin tuottaa nopeimmat hyödyt. Taustatietoa siitä, mitkä latausmittarit ovat tärkeitä ja miksi, löydät artikkelista mikä sivun latausaika on ja miten sitä mitataan.
Mitkä ovat yleisimmät syyt verkkosivuston hitaisiin latausaikoihin?
Ennen muutosten tekemistä on hyvä ymmärtää, missä aikaa oikeasti menetetään. Hitailla verkkosivustoilla on lähes aina yksi tai useampi näistä yhteisenä.
Optimoimattomat kuvat
- Kuvat ovat useimpien sivujen suurimmat tiedostot ja yksittäisistä syistä yleisin hitaiden latausaikojen aiheuttaja
- Sivu, jolla on viisi pakkaamatonta valokuvaa, voi painaa kymmenen tai kaksikymmentä kertaa enemmän kuin tarpeen
- Kuvien korjaaminen tuottaa tyypillisesti suurimman nopeusparannuksen kaikista yksittäisistä muutoksista
Ei välimuistia
- Ilman välimuistia jokainen käynti vaatii palvelinta rakentamaan sivun uudelleen ja selainta lataamaan jokaisen tiedoston alusta
- Välimuisti antaa palaavien kävijöiden ladata sivut tallennetuista kopioista kaiken uudelleenlatauksen sijaan
Minimoimaton koodi
- CSS- ja JavaScript-tiedostot sisältävät usein välilyöntejä, kommentteja ja muotoilua, jotka tekevät niistä luettavia kehittäjille mutta lisäävät selaimille turhaa painoa
- Minimointi poistaa tämän ylimääräisen sisällön ja pienentää tiedostokokoja, joskus 30 - 50 prosenttia
Hidas palvelimen vaste
- Kaikki odottaa palvelinta. Jos palvelimen vastaus kestää yli 800 millisekuntia, kaikki muut mittarit viivästyvät alusta asti
- Jaetut palveluympäristöt ja optimoimattomat tietokannat ovat yleisimmät syyt korkeaan Time to First Byteen
_blocked_öintiä estävät resurssit
- Dokumentin head-osassa ladatut skriptit ja tyylitiedostot pysäyttävät selaimen ennen kuin se voi _blocked_öidä mitään
- Ei-kriittisten skriptien siirtäminen latautumaan pääsisällön jälkeen poistaa tämän pullonkaulan
Miten optimoit kuvat sivun painon vähentämiseksi?
Kuvien optimointi on useimmille verkkosivustoille vaikuttavin korjaus, koska se pienentää suoraan sivun suurimpia tiedostoja. Kolme muutosta yhdessä tuottaa merkittävimmän kuvatiedostojen koon pienenemisen.
Valitse oikea muoto
- WebP tuottaa pienempiä tiedostoja kuin JPEG samalla visuaalisella laadulla ja tukee läpinäkyvyyttä kuten PNG
- Siirry WebP:hen kaikissa valokuvissa ja yleisgrafiikassa. Käytä PNG:tä vain, kun läpinäkyvyys on tarpeen
Muuta kokoa ennen lataamista
- 4 000 pikselin levyisen kuvan lataaminen näytettäväksi 800 pikselin levyisenä pakottaa jokaisen kävijän lataamaan neljä kertaa enemmän dataa kuin tarpeen
- Muuta kuvien koko enimmäisnäyttöleveyteen ennen lataamista
Pakkaa sopivalle laatutasolle
- Laatuasetus 75 - 85 häviöllisissä muodoissa tuottaa tiedostoja, jotka ovat 60 - 80 prosenttia alkuperäistä pienempiä ilman näkyvää laatueroa useimmissa valokuvissa
- Oikean muodon, oikean koon ja sopivan pakkauksen yhdistelmä voi vähentää sivun kuvapainoa 80 - 90 prosenttia
Täydellisen oppaan tiedostomuodoista, pakkaustyypeistä, viivästetystä latauksesta ja responsiivisista kuvista löydät artikkelista miten optimoit kuvat nopeampaa latausta varten.
Miten välimuisti lyhentää latausaikaa?
Välimuisti tallentaa sivun resurssien kopiot, jotta niitä ei tarvitse ladata tai muodostaa uudelleen jokaisella pyynnöllä. Tyyppejä on kaksi, ja ne toimivat eri kohdissa toimitusketjua.
Selaimen välimuisti
- Kävijän selain tallentaa CSS:n, JavaScriptin, kuvat ja fontit ensimmäisen käynnin jälkeen
- Toistuvilla käynneillä nämä tiedostot ladataan paikalliselta laitteelta uudelleenlatauksen sijaan, mikä lyhentää sivun latausaikaa dramaattisesti toistuville kävijöille
- Selaimen välimuistia ohjaavat palvelimelle asetetut välimuistiotsikot. Useimmat nykyaikaiset verkkopalvelualustat asettavat ne automaattisesti
Palvelimen välimuisti
- Palvelin tallentaa valmiiksi muodostetut sivuversiot, joten niitä ei tarvitse rakentaa alusta jokaisella pyynnöllä
- Tämä nopeuttaa Time to First Bytea kaikille kävijöille, myös ensikertalaisille
- Palvelimen välimuisti on vaikuttavin dynaamisilla verkkosivustoilla, joilla sivut muodostetaan tietokantakyselyistä
Yksityiskohtaisen selityksen selaimen välimuistin toiminnasta ja määrittämisestä löydät artikkelista mikä selaimen välimuisti on ja miten se toimii.
Mitä minimointi tekee latausnopeudelle?
Kehittäjien kirjoittamat CSS- ja JavaScript-tiedostot sisältävät välejä, rivinvaihtoja ja kommentteja, jotka tekevät koodista helpommin luettavaa ja ylläpidettävää. Selaimet eivät tarvitse mitään näistä. Minimointi poistaa ne ja tuottaa pienempiä tiedostoja, jotka latautuvat nopeammin muuttamatta niiden toimintaa.
- CSS:n minimointi pienentää tiedostokokoa tyypillisesti 20 - 30 prosenttia
- JavaScriptin minimointi voi pienentää tiedostokokoa 30 - 50 prosenttia, enemmän suurilla tiedostoilla, joissa on paljon kommentteja ja tyhjää tilaa
- Minimointi on yksi helpoimmista voitoista, koska se ei vaadi muutoksia sivuston ulkoasuun tai toimintaan ja sen voi usein ottaa käyttöön lisäosalla tai alustan asetuksella
Täydellisen erittelyn siitä, miten minimointi toimii CSS:ssä, JavaScriptissä ja HTML:ssä, löydät artikkelista mikä minimointi on ja miten se auttaa verkkosivustoasi.
Miten CDN lyhentää kävijöiden latausaikaa?
Sisällönjakeluverkko lyhentää fyysistä etäisyyttä kävijän ja tiedostosi toimittavan palvelimen välillä. Ilman CDN:ää kaikki kävijät yhdistävät yhteen palvelimeen yhdessä sijainnissa. CDN:n kanssa jokainen kävijä palvellaan hänelle lähimmältä palvelimelta.
- Alkuperäispalvelimen lähellä oleville kävijöille CDN:n nopeusparannus on vaatimaton
- Muissa maissa tai alueilla oleville kävijöille CDN voi lyhentää Time to First Bytea satoja millisekunteja
- CDN:t ovat vaikuttavimpia verkkosivustoilla, joilla on kansainvälinen yleisö tai paljon mediasisältöä
- Jotkin verkkopalvelualustat sisältävät CDN-toimituksen automaattisesti. Kun se on mukana, lisämääritystä ei tarvita
Täydellisen selityksen CDN:ien toiminnasta ja siitä, kuka sellaisen tarvitsee, löydät artikkelista mikä CDN on ja miten se auttaa verkkosivustoasi.
Mitä viivästetty lataus on ja miten se lyhentää alkulatausaikaa?
Viivästetty lataus (lazy loading) lykkää näkyvän alueen alapuolella olevien kuvien ja muiden resurssien latausta, kunnes kävijä vierittää lähelle niitä. Tämä vähentää dataa, jonka selaimen täytyy ladata ennen kuin sivu on käyttökelpoinen.
- Sivulla, jolla on kaksikymmentä kuvaa, viivästetty lataus tarkoittaa, että selain lataa vain kolme tai neljä kuvaa, jotka näkyvät näytöllä sivun auetessa
- Loput kuvat latautuvat kävijän vierittäessä, jolloin lataus jakautuu ajan yli sen sijaan, että se keskittyisi alkuun
- Viivästetty lataus parantaa suoraan Time to Interactivea ja voi vaikuttaa huomattavasti Largest Contentful Paintiin, kun näkyvän alueen sisältö ei ole kuvapainotteista
- Älä käytä viivästettyä latausta näkyvän alueen kuviin. Niiden täytyy latautua heti
Täydellisen oppaan viivästetyn latauksen toiminnasta ja käyttöönotosta löydät artikkelista mikä viivästetty lataus on ja miten se toimii.
Miten _blocked_öintiä estävät resurssit hidastavat sivua?
Kun selain kohtaa skriptin tai tyylitiedoston dokumentin head-osassa, se keskeyttää _blocked_öinnin, kunnes tiedosto on latautunut. Kävijä ei näe mitään tämän aikana. Tätä kutsutaan _blocked_öintiä estäväksi resurssiksi.
Näin vähennät _blocked_öinnin estämistä
- Siirrä ei-kriittinen JavaScript latautumaan dokumentin lopussa tai käytä
defer- taiasync-attribuuttia, jotta skriptit eivät pysäytä _blocked_öintiä - Tunnista, mitä CSS:ää tarvitaan heti (näkyvän alueen tyylit) ja mikä voidaan ladata myöhemmin
- Poista tai korvaa kolmannen osapuolen skriptit, jotka eivät ole välttämättömiä. Chat-widgetit, sosiaalisen median upotukset ja seurantaskriptit lisäävät kaikki estoaikaa
Entä palvelimen vasteaika?
Jokaista muuta parannusta rajoittaa se, kuinka nopeasti palvelin vastaa ensinnäkin. Hidas palvelin lisää viivettä ennen kuin selain voi aloittaa minkään resurssin latauksen.
Mikä vaikuttaa palvelimen vasteaikaan
- Verkkopalvelun laatu: jaetut palveluympäristöt jakavat suorittimen ja muistin monen sivuston kesken, mikä aiheuttaa arvaamattomia vasteaikoja
- Tietokannan suorituskyky: hitaat tai optimoimattomat tietokantakyselyt viivästyttävät palvelimen kykyä muodostaa vastaus
- Palvelinpuolen välimuisti: ilman välimuistia jokainen pyyntö käynnistää sivun täydellisen uudelleenrakennuksen tietokannasta
- Maantieteellinen etäisyys palvelimeen: jo ennen CDN:ää kävijästä kaukana oleva palvelin lisää viivettä
Hyvä Time to First Byte on alle 800 millisekuntia. Jos TTFB on johdonmukaisesti sen yläpuolella, verkkopalvelun parantaminen tai palvelinpuolen välimuistin käyttöönotto tuottaa hyötyjä, joita mikään käyttöliittymäpuolen optimointi ei voi toistaa.
Mistä aloitat verkkosivuston nopeuttamisen?
Jos käyt nopeusparannuksia läpi ensimmäistä kertaa, tämä järjestys tuottaa nopeimmat hyödyt pienimmällä vaivalla tyypillisellä pienyrityksen verkkosivustolla.
Useimpien verkkosivustojen tärkeysjärjestys
- Ensin: optimoi kuvat. Tämä korjaa suurimman sivupainon lähteen ja vastaa usein 60 - 80 prosentista vältettävää latausaikaa
- Toiseksi: ota välimuisti käyttöön. Selaimen ja palvelimen välimuisti vähentävät jokaisella käynnillä tehtävää työtä, erityisesti palaavilla kävijöillä
- Kolmanneksi: minimoi CSS ja JavaScript. Pienempi vaiva, luotettava parannus tiedostonsiirtoaikoihin
- Neljänneksi: lisää CDN, jos yleisösi on maantieteellisesti hajautunut tai jos median toimitus on merkittävä osa sivustoasi
- Viidenneksi: korjaa _blocked_öintiä estävät resurssit ja palvelimen vasteaika, jos yllä olevat vaiheet on tehty ja pisteet ovat yhä heikot
Kun olet tehnyt minkä tahansa joukon muutoksia, tee nopeustesti parannuksen mittaamiseksi ennen siirtymistä seuraavaan alueeseen. Oppaan nopeustestin tulosten tulkitsemiseen tarkasti löydät artikkelista miten testaat verkkosivustosi nopeuden. Erittelyn tarkoista mittareista, joihin nämä parannukset vaikuttavat, saat artikkelista mitä Core Web Vitals on.
Näin WEMASY lyhentää verkkosivuston latausaikaa
WEMASYn Sivustonrakentaja hoitaa useita yleisimpiä nopeusparannuksia automaattisesti. Kuvat pakataan ja muunnetaan WebP-muotoon latauksen yhteydessä. Selaimen välimuistiotsikot on määritetty oletuksena. Alustan tarjoamat CSS- ja JavaScript-tiedostot minimoidaan. CDN-toimitus sisältyy kaikkiin tilauksiin ja tarjoaa staattiset tiedostot kullekin kävijälle lähimmästä sijainnista.
Sivun nopeuspisteet ja Core Web Vitals -data näkyvät WEMASYn analytiikkanäkymässä sivukohtaisine suosituksineen, jotka merkitsevät jäljellä olevat ongelmat. Näin voit seurata parannuksia minkä tahansa sisältö- tai ulkoasumuutoksen jälkeen ilman, että ajat ulkoisia testejä käsin.
Katso, mitä kuuluu mukaan, sivulta WEMASYn Sivustonrakentaja tai tutustu tilausvaihtoehtoihin hinnoittelusivulla.
Usein kysytyt kysymykset
Mikä on nopein tapa nopeuttaa verkkosivustoa?
Kuvien optimointi tuottaa suurimman nopeusparannuksen pienimmällä vaivalla useimmilla verkkosivustoilla. Pakkaamattomat kuvat ovat yksittäisistä tekijöistä suurin sivupainon aiheuttaja, ja siirtyminen WebP-muotoon oikealla pakkauksella ja oikeilla mitoilla voi pienentää kuvatiedostojen kokoa 80 - 90 prosenttia. Kuvien jälkeen selaimen välimuistin käyttöönotto sekä CSS- ja JavaScript-tiedostojen minimointi ovat seuraavaksi vaikuttavimmat parannukset. WEMASYn Sivustonrakentajalla voit ottaa tämän käyttöön suoraan omalla sivustollasi.
Vaikuttaako verkkosivuston nopeus hakusijoituksiin?
Kyllä. Hakukoneet käyttävät sijoitussignaaleina Core Web Vitalsia, joka mittaa tiettyjä lataus-, vuorovaikutteisuus- ja visuaalisen vakauden mittareita. Sivuilla, jotka saavat hyvät pisteet Largest Contentful Paintista, Interaction to Next Paintista ja Cumulative Layout Shiftistä, on sijoitusetu heikosti pisteytettyihin sivuihin nähden, erityisesti kun kilpailevilla sivuilla on samankaltainen sisällön laatu. Nopeusparannukset, jotka nostavat Core Web Vitals -pisteitä, voivat edistää parempaa hakunäkyvyyttä.
Mikä on hyvä verkkosivuston latausaika?
Core Web Vitalsissa ensisijainen tavoite on Largest Contentful Paint alle 2,5 sekuntia. Käytännössä sivu, joka on täysin vuorovaikutteinen kolmessa sekunnissa mobiiliyhteydellä, täyttää rajan, jolla on eniten väliä sekä kävijäkokemukselle että hakusijoituksille. Koko sivun lataus alle viidessä sekunnissa mobiilissa on kohtuullinen vertailuarvo useimmille pienyritysten verkkosivustoille.
Mistä tiedän, mikä hidastaa verkkosivustoani?
Tee sivun nopeustesti työkalulla, joka näyttää kenttädataa laboratoriodatan rinnalla. Katso tiettyjä mittareita, jotka on merkitty epäonnistuneiksi, kokonaispisteiden sijaan. TTFB yli 800 millisekuntia viittaa palvelinongelmiin. Huono LCP-tulos viittaa yleensä kuviin tai _blocked_öintiä estäviin resursseihin. Korkea Total Blocking Time viittaa JavaScriptin suoritusongelmiin. Jokainen mittari osoittaa eri tutkittavan alueen.
Vaikuttaako verkkopalvelu verkkosivuston nopeuteen?
Kyllä, merkittävästi. Verkkopalvelun laatu vaikuttaa Time to First Byteen, joka määrittää, kuinka nopeasti selain voi aloittaa minkä tahansa resurssin latauksen. Jaetut palveluympäristöt jakavat prosessointitehon monen sivuston kesken, mikä johtaa epätasaisiin vasteaikoihin. Verkkopalvelu, joka sisältää palvelinpuolen välimuistin ja CDN-toimituksen, lyhentää TTFB:tä ja parantaa toimitusnopeutta kaikille kävijöille riippumatta sivulla tehdyistä muista optimoinneista.
Voinko nopeuttaa verkkosivustoani ilman kehittäjää?
Kyllä, useimmissa parannuksissa, joilla on suurin vaikutus. Kuvien optimoinnin, oikeiden tiedostomuotojen valinnan ja alt-tekstin lisäämisen voi tehdä koskematta koodiin. Selaimen välimuisti ja minimointi hoituvat usein automaattisesti verkkosivustoalustalla tai ne voi ottaa käyttöön asetuksista. Kehittäjää tarvitaan tyypillisesti vain edistyneisiin muutoksiin, kuten mukautettuun palvelinmääritykseen, _blocked_öintiä estävien resurssien poistamiseen käsin koodatuilla sivustoilla tai tietokantakyselyjen optimointiin.