Ինչպես բեռնել Google տառատեսակները տեղական WordPress- ում. GTmetrix- ում, Pingdom- ում և Google PageSpeed ​​Insights- ում հայտնաբերված օպտիմիզացման կետ

03.06.2020
WordPress 'Ինչպես բեռնել Google տառատեսակները տեղական WordPress- ում. GTmetrix- ում, Pingdom- ում և Google PageSpeed ​​Insights- ում հայտնաբերված օպտիմիզացման կետ
0 27 мин.

Եթե ​​ձեր WordPress կայքը ունի Google տառատեսակ սխալները GTmetrix/Պինգդոմ, Տեղադրելով Google Fonts- ը տեղական, պետք է դրանք շտկեն.


Դուք չեք կարող վերահսկել որոշ արտաքին ռեսուրսներ և գրություններ, ինչը նրանց անհնար է դարձնում սեղմել, փոքրացնել կամ օպտիմալացնել: Սա կարող է լրջորեն ազդել ձեր WordPress- ի արագության վրա: Ամենատարածված արտաքին ռեսուրսներից մեկը Google Fonts- ն է: Եթե ​​արդեն կազմաձևված եք քեշի հավելված, ինչպիսին է WP Rocket կամ WP Fastest Cache, կարող եք սկսել նկատել արտաքին ռեսուրսներ, ինչպիսիք են տառատեսակները, որոնք ազդում են դասարանների վրա + բեռի անգամ: Սա այն դեպքում, երբ Google Fonts- ը տեղական տեղաբաշխում է մտնում: Սա թույլ է տալիս ձեր cache plugin- ը սեղմել ձեր սովորական տառատեսակի (ներ) ի հետ կապված բոլոր ռեսուրսները:.

Փոփոխություններ կատարելուց առաջ վերցրեք ձեր կայքի ամբողջական պահուստը (կամ գոնե այն ֆայլերը, որոնք դուք խմբագրում եք).

Google-Fonts-GTmetrix

Քայլ 1. Ընտրեք Google տառատեսակ

Այս օրինակում մենք կօգտագործենք Roboto տառատեսակ երկու տառաչափով. կանոնավոր (400) և համարձակ (700).

Google-Fonts- ընտրություն

Օգտագործեք ավելի քիչ Google տառատեսակներ – պահպանեք ձեր Google տառատեսակները նվազագույնի (պակաս տառատեսակներ = ավելի քիչ պահանջներ).

Եղեք ընտրովի տառատեսակների կշիռներով – կշիռների քանակը նույնպես ազդում է բեռի ժամանակների վրա: Եթե ​​ձեզ հարկավոր է միայն համարձակ տարբերակը, ապա դուրս հանեք մյուս կշիռները, որպեսզի Google Fonts- ը բեռնի միայն ձեզ հարկավոր.

Քայլ 2. Ներբեռնեք տառատեսակը

Ներբեռնեք տառատեսակները, երբ պատրաստ կլինեք: Google- ը ավտոմատ կերպով ներբեռնելու է տառատեսակի բոլոր կշիռները, այնպես որ այս փուլում տառատեսակների կշիռների ընտրություն չի պահանջվում, և փոխարենը պահանջվում է 3-րդ քայլում:.

Google- Տառատեսակներ-Ներբեռնում

Քայլ 3. Փոխանակեք տառատեսակները վեբ տառատեսակների

Հաջորդը, մենք այս տառատեսակների ֆայլերը (.ttf) կվերածենք վեբ տառատեսակների ֆայլերի: Ես կօգտագործեմ Փոխանցում. Գնացեք իրենց կայք, կտտացրեք Ավելացնել տառատեսակներ, ապա վերբեռնեք միայն այն տառատեսակները, որոնք դուք կօգտագործեք ձեր կայքում. Ես օգտագործում եմ Roboto-Regular.ttf և Roboto-Bold.ttf այնպես որ ես և՛ կանոնավոր, և՛ համարձակ կշիռներ ունեմ: Թողեք պարամետրերը որպես լռելյայն, քանի որ WOFF- ը և WOFF2- ը ծածկում են բոլոր հիմնական զննարկիչները: Այժմ կտտացրեք փոխարկումը.

Transfonter-Google-Font-Conversion

Ընտրեք միայն այն տառատեսակները, որոնք դուք կօգտագործեք ձեր կայքում…

Google-Fonts-Conversion-Selection

Քայլ 4. Ներբեռնեք փոխարկված տառատեսակի ֆայլեր

Տառատեսակները փոխարկելուց հետո կարող եք ներբեռնել դրանք: ZIP նիշքի մեջ յուրաքանչյուր տառատեսակ կներառի WOFF և WOFF2 ձևաչափեր (քանի որ ներբեռնեցինք 2 տառատեսակ, կունենանք ընդհանուր 4 տառատեսակ).

WOFF-Google-Font-Conversion

Քայլ 5. Վերցրեք տառատեսակի ֆայլերը WordPress ֆայլերում

Վերբեռնեք վեբ տառատեսակների ֆայլերը FTP- ի կամ cPanel- ի միջոցով ՝ իդեալական wp- բովանդակություն / վերբեռնումներ թղթապանակ, որպեսզի թեման և հիմնական թարմացումները չթողնեն դրանք: Ստեղծեցի «տառատեսակներ» պանակ և դրանք վերբեռնեցի այնտեղ (դրանք այլ ֆայլերից առանձնացնելու համար): Հաստատելու համար, որ դրանք հաջողությամբ վերբեռնվել են, և դուք ունեք ճիշտ հղումներ, բացեք հղումները ձեր դիտարկչում, և տառատեսակները պետք է սկսեն ներբեռնել.

Օրինակ:

  • 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

Փոխարինեք yourwebsite.com ձեր սեփական կայքի միջոցով (և HTTPS, եթե SSL է օգտագործում): Իդեալում, փորձարկեք բոլոր 4 հղումները և համոզվեք, որ URL- ները ճիշտ են (և նաև համոզվեք, որ դրանք ինչ-որ տեղ պահպանեք).

Քայլ 6. Հատուկ տառատեսակ ավելացրեք CSS- ին

Հաջորդը, մենք կավելացնենք այն CSS- ն, որը ստացել եք ներբեռնված zip ֆայլի անունով ոճի թերթ. Սա CSS ծածկագիրն է, որը կկապի ձեր տառատեսակները առկա CSS- ի հետ և դրանք պատրաստ կդարձնի օգտագործել.

Որտեղ տեղադրել CSS ծածկագիրը սուբյեկտիվ է, բայց կարող եք օգտագործել արտաքին ոճային թերթ կամ WordPress ‘ wp_enqueue_style գործառույթները գործառույթներում.php- ում կամ ձեր սկզբում ոճը .css ֆայլ (կամ custom.css եթե ունեք մեկը): Ես պատրաստվում եմ տեղադրել այն թեմայի լռելյայն ոճով: css ֆայլում: Պատճենեք / կպցրեք ծածկագիրը ոճային թերթիկի մեջ և փոխեք ցանկացած հարաբերական URL- ները դեպի բացարձակ URL.

Լռելյայն URL- ները ոճային թերթում .css:
src: url (‘Roboto-Bold.woff2’) ձևաչափ (‘woff2’),
url (‘Roboto-Bold.woff’) ձևաչափը (‘woff’);

Փոխեք դրանք ՝
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) ձևաչափը (‘ woff2 ‘),
url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) ձևաչափը (‘ woff ‘);

Ըստ էության, պարզապես տառատեսակի ֆայլի անունից առաջ ներառեք թղթապանակի URL- ը.

Սա ընտրովի է, բայց եթե նախընտրում եք, ստեղծեք սովորական դաս, որպեսզի առկա տառաչափը հեշտությամբ օգտագործեք առկա HTML- ում: Այստեղ մենք անվանեցինք մեր դասերը roboto_font և roboto_bold_font. Դա անելու համար այն ավելացրեք ձեր ոճին.քս ֆայլում (վերը նշված ծածկագրից հետո).

.roboto_font

տառատեսակ-ընտանիք. «Roboto», «Arial», sans-serif;

}

.roboto_bold_font

տառատեսակ-ընտանիք. «Roboto», «Arial», sans-serif;

font-weight: bold;

}

Քայլ 7. Փորձեք տառատեսակը

Այժմ ստեղծեք թեստային էջ և տեղադրեք հետևյալ ծածկագիրը Տեքստի խմբագիր

Թեստավորում

Պատվերով տառատեսակի ստուգում

Պատվերով տառատեսակի ստուգում

Google-Fonts- թեստավորում

Նախադիտել էջը: Եթե ​​դա ճիշտ եք արել, պետք է տեսնեք նոր սովորական տառատեսակը: Առաջին վերնագիրը ձեր կայքի լռելյայն տառատեսակն է, երկրորդը և երրորդը `Google Fonts տառատեսակները, որոնք մենք ավելացրել ենք.

Տեղական-Google- տառատեսակներ

Քայլ 8: Նախադրեք կանխադրված տառատեսակը

Որպեսզի դա ձեր կայքի կանխադրված տառատեսակն դառնա, այս CSS- ն ավելացրեք ձեր style.css ֆայլին.

մարմին {

տառատեսակ-ընտանիք. «Roboto», «Arial», sans-serif;

}

Զգույշ եղիր! Եթե ​​արդեն ունեք սովորական տառատեսակ, այն կարող է ճիշտ չհայտնել և պահանջել կարգաբերում կամ խմբագրել գոյություն ունեցող տառատեսակների ընտանեկան հատկությունները և փոխարենը դրանք փոխարինել այսով.

Քայլ 9. Միշտ տառատեսակի թերություններ ունեցեք

Վատ պրակտիկա է `օգտագործել Google տառատեսակը որպես տառատեսակ: Փոխարենը, դուք պետք է նշեք բազմաթիվ տառատեսակներ, ներառյալ այն ընդհանուր տառատեսակները, ինչպիսիք են Arial, Times New Roman, որպեսզի զննարկիչը կարողանա վերադառնալ այս տառատեսակներին, միայն այն դեպքում, երբ տառատեսակը չի բեռնում կամ տևում է ավելի երկար բեռնման համար:.

Առանց թերության.
font-family: ‘Roboto’;

Հետադարձ տառատեսակով.
font-family: ‘Roboto’, Արիալ, sans-serif;

Հիմա, եթե այն չկարողանա բեռնել ձեր Google տառատեսակները, զննարկիչը կընկնի Arial տառատեսակի կամ համակարգի լռելյայն sans-serif տառատեսակի տեսակի վրա և չի առաջացնի որևէ տառատեսակի հետ կապված որևէ խնդիր:.

Վերստուգեք ձեր կայքը (In GTmetrix)

Դուք չպետք է տեսնեք դրա մեջ Google տառատեսակների սխալներ…

New-GTmetrix-Report.png

Հարցեր ունեք: Գցեք ինձ մի տող.

Հաճախակի տրվող հարցեր

&# x2705; Ինչպե՞ս եք արագացնում Google տառատեսակները?

Google- ի տառատեսակների համադրումը, նրանց տեղական տեղակայելը և դրանք կանխարգելելն ու նախընտրելը բոլորը կարող են օգնել բարելավել իրենց բեռնվածության ժամանակը: Ստուգեք ձեր GTmetrix ջրվեժը ձեր տառատեսակների չափանիշը ստանալու համար, ապա օպտիմալացնելուց հետո կրկին փորձեք այն.

&# x2705; Ինչպես փոխարկել տառատեսակները վեբ տառատեսակների ֆայլերը?

Մենք օգտագործում ենք Transfonter- ը.

&# x2705; Իսկ Elementor- ի սովորական տառատեսակների մասին?

Elementor Custom տառատեսակները կարող են տեղակայել նաև Google տառատեսակներ տեղական և ներկառուցված է Elementor Pro- ի համար: Դուք կարող եք օգտագործել դա ձեր տառատեսակի ֆայլերը վերբեռնելու համար.

&# x2705; Որ հավելիչները օգնում են օպտիմիզացնել տառատեսակները?

WP հրթիռը, OMGF- ը, Autoptimize- ը և Perfmatters- ը կարող են օգնել բոլորը `օպտիմալացնել տառատեսակները.

&# x2705; Ինչ վերաբերում է տառատեսակների նախապատվությանը և կանխարգելմանը?

Սրանք կարող են արագացնել տառատեսակները ՝ օգնելով զննարկիչներին, ավելի լավ կանխատեսել դրանք: Մենք օգտագործում ենք «Perfmatters» հավելվածը Kinsta- ի կողմից տառատեսակների կանխորոշման և նախազգուշացման համար, բայց կարող եք նաև օգտագործել WP Rocket կամ Pre Party Resource Hints plugin.

Ուրախություն,
Ուսամա

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector