Opi käyttämään resurssivihjeitä, kuten esilatausta, esimääritystä ja esiyhdistämistä, verkkosivuston latausaikojen optimoimiseksi ja käyttökokemuksen parantamiseksi maailmanlaajuisesti.
Verkkosivuston nopeuden parantaminen resurssivihjeillä: Esilataa, esimääritä ja esiyhdistä
Nykypäivän nopeatempoisessa digitaalisessa maailmassa verkkosivuston nopeus on ensiarvoisen tärkeää. Käyttäjät odottavat verkkosivustojen latautuvan nopeasti ja reagoivan välittömästi. Hitaat latausajat voivat johtaa huonoon käyttökokemukseen, korkeampiin poistumisprosentteihin ja lopulta menetettyyn liiketoimintaan. Resurssivihjeet ovat tehokkaita työkaluja, jotka voivat auttaa kehittäjiä optimoimaan verkkosivustojen latausaikoja kertomalla selaimelle, mitkä resurssit ovat tärkeitä ja miten ne priorisoidaan. Tämä artikkeli käsittelee kolmea keskeistä resurssivihjettä: preload, prefetch ja preconnect, ja antaa käytännön esimerkkejä niiden toteuttamisesta.
Resurssivihjeiden ymmärtäminen
Resurssivihjeet ovat direktiivejä, jotka ohjaavat selainta verkkosivun tulevaisuudessa tarvitsemista resursseista. Ne antavat kehittäjille mahdollisuuden kertoa proaktiivisesti selaimelle kriittisistä resursseista, jolloin se voi noutaa tai muodostaa yhteyden niihin aikaisemmin kuin muuten. Tämä voi merkittävästi lyhentää latausaikoja ja parantaa koettua suorituskykyä.
Kolme pääasiallista resurssivihjettä ovat:
- Esilataus: Noutaa kriittiset resurssit, joita tarvitaan sivun alkuperäiseen lataukseen.
- Esimääritys: Noutaa resurssit, joita todennäköisesti tarvitaan tuleviin navigointeihin tai vuorovaikutuksiin.
- Esiyhdistäminen: Luo varhaiset yhteydet tärkeisiin kolmannen osapuolen palvelimiin.
Esilataus: Kriittisten resurssien priorisointi
Mikä on esilataus?
Esilataus on deklaratiivinen nouto, jonka avulla voit kertoa selaimelle, että sen on noudettava nykyisen navigoinnin edellyttämä resurssi mahdollisimman aikaisin. Tämä on erityisen hyödyllistä resursseille, jotka selain löytää myöhään, kuten kuvat, fontit, skriptit tai tyylitiedostot, jotka ladataan CSS:n tai JavaScriptin kautta. Esilataamalla nämä resurssit voit estää niitä estämästä renderöintiä ja parantaa verkkosivustosi koettua latausnopeutta.
Milloin esilatausta kannattaa käyttää
Käytä esilatausta seuraaviin:
- Fontit: Mukautettujen fonttien lataaminen aikaisin voi estää muotoilemattoman tekstin välähdyksen (FOUT) tai näkymättömän tekstin välähdyksen (FOIT).
- Kuvat: Näkyvän alueen yläpuolella olevien kuvien priorisointi varmistaa, että ne latautuvat nopeasti, mikä parantaa alkuperäistä käyttökokemusta.
- Skriptit ja tyylitiedostot: Kriittisten CSS- tai JavaScript-tiedostojen lataaminen aikaisin estää renderöinnin estämisen.
- Moduulit ja Web Workerit: Moduulien tai web workereiden esilataus voi parantaa sovelluksesi reagointikykyä.
Miten esilataus toteutetaan
Voit toteuttaa esilatauksen käyttämällä <link>-tagia HTML-dokumentin <head>-osassa:
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">Selitys:
rel="preload": Määrittää, että selaimen tulisi esiladata resurssi.href="/path/to/resource": Esiladattavan resurssin URL-osoite.as="type": Määrittää esiladattavan resurssin tyypin (esim. fontti, tyyli, skripti, kuva).as-attribuutti on pakollinen ja ratkaisevan tärkeä, jotta selain voi priorisoida ja käsitellä resurssia oikein. Oikeanas-arvon käyttäminen varmistaa, että selain käyttää oikeaa Content Security Policy (CSP) -käytäntöä ja lähettää oikeanAccept-otsikon.type="mime/type": (Valinnainen, mutta suositeltava) Määrittää resurssin MIME-tyypin. Tämä auttaa selainta valitsemaan oikean resurssimuodon, erityisesti fonteille.crossorigin="anonymous": (Pakollinen fonteille, jotka on ladattu eri alkuperästä) Määrittää pyynnön CORS-tilan. Jos lataat fontteja CDN:stä, tarvitset todennäköisesti tämän attribuutin.
Esimerkki: Fontin esilataus
Oletetaan, että sinulla on verkkosivustollasi mukautettu fontti nimeltä 'OpenSans'. Ilman esilatausta selain löytää tämän fontin vasta CSS-tiedoston jäsentämisen jälkeen. Tämä voi aiheuttaa viiveen tekstin renderöinnissä oikealla fontilla. Esilataamalla fontin voit poistaa tämän viiveen.
<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">Esimerkki: Kriittisen CSS-tiedoston esilataus
Jos verkkosivustollasi on kriittinen CSS-tiedosto, joka on olennainen alkuperäisen näkymän renderöinnille, sen esilataus voi parantaa merkittävästi koettua suorituskykyä.
<link rel="preload" href="/styles/critical.css" as="style">Esilatauksen parhaat käytännöt
- Priorisoi kriittiset resurssit: Esilataa vain resurssit, jotka ovat välttämättömiä sivun alkuperäiselle lataukselle. Esilatauksen ylikäyttö voi vaikuttaa negatiivisesti suorituskykyyn.
- Käytä oikeaa
as-attribuuttia: Määritä aina oikeaas-attribuutti varmistaaksesi, että selain käsittelee resurssia oikein. - Sisällytä
type-attribuutti: Sisällytätype-attribuutti auttaaksesi selainta valitsemaan oikean resurssimuodon. - Käytä
crossorigin-attribuuttia alkuperästä riippumattomille fonteille: Kun lataat fontteja eri alkuperästä, muista sisällyttääcrossorigin-attribuutti. - Testaa suorituskykyä: Testaa aina esilatauksen suorituskykyvaikutukset varmistaaksesi, että se todella parantaa latausaikoja. Käytä työkaluja, kuten Google PageSpeed Insights tai WebPageTest, vaikutusten mittaamiseen.
Esimääritys: Tulevien tarpeiden ennakointi
Mikä on esimääritys?
Esimääritys on resurssivihje, joka kertoo selaimelle, että sen on noudettava resurssit, joita todennäköisesti tarvitaan tuleviin navigointeihin tai vuorovaikutuksiin. Toisin kuin esilataus, joka keskittyy nykyisen sivun tarvitsemiin resursseihin, esimääritys ennakoi käyttäjän seuraavaa siirtoa. Tämä on erityisen hyödyllistä myöhempien sivujen tai komponenttien latausnopeuden parantamiseen.
Milloin esimääritystä kannattaa käyttää
Käytä esimääritystä seuraaviin:
- Seuraavan sivun resurssit: Jos tiedät, että käyttäjä todennäköisesti siirtyy tietylle sivulle seuraavaksi, esimääritä sen resurssit.
- Käyttäjän vuorovaikutusten resurssit: Jos käyttäjän vuorovaikutus käynnistää tiettyjen resurssien latauksen (esim. modaali-ikkuna, lomake), esimääritä kyseiset resurssit.
- Kuvat ja resurssit muilla sivuilla: Esimääritä kuvat tai resurssit, joita käytetään muilla sivuilla, joilla käyttäjä todennäköisesti vierailee.
Miten esimääritys toteutetaan
Voit toteuttaa esimäärityksen käyttämällä <link>-tagia HTML-dokumentin <head>-osassa:
<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">Selitys:
rel="prefetch": Määrittää, että selaimen tulisi esimääritellä resurssi.href="/path/to/resource": Esimääriteltävän resurssin URL-osoite.
Esimerkki: Seuraavan sivun resurssien esimääritys
Jos verkkosivustollasi on selkeä käyttäjävirta, kuten monivaiheinen lomake, voit esimääritellä seuraavan vaiheen resurssit, kun käyttäjä on nykyisessä vaiheessa.
<link rel="prefetch" href="/form/step2.html">Esimerkki: Modaali-ikkunan resurssien esimääritys
Jos verkkosivustollasi on modaali-ikkuna, joka lataa lisäresursseja avattaessa, voit esimääritellä kyseiset resurssit varmistaaksesi sujuvan käyttökokemuksen.
<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">Esimäärityksen parhaat käytännöt
- Käytä säästeliäästi: Esimääritystä tulisi käyttää säästeliäästi, koska se voi kuluttaa kaistanleveyttä ja resursseja, vaikka käyttäjä ei tarvitsisi esimääriteltyjä resursseja.
- Priorisoi todennäköiset navigoinnit: Esimääritä resurssit sivuille tai vuorovaikutuksille, joita todennäköisimmin tapahtuu.
- Ota huomioon verkkoyhteydet: Esimääritys sopii parhaiten käyttäjille, joilla on vakaat ja nopeat Internet-yhteydet. Vältä suurten resurssien esimääritystä käyttäjille, joilla on hitaat tai rajalliset yhteydet. Voit käyttää Network Information API -rajapintaa käyttäjän yhteyden tyypin tunnistamiseen ja esimäärityksen säätämiseen sen mukaan.
- Seuraa suorituskykyä: Seuraa esimäärityksen vaikutusta verkkosivustosi suorituskykyyn varmistaaksesi, että se tuottaa nettohyötyä.
- Hyödynnä dynaamista esimääritystä: Toteuta esimääritys dynaamisesti käyttäjien käyttäytymisen ja analytiikkatietojen perusteella. Esimääritä esimerkiksi resurssit sivuille, joilla vierailevat usein käyttäjät, jotka ovat tällä hetkellä nykyisellä sivulla.
Esiyhdistäminen: Varhaisten yhteyksien luominen
Mikä on esiyhdistäminen?
Esiyhdistäminen on resurssivihje, jonka avulla voit luoda varhaiset yhteydet tärkeisiin kolmannen osapuolen palvelimiin. Yhteyden luominen sisältää useita vaiheita, kuten DNS-haun, TCP-kättelyn ja TLS-neuvottelun. Nämä vaiheet voivat lisätä merkittävää viivettä kyseisiltä palvelimilta peräisin olevien resurssien lataamiseen. Esiyhdistäminen antaa sinun käynnistää nämä vaiheet taustalla, jotta kun selaimen on noudettava resurssi palvelimelta, yhteys on jo luotu.
Milloin esiyhdistämistä kannattaa käyttää
Käytä esiyhdistämistä seuraaviin:
- Kolmannen osapuolen palvelimet: Palvelimet, jotka isännöivät fontteja, CDN:itä, API:ita tai muita resursseja, joihin verkkosivustosi luottaa.
- Usein käytetyt palvelimet: Palvelimet, joita verkkosivustosi käyttää usein.
Miten esiyhdistäminen toteutetaan
Voit toteuttaa esiyhdistämisen käyttämällä <link>-tagia HTML-dokumentin <head>-osassa:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">Selitys:
rel="preconnect": Määrittää, että selaimen tulisi esiyhdistää palvelimeen.href="https://example.com": Palvelimen URL-osoite, johon esiyhdistetään.crossorigin: (Valinnainen, mutta pakollinen resursseille, jotka on ladattu CORS:n avulla) Määrittää, että yhteys edellyttää CORS:ää.
Esimerkki: Esiyhdistäminen Google Fontsiin
Jos verkkosivustosi käyttää Google Fontsia, esiyhdistäminen osoitteeseen https://fonts.gstatic.com voi merkittävästi lyhentää fonttien latausviivettä.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>crossorigin-attribuutti on tässä ratkaiseva, koska Google Fonts käyttää CORS:ää fonttien tarjoamiseen.
Esimerkki: Esiyhdistäminen CDN:ään
Jos verkkosivustosi käyttää CDN:ää staattisten resurssien tarjoamiseen, esiyhdistäminen CDN:n isäntänimeen voi lyhentää kyseisten resurssien latausviivettä.
<link rel="preconnect" href="https://cdn.example.com">Esiyhdistämisen parhaat käytännöt
- Käytä harkiten: Liian monen palvelimen esiyhdistäminen voi todella heikentää suorituskykyä, koska selaimella on rajalliset resurssit yhteyksien luomiseen.
- Priorisoi tärkeät palvelimet: Esiyhdistä palvelimiin, jotka ovat kriittisimpiä verkkosivustosi suorituskyvylle.
- Harkitse DNS-esimääritystä: Palvelimille, joihin sinun ei tarvitse täysin esiyhdistää, mutta haluat silti selvittää DNS:n aikaisin, harkitse
<link rel="dns-prefetch" href="https://example.com">-tagin käyttöä. DNS-esimääritys suorittaa vain DNS-haun, joka on vähemmän resursseja vievää kuin täysi esiyhdistäminen. - Testaa suorituskykyä: Testaa aina esiyhdistämisen suorituskykyvaikutukset varmistaaksesi, että se tuottaa nettohyötyä.
- Yhdistä muihin resurssivihjeisiin: Käytä esiyhdistämistä yhdessä esilatauksen ja esimäärityksen kanssa optimaalisen suorituskyvyn saavuttamiseksi. Esimerkiksi esiyhdistä palvelimeen, joka isännöi fonttejasi, ja esilataa sitten fonttitiedostot.
Resurssivihjeiden yhdistäminen optimaalisen suorituskyvyn saavuttamiseksi
Resurssivihjeiden todellinen voima piilee niiden strategisessa yhdistämisessä. Tässä on käytännön esimerkki:
Oletetaan, että verkkosivusto käyttää mukautettua fonttia, jota isännöidään CDN:ssä, ja lataa kriittisen JavaScript-tiedoston.
- Esiyhdistä CDN:ään: Luo varhainen yhteys CDN:ään, joka isännöi fonttia ja JavaScript-tiedostoa.
<link rel="preconnect" href="https://cdn.example.com" crossorigin> - Esilataa fontti: Priorisoi fontin lataaminen FOUT:n estämiseksi.
<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - Esilataa JavaScript-tiedosto: Priorisoi JavaScript-tiedoston lataaminen varmistaaksesi, että se on saatavilla tarvittaessa.
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
Työkalut resurssivihjeiden analysointiin
Useat työkalut voivat auttaa sinua analysoimaan resurssivihjeidesi tehokkuutta:
- Google PageSpeed Insights: Antaa suosituksia verkkosivustosi suorituskyvyn optimoimiseksi, mukaan lukien resurssivihjeiden käyttö.
- WebPageTest: Antaa sinun testata verkkosivustosi suorituskykyä eri paikoista ja verkkoyhteyksistä.
- Chrome DevTools: Chrome DevTools -kehitystyökalujen Network-paneeli näyttää resurssien latauksen ajoituksen ja voi auttaa sinua tunnistamaan optimointimahdollisuuksia.
- Lighthouse: Automatisoitu työkalu verkkosivujen laadun parantamiseen. Siinä on auditointeja suorituskyvyn, saavutettavuuden, progressiivisten web-sovellusten, SEO:n ja muun osalta.
Yleiset sudenkuopat ja miten niitä vältetään
- Resurssivihjeiden ylikäyttö: Liian monien resurssivihjeiden käyttäminen voi vaikuttaa negatiivisesti suorituskykyyn. Keskity tärkeimpiin resursseihin.
- Väärä
as-attribuutti: Vääränas-attribuutin käyttäminen esilatauksessa voi estää resurssin latautumisen oikein. - CORS:n huomiotta jättäminen:
crossorigin-attribuutin sisällyttämättä jättäminen ladattaessa resursseja eri alkuperästä voi aiheuttaa latausvirheitä. - Suorituskyvyn testaamatta jättäminen: Testaa aina resurssivihjeiden suorituskykyvaikutukset varmistaaksesi, että ne tuottavat nettohyötyä.
- Virheelliset polut: Tarkista ja varmista, että kaikki resurssivihjeille määritetyt tiedostopolut ja URL-osoitteet ovat oikein, muuten se johtaa virheeseen.
Resurssivihjeiden tulevaisuus
Resurssivihjeet kehittyvät jatkuvasti, ja selainmäärityksiin lisätään uusia ominaisuuksia ja parannuksia. Pysyminen ajan tasalla resurssivihjeiden viimeisimmistä kehityksistä voi auttaa sinua optimoimaan verkkosivustosi suorituskykyä entisestään. Esimerkiksi modulepreload on uudempi resurssivihje, joka on suunniteltu erityisesti JavaScript-moduulien esilataamiseen. Lisäksi resurssivihjeiden priority-attribuutin avulla voit määrittää resurssin prioriteetin suhteessa muihin resursseihin. Näiden ominaisuuksien selainten tuki kehittyy edelleen, joten tarkista yhteensopivuus ennen niiden toteuttamista.
Johtopäätös
Resurssivihjeet ovat tehokkaita työkaluja verkkosivustojen latausaikojen optimoimiseksi ja käyttökokemuksen parantamiseksi. Käyttämällä strategisesti esilatausta, esimääritystä ja esiyhdistämistä, voit proaktiivisesti kertoa selaimelle kriittisistä resursseista, lyhentää viivettä ja parantaa verkkosivustosi koettua suorituskykyä. Muista priorisoida kriittiset resurssit, käyttää resurssivihjeitä harkiten ja testata aina muutostesi suorituskykyvaikutukset. Noudattamalla tässä artikkelissa esitettyjä parhaita käytäntöjä voit parantaa merkittävästi verkkosivustosi suorituskykyä ja tarjota paremman kokemuksen käyttäjillesi ympäri maailmaa.