7 подробных советов, как улучшить сайт

7 подробных советов, как улучшить сайт

Google любит технически совершенные сайты. Если вы хотите, чтобы ваши сайты ранжировались как можно лучше, вы должны усвоить основы и сделать все, что в ваших силах.

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

1. Оптимизация для мобильных устройств

Посещения с мобильных устройств составляют более 50% мирового веб-трафика. В таких странах, как США и Великобритания, это число ближе к 60 процентам. Даже до 2018 года наличие хорошего мобильного сайта было необходимостью, если вы хотели высоких конверсий.

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

Если вы хотите сделать свой сайт удобным для мобильных устройств или обновить существующий мобильный сайт, важно сделать это правильно. Есть три распространенных решения для мобильных сайтов:

– m.example.com – решение предполагает создание отдельного сайта с под доменом на «м.» и перенаправление туда мобильных пользователей

– Динамическая вёрстка – для каждого устройства создается отдельный дизайн сайта. Сервер загружает пользователю нужную, в зависимости от устройства, которое он использует

– Адаптивная вёрстка – создается и поддерживается только один набор HTML-кода, но он отображается по-разному в зависимости от размера экрана.

Хотя все три решения жизнеспособны, Google явно отдаёт предпочтение адаптивному методу.

Адаптивный дизайн имеет множество преимуществ. С точки зрения Google, это предпочтительнее, поскольку здесь нет переадресации.

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

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

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

2. Использование AMP (ускоренные мобильные страницы) для контента и рекламы.

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

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

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

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

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

Имея это в виду, моя команда и я изучаем возможности AMP для сайтов электронной коммерции и Google Рекламы. В настоящее время возможно – хотя и не широко – показывать AMP-контент с помощью текстовых объявлений Google, которые загружаются в Chrome и на устройства Android. Для этого просто введите AMP-URL целевой страницы в качестве мобильного URL-адреса объявления.

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

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

3. Скорость сайта

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

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

Есть несколько разных способов оптимизировать скорость сайта. Мы рассмотрим некоторые из них, разбив процесс загрузки страницы на четыре общие части:

  • Запрос, когда данные сайта запрашиваются с сервера
  • Ответ, когда сервер объединяет файлы, необходимые для создания веб-страницы
  • Сборка, когда браузер превращает данные с сервера в HTML и CSS DOM (объектную модель документа)
  • Рендеринг, когда браузер добавляет ресурсы, такие как таблица стилей или файл JavaScript.

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

Запрос – с использованием CDN и меньшего количества файлов

Сети CDN находятся между сервером и браузером, чтобы приблизить пользователя к таким ресурсам, как изображения, CSS и JavaScript. В некоторых случаях вы даже можете разместить весь сайт в CDN. Любимая сеть доставки контента нашей команды – Amazon Cloudfront; такое решение сокращает время запроса пользователя из любого места.

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

Ответ – кеширование и HTTP/2

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

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

Вы также можете использовать новейшие серверные технологии, такие как HTTP/2, для ускорения процесса. HTTP/2 позволяет передавать данные «в потоке», что означает, что сервер обрабатывает несколько запросов от браузера одновременно, а не обрабатывает их один за другим.

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

Сборка и рендеринг – оптимизация критического пути и асинхронная загрузка файлов

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

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

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

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

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

4. Понимание того, как Google сканирует (или не сканирует) JavaScript.

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

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

Сейчас существуют десятки популярных фреймворков JavaScript: Vue, React и Angular, и это лишь некоторые из них. Все они визуализируют контент одинаковым образом. Сторонники этого метода разработки утверждают, что он приводит к лучшему UX, и могут быть правы.

Однако Google не полностью согласен с этим. Известно, что JS-фреймворки создают проблемы для маркетологов поисковых систем, работающих как в обычном, так и в платном поиске. Мы знаем, что Google отображает JavaScript при сканировании иногда, но не всегда. Search Console теперь позволяет нам видеть, как выглядит страница при ее отображении роботом Googlebot, но мы знаем, что этого не происходит каждый раз, когда Google сканирует ваш веб-сайт.

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

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

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

5. Правильная настройка сайта для разных регионов

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

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

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

Google максимально помог маркетологам, предоставив метатег под названием «hreflang». Это тег в заголовке HTML страницы. Находится в элементе ссылки и содержит язык и страницу, которую должен увидеть пользователь, если он говорит на определённом языке.

В одном элементе также можно указать несколько языков. У Google есть страница поддержки по этой теме, где приводятся конкретные примеры реализации. Многие CMS теперь поддерживают hreflang «из коробки», поэтому нет причин не внедрять его, если вы ориентируетесь на международную аудиторию.

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

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

6. Распределение контента по разрозненным хранилищам

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

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

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

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

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

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

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

7. Обзор старого контента и стратегий.

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

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

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

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

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

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