Остановите то, что вы делаете, откройте Chrome и перейдите к инструменту Lighthouse - он вам понадобится

Еще в мае 2020 года Google объявил, что «основные жизненно важные показатели» скоро станут сигналом ранжирования в поисковых системах. Это означает, что веб-сайты с хорошими основными жизненно важными показателями могут оказаться выше тех, у которых их нет.

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

Давайте познакомим их:

  • Самая большая Contentful Paint (LCP): это время, необходимое для загрузки страницы. Это когда основное содержимое страницы завершило рендеринг в области просмотра (области, которую может видеть пользователь).
  • Задержка первого ввода (FID): это промежуток времени с момента первого взаимодействия пользователя с элементом для его ответа.
  • Накопительный сдвиг макета (CLS): это измерение элементов, которые перемещаются при загрузке страницы. Хороший пример - когда страница загружена, и когда вы нажимаете на что-то, она перемещается.

Итак, что дает мне право писать это?

Я веб-разработчик более 12 лет и за эти годы реализовал множество советов по SEO. Недавно я отправился на миссию, чтобы получить идеальную оценку Lighthouse и подошел довольно близко, но несколько вещей продолжали бить меня по лицу - и именно этими маленькими кусочками информации я хочу поделиться с вами. Я сохранил его на максимально высоком уровне, так как существует множество способов решения проблемы, и я не хочу ограничивать свои советы одной технологией.

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

Давайте посмотрим, в каких типичных случаях наш веб-сайт будет нас подводить, когда в игру вступит Google Core Vitals (GCV).

Начните с анализа

Когда я впервые запустил свой текущий веб-сайт WordPress через Lighthouse, он был сильно красным и немного напоминал сцену с лифтом из The Shining.

Для тех из вас, кто не знает, что такое Lighthouse, это лучший вариант, когда вы открываете Инструменты разработчика в Chrome и позволяет запускать тесты на своем веб-сайте, чтобы увидеть, как растет ваш GCV. Проще говоря, зеленый - это хорошо, оранжевый - лучше, а красный - плохо. Очень плохой.

После того, как мой веб-сайт стал красным из-за производительности (который более или менее охватывает все в GCV), я немного заплакал. Как, черт возьми, я собирался это исправить, когда заметил 30 файлов CSS и JavaScript для неслыханных плагинов?

К счастью, Lighthouse дает вам полезную и подробную информацию о том, что правильно и что неправильно. Прочтите, усвойте и подумайте, как это исправить. Некоторые из них будут казаться простыми. В других частях вы даже не поймете, о чем идет речь и с чего начать. Здесь вам пригодятся ваши отличные навыки мастера Google.

Протестируйте свой сайт в Lighthouse прямо сейчас. Думаю, вы будете неприятно удивлены.

Сведите к минимуму использование JavaScript и CSS

Это состоит из двух частей:

  • Один из них - это уменьшение количества файлов с блокировкой рендеринга при загрузке страницы.
  • Другой - убедиться, что загружены только необходимые CSS и JavaScript. Сортировка обоих поможет с LCP и FID.

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

Вторая часть немного сложнее, поскольку GCV будет наказывать вас за загрузку ненужных JavaScript и CSS. Здесь возникает мысль: «Зачем вы загружаете его, если он не используется и тратит драгоценное время на загрузку страницы?»

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

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

Но это не все мрак и мрак.

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

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

Используйте отложенную загрузку с WebP

В отложенной загрузке изображений нет ничего нового. Это был один из основных способов улучшить время загрузки веб-сайта в течение многих лет. Но добавьте к этому формат Google WebP, и вы получите отличное сочетание, поскольку изображения WebP могут быть на 26% меньше по размеру диска, чем PNG.

Вот краткое объяснение для тех, кто не слышал о WebP:

WebP - это современный формат изображений, который обеспечивает превосходное сжатие без потерь и с потерями для изображений в Интернете. Используя WebP, веб-мастера и веб-разработчики могут создавать более мелкие и насыщенные изображения, которые ускоряют работу в Интернете . - Разработчики Google

Концепция отложенной загрузки заключается в использовании заполнителя для элемента, а затем, когда этот элемент требуется на экране, он вызывает изображение в заполнитель. Например, если у вас есть десять изображений на странице, два могут быть видны только при загрузке страницы, так зачем загружать остальные восемь? Ленивая загрузка - обычно выполняется с помощью JavaScript - втягивает оставшиеся восемь, когда вы прокручиваете страницу вниз, уменьшая LCP, поскольку вы загружаете только нужную информацию.

При отложенной загрузке учитывайте, что заполнитель имеет область заданного размера. Это поможет свести к минимуму CLS, о чем, конечно, не стоит расстраиваться. WebP также не работает во всех браузерах (например, в более старом Safari), поэтому обязательно используйте резервный вариант PNG / JPEG с использованием HTML-тега <picture>.

Вы даже можете пойти дальше и отложить загрузку других вещей, которые могут повредить вашей LCP, например, Google Map, поскольку Google Maps сильно ухудшает вашу оценку производительности.

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

Проверьте свой сервер

Никакие настройки, позволяющие сэкономить время, не спасут вашу LCP от медленного сервера.

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

Отсутствие достаточной вычислительной мощности, ОЗУ или медленного жесткого диска (то есть не SSD) может быстро замедлить работу вашего сайта. Обязательно загляните на свой сервер, если ваш сайт по-прежнему загружается не так быстро, как вы предполагали.

Остерегайтесь программного обеспечения Google

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

На моем веб-сайте используются самые популярные продукты Google, такие как Карты, Аналитика и AdSense, но, благодаря Google, все три были сильно окрашены в красный цвет.

Ленивая загрузка решила проблему с картами, но как насчет двух других?

Диспетчер тегов Google, который сейчас используется для стандартной Google Analytics, разрушает мою LCP, поскольку файл JavaScript для него такой большой, и его много не требуется. Частичное решение этой проблемы - использовать исходный код JavaScript Google Analytics и предварительно загрузить домен с помощью <link href="//www.google-analytics.com" rel="preconnect" />. Если вы используете Диспетчер тегов для других целей, решить эту проблему будет сложнее.

AdSense - своего рода зверь, поскольку он запрашивает изображения и другие файлы для создания рекламы, которую он обслуживает (я не смог найти решения для этого, поэтому, если он у вас есть, поделитесь им в комментариях). Но я начал задаваться вопросом, перевешивает ли доход, который я получал от AdSense, преимущества фантастического показателя GCV. Я решил, что это так. AdSense составляет большую часть моего дохода, и терять его из-за одержимости попытками успокоить Google казалось неразумным. Преимущество здесь в том, что если GCV действительно станет важной частью рейтинговой системы Google, я смогу быстро отключить AdSense и снова воспользоваться всеми преимуществами моего тяжелого труда.

Заключение

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

Как видите, три основные идеи бережливого производства прекрасно сочетаются с обновлением GCV:

  • Обеспечение ценности для клиента = лучший пользовательский опыт.
  • Устранение отходов = Использование только кода и файлов, которые нужны сайту.
  • Непрерывное улучшение = GCV естественным образом способствует улучшению.

Обновление Google - это больше, чем просто «новый сигнал SEO». Это состояние души, и кажется, что дни использования любого старого фреймворка или плагина для выполнения работы будут постепенно исчезать.

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

Конкуренция в выдаче Google никогда не была такой жесткой, и если ваш бизнес полагается на достойный рейтинг, GCV должен стать жизненно важной частью вашего SEO.

У вас есть прекрасная возможность превзойти своих конкурентов. Не тратьте зря.