Fix Google PageSpeed ​​აღმოფხვრა გაწევა დაბლოკვის JavaScript და CSS ზემოთ- the-fold შინაარსი

Javascript– ის და CSS– ის ბლოკჩეინგის მოგვარება

Google PageSpeed ​​[1] ტესტი აღმოფხვრა დაბლოკვის JavaScript და CSS ზემოთ-ის კონტენტი გთავაზობთ თქვენს საიტზე JS და CSS ფაილებს შემდეგ HTML სრულად დატვირთული - და, შესაბამისად, არ პაუზის თქვენი HTML დატვირთვა ჩამოტვირთეთ ისინი.

რენდერის დაბლოკვის სკრიპტის განმარტება: სკრიპტები, რომლებიც ჩატვირთულია HTML სრული DOM– ის გაანალიზებამდე. მაგალითად, სკრიპტები სათაურში ან შინაარსში, ბრაუზერებისათვის რაიმე კონკრეტული ინსტრუქციის გარეშე, რომ გადადონ სკრიპტის ჩატვირთვა HTML შეღებვის შემდეგ.

აღმოფხვრა JavaScript და CSS დაბლოკვის ზომა ზემოთ მოცემულ შინაარსში: აჩვენე, თუ როგორ უნდა გამოსწორდეს ეს

1. გქონდეთ გარე სისტემის ოპტიმიზაცია თქვენი ვებსაიტისთვის თქვენთვის
   
2. გამოიყენეთ CDN, რომელიც შეასრულებს ყველა შესაძლო ოპტიმიზაციას თქვენი სახელით, სამი შემდეგი ოპტიმიზაციის ჩათვლით, რომლებიც აუცილებელია რენდერის დაბლოკვის რესურსების აღმოსაფხვრელად:
   
3. გადაიდო Javascript ფაილების ჩატვირთვა
   
4. ჩატვირთეთ CSS HTML დატვირთვის შემდეგ
   
5. გამოიყენეთ WordPress მოდული
   

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

არ არსებობს გამოსავალი htaccess კოდექსში რენდერის დაბლოკვის რესურსების აღმოსაფხვრელად, რადგან ეს საკითხი დაკავშირებულია DOM– თან, რაც გულისხმობს ვებ – გვერდის შინაარსს და თანმიმდევრობით ჩატვირთული თანხების მითითებას, როგორიცაა Javascript და CSS, მაგრამ არა მხოლოდ. მათი გააქტიურება შეუძლებელია Htaccess– ში, მაგრამ მხოლოდ HTML DOM შინაარსში.

თუ ამ პრობლემებს დესკტოპისთვის მოაგვარებთ, ამავდროულად, თქვენ აღმოფხვრით მობილური ტელეფონებისთვის რენდერის დაბლოკვის რესურსებს, რადგან ორივე ზუსტად იგივეა!

Did you know that you can even have all these steps executed automatically for you by using an external  საიტის სიჩქარის ამაჩქარებელი   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Javascript ფაილების დატვირთვის გადადება

იმისათვის, რომ გადავიდეს თქვენი JS ფაილი [2], შეგიძლიათ ან დაამატოთ async ან defer ინსტრუქცია თქვენი სკრიპტები ბმულები. Async არ იძლევა იმის გარანტიას, რომ ისინი იმავე თანმიმდევრობით დატვირთულნი არიან - ამიტომ, თუ თქვენ გაქვთ რამდენიმე სკრიპტი, რომელიც ერთმანეთის მიყოლებით უნდა აწარმოებდეს, გადადებული სასურველია თანმიმდევრობის გარანტია:

დატვირთეთ CSS HTML დატვირთვის შემდეგ

სრულად HTML გადასასვლელად ჩატვირთული CSS- ისთვის, Google გთავაზობთ [3] ამ კოდექსის კოდს დასამატებლად თქვენი HTML- ის დასასრულს, მაგალითად, ქვევრიდან დახურვის შემდეგ და დახურვის ტეგიდან:

თქვენი ვებსაიტის ოპტიმიზაციის მიზნით, ასევე კარგი იდეაა გამოუყენებელი CSS კოდის ამოღება, ოპერაცია, რომელიც შეიძლება იყოს tedious თუ არ გაქვთ ცოდნა ვებ დიზაინში. თუ თქვენ არ შექმენით თქვენი ვებ-გვერდი, ეს შეიძლება იყოს ბრძოლის გარე სისტემის გამოყენება თქვენი სახელით თქვენს გვერდებზე გამოუყენებელი CSS კოდის ამოღების მიზნით, როგორიცაა Ezoic Leap მაგალითად, ახალი (და სრულიად უფასო) ვერსია მათი საოცარი საიტი სიჩქარე ამაჩქარებელი.

გაიარეთ Google საიტის სიჩქარის ტესტი!

ეს საშუალება მომცა  Google PageSpeed   ​​[1] ტესტის ჩაბარება ვებ-გვერდზე დაბლოკვისას JavaScript- სა და CSS- ის ზემოთ ჩამოთვლილ კონტენტში (ლევერაჟი ბრაუზერის ქეშირება [4]), მობილურიდან 51 ქულა ფიგურა 1) 72-დან (ნახაზი 2) და 59-დან (ნახაზი 3-დან) 79-მდე (სურათი 4).

როგორ აღმოფხვრა გაწევა ბლოკირების რესურსების WordPress

აღმოფხვრას გაწევა ბლოკირების რესურსების WordPress, აუცილებელია დააყენოთ მოდული, როგორიცაა JetPack.

შემდეგ გადადით პარამეტრებზე, რისთვისაც უნდა იყოთ ადმინისტრატორი და გადადით JetPack- ის ვარიანტები> წერა> შესრულება და სიჩქარე> შემოწმება საიტის ამაჩქარებლის ჩართვა, სურათის დატვირთვის დრო დააჩქაროს, სტატიკური ფაილის ჩატვირთვის დრო დააჩქაროს და ზომიერად იტვირთება სურათები.

სამაგისტრო ვებგვერდის შექმნა: ჩარიცხეთ ახლავე!

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

ჩარიცხეთ აქ

ეს ხელს უშლის WordPress- ში დაბლოკვის რესურსების აღმოსაფხვრელად და გადატვირთვის გვერდებს უფრო სწრაფი საშუალებით, რომლებიც JetPack- ს საშუალებას აძლევს თქვენი სურათების ოპტიმიზაციას და თქვენს სურათებს და სტატიკურ ფაილებს (CSS და JavaScript) სერვერების გლობალურ ქსელში.

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

თქვენი ვებ-გვერდის სურათების ზარმაცი დატვირთვისთვის, უბრალოდ დაამატეთ ღირებულებები ზარმაცი თქვენი ვებ-გვერდის სურათების დატვირთვის ატრიბუტებით და ბოლოდროინდელი ბრაუზერები გაიგებენ, რომ ეს სურათები უნდა იყოს მხოლოდ მოთხოვნილი და დატვირთული, თუ ისინი არიან ნაჩვენები, რაც იმას ნიშნავს, გამოსახულების placeholders.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

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

მას შემდეგ, რაც ბლოკირების რესურსი ექნება ინსტრუქციებს, რათა დატვირთვის შემდეგ ძირითადი შინაარსი, რაც იმას ნიშნავს, HTML DOM, თქვენ უკვე მიიღოთ ბევრი ქულა Google Lighthouse ტესტი, გვერდი სიჩქარე insights გამოცდა, ან Google Core ვებ Vitals.

გქონდეთ გარე სისტემა, რომ თქვენი ვებ – გვერდი ოპტიმიზირდეს თქვენთვის

იცით, რომ თქვენ ნამდვილად შეეძლოთ თქვენი PageSpeed– ის ყველა პრობლემის მოგვარება თქვენი სახელით, თქვენი საიტის მხრიდან დიდი ძალისხმევის გარეშე - გარდა უფასო გამოცდის რეგისტრაციისა და თქვენი DNS შეცვლისა?

Ezoic პლატფორმის საიტის სიჩქარის ამაჩქარებლის ტექნოლოგიის გამოყენებით, ყველა სისტემაში მოგვარდება  Google PageSpeed   ​​საკითხი, რომელიც იქნება თქვენი ვებ – გვერდისა და ვიზიტორებს შორის შუამავალი. ისინი თქვენთვის ოპტიმიზაციას უკეთებენ თქვენს ვებგვერდს, სანამ მას სტუმართან აჩვენებთ.

გახდი მწვანე, მარტივად დარეგისტრირდი უფასო გამოცდაზე Ezoic პლატფორმაზე და სცადე ესე იგი - ისინი თქვენს ვებგვერდს რამდენიმე დღის განმავლობაში მიაღწევენ გვერდის სიჩქარის ოპტიმიზაციის მაღალ სტანდარტებს: მიაწოდეთ შემდეგი თაობის ვებ – გვერდის სურათები, ოპტიმიზაცია გააკეთეთ CSS და JavaScript– ით, ამოიღეთ გამოუყენებელი CSS და JS, ზარმაცი დატვირთვის სურათები, სურათების ზომის შეცვლა, თქვენი საიტის გვერდების ქეშირება, შრიფტების ოპტიმიზაცია, წინასწარ დაკავშირება თქვენს ყველა შესულ საიტთან და მრავალი სხვა.

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

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

როგორ აღმოფხვრას Render-Blocking JavaScript და CSS ზემოთ ჩამოთვლილ შინაარსში?

Render-Blocking JavaScript და CSS ზემოქმედების შემცველობით, თქვენ უნდა უზრუნველყოთ თქვენი საიტის JS და CSS ფაილები დატვირთული მას შემდეგ, რაც HTML სრულად იტვირთება. ეს ნიშნავს, რომ არ შეაჩეროთ HTML დატვირთვის პროცესი ამ ფაილების ჩამოტვირთვისთვის. თქვენ შეგიძლიათ გადადოთ JavaScript ფაილები ASYNC ან DEFER ატრიბუტით, ხოლო CSS– სთვის, HTML– ის შემდეგ შეგიძლიათ გამოიყენოთ კონკრეტული კოდი. გარე ოპტიმიზაციის სისტემას, როგორიცაა Ezoic, ასევე შეუძლია გაუმკლავდეს ამას ავტომატურად.

როგორ შეიძლება ვებ დეველოპერებმა მიმართონ Google Pagespeed- ის რეკომენდაციას, რომ აღმოფხვრას Render-Blocking JavaScript და CSS?

ვებ დეველოპერებს შეუძლიათ თავიანთი საიტის ოპტიმიზაცია JavaScript- ისა და CSS ფაილების მინიშნება, JavaScript- ის ასინქრონული დატვირთვის გამოყენებით, კრიტიკული CSS პირდაპირ HTML- ში ჩასატარებლად და არა კრიტიკული CSS და JavaScript ფაილების დატვირთვა. ამ სტრატეგიების განხორციელებამ შეიძლება მნიშვნელოვნად გააუმჯობესოს დატვირთვის დრო და გვერდითი ქულები.

Perfect Chrome Lighthouse Score: რა მოხდება?