Kaip įkelti „Google“ šriftus vietoje „WordPress“: „GTmetrix“, „Pingdom“ ir „Google PageSpeed“ įžvalgose rastas optimizavimo elementas

Jei jūsų „WordPress“ svetainė turi „Google“ šriftas klaidos GTmetrix/Pingdom, įkeliant „Google“ šriftus vietoje, jie turėtų būti pašalinti.


Negalite valdyti kai kurių išorinių šaltinių ir scenarijų, todėl jų neįmanoma suspausti, sutrumpinti ar optimizuoti. Tai gali rimtai paveikti jūsų „WordPress“ greitį. Vienas iš labiausiai paplitusių išorinių šaltinių yra „Google“ šriftai. Jei jau sukonfigūravote talpyklos papildinį, pvz., „WP Rocket“ arba „WP Fastest Cache“, galite pradėti pastebėti išorinius išteklius, pavyzdžiui, šriftus, turinčius įtakos klasėms + įkėlimo laikams. Čia reikia įkelti „Google“ šriftus vietoje. Tai leidžia talpyklos papildiniui suspausti visus išteklius, susijusius su jūsų pasirinktiniu šriftu (-ais).

Prieš atlikdami pakeitimus pasidarykite visą savo svetainės (arba bent jau failų, kuriuos redaguojate) atsarginę kopiją.

„Google-Fonts-GTmetrix“

1 veiksmas: pasirinkite „Google“ šriftą

Šiame pavyzdyje naudosime Roboto šriftas su dviem šriftų svoriais: įprastu (400) ir paryškintu (700).

„Google-Fonts-Selection“

Naudokite mažiau „Google“ šriftų – kuo mažiau „Google“ šriftų (mažiau šriftų = mažiau užklausų).

Būkite išrankūs, naudodami šrifto svorį – svorių skaičius taip pat turi įtakos apkrovos laikams. Jei jums reikia tik paryškinto varianto, panaikinkite kitų svorių žymėjimą, kad „Google“ šriftai įkeltų tik tuos, kurių jums reikia.

2 veiksmas: atsisiųskite šriftą

Atsisiųskite šriftus, kai būsite pasiruošę. „Google“ automatiškai atsisiunčia visus šriftų svorius, todėl šiam veiksmui nereikia pasirinkti šriftų svorio, o reikia atlikti 3 veiksme..

„Google“ šriftai - atsisiųsti

3 veiksmas: Konvertuokite šriftus į interneto šriftus

Tada konvertuosime šiuos šriftų failus (.ttf) į žiniatinklio šriftų failus. Aš naudojuosi Transfonteris. Eikite į jų svetainę, spustelėkite Pridėti šriftus, tada įkelkite tik tuos šriftų tipus, kuriuos naudosite savo svetainėje. Aš naudoju „Roboto-Regular.ttf“ ir „Roboto-Bold.ttf“ todėl turiu tiek įprastą, tiek drąsų svorį. Palikite nustatymus kaip numatytuosius, nes WOFF ir WOFF2 apima visas pagrindines naršykles. Dabar spustelėkite konvertuoti.

„Transfonter“ - „Google“ - šrifto konversija

Pasirinkite tik tuos šriftų tipus, kuriuos naudosite savo svetainėje …

„Google“ šriftai-konversijų pasirinkimas

4 veiksmas: atsisiųskite konvertuotus šrifto failus

Konvertuodami šriftus, galėsite juos atsisiųsti. ZIP faile kiekvienas šriftas apims WOFF ir WOFF2 formatus (kadangi atsisiuntėme 2 šriftus, iš viso turėsime 4 šriftų failus).

WOFF - „Google“ - šrifto konversija

5 veiksmas: įkelkite šrifto failus į „WordPress“ failus

Įkelkite žiniatinklio šriftų failus per FTP arba „cPanel“, idealu wp-turinys / įkėlimai aplankas, kad tema ir pagrindiniai atnaujinimai jų nekeistų. Aš sukūriau aplanką „šriftai“ ir įkeliau juos ten (norėdamas atskirti juos nuo kitų failų). Norėdami patvirtinti, kad jie sėkmingai įkelti ir ar turite teisingas nuorodas, naršyklėje atidarykite nuorodas, kad šriftai turėtų būti pradėti atsisiųsti.

Pavyzdys:

  • 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

Pakeiskite jūsų svetainė.com su savo svetaine (ir HTTPS, jei naudojate SSL). Idealiu atveju išbandykite visas 4 nuorodas ir įsitikinkite, kad URL turite teisingus (be to, būtinai išsaugokite juos kur nors)..

6 veiksmas: pridėkite pasirinktinį šriftą prie CSS

Tada mes pridėsime CSS, kurią gavote atsisiųsto ZIP failo pavadinimu stilių lapas.css. Tai yra CSS kodas, kuris sujungs jūsų šriftus su esama CSS ir padarys juos paruoštus naudoti.

Kur dėti CSS kodą, yra subjektyvu, tačiau galite naudoti išorinį stiliaus lentelę arba „WordPress“ wp_enqueue_style funkciją function.php arba jūsų programos pradžioje stilius.css byla (arba custom.css jei turite). Įklijuosiu jį į numatytąjį temos failą „style.css“. Nukopijuokite / įklijuokite kodą į stiliaus lentelę ir pakeiskite visus santykinius URL į absoliučius URL.

Numatytieji URL stilių.css:
src: URL („Roboto-Bold.woff2“) formatas („woff2“),
url (‘Roboto-Bold.woff’) formatas (‘woff’);

Pakeiskite juos į:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/„Roboto-Regular.woff2“) formatas („woff2“),
URL (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) formatas (‘ woff ‘);

Iš esmės prieš šrifto failo pavadinimą tiesiog įtraukite aplanko URL.

Tai neprivaloma, tačiau, jei norite, sukurkite pasirinktinę klasę, kad galėtumėte lengvai naudoti šriftą esamame HTML. Čia mes pavadinome savo klases roboto_font ir roboto_bold_font. Norėdami tai padaryti, pridėkite tai prie savo failo style.css (po aukščiau pateiktu kodu):

.roboto_font {

šriftų šeima: „Roboto“, „Arial“, „sans-serif“;

}

.roboto_bold_font {

šriftų šeima: „Roboto“, „Arial“, „sans-serif“;

šrifto svoris: paryškintas;

}

7 žingsnis: išbandykite šriftą

Dabar sukurkite bandymo puslapį ir įdėkite šį kodą į Teksto rengyklė

Testavimas

Individualizuotų šriftų testas

Individualizuotų šriftų testas

„Google“ šriftų tikrinimas

Peržiūrėkite puslapį. Jei tai padarėte teisingai, turėtumėte pamatyti naują pasirinktinį šriftą! Pirma antraštė yra numatytasis jūsų svetainės šriftas, antroji ir trečioji yra „Google Fonts“ šriftai, kuriuos pridėjome:

Vietinis „Google“ šriftas

8 žingsnis: nustatykite numatytąjį šriftą

Norėdami, kad tai būtų numatytasis jūsų svetainės šriftas, pridėkite šią CSS prie savo failo style.css:

kūnas {

šriftų šeima: „Roboto“, „Arial“, „sans-serif“;

}

Būk atsargus! Jei jau turite tinkintą šriftą, jis gali pasirodyti netinkamai ir jį reikia derinti arba redaguoti esamas šriftų šeimos ypatybes ir vietoj jų pakeisti šį.

9 veiksmas: visada turėkite šrifto klaidų

Bloga praktika yra „Google“ šrifto taikymas kaip šriftų šeimą. Vietoj to, turėtumėte nurodyti kelis šriftus, įskaitant įprastus šriftus, tokius kaip „Arial“, „Times New Roman“, kad naršyklė galėtų grįžti prie šių šriftų, tik tuo atveju, jei šriftas neįkeltas arba užtrunka ilgiau..

Be atsarginių dalių:
šriftų šeima: ‘Roboto’;

Su atsarginiu šriftu:
šriftų šeima: ‘Roboto’, Arial, sans-serifas;

Jei nepavyks įkelti „Google“ šriftų, naršyklė grįš į „Arial“ šriftą arba numatytąjį sistemos „sans-serif“ šrifto tipą ir nesukels problemų dėl šrifto pateikimo.

Pakartotinai patikrinkite savo svetainę („GTmetrix“)

Jame neturėtumėte matyti jokių „Google Fonts“ klaidų …

„New-GTmetrix-Report.png“

Turite klausimų? Atmesk man liniją.

Dažnai užduodami klausimai

&# x2705; Kaip paspartinti „Google“ šriftus?

„Google“ šriftų sujungimas, jų priegloba vietoje ir išankstinis jų sujungimas ir prefektas gali padėti pagerinti jų įkėlimo laiką. Patikrinkite savo „GTmetrix“ krioklį, jei norite gauti savo šriftų etaloną, tada optimizuokite jį dar kartą.

&# x2705; Kaip konvertuoti interneto šriftų failų šriftus?

Mes naudojame „Transfonter“.

&# x2705; O kaip su „Elementor“ šriftais?

„Elementor“ tinkinti šriftai taip pat gali priglobti „Google“ šriftus vietoje ir yra įmontuoti į „Elementor Pro“. Galite naudoti tai norėdami įkelti savo šrifto failus.

&# x2705; Kurie papildiniai padeda optimizuoti šriftus?

WP Rocket, OMGF, Autoptimize ir Perfmatters gali padėti optimizuoti šriftus.

&# x2705; Ką jau kalbėti apie išankstinį šriftų iškėlimą ir sujungimą?

Tai gali pagreitinti šriftus, padėdami naršyklėms geriau juos numatyti. Mes naudojame „Kinsta“ „Perfmatters“ papildinį, norėdami iš anksto atsisiųsti ir iš anksto sujungti šriftus, tačiau taip pat galite naudoti „WP Rocket“ arba „Pre Party Resource Hints“ papildinį..

Džiaugsmas,
Osama

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