Исправить 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 или отложить на свои ссылки на скрипты. Async не гарантирует, что они загружаются в одну и ту же последовательность - поэтому, если у вас есть несколько сценариев, которые должны запускаться один за другим, отложить предпочтительнее, чтобы гарантировать последовательность:

Загрузить CSS после загрузки HTML

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

Чтобы оптимизировать ваш сайт, также хорошая идея удалить неиспользуемый код CSS, операции, которая может быть утомительной, если у вас нет знаний в веб-дизайне. Если вы не создали тему своего веб-сайта самостоятельно, может быть мудрее использовать внешнюю систему, чтобы удалить неиспользуемый CSS-код на ваших страницах от вашего имени, например, Ezoic Screp, например, новая (и совершенно бесплатная) версия их удивительного участка Скоростный ускоритель.

Пройдите тест скорости сайта Google!

Это позволило мне пройти тест  Google PageSpeed   ​​[1]. Ликвидируйте JavaScript-код и CSS-код с надстройкой поверх надстрочного контента (наряду с кэшированием браузера Leverage [4]) на веб-сайте, переходя от 51-го уровня на мобильном телефоне (см. Рис. 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 Lighthouse, тестируют тест на скорость страницы, или тестирование веб-сигналов Google Core.

Имейте внешнюю систему, чтобы оптимизировать ваш сайт для вас

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

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

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

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

Часто Задаваемые Вопросы

Как устранить JavaScript и CSS, блокирующий рендеринг в контенте?

Чтобы устранить JavaScript и CSS, блокирующие рендеринги, вы должны убедиться, что файлы JS и CSS вашего сайта загружаются после того, как HTML полностью загружен. Это означает, что не приостанавливает процесс загрузки HTML для загрузки этих файлов. Вы можете отложить файлы JavaScript с атрибутом Async или DEFE, а для CSS вы можете использовать определенный код для загрузки его после HTML. Внешняя система оптимизации, такая как Ezoic, также может обрабатывать это автоматически.

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

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

Идеальный балл хромированного маяка: что происходит?