Kako lokalno vstaviti Googlove pisave v WordPress: Element za optimizacijo, ki ga najdemo v GTmetrix, Pingdom in Google PageSpeed ​​vpogled v stran

Če ima vaše spletno mesto WordPress Google Pisava napake v GTmetrix/Pingdom, nalaganje Google Fonts lokalno bi jih moralo popraviti.


Ne morete nadzorovati nekaterih zunanjih virov in skriptov, zaradi česar ni mogoče stisniti, zmnožiti ali optimizirati. To lahko resno vpliva na hitrost vašega WordPressa. Eden najpogostejših zunanjih virov je Google Fonts. Če ste že konfigurirali vtičnik za predpomnilnik, kot sta WP Rocket ali WP Fastest Cache, lahko začnete opažati zunanje vire, kot so pisave, ki vplivajo na stopnje + čas nalaganja. Tu se začne igrati lokalno nalaganje Google Fonts. To omogoča, da vaš vtičnik za predpomnilnik stisne vse vire, povezane z vašimi pisavami po meri.

Pred spremembami vzemite popolno varnostno kopijo spletnega mesta (ali vsaj datotek, ki jih urejate).

Google-fontovi-GTmetrix

1. korak: izberite Googlovo pisavo

V tem primeru bomo uporabili Pisava Roboto z dvema utežema pisave: navadna (400) in krepka (700).

Izbira pisav Google

Uporabite manj Googlovih pisav – naj bodo vaše pisave Google najnižje (manj pisav = manj zahtev).

Bodite izbirni z utežmi pisave – število uteži vpliva tudi na čase obremenitve. Če potrebujete samo krepko različico, počistite druge uteži, tako da Google Fontovi naložijo samo tiste, ki jih potrebujete.

2. korak: Prenesite pisavo

Ko ste pripravljeni, prenesite pisave. Google bo samodejno prenesel vse uteži pisave, zato izbira uteži pisave na tem koraku ni potrebna in je namesto tega potrebna v 3. koraku.

Prenos pisav Google

3. korak: Pretvarjanje pisav v spletne pisave

Nato bomo te datoteke pisav (.ttf) pretvorili v datoteke s spletnimi pisavami. Uporabljam Transfonter. Pojdite na njihovo spletno mesto, kliknite Dodajte pisave, torej na svoje spletno mesto naložite samo vrste pisav, ki jih uporabljate. Uporabljam Roboto-Regular.ttf in Roboto-Bold.ttf zato imam tako redne kot drzne uteži. Nastavitve pustite privzete, saj WOFF in WOFF2 zajemata vse večje brskalnike. Zdaj kliknite Pretvori.

Transfonter-Google-pretvorba pisav

Izberite samo vrste pisav, ki jih boste uporabljali na svojem spletnem mestu …

Izbira pretvorbe Googlovih pisav

4. korak: Prenesite pretvorjene datoteke s pisavami

Ko se pisave pretvorijo, jih lahko prenesete. V datoteki zip bo vsaka pisava vsebovala format WOFF in WOFF2 (ker smo prenesli 2 pisave, bomo imeli skupaj 4 datoteke pisav).

WOFF-Google-font-pretvorba

5. korak: Naložite datoteke s pisavami v datoteke WordPress

Datoteke spletnih pisav naložite prek FTP ali cPanel, v idealnem primeru na wp-content / uploads mape, tako da jih teme in posodobitve jedra ne preglasijo. Ustvaril sem mapo s pisavami in jih naložil tja (da jih ločim od drugih datotek). Če želite potrditi, da so bile uspešno naložene in imate pravilne povezave, odprite povezave v svojem brskalniku in pisave bi se morale začeti nalagati.

Primer:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

Zamenjati yourwebsite.com z lastnim spletnim mestom (in HTTPS, če uporabljate SSL). V idealnem primeru preizkusite vse štiri povezave in se prepričajte, da imate pravilne URL-je (in jih tudi shranite nekam).

6. korak: Dodajte pisavo po meri v CSS

Nato bomo dodali CSS, ki ste ga dobili v preneseni zip datoteki z imenom stylesheet.css. To je koda CSS, ki bo povezala vaše pisave z vašim obstoječim CSS in jih pripravila za uporabo.

Kje postaviti kodo CSS je subjektivno, vendar lahko uporabite zunanjo tabelo slogov ali WordPress ‘ wp_enqueue_style deluje v funkciji.php ali na začetku style.css datoteka (oz custom.css če ga imate). Bom ga prilepil v privzeto datoteko style.css teme. Kopirajte / prilepite kodo v tabelo slogi in spremenite vse relativne URL-je v absolutne.

Privzeti URL-ji v stylesheet.css:
src: url (‘Roboto-Bold.woff2’) oblika (‘woff2’),
format url (‘Roboto-Bold.woff’) (‘woff’);

Spremenite jih v:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) format (‘ woff2 ‘),
url (‘http://yourwebsite.com/wp-content/uploads/fonts/Format Roboto-Regular.woff ‘) (‘ woff ‘);

V bistvu le vključite URL mape pred imenom datoteke pisave.

To ni obvezno, če pa želite, ustvarite razred po meri, da preprosto uporabite pisavo v obstoječem HTML-ju. Tu smo poimenovali svoje razrede roboto_font in roboto_bold_font. Če želite to narediti, dodajte to v datoteko style.css (po zgornji kodi):

.roboto_font {

družina pisav: „Roboto“, „Arial“, sans-serif;

}

.roboto_bold_font {

družina pisav: „Roboto“, „Arial“, sans-serif;

pisava: krepka;

}

7. korak: preizkusite pisavo

Zdaj ustvarite preskusno stran in v polje vnesite naslednjo kodo Urejevalnik besedil

Testiranje

Preizkus pisave po meri

Preizkus pisave po meri

Google-krstovanje-testiranje

Predogled strani. Če ste pravilno naredili, bi morali videti novo pisavo po meri! Prvi naslov je privzeta pisava vašega spletnega mesta, drugi in tretji pa so pisave Google Fonts, ki smo jih dodali:

Lokalne - Google-krstne pisave

8. korak: Nastavite privzeto pisavo

Če želite, da je to privzeta pisava vašega spletnega mesta, dodajte ta CSS v datoteko style.css:

telo {

družina pisav: „Roboto“, „Arial“, sans-serif;

}

Bodi previden! Če že imate pisavo po meri, se morda ne bo prikazala pravilno in bo zahtevala odpravljanje napak ali urejanje obstoječih lastnosti družine pisav in jih namesto tega zamenjala s to.

9. korak: Vedno imejte odstranjevanje pisave

Slaba praksa je, da uporabite Google Font kot družino pisav. Namesto tega bi morali določiti več pisav, vključno z običajnimi pisavami, kot so Arial, Times New Roman, tako da se brskalnik lahko vrne na te pisave samo v primeru, da se pisava ne naloži ali traja dlje časa..

Brez povratnega zadetka:
družina pisav: ‘Roboto’;

Z nadomestno pisavo:
družina pisav: ‘Roboto’, Arial, sans-serif;

Zdaj, če ne naloži Google Fonts, bo brskalnik vrnil nazaj na pisavo Arial ali privzeto vrsto pisave sans-serif v sistemu in ne bo povzročil težav z upodabljanjem pisave..

Preizkusite svoje spletno mesto (v GTmetrix)

V njem ne bi smeli videti napak Google Fonts…

New-GTmetrix-Report.png

Imate vprašanja? Spusti mi vrvico.

Pogosto zastavljena vprašanja

&# x2705; Kako pospešite Google Fonts?

Če združite Google Fontove, jih gostite lokalno in jih predhodno povežete ter jih predhodno pripravite, lahko pomagate izboljšati čas nalaganja. Preverite GTmetrix Waterfall, da dobite referenčno vrednost za svoje pisave, nato pa ga po optimizaciji ponovno preizkusite.

&# x2705; Kako pretvoriti pisave v datoteke spletnih pisav?

Uporabljamo Transfonter.

&# x2705; Kaj pa pisave po meri Elementor?

Pisave po meri Elementor lahko tudi lokalno gostijo Google Fontove in so vgrajene v Elementor Pro. To lahko uporabite za nalaganje datotek s pisavami.

&# x2705; Kateri vtičniki pomagajo optimizirati pisave?

WP Rocket, OMGF, Autoptimize in Perfmatters vam lahko pomagajo pri optimizaciji pisav.

&# x2705; Kaj pa prednameščanje in predhodno povezovanje pisav?

Te lahko pospešijo pisave in tako pomagajo brskalnikom, da jih bolje predvidijo. Kinsta uporabljamo vtičnik Perfmatters za vnaprejšnjo izbiro in predhodno povezavo pisav, lahko pa uporabite tudi WP Rocket ali vtičnik Pre Party Resource Hints.

Na zdravje,
Usama

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map