Исправить Google PageSpeed Устранить блокирование визуализации JavaScript и CSS в надстрочном содержимом
- Решить блокировку рендера Javascript и CSS
- Устранение JavaScript и CSS, блокирующих рендеринг, в содержимом верхней части страницы: покажите, как это исправить
- Отложите загрузку файлов Javascript
- Загрузить CSS после загрузки HTML
- Пройдите тест скорости сайта Google!
- Как устранить ресурсы, блокирующие рендеринг в WordPress
- Имейте внешнюю систему, чтобы оптимизировать ваш сайт для вас
- Часто Задаваемые Вопросы
- Идеальный балл хромированного маяка: что происходит? - video
- Комментарии (8)
Решить блокировку рендера Javascript и CSS
Тест Google PageSpeed [1] «Исключить блокирование рендеринга JavaScript и CSS в вышеописанном содержимом» предлагает вам доставлять файлы JS и CSS вашего сайта после полной загрузки HTML - и, следовательно, не приостанавливать загрузку HTML для их загрузки.
[1] - PageSpeed Insights - developers.google.comОпределение сценария блокировки отрисовки: сценарии, которые загружаются до того, как будет проанализирована полная HTML DOM. Например, скрипты, включенные в заголовок или в контент, без каких-либо конкретных инструкций для браузеров по задержке загрузки скрипта до завершения HTML-рисования.
Устранение JavaScript и CSS, блокирующих рендеринг, в содержимом верхней части страницы: покажите, как это исправить
- Попросите внешнюю систему оптимизировать ваш сайт для вас
- Используйте CDN, который будет выполнять все возможные оптимизации от вашего имени, включая три следующих оптимизации, необходимых для устранения ресурсов, блокирующих рендеринг:
- Отложить загрузку файлов Javascript
- Загрузить CSS после загрузки HTML
- Используйте плагин 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 не гарантирует, что они загружаются в одну и ту же последовательность - поэтому, если у вас есть несколько сценариев, которые должны запускаться один за другим, отложить предпочтительнее, чтобы гарантировать последовательность:
[2] - Убрать JavaScript, блокирующий рендеринг | PageSpeed Insights | Хорошие разработчики - developers.google.comЗагрузить CSS после загрузки HTML
Чтобы CSS загружался после передачи полного HTML, Google предлагает [3] этот фрагмент кода добавить в конце вашего HTML, например, после тега закрытия нижнего колонтитула и перед тегом закрытия тела:
[3] - Оптимизация доставки CSS | PageSpeed Insights | Хорошие разработчики - developers.google.comЧтобы оптимизировать ваш сайт, также хорошая идея удалить неиспользуемый код CSS, операции, которая может быть утомительной, если у вас нет знаний в веб-дизайне. Если вы не создали тему своего веб-сайта самостоятельно, может быть мудрее использовать внешнюю систему, чтобы удалить неиспользуемый CSS-код на ваших страницах от вашего имени, например, Ezoic Screp, например, новая (и совершенно бесплатная) версия их удивительного участка Скоростный ускоритель.
Пройдите тест скорости сайта 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> Запись> Производительность и скорость> установите флажок Включить ускоритель сайта, ускорить время загрузки изображений, ускорить статическую загрузку файлов и включить отложенную загрузку для изображений.
Создание главного веб -сайта: Зарегистрируйтесь сейчас!
Превратите свое цифровое присутствие с помощью нашего комплексного курса создания веб -сайтов - начните свой путь к тому, чтобы стать экспертом по веб -сайту сегодня!
Зарегистрируйтесь здесьЭто устранит ресурсы блокирования рендеринга в WordPress и ускорит загрузку страниц, позволяя JetPack оптимизировать ваши изображения и обслуживать ваши изображения и статические файлы (такие как CSS и JavaScript) из их глобальной сети серверов.
Как устранить блокировку рендеринга JavaScript и CSS на WordPressКроме того, не забудьте отложить загрузку изображений без экрана, используя функцию ленивой нагрузки. Хотя раньше было трудно и потребовать внешней библиотеки, чтобы отложить загрузку изображений вне экрана, теперь можно втазоваться в HTML5!
Чтобы реализовать ленивую загрузку изображений на ваших сайтах, просто добавьте значения ленивые атрибуты Загрузка изображений вашего сайта, а последние браузеры поймут, что эти изображения должны быть запрошены только и загружены, если они отображаются, означает, что если пользователь прокручивается до заполнители изображения.
<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Ленивая погрузка - веб-производительность - сеть разработчиков MozillaКроме того, ленивая загрузка также работает с 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.
Идеальный балл хромированного маяка: что происходит?
Yoann Bierling - профессионал в области веб -публикации и цифрового консалтинга, оказавший глобальное влияние на экспертизу и инновации в области технологий. Увлеченные расширением прав и возможностей отдельных лиц и организаций для процветания в цифровую эпоху, он стремится обеспечить исключительные результаты и стимулировать рост посредством создания образовательного контента.
Создание главного веб -сайта: Зарегистрируйтесь сейчас!
Превратите свое цифровое присутствие с помощью нашего комплексного курса создания веб -сайтов - начните свой путь к тому, чтобы стать экспертом по веб -сайту сегодня!
Зарегистрируйтесь здесь