Недавно я прочитал увлекательную статью Зиемека Буко, Очередь рендеринга: Google требуется в 9 раз больше времени для сканирования JS, чем HTMLв блоге Onely.

Бако описал проведенный ими тест, который показал значительные задержки перехода робота Googlebot по ссылкам на страницах, зависящих от JavaScript, по сравнению со ссылками в обычном текстовом HTML.

Хотя не стоит полагаться только на один такой тест, их опыт совпадает с моим. Я видел и поддерживал множество веб-сайтов, которые слишком сильно полагаются на JavaScript (JS) для правильной работы. Я ожидаю, что я не одинок в этом отношении.

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

Я помню несколько случаев телефонных звонков и электронных писем от разочарованных клиентов, которые спрашивали, почему их материалы не отображаются в результатах поиска.

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

Прежде чем мы пойдем дальше, я хочу уточнить, что это не «хит» по JavaScript. JS — ценный инструмент.

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

Но есть и другие причины задуматься рассудительно использовать JS вместо того, чтобы полагаться на него во всем.

Вот несколько историй из моего опыта, чтобы проиллюстрировать некоторые из них.

1. Текст? Какой текст?!

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

В течение недели после запуска нового сайта органический поисковый трафик упал почти до нуля, что вызвало понятную панику среди клиентов.

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

Моя команда провела оценку и предположила, что Google потребуется некоторое время для отображения страниц. Однако еще через 2-3 недели стало очевидно, что происходит что-то еще.

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

Вот когда «ага!» момент хит. По мере того как разработчик выполнял код строка за строкой в ​​своей консоли, я заметил, что текст каждой страницы загружался за пределы области просмотра с помощью строки CSS, но каким-то JS втягивался в видимый фрейм.

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

Фактический эффект слайда не был виден пользователям. Я предположил, что Google не смог уловить эффект слайда и не увидел содержание.

После того, как этот эффект был удален и сайт был просканирован повторно, количество трафика начало восстанавливаться.

2. Это слишком медленно

Это может быть несколько сказок, но я сведу несколько в одну. Платформы JS, такие как AngularJS и React, идеально подходят для быстро развивающихся приложений, включая веб-сайты.

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

Несколько страниц на одном веб-сайте, который я оценил, получили очень низкие оценки в инструменте Google PageSpeed ​​Insights (PSI).

Когда я копался в этом, используя отчет о покрытии в инструментах разработчика Chrome на этих страницах, я обнаружил, что 90% загруженного JavaScript не используется, что составляет более 1 МБ кода.

Если вы посмотрите на это со стороны Core Web Vitals, это составит почти 8 секунд времени блокировки, так как весь код должен быть загружен и запущен в браузере.

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

В то время как бывший разработчик во мне согласился с этой концепцией, SEO во мне не мог согласиться с тем, что очевидное негативное восприятие Google пользовательского опыта сайта могло снизить трафик из органического поиска.

К сожалению, по моему опыту, SEO часто проигрывает из-за отсутствия желания что-то менять после того, как оно запущено.

3. Это самый медленный сайт!

Как и в предыдущей истории, есть сайт, который я недавно просматривал, и который набрал ноль баллов в Google PSI. До того времени я никогда не видел нулевой балл. Много двоек, троек и единиц, но ни одного нуля.

Я дам вам три предположения о том, что случилось с трафиком и конверсиями этого сайта, и первые два не учитываются!

---

---

Иногда это больше, чем просто JavaScript

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

Я немного писал о них в двух предыдущих статьях:

Например, в моем втором рассказе задействованные сайты также имели тенденцию иметь избыточный CSS, который не использовался на большинстве страниц.

Итак, что должен делать SEO-специалист в таких ситуациях?

Решения подобных проблем требуют тесного сотрудничества между SEO, разработчиками и клиентами или другими бизнес-командами.

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

Начни с самого начала

Лучше всего встроить SEO в веб-сайт с самого начала. После того, как сайт запущен, изменить или обновить его в соответствии с требованиями SEO гораздо сложнее и дороже.

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

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

Будь учителем

Частью процесса является образование. Команды разработчиков часто должны быть проинформированы о важности SEO, поэтому вы должны рассказать им об этом.

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

Помогите им понять важность внедрения лучших практик SEO, понимая при этом их потребности и находя хороший баланс между ними.

Иногда полезно устроить ланч и поучиться и принести немного еды. Разделение еды во время дискуссий помогает разрушить стены — и в качестве взятки это тоже не повредит.

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

Для существующих сайтов проявите творческий подход

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

Часто команды разработчиков переходят к другим проектам, и у них может не быть времени, чтобы вернуться назад и «исправить» то, что работает в соответствии с полученными требованиями.

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

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

Вариантом этого является объединение рендеринга на стороне сервера с кэшированием содержимого HTML в виде простого текста. Это может быть эффективным решением для статического или полустатического контента.

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

Другими альтернативами, которые могут помочь, но не могут полностью решить проблемы со скоростью, являются минимизация и сжатие.

Минификация удаляет пустые места между символами, уменьшая размер файлов. Сжатие GZIP можно использовать для загруженных файлов JS и CSS.

Минификация и сжатие не решают проблемы времени блокировки. Но, по крайней мере, они сокращают время, необходимое для извлечения самих файлов.

Индексирование Google и JavaScript: что дает?

Долгое время я считал, что по крайней мере отчасти причиной того, что Google медленнее индексировал JS-контент, была более высокая стоимость его обработки.

Это казалось логичным, исходя из того, как я слышал это описание:

• Первый проход захватил весь простой текст.
• Второй проход был необходим для захвата, обработки и рендеринга JS.

Я предположил, что второй шаг потребует большей пропускной способности и времени обработки.

Я спросил Джона Мюллера из Google в Твиттере, справедливо ли это предположение, и он дал интересный ответ.

Из того, что он видит, Страницы JS не являются огромным фактором затрат. Что дорого в глазах Google, так это повторное размещение страниц, которые никогда не обновляются.

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

---

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

---