Удаление рендеринга, блокирующего JS и CSS, вызывающего проблему на моем сайте WordPress

Question

Я пытаюсь улучшить скорость моего сайта. Я использую PageSpeed ​​Insights, чтобы проверить производительность моего сайта, и он говорил мне, чтобы удалить блокировку визуализации java-скрипт и CSS. поэтому я сделал это и знаю, что вызывает проблемы в моем дизайне сайта. так что я должен сделать, чтобы снять блокировку рендеринга, не вызывая проблем в дизайне моего сайта.

Answer 1

Блокировка рендеринга CSS

Блокировка рендеринга CSS всегда будет отображаться на Google Page Speed ​​Insights, если вы используете внешние ресурсы для своего CSS.

Что вам нужно сделать, это встроить все своиСтили «выше сгиба» в тегах <style></style> в заголовке вашей веб-страницы.

Я предупреждаю вас, это НЕ просто, и плагины, которые утверждают, что это часто делают, не работают, это требует усилий.

Чтобы объяснить, что происходит: -

1. Пользователь переходит на ваш сайт, и начинается загрузка HTML.
2. По мере загрузки HTML браузер пытается выяснить, как правильно отобразить этот HTML, и ожидает стилизацию для этих элементов.
3. После загрузки HTML, если он не нашел стили дляэлементы, которые появляются над сгибом (начальная часть видимой страницы), затем не могут ничего визуализировать.
4. Браузер ищет ваши таблицы стилей и после загрузки может отображать страницу.

Точка 4. - это render blocking, так как эти ресурсы не позволяют странице отобразить начальный вид.

Для этого вам нужно обработать каждый элемент, который отображается без прокрутки страницы изатем найдите все стили, связанные с этими элементами, и вставьте их.

Блокировка рендеринга JS

Этот проще исправить.

Если вы можете использовать атрибут async на своем внешнем JS, используйте его.

Однако имейте в виду, что во многих случаях это приведет к поломке вашего сайта, если вы не разработалидля этого в первую очередь.

Это потому, что async будет загружать и выполнять ваши файлы JS как можно быстрее. Если для работы скрипта требуется другой скрипт (т.е. вы используете jQuery), то если он загружается раньше другого скрипта, он выдаст ошибку. (т. е. ваш файл main.js использует jQuery, но загружается до него. Вы вызываете $('#element'), и вы получаете ошибку $ is undefined, поскольку jQuery еще не загружен.)

Лучший тег для использования, если вы этого не сделаетеобладать знаниями, необходимыми для реализации async без ошибок, чтобы использовать вместо этого атрибут defer.

Это не приведет к загрузке сценария, пока HTML-код не завершит анализ. Однако он все равно будет загружать и выполнять сценарии в порядке, указанном в HTML.

Answer 2

Добавьте асинхронное в тег скрипта и поместите css и js в последнюю часть страницы