Как удалить JS и CSS, блокирующие рендеринг?
Здравствуйте, друзья!
Надеюсь вы соскучились по новым темам о самом известном движке — WordPress?
Сегодня поговорим немного о скорости загрузки сайта.
Хотя эстетика веб-сайта важна, его контент и скорость загрузки заставляют людей возвращаться.
WordPress предоставляет пользователям сложный набор плагинов и тем для быстрого создания своих собственных веб-сайтов.
Однако для работы этих тем и плагинов требуется JavaScript (JS) и каскадные таблицы стилей (CSS).
WordPress создает их автоматически в виде файлов сценариев.
Часто они плохо оптимизированы.
Таким образом, они могут значительно замедлить работу вашего сайта.
Это может расстраивать читателей.
Таким образом, в этом руководстве мы рассмотрим, как найти и удалить эти сценарии блокировки рендеринга, и я покажу вам, как увеличить скорость загрузки вашего веб-сайта WordPress.
Что такое скрипты JS и CSS с блокировкой рендеринга и почему они плохи?
Большинство веб-страниц в интернете состоит из трех основных компонентов: JavaScript, CSS и языка гипертекстовой разметки — HTML.
HTML служит базой, а в него встроены JavaScript и CSS.
Однако в наши дни более привычно встраивать вызовы внешних скриптов в HTML-документ.
Эти сценарии хранятся в очереди, которую ваш веб-браузер использует для отображения веб-страницы.
Самый простой способ узнать, какие сценарии использует веб-страница, не глядя на исходный код — это загрузить их из веб-браузера (Ctrl + S).
Веб-браузер загрузит HTML-документ вместе с папкой со всеми (или большей частью) скриптами, изображениями и другими файлами, которые использует веб-страница.
Чем сложнее скрипты, которые ваша веб-страница должна вызывать из очереди, тем больше времени потребуется на рендеринг.
Часто веб-браузеры загружают ресурсы веб-страницы, такие как сценарии и изображения, в локальный кеш, чтобы быстрее загружать веб-страницы.
Хотя пользователи на стороне клиента могут ускорить отрисовку веб-страницы, отключив JavaScript, увеличив размер кеша и используя «AdBlockers», это не идеальное решение.
Ответственность должна лежать на веб-разработчике.
Если вы получили жалобы или заметили, что на вашем веб-сайте возникают проблемы с отображением контента, еще не поздно исправить это.
Как оптимизировать ваш сайт, найдя и исправив скрипты блокировки рендеринга?
Прежде чем решить, какие скрипты остановить или оптимизировать, вы должны оценить скорость своего веб-сайта или веб-страницы.
Вы можете использовать онлайн-платформу, такую как 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 вместо скриптов естественным образом ускоряет загрузку ваших веб-страниц.
Таким образом, лучший способ оптимизировать скорость вашего сайта — это исключить все недостаточно используемые скрипты.
Вам нужно будет проанализировать, какие скрипты совершенно не нужны, и удалить их.
Опять же, вы можете использовать вкладку «Охват» Chrome DevTools или GTmetrix, чтобы найти на своей веб-странице наиболее малоиспользуемые скрипты, а затем удалить их.
Удалив все ненужные функции или теги, вы можете комбинировать сценарии с похожими функциями.
Если вы уже знаете, как обходить исходный код своей веб-страницы, то это не должно быть для вас сложной задачей.
Однако пользователям, которые не так опытны или не разбираются в веб-дизайне, не стоит беспокоиться.
WordPress упрощает идентификацию скриптов на вашем веб-сайте и их редактирование с помощью различных плагинов оптимизации.
Мы рассмотрим их дальше.
6. Использование плагинов для оптимизации вашего сайта WordPress
Опять же, вам не нужны практические знания программирования для оптимизации вашего веб-сайта WP.
Хотя некоторый опыт помог бы.
Тем не менее, существует ряд плагинов, предназначенных для оптимизации скриптов.
Некоторые из них используют ИИ для минимизации кода, изменения порядка загрузки и замены недостаточно используемых скриптов более эффективным кодом и скриптами.
Некоторые из лучших плагинов для оптимизации скриптов включают в себя:
- WP Rocket: это один из самых популярных плагинов для веб-оптимизации. Он может автоматически определять, какие скрипты проблематичны, и исправлять их за вас. Вы можете использовать его для быстрого кеширования, обработки, сжатия и минификации.
- Autoptimize: это может отложить и исключить несущественные скрипты, интегрировать встроенный CSS и минимизировать скрипты, HTML и изображения. Autoptimize легко настраивается с помощью открытого API и расширенных параметров.
- W3 Total Cache: этот плагин требует некоторой работы для использования. Вам нужно будет вручную отслеживать и идентифицировать скрипты, прежде чем удалять или редактировать их. В большинстве случаев этот плагин уже доступен в вашем пакете WordPress.
- Async Javascript: плагин с открытым исходным кодом, представленный WordPress. Он позволяет обнаруживать JavaScript, блокирующий рендеринг, а затем откладывать его или асинхронно загружать.
Так почему же мы вообще не порекомендовали плагины?
К сожалению, некоторые из этих плагинов будут стоить вам дорого.
Например, Autoptimize стоит 49 долларов в год.
Хотя это разумная плата, она может быть неидеальной для людей, которые уже платят большую часть денег за хостинг и другие приложения и плагины.
Тем не менее, независимо от того, используете ли вы плагины или ищите скрипты вручную, вам необходимо понимать такие концепции, как минификация, асинхронная загрузка и порядок загрузки.
Это упростит вам поиск и устранение любых проблем с загрузкой в случае сбоя одного из ваших скриптов.
Заключение
Если вы действительно серьезно относитесь к повышению производительности своего сайта, вам просто нужно приложить усилия, чтобы ваш сайт загружался быстрее.
В этом посте я показал, как устранить ресурсы, блокирующие рендеринг — Javascript и CSS.
Кроме того, мы пошли дальше, чтобы показать вам несколько плагинов, которые вы можете использовать для решения этой проблемы: W3 Total Cache, Autoptimize и так далее.
Скорость загрузки — один из многих факторов, влияющих на СЕО сайта.
Таким образом, сосредоточение внимания исключительно на нем и игнорирование других факторов может не дать вам желаемых результатов.
В этом нашем руководстве по СЕО мы обсудили шаги – в дополнение к повышению скорости загрузки – которые вы можете предпринять, чтобы повысить рейтинг вашего сайта.
Я рекомендую вам ознакомиться с ним.
А у меня сегодня для вас все — до скорых встреч и берегите себя!
"Как удалить JS и CSS, блокирующие рендеринг?"
- Создание сайта на WordPress (31)
- WordPress для начинающих (22)
- Блог на WordPress (19)
- CMS Wordpress (16)
- Плагины Wordpress (16)
- WordPress SEO (15)
- Безопасность WordPress (12)
- Услуги More WP (1)
- Пожалуйста. Фигмой тоже можно, отличный графический редактор, но сервисы подойдут для все, так как не все смогут задизайнить картинку а редакторе. В общем главное чтоб было удобно и результативно :)
- Еще можно пользоваться Figma для того чтобы сделать нужные размеры. Спасибо вам за сервис по генерации иконок, не знал что пачкой можно сразу для всего сделать.
- Всегда пожалуйста, очень рад, что вам помогло :)
- Спасибо за материал! Даже такой полный чайник, коим я себя считаю, нашла ответы на свои проблемы с сайтом.
- Sitemap.xml сейчас в WP автоматически делается, правда работает не всегда. А для html карты использую обычно WP Sitemap Page, как по мне самый лучший он. И стараюсь как то оживить если можно так выразиться, https://sverchokcorm.ru/sitemap/ тут например пару картинок добавил)
- Спасибо, мне действительно помогло. Написано подробно и понятно, для непрограммистов идеально.
Всегда пожалуйста, очень рад, что вам помогло 🙂
Спасибо за материал! Даже такой полный чайник, коим я себя считаю, нашла ответы на свои проблемы с сайтом.