Hvernig á að hlaða Google leturgerðir staðbundið í WordPress: Hagræðingaratriði sem finnast í GTmetrix, Pingdom og Google PageSpeed ​​Insights

Ef WordPress síða þín hefur Google leturgerð villur í GTmetrix/Pingdom, að hlaða Google leturgerðir á staðnum ættu að laga þær.


Þú getur ekki stjórnað sumum ytri auðlindum og forskriftum, sem gerir þeim ómögulegt að þjappa, gera lítið úr eða hámarka það. Þetta getur haft alvarleg áhrif á WordPress hraða þinn. Ein algengasta ytri auðlindin eru Google leturgerðir. Ef þú ert nú þegar búinn að stilla skyndiminni tappi eins og WP Rocket eða WP Fastest Cache gætirðu byrjað að taka eftir utanaðkomandi auðlindum eins og letri sem hafa áhrif á einkunnir + hleðslutíma. Þetta er þar sem að hlaða Google leturgerðir koma inn í leikinn. Þetta gerir skyndiminni tappi þinn kleift að þjappa öllum auðlindum sem tengjast sérsniðnu letri (r).

Taktu fullt afrit af síðunni þinni (eða að minnsta kosti þeim skrám sem þú ert að breyta) áður en þú gerir breytingar.

Google-leturgerðir-GTmetrix

Skref 1: Veldu Google leturgerð

Í þessu dæmi munum við nota Roboto leturgerð með tveimur leturþyngdum: venjulegur (400) og feitletraður (700).

Google-leturgerðir-val

Notaðu færri Google leturgerðir – haltu Google leturgerðum þínum í lágmarki (minna letur = minni beiðnir).

Vertu valinn með leturvægi – fjöldi lóða hefur einnig áhrif á álagstíma. Ef þú þarft aðeins feitletraða útgáfuna skaltu haka við hina lóðina svo að Google leturgerðir hlaði aðeins þeim sem þú þarft.

Skref 2: Sæktu letrið

Sæktu letrið þegar þú ert tilbúinn. Google mun sjálfkrafa hala niður öllum leturþyngdum, svo að val á leturþyngdum er ekki krafist í þessu skrefi og þess er krafist í stað 3.

Google-leturgerðir-niðurhal

Skref 3: Umbreyttu leturgerðum í netsnið

Næst munum við breyta þessum leturskrám (. Ttf) í leturskrár á vefnum. Ég ætla að nota Transfonter. Farðu á síðuna þeirra, smelltu Bættu við leturgerðum, Þá settu aðeins upp leturgerðirnar sem þú munt nota á vefsíðuna þína. Ég er að nota Roboto-Regular.ttf og Roboto-Bold.ttf svo ég er með bæði venjulegar og djarfar þyngdir. Láttu stillingarnar vera sjálfgefnar þar sem WOFF og WOFF2 ná yfir alla helstu vafra. Smelltu nú á umbreyta.

Transfonter-Google-font-viðskipti

Veldu aðeins leturgerðina sem þú munt nota á vefsíðunni þinni …

Google-leturgerðir-viðskiptaval

Skref 4: Hladdu niður umbreyttum leturskrám

Þegar búið er að breyta leturgerðum geturðu halað þeim niður. Í zip skránni mun hvert letur innihalda WOFF og WOFF2 snið (þar sem við sóttum 2 letur höfum við samtals 4 leturskrár).

WOFF-Google-letur-viðskipti

Skref 5: Hlaða upp leturskrám í WordPress skrár

Hlaðið inn leturgerðarskrám vefsins um FTP eða cPanel, helst í wp-innihald / innsendingar möppu svo að þema og kjarnauppfærslur hnekkja þeim ekki. Ég bjó til „leturgerðir“ möppu og sendi þær þangað (til að aðgreina þær frá öðrum skrám). Til að staðfesta að þeim hafi verið hlaðið upp og þú ert með réttan tengil skaltu opna hlekkina í vafranum þínum og letrið ætti að byrja að hala niður.

Dæmi:

  • 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

Skiptu um yourwebsite.com með eigin vefsíðu (og HTTPS ef SSL er notað). Best er að prófa alla 4 tenglana og ganga úr skugga um að vefslóðirnar séu réttar (og vertu líka viss um að vista þær einhvers staðar).

Skref 6: Bættu sérsniðnu letri við CSS

Næst, við munum bæta við CSS sem þú fékkst í niðurhal zip skránni sem heitir stylesheet.css. Þetta er CSS kóðinn sem mun tengja letrið við núverandi CSS og gera þau tilbúin til notkunar.

Hvar á að setja CSS kóða er huglægt en þú getur notað ytra sniðmát eða WordPress ‘ wp_enqueue_style virka í features.php, eða í upphafi style.css skrá (eða sérsniðin.css ef þú ert með einn). Ég ætla að líma það í sjálfgefna style.css skrána af þemað. Afritaðu / límdu kóðann inn í sniðmátið og breyttu tiltölulegum slóðum í algerar slóðir.

Sjálfgefnar vefslóðir í stylesheet.css:
src: url (‘Roboto-Bold.woff2’) snið (‘woff2’),
url (‘Roboto-Bold.woff’) snið (‘woff’);

Breyta þessum í:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) snið (‘ woff2 ‘),
url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) snið (‘ woff ‘);

Í grundvallaratriðum, bara setja möppuna URL fyrir leturgerð skráarheiti.

Þetta er valfrjálst, en ef þú vilt, stofnaðu sérsniðinn flokk til að nota letrið í HTML-skjali auðveldlega. Hér nefndum við bekkina okkar roboto_font og roboto_bold_font. Til að gera þetta skaltu bæta þessu við style.css skrána þína (eftir ofangreindum kóða):

.roboto_font {

leturfjölskylda: „Roboto“, „Arial“, sans-serif;

}

.roboto_bold_font {

leturfjölskylda: „Roboto“, „Arial“, sans-serif;

leturvigt: feitletrað;

}

Skref 7: Prófaðu letrið

Búðu til núna prufusíðu og settu eftirfarandi kóða í Textaritill

Prófun

Sérsniðið leturpróf

Sérsniðið leturpróf

Google-leturprófun

Forskoðaðu síðuna. Ef þú gerðir það rétt, þá ættirðu að sjá nýja sérsniðna letrið! Fyrsta fyrirsögnin er sjálfgefið letur vefsíðu þinnar, önnur og þriðja eru Google leturgerðir sem við bættum við:

Local-Google-leturgerðir

Skref 8: Setja sjálfgefið leturgerð

Til að gera þetta að sjálfgefnu letri vefsíðu þinnar skaltu bæta þessu CSS við þinn style.css skrá:

líkami {

leturfjölskylda: „Roboto“, „Arial“, sans-serif;

}

Farðu varlega! Ef þú ert nú þegar með sérsniðið leturgerð birtist það ef til vill ekki rétt og krefst þess að kemba eða breyta núverandi font-fjölskyldueiginleikum og skipta þeim út fyrir þetta í staðinn.

Skref 9: Hafa alltaf font fallbacks

Það er slæm framkvæmd að nota Google font sem leturfjölskyldu. Þess í stað ættirðu að hafa mörg letur tilgreind, þar með talin algeng leturgerðir eins og Arial, Times New Roman svo að vafrinn geti fallið aftur að þessum letri bara ef letrið hleðst ekki inn eða tekur lengri tíma að hlaða.

Án fallbacks:
leturfjölskylda: ‘Roboto’;

Með fallback letri:
leturfjölskylda: ‘Roboto’, Arial, sans-serif;

Ef það tekst ekki að hlaða Google leturgerðir þínir, þá flettir vafrinn aftur í Arial leturgerð eða sjálfgefna leturgerð kerfisins sans-serif og veldur ekki neinum vandræðum með leturgerðina.

Prófaðu vefsíðuna þína aftur (Í GTmetrix)

Þú ættir ekki að sjá neinar villur á Google leturgerðum í því …

Nýtt-GTmetrix-Report.png

Ertu með spurningar? Sendu mér línu.

Algengar spurningar

&# x2705; Hvernig flýtirðu fyrir Google leturgerðum?

Með því að sameina Google leturgerðir, hýsa þá á staðnum, og tengja og forkaka þá getur allt hjálpað til við að bæta hleðslutíma þeirra. Athugaðu GTmetrix fossinn þinn til að fá viðmið fyrir leturgerðirnar, prófaðu það síðan aftur eftir fínstillingu.

&# x2705; Hvernig á að umbreyta letri á leturgerð skrár?

Við notum Transfonter.

&# x2705; Hvað með Elementor sérsniðnar leturgerðir?

Elementor sérsniðnar leturgerðir geta einnig hýst Google leturgerðir á staðnum og er innbyggður í Elementor Pro. Þú getur notað þetta til að hlaða upp leturskrárnar þínar.

&# x2705; Hvaða viðbætur hjálpa til við að fínstilla letur?

WP eldflaugar, OMGF, Autoptimize og Perfmatters geta öll hjálpað þér að hámarka leturgerðir.

&# x2705; Hvað með forval og tengingu leturgerða?

Þetta getur flýtt letri með því að hjálpa vöfrum að sjá fyrir þeim betur. Við notum Perfmatters viðbætið af Kinsta til að forskeyti og fyrirfram tengi leturgerða, en þú getur líka notað WP Rocket eða Pre Party Resource Hints viðbótina.

Skál,
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