Fontin käyttö on yleistä useimmilla verkkosivuilla ja sisältää usein virheitä. Monet näistä virheistä vaikuttavat negatiivisesti verkon suorituskykybudjettiin. Tämän artikkelin tarkoituksena on tarjota tietoa verkkokirjasinten käytöstä ja auttaa parantamaan verkkosi suorituskykyä.
Kuten minkä tahansa verkkosivun renderöinnin yhteydessä käytettävä hierarkia osoittaa, kirjasinelementit voivat viivyttää muiden elementtien hahmontamista, kunnes ne ladataan. Tämän viiveen asianmukainen hallinta on tärkeää sekä kumulatiivisen asettelumuutoksen (CLS) että käyttäjän havainnon kannalta.
Fontin latauksen ongelma
Kunnes sivun fontit on ladattu, kirjasimien näkyvyys HTML- ja CSS-renderöintiprosessin aikana vaihtelee selaimesta toiseen. Tässä on yhteenveto siitä, kuinka eri selaimet käsittelevät tätä tilannetta:
| selain | Oletustoiminto, jos kirjasin ei ole valmis… |
|---|---|
| reuna | Käyttää järjestelmäfonttia, kunnes kirjasin on valmis. Vaihtaa fonttia. |
| kromi | Piilottaa tekstin enintään 3 sekunniksi. Jos teksti ei vieläkään ole valmis, käytä järjestelmäfonttia, kunnes kirjasin on valmis. Vaihtaa fonttia. |
| Firefox | Piilottaa tekstin enintään 3 sekunniksi. Jos teksti ei vieläkään ole valmis, käytä järjestelmäfonttia, kunnes kirjasin on valmis. Vaihtaa fonttia. |
| safari | Piilottaa tekstin, kunnes fontti on valmis. |
Voit ratkaista tämän ongelman luottamatta selaimen käyttäytymisestä, font-display-parametri otettiin käyttöön. Tällä hetkellä 92 % selaimista tukee fontin näyttö -parametria.
Mitä fontinäyttö tekee?
Sivun latausprosessin aikana fonttien ulkonäkö voi vaihdella, kunnes ne on ladattu kokonaan, selaimesta riippuen. Esimerkiksi jotkin Safari-selaimen versiot piilottavat tekstin, kunnes fontti ladataan. The fontin näyttö: vaihda CSS-parametri standardoi tämän käyttäytymisen näyttämällä tekstiä järjestelmäfontilla, kunnes fonttitiedostot ladataan. Kun fontit on ladattu, järjestelmäfontti vaihdetaan aiotulle fontille. Tässä esimerkki käytöstä:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Fonttien esilataus
Käyttämällä kirjasimien lataaminen ennen kriittistä renderöintipolkua voi estää aukkoja kirjasimien latautuessa.
BONUS: Teollisuuden lähestymistapa kirjasinten käyttöön
Katsotaanpa SamaTechin tietojen mukaan tärkeä trendi ja tilannekuva Internet-maailmasta. Ensimmäinen alla oleva kaavio näyttää fontin käytön 10,000 100,000 suosituimmalla sivulla ja toinen kaavio näyttää kirjasinten käytön XNUMX XNUMX suosituimmalla sivustolla. Tarkastellaanpa ensin näitä kaavioita:
Google Fontin ja Font Awesomen käytössä on 5 % ero 10,000 100,000 suosituimman sivuston ja XNUMX XNUMX parhaan sivuston välillä. Tämä kertoo meille, että 10,000 XNUMX suosituinta sivustoa ovat optimoineet kirjasinten käytön. Suosittelemme tarkastelemaan tätä huomionarvoisena aiheena. Mieti, kuinka voit toteuttaa verkkokirjasimia omilla ratkaisuillasi.
BONUS 2: Google Font ja Font Awesome -käyttötilastot
Viitaten ensimmäiseen bonukseen, suosittelemme tutkimaan kahta kaaviota, jotka osoittavat eniten käytettyjen kirjasinkirjastojen numeerisen laajuuden. Yksilöllisten verkkotunnusten määrä ylittää miljoonia, ja nämä miljoonat edustavat SEO-kilpailijoitasi. Näiden kirjastojen käyttäminen muita paremmin ja optimaalisesti voi auttaa sinua erottumaan joukosta.
Noudattamalla näitä vinkkejä ja optimoimalla kirjasinten käyttöä voit parantaa merkittävästi verkkosi suorituskykyä ja käyttökokemusta.
