Fix 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]) на веб-сайті, що збільшується з 51 балу на мобільному пристрої ( Рис. 1) до 72 (рис. 2), а також від 59 (рис. 3) до 79 на робочому столі (рис. 4).

Як усунути блокування ресурсів в WordPress

Щоб усунути ресурси, що блокують візуалізацію в WordPress, необхідно встановити плагін, наприклад JetPack.

Потім перейдіть до параметрів, для яких ви повинні бути адміністратором, і перейдіть до параметрів JetPack> Writing> Performance and Speed> check Увімкнути прискорювач сайту, прискорити час завантаження зображення, прискорити час завантаження статичних файлів і ввімкнути ліниве завантаження зображення.

Вивчіть основи SEO: зареєструйтесь сьогодні!

Підвищіть видимість та трафік вашого веб-сайту, освоюючи основи SEO за допомогою нашого курсу основних основ.

Почніть вивчати SEO

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

Крім того, не забудьте відкласти знімки завантаження зображень за допомогою функції ледачої навантаження. Хоча він був важким і вимагає зовнішньої бібліотеки, щоб відкласти знімки завантаження позашляховики, тепер це можливо в HTML5!

Щоб здійснити ліниве завантаження зображень на ваших веб-сайтах, просто додайте значення Lazy до атрибутів завантаження зображень вашого веб-сайту, а останні браузери зрозуміють, що ці зображення повинні бути запропоновані лише та завантажені, якщо вони відображаються, тобто, якщо користувач прокручує до заповнювачі зображення.

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

Крім того, ледачий навантаження також працює з IFrames, і є важливою реалізацією для усунення ресурсів блокування відтворюючих з ваших веб-сторінок.

Після того, як ресурси блокування рендеринга буде мати інструкції для завантаження після основного вмісту, тобто HTML DOM, ви вже заробляєте багато балів на тесті Google Lighthouse, тестування сторінки швидкості або веб-сайтів 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 або відстрочки, а для CSS ви можете використовувати конкретний код для завантаження його після HTML. Зовнішня система оптимізації, як Ezoic, також може впоратися з цим автоматично.

Як веб-розробники можуть звернутися до рекомендації Google PagesPeed щодо усунення блокувань на блокуванні JavaScrip та CSS?

Веб-розробники можуть оптимізувати свій сайт, мініфікуючи файли JavaScript та CSS, використовуючи асинхронне завантаження для JavaScript, вводячи критичні CSS безпосередньо в HTML та відкладаючи завантаження некритичних файлів CSS та JavaScript. Реалізація цих стратегій може значно покращити час завантаження та показники сторінки.

Perfect Chrome Lighthouse Оцінка: Що відбувається?