როგორ განვატვირთოთ Google შრიფტები ადგილობრივ WordPress– ში: ოპტიმიზაციის ელემენტი ნაპოვნია GTmetrix– ში, Pingdom– ში და Google PageSpeed ​​Insights– ში

თუ თქვენს WordPress საიტს აქვს Google ფონტი შეცდომები GTmetrix/პინგდომ, Google Fonts- ის ადგილობრივად ჩატვირთვა უნდა დააფიქსიროს ისინი.


თქვენ არ შეგიძლიათ აკონტროლოთ ზოგიერთი გარე რესურსი და სკრიპტი, რაც შეუძლებელს ხდის მათ შეკუმშვას, შემცირებას ან ოპტიმიზაციას. ეს შეიძლება სერიოზულად იმოქმედოს თქვენს WordPress სიჩქარეზე. ერთ-ერთი ყველაზე გავრცელებული გარე რესურსია Google Fonts. თუ თქვენ უკვე გაქვთ კონფიგურაციის ქეში მოდული, როგორიცაა WP Rocket ან WP Fast Cache, შეგიძლიათ დაიწყოთ გარე რესურსების შენიშვნა, როგორიცაა შრიფტები, რომლებიც გავლენას ახდენენ კლასებზე + დატვირთვის ჯერზე. ეს არის ის, სადაც Google Fonts ადგილობრივად დატვირთვა ხდება. ეს საშუალებას გაძლევთ თქვენი ქეში მოდული შეკუმშოს თქვენს პერსონალურ შრიფტ (ებ) სთან დაკავშირებული ყველა რესურსი..

აიღეთ თქვენი საიტის სრული სარეზერვო საშუალება (ან სულ მცირე ფაილები, რომელსაც რედაქტირებთ), სანამ ცვლილებებს გააკეთებთ.

Google-Fonts-GTmetrix

Contents

ნაბიჯი 1: შეარჩიეთ Google შრიფტი

ამ მაგალითში გამოვიყენებთ რობოტოს შრიფტი ორი შრიფტის წონა: რეგულარული (400) და თამამი (700).

Google- შრიფტები-შერჩევა

გამოიყენეთ ნაკლები Google შრიფტები – თქვენი Google შრიფტები მინიმუმამდე დაიყვანეთ (ნაკლები შრიფტები = ნაკლები მოთხოვნა).

იყავით შერჩევითი შრიფტის წონებით – წონების რაოდენობა ასევე მოქმედებს დატვირთვის დროზე. თუ თქვენ მხოლოდ თამამი ვერსია გჭირდებათ, წაშალეთ სხვა წონა, ასე რომ Google Fonts ატვირთეთ მხოლოდ თქვენთვის.

ნაბიჯი 2: ჩამოტვირთეთ შრიფტი

ჩამოტვირთეთ შრიფტები, როდესაც მზად ხართ. Google ავტომატურად ჩამოტვირთავს ყველა შრიფტის წონას, ამიტომ შრიფტის წონების შერჩევა ამ ეტაპზე არ არის საჭირო და ამის ნაცვლად საჭიროა მე –3 ნაბიჯში.

Google- შრიფტები-ჩამოტვირთვა

ნაბიჯი 3: გადააკეთეთ შრიფტები ვებ შრიფტებზე

შემდეგი, ჩვენ გადავცვლით ამ შრიფტის ფაილებს (.ttf) ვებ შრიფტის ფაილებად. მე ვიყენებ ტრანსფონტერი. გადადით მათ საიტზე, დააჭირეთ დაამატეთ შრიფტები, შემდეგ ატვირთეთ მხოლოდ იმ შრიფტის ტიპები, რომელსაც იყენებთ თქვენს ვებ – გვერდზე. Მე ვიყენებ Roboto-Regular.ttf და Roboto-Bold.ttf ამიტომ მაქვს როგორც რეგულარული, ასევე თამამი წონა. დატოვეთ პარამეტრები, როგორც ნაგულისხმევი, რადგან WOFF და WOFF2 მოიცავს ყველა მთავარ ბრაუზერს. ახლა დააჭირეთ კონვერტირებას.

Transfonter-Google-Font-Conversion

შეარჩიეთ მხოლოდ იმ შრიფტის ტიპები, რომელსაც იყენებთ თქვენს ვებ – გვერდზე…

Google- შრიფტები-გადაქცევა-შერჩევა

ნაბიჯი 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- სთან და გამოიყენებს მათ გამოსაყენებლად.

სად განთავსება CSS კოდი არის სუბიექტური, მაგრამ შეგიძლიათ გამოიყენოთ გარე სტილის ფურცელი ან WordPress ‘ wp_enqueue_style ფუნქციები ფუნქციებში.php ან თქვენს დასაწყისში სტილი.css ფაილი (ან custom.css თუ თქვენ გაქვთ ერთი). მე ვაპირებ ჩასვათ იგი თემის ნაგულისხმევი style.css ფაილში. დააკოპირეთ / ჩასვით კოდი სტილების ცხრილში და შეცვალეთ ნებისმიერი ნათესავი URL აბსოლუტურ მისამართებად.

ნაგულისხმევი URL- ები stylesheet.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. ამისათვის დაამატეთ ეს თქვენს style.css ფაილში (ზემოთ მითითებული კოდის შემდეგ):

.roboto_font

შრიფტი-ოჯახი: “რობოტო”, “არიალი”, sans-serif;

}

.roboto_bold_font

შრიფტი-ოჯახი: “რობოტო”, “არიალი”, sans-serif;

font-weight: თამამი;

}

ნაბიჯი 7: შეამოწმეთ შრიფტი

ახლა შექმენით ტესტის გვერდი და განათავსეთ შემდეგი კოდი Ტექსტის რედაქტორი

ტესტირება

შრიფტის საბაჟო ტესტი

შრიფტის საბაჟო ტესტი

Google- შრიფტების ტესტირება

გვერდის გადახედვა. თუ სწორად გააკეთე ეს, თქვენ უნდა ნახოთ ახალი საბაჟო შრიფტი! პირველი სათაური არის თქვენი ვებსაიტის ნაგულისხმევი შრიფტი, მეორე და მესამე არის Google Fonts შრიფტები, რომლებიც ჩვენ დავამატეთ:

ადგილობრივი-Google- შრიფტები

ნაბიჯი 8: დააყენეთ ნაგულისხმევი შრიფტი

თქვენი ვებ – გვერდის ნაგულისხმევი შრიფტის შესაქმნელად, დაამატეთ ეს CSS თქვენს style.css ფაილზე:

სხეული

შრიფტი-ოჯახი: “რობოტო”, “არიალი”, sans-serif;

}

Ფრთხილად იყავი! თუ თქვენ უკვე გაქვთ შრიფტი, ის შეიძლება არ გამოჩნდეს სწორად და საჭიროებს არსებული შრიფტის ოჯახის მახასიათებლების გამართვას ან შეცვლას და ამის ნაცვლად.

ნაბიჯი 9: ყოველთვის გაქვთ შრიფტის შეცდომები

ცუდი პრაქტიკაა, რომ გამოიყენოთ Google Font, როგორც შრიფტის ოჯახი. ამის ნაცვლად, თქვენ უნდა გქონდეთ მითითებული მრავალრიცხოვანი შრიფტები, მათ შორის ისეთი შრიფტები, როგორიცაა Arial, Times New Roman, რათა ბრაუზერმა დაუბრუნდეს ამ შრიფტებს, მხოლოდ იმ შემთხვევაში, თუ შრიფტი არ იტვირთავს ან დატვირთვას საჭიროებს უფრო მეტხანს..

უკუკავშირი:
font-family: ‘Roboto’;

დაბრუნების შრიფტით:
font-family: ‘Roboto’, არიალი, sans-serif;

ახლა, თუ ის ვერ ატვირთავს თქვენს Google შრიფტებს, ბრაუზერი დაუბრუნდება Arial შრიფტს ან სტანდარტულ sans-serif შრიფტის ტიპის სისტემას და არ გამოიწვევს რაიმე შრიფტის შეფერხებას..

შეამოწმეთ თქვენი ვებ – გვერდი (In GTmetrix)

თქვენ არ უნდა ნახოთ მასში Google Fonts– ის შეცდომები…

New-GTmetrix-Report.png

გაქვთ კითხვები? დამიტოვე ხაზი.

ხშირად დასმული შეკითხვები

&# x2705; როგორ აჩქარებთ Google Fonts?

Google Fonts- ის გაერთიანებას, მათ ადგილობრივ მასპინძლობას, მათი წინასწარ დაფიქსირებასა და პრეფექტირებას ყველა შეუძლია დაეხმაროს დატვირთვის დრო. შეამოწმეთ თქვენი GTmetrix ჩანჩქერი, რომ მიიღოთ თქვენი შრიფტების საორიენტაციო სისტემა, შემდეგ კი ხელახლა დაადასტურეთ მას ოპტიმიზაციის შემდეგ.

&# x2705; როგორ გადავადოთ შრიფტები ვებ შრიფტის ფაილებს?

ჩვენ ვიყენებთ ტრანსფონტერს.

&# x2705; რაც შეეხება Elementor- ის ჩვეულ შრიფტებს?

Elementor- ის საბაჟო შრიფტებს ასევე შეუძლიათ Google Fonts- ს ადგილობრივი მასპინძლობა და Elementor Pro- ის ჩაშენებულია. თქვენ შეგიძლიათ გამოიყენოთ ეს თქვენი შრიფტის ფაილების ატვირთვისთვის.

&# x2705; რომელი მოდული შრიფტების ოპტიმიზაციას უწყობს ხელს?

WP Rocket, 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
    Like this post? Please share to your friends:
    Adblock
    detector
    map