Fix Google PageSpeed ​​Усуньте рендер-блокування JavaScript та CSS у вмісті, що складається з верхнього краю



Вирішіть блокування візуалізації Javascript та CSS

Тест Google PageSpeed‌  ​​[1] Скасувати блокування рендер-блокування JavaScript та CSS у вищому розмірі пропонує вам надавати файли JS та CSS вашого сайту після повного завантаження HTML - і, отже, не призупиняти завантаження HTML завантажити їх.

[1] - PageSpeed ​​Insights - developers.google.com
Визначення сценарію, що блокує рендеринг: Сценарії, які завантажуються до аналізу повної 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 не гарантує, що вони завантажені в тій самій послідовності - отже, якщо у вас є кілька сценаріїв, які слід запускати одне за одним, то для забезпечення наступної послідовності рекомендується відкласти:

<script defer type="text/javascript" src="./js/mootools-more-1.4.0.1.js"></script>
[2] - Видалити JavaScript, що блокує рендеринг | PageSpeed ​​Insights | Хороші розробники - developers.google.com

Завантажте CSS після завантаження HTML

Щоб CSS завантажувався після повного перекладу HTML, Google пропонує [3] додати цей фрагмент коду в кінці вашого HTML, наприклад після тегу закриття нижнього колонтитула та перед тим, як тег закривається тегом:

</footer>
 <script>
 var cb = function() {
 var l = document.createElement('link'); l.rel = 'stylesheet';
 l.href = './style.css';
 var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
 };
 var raf = requestAnimationFrame || mozRequestAnimationFrame ||
 webkitRequestAnimationFrame || msRequestAnimationFrame;
 if (raf) raf(cb);
 else window.addEventListener('load', cb);
 </script>
</body>
[3] - Оптимізувати доставку CSS | PageSpeed ​​Insights | Хороші розробники - developers.google.com

Щоб оптимізувати свій веб-сайт, це також є гарною ідеєю, щоб видалити невикористовуваний код CSS, операцію, яка може бути нудною, якщо у вас немає знань у веб-дизайні. Якщо ви не створили тему веб-сайту самостійно, це може бути мудрішим використовувати зовнішню систему, щоб видалити невикористаний CSS-код на своїх сторінках від вашого імені, наприклад, Ezoic Leap, наприклад, нова (і абсолютно безкоштовна) версія їх дивовижного сайту Швидкість прискорювача.

Пройдіть тест швидкості на сайті Google!

Це дозволило мені пройти тест Google PageSpeed‌  ​​[1]. Вилучіть JavaScript та CSS, які блокують рендерування, у вмісті вищезазначеного вмісту (разом із кешуванням браузера Leverage [4]) на веб-сайті, що збільшується з 51 балу на мобільному пристрої ( Рис. 1) до 72 (рис. 2), а також від 59 (рис. 3) до 79 на робочому столі (рис. 4).

[4] - Виправлено використання кешування браузера Google PageSpeed ​​у htaccess - Йоанн Бірлінг, міжнародний консультант SAP / Web - www.ybierling.com

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

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

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

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

Як усунути блокування JavaScript і CSS на WordPress

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

Lazy Loading of Images: Зображення веб-сайтів вимагаються лише до сервера, коли користувач прокручує на веб-сторінці, і може їх відображати

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

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy Loading - Web Performance - мережа розробників Mozilla

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

Після того, як ресурси блокування рендеринга буде мати інструкції для завантаження після основного вмісту, тобто HTML DOM, ви вже заробляєте багато балів на тесті Google Lighthouse, тестування сторінки швидкості або веб-сайтів Google Core.

Попросіть зовнішню систему оптимізувати ваш веб-сайт для вас

Чи знаєте ви, що ви могли насправді вирішити всі проблеми Google PageSpeed‌  ​​від вашого імені без особливих зусиль на своєму веб-сайті - крім реєстрації на безкоштовну пробну версію та зміни свого DNS?

Використовуючи технологію платформи Ezoic Site Speed ​​Accelerator, всі звичайні проблеми Google PageSpeed‌  ​​будуть вирішені їхньою системою, яка буде посередником між вашим веб-сайтом та відвідувачами. Вони оптимізують веб-сторінку для вас, перш ніж показувати її відвідувачеві.

У квітні 2021 року Ezoic Pay Site Speed ​​Accelerator стане вільним EZOIC LEAP, а також допомагає веб-сайтам, що досягають основних веб-сайтів Vitals Green оцінки безкоштовно!

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

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

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





Подібні статті

Як змінити мову в Google?

Як змінити мову в Google?

Мова продуктів Google зазвичай можна змінити на будь-яку мову, доступну в Google, перейшовши в обліковий запис Google> дані та персоналізацію> загальні налаштування для веб-мови> мова за умовчанням, а також змінити мову за умовчанням на бажану.


Коментарі (8)

 2018-08-19  quranapk
Люблю читати ваш вміст, продовжуйте публікувати - це допомогло мені виправити виправлення, що блокує CSS
 2018-09-23  Monica
Ось як ми це робимо, чудово знати, як вирішити проблеми з блокуванням рендер-блокуючих ресурсів
Чудово, це саме те, що я шукав, тепер я готовий усунути ресурси, що блокують рендер, на мобільному
 2018-11-03  utumikaji0
Вражаюче, зараз мені пора спробувати і виправити усунення блокуючих рендеринг ресурсів!
Не знаю, як подякувати, але це чисто геній, дякую - це працювало на WordPress, щоб видалити ресурси, що блокують візуалізацію
 2019-04-21  Ludanulema
Привіт, я побачив вашу статтю, і це допомогло мені вирішити проблему, усунувши блокируючі рендеринг ресурси на PHP, дякую
 2019-06-12  animeg2Q
Я спробую зараз, дякую, що поділились цим виправленням виправлення блокуючих рендеринг ресурсів
 2019-07-02  Gasfackele
Для мене це добре працювало, не потрібно шукати далі, щоб усунути ресурси, що блокують рендер, на веб-сайті HTML

Залишити коментар