Google fontu lokālais ielādēšana programmā WordPress: optimizācijas vienums, kas atrodams GTmetrix, Pingdom un Google PageSpeed ​​Insights

Ja jūsu WordPress vietnē ir Google fonts kļūdas GTmetrix/Pingdom, ielādējot vietni Google Fonts, tā būtu jālabo.


Jūs nevarat kontrolēt dažus ārējos resursus un skriptus, tāpēc tos nav iespējams saspiest, sagrupēt vai optimizēt. Tas var nopietni ietekmēt jūsu WordPress ātrumu. Viens no visbiežāk sastopamajiem ārējiem resursiem ir Google fonti. Ja jau esat konfigurējis kešatmiņas spraudni, piemēram, WP Rocket vai WP Ātrāko kešatmiņu, jūs varat sākt pamanīt ārējos resursus, piemēram, fontus, kas ietekmē pakāpes + ielādes laiku. Šajā gadījumā tiek sākta vietne Google Fonts ielāde. Tas ļauj kešatmiņas spraudnim saspiest visus resursus, kas saistīti ar jūsu pielāgoto fontu (-iem).

Pirms izmaiņu veikšanas pilnībā kopējiet savu vietni (vai vismaz failus, kurus rediģējat).

Google-Fonts-GTmetrix

1. darbība: izvēlieties Google fontu

Šajā piemērā mēs izmantosim Roboto fonts ar diviem burtu svariem: parasto (400) un treknrakstu (700).

Google-Fonts-Selection

Izmantojiet mazāk Google fontu – samaziniet Google Fontu skaitu līdz minimumam (mazāk fontu = mazāk pieprasījumu).

Esiet selektīvs ar burtu svaru – svaru skaits ietekmē arī slodzes laikus. Ja jums nepieciešama tikai treknā versija, noņemiet atzīmi no citiem svariem, lai Google fonti ielādētu tikai tos, kas jums nepieciešami.

2. solis: lejupielādējiet fontu

Kad esat gatavs, lejupielādējiet fontus. Google automātiski lejupielādēs visu fontu svaru, tāpēc šajā posmā fontu svaru izvēle nav nepieciešama, bet tā vietā tiek pieprasīta 3. darbībā..

Google fonti - lejupielāde

3. solis: konvertējiet fontus uz Web fontiem

Pēc tam mēs pārveidosim šos fontu failus (.ttf) tīmekļa fontu failos. Es izmantošu Transfonters. Dodieties uz viņu vietni, noklikšķiniet uz Pievienojiet fontus, tad augšupielādējiet tikai tos fontu veidus, kurus izmantosit savā vietnē. Es izmantoju Roboto-Regular.ttf un Roboto-Bold.ttf tāpēc man ir gan parastais, gan treknraksts. Atstājiet iestatījumus kā noklusējuma iestatījumus, jo WOFF un WOFF2 aptver visus galvenos pārlūkus. Tagad noklikšķiniet uz konvertēt.

Transfonters-Google-fonts-reklāmguvums

Atlasiet tikai tos fontu veidus, kurus izmantosit savā vietnē …

Google fonti-reklāmguvumu izvēle

4. darbība. Lejupielādējiet konvertētos fontu failus

Kad fonti ir konvertēti, varat tos lejupielādēt. ZIP failā katrā fontā tiks iekļauti WOFF un WOFF2 formāti (tā kā mēs lejupielādējām 2 fontus, mums būs pavisam 4 fontu faili).

WOFF-Google-fontu konvertēšana

5. darbība: augšupielādējiet fontu failus WordPress failos

Augšupielādējiet tīmekļa fontu failus, izmantojot FTP vai cPanel, ideālā gadījumā wp-saturs / augšupielādes mape, lai motīvs un galvenie atjauninājumi tos nepārspētu. Es izveidoju mapi “fonti” un augšupielādēju tos tur (lai tos atdalītu no citiem failiem). Lai apstiprinātu, ka tie ir veiksmīgi augšupielādēti un vai jums ir pareizās saites, atveriet saites pārlūkprogrammā, un jāsāk lejupielādēt fonti.

Piemērs:

  • 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

Aizvietot jūsu vietne.com ar savu vietni (un HTTPS, ja izmantojat SSL). Ideālā gadījumā pārbaudiet visas 4 saites un pārliecinieties, vai URL ir pareizs (un noteikti saglabājiet tos kaut kur)..

6. solis: pievienojiet pielāgoto fontu CSS

Tālāk mēs pievienosim CSS, ko ieguvāt lejupielādētajā zip failā ar nosaukumu stila lapa.css. Šis ir CSS kods, kas savienos jūsu fontus ar esošo CSS un padarīs tos gatavus lietošanai.

Kur ievietot CSS kodu, ir subjektīvi, taču varat izmantot ārēju stila lapu vai WordPress ” wp_enqueue_style funkcija function.php vai jūsu programmas sākumā stils.css fails (vai custom.css ja jums tāda ir). Es ielīmēšu to motīva noklusējuma failā style.css. Kopējiet / ielīmējiet kodu stila lapā un mainiet relatīvos URL uz absolūtiem URL.

Noklusējuma URL stilā.css:
src: url (‘Roboto-Bold.woff2’) formāts (‘woff2’),
urla (‘Roboto-Bold.woff’) formāts (‘woff’);

Mainiet tos uz:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) formāts (‘ woff2 ‘),
URL (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) formāts (‘ woff ‘);

Būtībā pirms fonta faila nosaukuma vienkārši iekļaujiet mapes URL.

Tas nav obligāti, bet, ja vēlaties, izveidojiet pielāgotu klasi, lai ērti izmantotu fontu esošajā HTML. Šeit mēs nosaucām savas klases roboto_font un roboto_bold_font. Lai to izdarītu, pievienojiet to savam style.css failam (pēc iepriekšminētā koda):

.roboto_font {

fontu saime: “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font {

fontu saime: “Roboto”, “Arial”, sans-serif;

burtu svars: treknrakstā;

}

7. darbība: pārbaudiet fontu

Tagad izveidojiet testa lapu un ievietojiet šeit kodu Teksta redaktors

Pārbaude

Pielāgotu fontu pārbaude

Pielāgotu fontu pārbaude

Google fontu pārbaude

Priekšskatiet lapu. Ja izdarījāt pareizi, jums vajadzētu redzēt jauno pielāgoto fontu! Pirmais virsraksts ir jūsu vietnes noklusējuma fonts, otrais un trešais ir Google pievienotie fonti:

Vietējie Google fonti

8. darbība: iestatiet noklusējuma fontu

Lai to padarītu par jūsu vietnes noklusējuma fontu, pievienojiet šo CSS failam style.css:

ķermeņa {

fontu saime: “Roboto”, “Arial”, sans-serif;

}

Esi uzmanīgs! Ja jums jau ir pielāgots fonts, tas, iespējams, neparādās pareizi, tāpēc ir nepieciešams atkļūdošanu vai rediģēt esošos fontu saimes rekvizītus un tos aizstāt ar šo.

9. solis: vienmēr ņemiet vērā fontu neveiksmes

Ir slikta prakse Google fontu lietot kā fontu saimi. Tā vietā jums vajadzētu norādīt vairākus fontus, ieskaitot tādus parastos fontus kā Arial, Times New Roman, lai pārlūks varētu atgriezties pie šiem fontiem tikai gadījumā, ja fonts netiek ielādēts vai tas prasa ilgāku laiku..

Bez rezerves:
fontu saime: ‘Roboto’;

Ar rezerves fontu:
fontu saime: ‘Roboto’, Arial, sans serif;

Tagad, ja neizdosies ielādēt jūsu Google fontus, pārlūkprogramma atgriezīsies pie Arial fonta vai sistēmas noklusējuma sans-serif fonta veida un neradīs problēmas ar fontu atveidošanu.

Pārbaudiet savu vietni atkārtoti (GTmetrix)

Tajā nevajadzētu redzēt kļūdas Google Fonts …

New-GTmetrix-Report.png

Vai jums ir jautājumi? Nometiet man līniju.

bieži uzdotie jautājumi

&# x2705; Kā jūs paātrināt Google Fonts?

Google fontu apvienošana, lokāla mitināšana un to iepriekšēja savienošana un priekšslāņošana var palīdzēt uzlabot to ielādes laiku. Pārbaudiet savu GTmetrix ūdenskritumu, lai iegūtu savu fontu etalonu, pēc optimizācijas vēlreiz pārbaudiet to.

&# x2705; Web konvertēšanas failu fontu konvertēšana?

Mēs izmantojam Transfonter.

&# x2705; Kas par Elementor pielāgotajiem fontiem?

Elementor Custom Fonts var arī mitināt Google Fonts uz vietas, un tas ir iebūvēts Elementor Pro. To varat izmantot, lai augšupielādētu savus fontu failus.

&# x2705; Kādi spraudņi palīdz optimizēt fontus?

WP Rocket, OMGF, Autoptimize un Perfmatters var palīdzēt jums optimizēt fontus.

&# x2705; Kas notiks ar fontu priekšielādi un iepriekšēju savienošanu?

Tas var paātrināt fontus, palīdzot pārlūkprogrammām tos labāk paredzēt. Mēs izmantojam Kinsta spraudni Perfmatters, lai iepriekš ielādētu un iepriekš savienotu fontus, taču varat izmantot arī spraudni WP Rocket vai Pre Party Resource Hints..

Priekā,
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