Отстраняване на Google PageSpeed ​​Премахване на блокиране на рендирането на JavaScript и CSS в съдържание с по-високо съдържание

Решете блокиране на визуализация 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 няма да гарантира, че те са заредени в една и съща последователност - затова, ако имате няколко скрипта, които трябва да се изпълняват една след друга, отложете е за предпочитане да се гарантира последователността:

Заредете CSS след зареждане с HTML

За да бъде зареден CSS след предаването на пълния HTML код, Google предлага [3] това парче код, който да добавите в края на вашия HTML код, например след таг за затваряне на долния колонтитул и преди таг за затваряне на тялото:

За да оптимизирате уебсайта си, също така е добра идея да премахнете неизползвания CSS код, операция, която може да бъде досадна, ако нямате знания в уеб дизайна. Ако не сте създали сам уебсайт, може да е по-мъдър да използвате външна система, за да премахнете неизползвания CSS код на страниците си от ваше име, като например Ezoic Leap, например, новата (и напълно безплатна) версия на тяхното невероятно място Ускорител на скоростта.

Преминете теста за скорост на сайта на Google!

Това ми позволи да премине теста  Google PageSpeed   ​​[1] Премахване на JavaScript и CSS за блокиране на рендерирането в съдържание с най-високо съдържание (заедно с кеширането на браузъра Leverage [4]) на уебсайт, Фиг. 1) до 72 (Фиг. 2) и от 59 (Фиг. 3) до 79 на работния плот (Фиг. 4).

Как да елиминираме ресурсите за блокиране на визуализацията в WordPress

За да елиминирате ресурси за блокиране на визуализацията в WordPress, е необходимо да инсталирате плъгин като JetPack.

След това преминете към опциите, за които трябва да сте администратор, и отидете на JetPack опции> Писане> Производителност и бързина> проверете Активирайте ускорителя на сайта, ускорете времето за зареждане на изображението, ускорете времето за зареждане на статичния файл и активирайте ленивото зареждане изображения.

Създаване на главен уебсайт: Запишете се сега!

Преобразувайте дигиталното си присъствие с нашия цялостен курс за създаване на уебсайтове - започнете пътуването си, за да станете уеб експерт днес!

Запишете се тук

Това ще премахне ресурси за блокиране на визуализацията в WordPress и ще зареди страници по-бързо, като позволи на JetPack да оптимизира вашите изображения и да обслужва вашите изображения и статични файлове (като CSS и JavaScript) от тяхната глобална мрежа от сървъри.

Също така, не забравяйте да отложите зареждане на изображения извън екрана, като използвате безжична функция за натоварване. Докато е било трудно и налагат външна библиотека, за да отложите зареждане на изображения извън екрана, сега е възможно естествено в HTML5!

За да приложите мързеливо зареждане на изображения на вашите уебсайтове, просто добавете стойностите мързеливи към атрибутите, зареждане на вашите уеб сайт, и последните браузъри ще разберат, че тези изображения трябва да бъдат поискани и заредени само ако се покажат, което означава, ако потребителят се показва местата на изображението.

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

Освен това мързеливо натоварване също работи с iFrames и е важно прилагане за премахване на ресурсите за блокиране на рендера от вашите уеб страници.

След като пренестващите блокиращи ресурси ще имат инструкции за зареждане след основното съдържание, което означава HTML DOM, вече ще печелите много точки в теста за осветяване на Google, тест за скорост на страницата или уебсайса на Google Core.

Дайте външна система да оптимизира вашия уебсайт за вас

Знаете ли, че всъщност бихте могли да разрешите всички проблеми с  Google PageSpeed   ​​от ваше име, без много усилия от вашия сайт - освен да се регистрирате за безплатна пробна версия и да промените DNS?

Използвайки технологията на платформата Ezoic Site Speed ​​Accelerator, всички обичайни проблеми с  Google PageSpeed   ​​ще бъдат решени от тяхната система, която ще бъде посредник между вашия уебсайт и посетителите. Те ще оптимизират уеб страницата за вас, преди да я покажат на вашия посетител.

Станете зелени, като просто се регистрирате за безплатна пробна версия на платформата Ezoic и го изпробвайте сами - те ще накарат вашия уебсайт да достигне най-високите стандарти за оптимизиране на скоростта на страниците в рамките на няколко дни: изобразявайте уеб поколения от следващо поколение, оптимизирайте CSS и JavaScript, като премахнете неизползвания CSS и JS, мързеливо зареждане на изображения, преоразмеряване на изображения, кеширане на страниците на вашия сайт, оптимизиране на шрифтове, предварително свързване към всички включени сайтове и много други.

Не се изисква кредитна карта - всичко, което трябва да направите, е да се регистрирате безплатно и да я опитате. Плюс това, ако вашият уебсайт печели пари от дисплейни реклами, освен че прави уебсайта ви много по-бърз, той може също така да ви накара да спечелите няколко пъти повече пари, отколкото правите с Google AdSense, като оптимизирате рекламите си с машинно обучение и усъвършенствана изкуствена намеса.

Често Задавани Въпроси

Как да премахнете блокирането на рендера JavaScript и CSS в съдържанието над сгънатата?

За да елиминирате JavaScript и CSS за блокиране на рендера за съдържание над сгъната, трябва да се уверите, че JS и CSS файловете на вашия сайт се зареждат, след като HTML е напълно зареден. Това означава, че не спирам процеса на зареждане на HTML, за да изтеглите тези файлове. Можете да отлагате JavaScript файлове с атрибута Async или Defer, а за CSS можете да използвате конкретен код, за да го заредите след HTML. Външна система за оптимизация като Ezoic също може да се справи автоматично.

Как уеб разработчиците могат да се справят с препоръката на Google PageSpeed ​​за премахване на блокирането на JavaScript и CSS?

Уеб разработчиците могат да оптимизират сайта си, като минимират JavaScript и CSS файлове, като използват асинхронно зареждане за JavaScript, като вграждат критичните CSS директно в HTML и отлагане на зареждането на некритични CSS и JavaScript файлове. Прилагането на тези стратегии може значително да подобри времето за зареждане и оценките на страниците.

Perfect Chrome Lighthouse Резултат: Какво се случва?