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

Хотя эстетика веб-сайта важна, его содержание и скорость загрузки заставляют людей возвращаться на него снова и снова. WordPress предоставляет пользователям сложный набор плагинов и тем для быстрого создания собственных веб-сайтов.

Однако для работы этих тем и плагинов требуется JavaScript (JS) и каскадные таблицы стилей (CSS). WordPress создает их автоматически в виде файлов сценариев. Часто они плохо оптимизированы. Таким образом, они могут значительно замедлить работу вашего сайта.

Это может разочаровать читателей. Таким образом, в этом руководстве мы рассмотрим, как найти и удалить эти скрипты, блокирующие рендеринг, и покажем вам, как увеличить скорость загрузки вашего веб-сайта WordPress.

Что такое скрипты JS и CSS, блокирующие рендеринг, и почему они плохие?

Большинство веб-страниц в Интернете состоят из трех ключевых компонентов: JavaScript, CSS и языков гипертекстовой разметки. В качестве основы используется HTML, а в него встроены JavaScript и CSS. Однако в наши дни более привычно встраивать вызовы внешних скриптов в HTML-документ.

Эти сценарии хранятся в очереди, которую ваш веб-браузер использует для отображения веб-страницы. Самый простой способ увидеть, какие сценарии использует веб-страница, не глядя на исходный код, — загрузить его из веб-браузера (Ctrl + S). Веб-браузер загрузит HTML-документ вместе с папкой со всеми (или большей частью) сценариями, изображениями и другими файлами, которые использует веб-страница.

Чем более сложные скрипты ваша веб-страница должна вызывать из очереди, тем больше времени потребуется для рендеринга. Часто веб-браузеры загружают ресурсы веб-страницы, такие как сценарии и изображения, в локальный кеш, чтобы быстрее загружать веб-страницы. Хотя пользователи на стороне клиента могут ускорить отрисовку веб-страницы, отключив JavaScript, увеличив размер кэша и используя блокировщики рекламы, это не идеальное решение. Ответственность должна лежать на веб-разработчике.

Если вы получаете жалобы или заметили, что на вашем сайте есть проблемы с отображением контента, еще не поздно это исправить.

Как оптимизировать свой веб-сайт, найдя и исправив скрипты, блокирующие рендеринг

Прежде чем решить, какие сценарии прекратить или оптимизировать, вы должны оценить скорость своего веб-сайта или веб-страницы. Вы можете использовать онлайн-платформу, такую ​​как GTmetrix или Google PageSpeed ​​Insights. Все, что вам нужно будет сделать, это вставить URL-адрес веб-сайта или веб-страницы, которую вы хотите протестировать, и инструмент оценит ее и предоставит другие сведения.

Они также предложат аудиты, которые вы можете использовать, чтобы сделать ваш сайт быстрее. Например, они предложат вам использовать меньше элементов на вашей веб-странице или уменьшить количество неиспользуемых CSS и JavaScript. GTmetrix покажет вам, какие скрипты нужно оптимизировать.

Кроме того, вы можете использовать вкладку «Покрытие» Chrome DevTools, чтобы показать данные об использовании ваших скриптов. Как только вы определите, какие сценарии неоптимальны, вы можете сделать несколько вещей, чтобы исправить их. Однако эти шаги потребуют немалого мастерства кодирования для их успешной реализации. Вам потребуется хотя бы базовое понимание функционального программирования на JavaScript.

Присоединение к учебным курсам по кодированию (или буткемпу) также является хорошей идеей для дальнейшего развития ваших навыков. В среднем, учебный курс по программированию может занять до пятнадцати недель, и хотя это может показаться долгим, оно того стоит, если учесть, насколько важным навыком в современном мире является базовая грамотность кода. Тем не менее, вот пять способов исправить скрипты, блокирующие рендеринг, и увеличить скорость вашей веб-страницы.

1. Оптимизируйте порядок загрузки

Раздел заголовка (</head></head> ) веб-страницы используется для предварительной загрузки элементов. Здесь должна находиться основа вашей веб-страницы, чтобы белый экран не приветствовал пользователя при загрузке вашей веб-страницы. Хотя встроенный CSS — это хорошо, вам следует избегать размещения здесь JavaScript.

После того, как вы оптимизировали головную часть, вам нужно оптимизировать тело. Большинство веб-браузеров отображают веб-страницы сверху вниз. Вам нужно упорядочить вызовы скриптов в соответствии с их важностью и сложностью. Вы должны размещать вызовы сценариев, которые не имеют решающего значения для рендеринга веб-страницы, последними вместе со сложными сценариями, которые требуют времени.

2. Сократите код

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

Плагины и инструменты, такие как W3TC, имеют модули, которые минимизируют JavaScript и CSS в ваших темах. Кроме того, вы можете вручную минимизировать код скрипта с помощью бесплатного онлайн-инструмента, такого как JavaScript Minifier.

3. Используйте отложенную и асинхронную загрузку JavaScript

Веб-браузеры читают код сверху вниз. Когда они сталкиваются с тегом сценария, они перестают загружать веб-страницу и читают файл сценария. Это замедляет рендеринг.

Вы можете использовать атрибут async для загрузки сценария параллельно с веб-страницей и выполнения его, как только он станет доступен. Кроме того, вы можете использовать атрибут defer , чтобы отложить синтаксический анализ скриптов. Это означает, что он также будет загружать скрипт параллельно веб-странице, но выполняет его только тогда, когда браузер анализирует веб-страницу.

Мы советуем вам не использовать атрибуты async или defer в сценариях, используемых для рендеринга и отображения визуальных элементов. Ключевые слова JavaScript, эквивалентные этим атрибутам, — ключевые слова async и await . Вы можете использовать их для более асинхронной загрузки Javascripts без редактирования тегов HTML на вашей веб-странице.

4. Замените визуальные элементы JavaScript на CSS3

В прошлом CSS не был таким универсальным, как сегодня. Например, в CSS 1.0 и 2.0 не было таких инструментов пользовательского интерфейса, как основные элементы управления и ползунки.

Затем появился CSS 3. Он представил новые цвета, тени, непрозрачность и т. д. JavaScript отлично подходит для добавления сложных элементов управления пользовательского интерфейса. Однако Javascript требует больше ресурсов, чем CSS.

Таким образом, использование чрезмерного количества JavaScript значительно замедляет работу вашего сайта. Если вы заметили, что ваша веб-страница использует JavaScript, чтобы восполнить пробелы, в которых предыдущие версии CSS не удались, вам следует изменить его и заменить весь ненужный JavaScript на CSS — там, где это возможно. Это позволит веб-страницам загружаться быстрее.

5. Удалите все ненужные скрипты

Цель JS и CSS — расширить функциональность веб-страниц и добавить логику там, где HTML не может. Однако в HTML 5.3 появились новые теги, которые сделали некоторые операции CSS и JS ненужными. Использование HTML вместо сценариев естественным образом ускоряет загрузку веб-страниц.

Таким образом, лучший способ оптимизировать скорость вашего веб-сайта — удалить все недоиспользуемые скрипты. Вам нужно будет проанализировать, какие скрипты совершенно не нужны, и удалить их. Опять же, вы можете использовать вкладку Coverage Chrome DevTools или GTmetrix, чтобы найти наиболее недоиспользуемые скрипты на вашей веб-странице, а затем удалить их.

Как только вы удалите все ненужные функции или теги, вы сможете комбинировать скрипты, функции которых схожи. Если вы уже знаете, как обращаться с исходным кодом вашей веб-страницы, то это не должно быть для вас сложной задачей. Тем не менее, пользователи, которые не так опытны или не разбираются в веб-дизайне, не должны беспокоиться. WordPress упрощает идентификацию скриптов на вашем веб-сайте и их редактирование с помощью различных плагинов оптимизации. Мы рассмотрим их далее.

6. Использование плагинов для оптимизации вашего сайта WordPress

Опять же, вам не нужны практические знания программирования для оптимизации вашего веб-сайта WP. Хотя некоторый опыт не помешал бы. Тем не менее, существует ряд плагинов, предназначенных для оптимизации скриптов. Некоторые из них используют ИИ для минимизации кода, изменения порядка загрузки и замены малоиспользуемых скриптов более эффективным кодом и скриптами.

Некоторые из лучших плагинов для оптимизации скриптов включают в себя:

• WP Rocket : это один из самых популярных плагинов для веб-оптимизации. Он может автоматически определять проблемные сценарии и исправлять их для вас. Вы можете использовать его для быстрого кэширования, уважения, сжатия и минимизации.
• Автооптимизация : это может отложить и исключить несущественные скрипты, интегрировать встроенный CSS и минимизировать скрипты, HTML и изображения. Autoptimize легко настраивается благодаря открытому API и расширенным параметрам.
• W3 Total Cache : для использования этого плагина требуется немного работы. Вам нужно будет отслеживать и идентифицировать сценарии вручную, прежде чем удалять или редактировать их. В большинстве случаев этот плагин уже доступен в вашем пакете WordPress.
• Async Javascript : плагин с открытым исходным кодом, представленный WordPress. Это позволяет вам обнаруживать JavaScript, блокирующий рендеринг, а затем откладывать его или асинхронно загружать.

Так почему же мы сразу не порекомендовали плагины? К сожалению, некоторые из этих плагинов будут стоить вам денег. Например, Autoptimize стоит 49 долларов в год. Хотя это разумная плата, она может быть неидеальной для людей, которые уже платят большие деньги за хостинг и другие приложения и плагины.

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