Verkkosuorituskyvyn optimointi ja Lighthouse · Oppitunti

Fonttien latauksen optimointi

Toteuttakaa `font-display`, esilataus ja osajoukot, jotta web-fontit latautuvat tehokkaasti aiheuttamatta asettelun siirtymiä.

Oppitunti 2/410 vaihetta

Fonttien latauksen optimointi on ilmainen Verkkosuorituskyvyn optimointi ja Lighthouse-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Verkkosuorituskyvyn optimointi ja Lighthouse-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Verkkosuorituskyvyn optimointi ja Lighthouse-kurssilla on yhteensä 4 oppituntia.

Miksi fontteja kannattaa optimoida

Verkkofontit tekevät verkkosivustoista kauniita ja yksilöllisiä, mutta ne voivat myös aiheuttaa merkittäviä suorituskyvyn pullonkauloja. Suuret fonttitiedostot pidentävät latausaikoja, mikä vaikuttaa suoraan sivuston yleiseen nopeuteen ja käyttäjäkokemukseen.

Fonttien hidas latautuminen voi aiheuttaa ongelmia, kuten ”Flash of Unstyled Text” (FOUT) tai ”Flash of Invisible Text” (FOIT). Tässä oppitunnissa opitte käytännön tekniikoita fonttien tehokkaaseen lataamiseen.

Fonttien latauksen hallinta `font-display`-määrityksellä

font-display-CSS-ominaisuuden avulla voitte hallita verkkofonttien lataamista ja näyttämistä. Se kertoo selaimelle, mitä strategiaa käytetään fontin latautuessa, ja auttaa ehkäisemään häiritseviä visuaalisia siirtymiä.

auto: Selaimen oletustoiminta.
block: Lyhyt estoaika (teksti näkymätön), minkä jälkeen vaihto jatkuu määrittelemättömän ajan.
swap: Erittäin lyhyt estoaika (teksti näkymätön), minkä jälkeen vaihto jatkuu määrittelemättömän ajan.
fallback: Erittäin lyhyt esto, sitten lyhyt vaihto ja lopuksi pysyvä varafontti.
optional: Erittäin lyhyt esto, ei vaihtoa ja pysyvä varafontti.

`font-display: swap` käytännössä

font-display: swap on suosittu valinta suorituskyvyn ja ulkoasun tasapainottamiseen. Se käskee selainta käyttämään varafonttia heti. Kun mukautettu verkkofontti on ladattu, se ”vaihdetaan” käyttöön varafontin tilalle.

Näin teksti on aina näkyvissä, ja sisällön luettavuus asetetaan fontin tyylittelyn edelle ensimmäisen latauksen aikana.

@font-face {
  font-family: 'MyWebFont';
  src: url('mywebfont.woff2') format('woff2');
  font-display: swap;
}

`optional`- ja `fallback`-strategiat

Muut font-display-arvot tarjoavat erilaisia kompromisseja:

fallback: Mukautetulle fontille annetaan erittäin lyhyt estoaika (noin 100 ms) ja lyhyt vaihtoaika (noin 3 s). Jos mukautettu fontti ei ole valmis näiden aikojen kuluessa, varafonttia käytetään pysyvästi.
optional: Toimii samoin kuin fallback, mutta selain päättää verkkoyhteyden olosuhteiden perusteella, ladataanko mukautettua fonttia lainkaan. Jos fontti ei lataudu nopeasti, varafonttia käytetään pysyvästi, jolloin asettelun siirtyminen vältetään.

Kriittisten fonttien esilataaminen

Yleensä selaimet löytävät fontit CSS:n jäsentämisen yhteydessä. Esilatauksen avulla voitte kuitenkin pyytää selainta hakemaan resurssin *aiemmin* kuin se normaalisti löytäisi sen.

Fonttien kohdalla <link rel="preload"> tarkoittaa, että selain voi aloittaa niiden lataamisen jo ennen kuin niitä käyttävä CSS on jäsennetty kokonaan. Tämä lyhentää merkittävästi aikaa siihen, että teksti näytetään oikealla fontilla.

Fontin esilataaminen

Voitte esiladata fontteja lisäämällä <link>-tagin HTML-tiedoston <head>-osioon. On tärkeää lisätä määritykset as="font" ja crossorigin, jotta fontti haetaan oikein ja vältetään lataaminen kahteen kertaan.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preload Font Example</title>
  <link rel="preload" href="mywebfont.woff2" as="font" type="font/woff2" crossorigin>
  <style>
    @font-face {
      font-family: 'MyWebFont';
      src: url('mywebfont.woff2') format('woff2');
      font-display: swap;
    }
    body {
      font-family: 'MyWebFont', sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello CoddyKit!</h1>
  <p>This text uses a preloaded web font.</p>
</body>
</html>

Fontin koon pienentäminen osajoukon avulla

Fonttitiedostot sisältävät usein satoja tai jopa tuhansia merkkejä. Monia niistä, kuten erikoissymboleita tai eri kielten merkkejä, ei välttämättä käytetä tietyllä verkkosivustollanne.

Fontin osajoukon muodostaminen tarkoittaa pienemmän fonttitiedoston luomista siten, että se sisältää vain verkkosivustonne tarvitsemat merkit eli glyyfit. Tämä pienentää tiedostokokoa huomattavasti.

Miksi fonteista kannattaa muodostaa osajoukko

Osajoukon muodostaminen vaikuttaa suoraan ja merkittävästi verkkosivustonne suorituskykyyn:

Nopeammat lataukset: Pienemmät fonttitiedostot latautuvat paljon nopeammin, mikä lyhentää sivujen latausaikoja.
Pienempi tiedonsiirron määrä: Tämä säästää käyttäjien dataa, mikä on erityisen tärkeää mobiililiittymien käyttäjille.
Parempi käyttäjäkokemus: Kun odottamista on vähemmän, käyttäjät näkevät oikein tyylitellyn sisällön paljon nopeammin.

Font Squirrelin Webfont Generatorin tai Google Fontsin kaltaiset työkalut voivat auttaa osajoukon muodostamisessa.

Testatkaa fontteja koskevat tietonne

Mitkä seuraavista ovat tehokkaita strategioita verkkofonttien latauksen ja suorituskyvyn optimointiin?

Vastaa interaktiivisessa oppitunnissa

Fonttien latauksen kertaus

Olemme käsitelleet verkkofonttien latauksen optimoinnin tärkeimmät tekniikat:

font-display: Tämä CSS-ominaisuus hallitsee fonttien renderöintiä latauksen aikana ja ehkäisee FOUT- ja FOIT-ilmiöitä.
Esilataaminen: Määrityksen <link rel="preload"> käyttö HTML:ssä hakee kriittiset fontit aiemmin ja nopeuttaa niiden saatavuutta.
Osajoukon muodostaminen: Pienentää fonttitiedoston kokoa sisällyttämällä vain verkkosivustonne tarvitsemat merkit.

Toteuttamalla nämä strategiat voitte parantaa merkittävästi verkkosivustonne koettua suorituskykyä ja tarjota sujuvamman käyttäjäkokemuksen.

Aloita maksutta

Opi Verkkosuorituskyvyn optimointi ja Lighthouse tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Fonttien latauksen optimointi” ilmainen?

Kyllä – oppitunnin ”Fonttien latauksen optimointi” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Verkkosuorituskyvyn optimointi ja Lighthouse-kurssin, päivitä CoddyKit PROhon. Verkkosuorituskyvyn optimointi ja Lighthouse-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Fonttien latauksen optimointi”?

Toteuttakaa `font-display`, esilataus ja osajoukot, jotta web-fontit latautuvat tehokkaasti aiheuttamatta asettelun siirtymiä. Harjoittelet Verkkosuorituskyvyn optimointi ja Lighthouse-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Verkkosuorituskyvyn optimointi ja Lighthouse-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Verkkosuorituskyvyn optimointi ja Lighthouse-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Fonttien latauksen optimointi”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Verkkosuorituskyvyn optimointi ja Lighthouse-oppitunnilla?

Kyllä. Jokainen Verkkosuorituskyvyn optimointi ja Lighthouse-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Verkkosuorituskyvyn optimointi ja Lighthouse