Вы, вероятно, получили уведомления от Google о том, что ваш сайт теперь подлежит индексированию с приоритетом мобильных устройств. Но что этот жаргон, посвященный основам SEO, означает для вас как для маркетолога?
Мы начнем с краткой истории, но если вы уже это знаете, смело забегайте вперед.
Цель Google - предоставлять наиболее релевантные ответы и ресурсы для поисковых запросов с минимальными затратами на просмотр с вашей стороны. Они хотят, чтобы ответ на ваш запрос был первым в результатах поиска. Кто-нибудь видел избранные фрагменты? - и они будут продолжать совершенствовать свой алгоритм, чтобы добиться этого.
(Здесь вы можете ознакомиться с некоторыми последними обновлениями и изменениями Google.)
Первоначально Google сканировал веб-сайты в формате настольного компьютера и ранжировал их на основе определенных критериев. Это имело смысл, поскольку большинство людей просматривали Интернет со своего рабочего стола, на полноразмерном компьютере или ноутбуке.
В современной SEO-средевсе больше поисковых запросов осуществляется на мобильных устройствах, поэтому ранжирование на основе версии сайта для настольных компьютеров не дает наиболее релевантных и полезных результатов.
Перейдите к левому этапу, вышеупомянутому индексированию с приоритетом мобильных устройств и времени загрузки страницы.
Как время загрузки страницы влияет на индексацию с приоритетом мобильных устройств
Время загрузки страницы - один из основных показателей, которые Google использует при ранжировании сайта. И хотя настольная версия вашего сайта может нормально загружаться на настольном устройстве со стандартным подключением к Интернету, с мобильными устройствами дела обстоят совсем иначе.
Несмотря на то, что мобильные устройства часто выглядят элегантно и пользуются повышенным спросом, они по-прежнему гораздо менее мощны и работают в более медленной сети с меньшим разрешением просмотра и более короткими онлайн-сессиями.
Короче говоря, люди, которых вы пытаетесь охватить, получают доступ к вашему веб-сайту с помощью более простого и менее надежного оборудования и сетей, чем мы привыкли. Именно это нам сейчас и нужно оптимизировать, а учитывая, насколько привередливыми могут быть мобильные сети, быстрая загрузка страниц имеет ключевое значение.
Стоп. Возможно, в этот момент вы почувствуете искушение бежать к своей команде разработчиков, но пока не стоит этого делать.
Вы можете подумать, что ваши разработчики должны справиться с этой задачей самостоятельно, но вы как маркетолог можете многое сделать.
Чтобы помочь вам, я расскажу вам:
- Бенчмаркинг и некоторые базовые термины, которые вам нужно знать;
- Где узнать время загрузки вашей страницы (и узнать, индексирован ли ваш сайт на мобильных устройствах);
- Советы и рекомендации, которые следует учитывать при создании контента и страниц;
- Перенос вашего мышления с настольного компьютера на мобильный; и
- Некоторые технические подробности сканирования (и повторного сканирования) вашего сайта.
Во-первых, что такое «быстрая» загрузка страницы?
Краткий ответ:менее трёх секунд - данные Google, прямо из уст
К сожалению, средняя целевая страница мобильного устройства загружается за 22 секунды. Ой.
Сокращение времени загрузки страницы - это не просто тщеславный показатель. Каждая секунда имеет значение, потому что чем дольше загружается страница, тем выше будет ваш показатель отказов и тем хуже будет ваш рейтинг.
Время загрузки более трех секунд увеличивает вероятность отказов более чем на 30%. Когда вы достигнете шести секунд, это значение превысит 100%.
Итак, хотя права на ошибку не так много, есть много возможностей для улучшения. И это хорошо,
Хорошо, а что маркетологи могут сделать со временем загрузки?
Прежде чем мы перейдем к этому, есть несколько терминов, концепций и фактов, которые вам нужно знать в первую очередь:
HTML-документ
Каждая веб-страница по сути представляет собой текстовый документ, который веб-браузер читает и преобразует в более удобный формат - обычно. Три основных тега HTML-документа:
- тег, в который попадает все остальное;
- тег, более информативный для браузера, но содержит некоторую отображаемую информацию, например заголовок страницы; и
- тег, все, что вы обычно видите и с чем взаимодействуете.
Заголовок и метаданные
В верхней части каждого HTML-документа должно быть несколько специальных тегов, которые сообщают браузеру и веб-сканерам некоторую информацию о странице. Если у вас их нет, вам следует их добавить, но это уже другая тема.
Структура разметки
На вашей странице должен быть такой
тег в качестве основного заголовка, обычно связанного с заголовком или темой страницы. Затем последовательные теги заголовков
через
следует использовать для разделения страницы, при этом более важными являются меньшие числа. Теги заголовков должныnot использоваться для выделения, так как это может сбить с толку как поисковых роботов, так и людей
Время до первого байта (TTFB)
Это время, которое требуется браузеру персонажа (например, телефону вашего пользователя), чтобы получить первый объем информации с сервера. Обычно это более технический аспект, но его важно понимать, чтобы вы знали, нужно ли вам обсудить это со своим разработчиком или изучить новый хостинг/серверы.
Robots.txt
Этот файл сообщает роботам и сканерам, которые заходят на сайт, какую информацию можно или нельзя читать и выполнять. У вас может быть целевая страница, которая должна отображаться только при клике по объявлению, а не в результатах поиска. Или вы можете запретить сканеру переходить по любой/всем ссылкам на странице.
Карта сайта
Этот файл сообщает поисковому роботу обо всех страницах вашего сайта. Если на определенные страницы нет ссылок нигде на вашем сайте, сканер не сможет их найти. Рекомендуется отправлять карту сайта в Google через консоль поиска (но об этом чуть позже).
Как начать улучшать время загрузки страницы
Теперь, когда вы готовы биться головой о стену, давайте перейдем к самому хорошему!
Узнайте время загрузки страницы
Существует ряд инструментов, которые могут сообщить вам время загрузки и другие сведения о каждой странице, и я рекомендую использовать как минимум два, чтобы вы могли получить более полную картину. Вот несколько моих любимых:все они бесплатны:
Google’s PageSpeed Insights
Проверено и верно, это лучшее место для начала. Проверьте ссылку и получите рекомендации по улучшению как на мобильных устройствах, так и на настольных компьютерах. Google также ссылается на ресурсы, если вы не знаете, как их улучшить, хотя они, как правило, носят немного технический характер.
Проверьте мой сайт Google (ориентировано на мобильные устройства)
Этот инструмент похож на PageSpeed, но ориентирован на мобильные устройства. Он также не имеет такого количества деталей, как другие, поэтому лучше сочетать его с другим инструментом. Но это легче всего понять.
WebPageTest.org
Фантастическое решение для получения подробной информации о вашей странице, времени загрузки, ресурсах, времени, необходимом для получения информации с сервера, - практически обо всем, что вы хотите знать. И вы можете выбрать, на каком типе устройства и соединения это будет основано, чтобы вы могли специально ориентироваться на мобильные устройства с более медленными соединениями. Это может быть немного неприятно для глаз, но вам придется не обращать на это внимания.
GTmetrix
Это нечто среднее между PageSpeed Insights и WebPageTest. Дает вам много информации и ссылки на ресурсы, если вы хотите копнуть глубже. Это мой любимый инструмент для увеличения скорости страницы.
Если вы не можете установить все обновления самостоятельно, ничего страшного
Некоторые обновления вы сможете сделать, а по поводу остальных вы узнаете больше, когда в следующий раз поговорите с разработчиками.
Узнайте, индексируется ли ваш сайт на мобильных устройствах
Чтобы найти это, вам понадобится доступ к консоли поиска Google вашего сайта. Из Search Console можно получить гораздо больше информации, но сейчас вы ищете в Сообщениях что-то вроде этого:
Если ваша консоль выглядит по-другому, возможно, вам придется проверить старую версию Search Console - новая версия в настоящее время находится в стадии бета-тестирования, и хотя она выглядит хорошо, она еще не обладает 100% функциональностью. Посмотрите в левом нижнем углу боковой панели.
Уменьшение времени загрузки страниц в мире, ориентированном на мобильные устройства
Я думаю, можно с уверенностью сказать, что мы установили, что мобильные устройства – это настоящее – Да, Морган, я знал об этом, когда писал в этой статье… – и что нам нужно думать «в первую очередь мобильные устройства», а не «также мобильный».
Так как же это сделать как маркетологу?
1. Уменьшите количество запрашиваемого контента на странице
Помните, мы говорили о HTML-документе? Сам документ представляет собой просто текст и не содержит изображений, видео или аудио, а только ссылку на каждый из этих медиа-элементов. Каждый раз, когда браузер читает одну из этих ссылок, ему приходится запрашивать медиаданные откуда-то еще. Чем больше запросов делает ваша страница, тем больше времени потребуется на ее загрузку.
Разработчики могут помочь улучшить эту ситуацию, но в целом вы хотите, чтобы на страницу запрашивалось меньше контента. Google рекомендуетменее 50 запросов на страницув качестве наилучшей практики.
“Пфф. Это легко.
Нет, в эти 50 входят все запросы на вашей странице. Таблица стилей? Минимум один запрос (часто больше). Джаваскрипт? Гораздо больше, чем один. Та причудливая вещь, которую вы хотели, чтобы ваши изображения делали во время прокрутки? Еще один файл javascript. Google Analytics или Менеджер тегов? Код отслеживания HubSpot? Мета пиксель? Скорее всего, у большинства из нихтакже будут запросы.
Итак, у вас есть несколько способов сократить время загрузки.
Используйте только изображения и видео, которыенужны. Каждый раз, когда вы думаете о добавлении медиа, подумайте, действительно ли это ценно для страницы.
Да, на рабочем столе оно выглядит великолепно, но вызывает ли изображение у пользователя нужные эмоции? Объясняет ли это что-то лучше, чем одно или два предложения? Если этого не происходит на мобильных устройствах, вы зря тратите место и время загрузки страницы.
Вот почему так много сайтов используют градиентные цвета, пустое пространство и анимацию на основе браузера. Он по-прежнему выглядит великолепно, но с точки зрения технической нагрузки требует гораздо меньше затрат.
2. Уменьшите размер контента на странице
ОК, вы сократили запрашиваемый контент до того, что наиболее ценно для страницы. Теперь нам нужно уменьшить общий размер страницы (т.е. содержимое на странице). Рекомендации Google рекомендуютстраницы иметь размер менее 500 КБ.
Это немного сложнее. Тем более, что последняя фотография, сделанная вами на телефоне, может быть больше этой.
Иногда у хостера вашего веб-сайта или поставщика услуг есть какая-то серверная технология, которая может помочь в этом, но чем больше вы можете сделать заранее, тем лучше работа, которую он сделает для вас.
Во-первых, убедитесь, что изображения имеют подходящее разрешение. Поскольку изображения 4K и фотографии высокого качества в наши дни стали очень популярны, мы часто забываем, что экран, отображающий эти пиксели, зачастую значительно меньше.
Поговорите со своими разработчиками о том, как отображать изображения разного размера для разных размеров экрана. Да, ширина экрана 1920 пикселей отлично смотрится на рабочем столе, но это слишком для телефона с шириной экрана всего 415 пикселей.
«Но, Морган, у меня нет Photoshop, чтобы получать изображения разного разрешения».
Не надо! В Интернете есть множество бесплатных инструментов, но вы даже можете использовать базовое приложение предварительного просмотра на своем компьютере Mac или Windows. Если вы не знаете, как это сделать, может помочь быстрый поиск в Google по запросу «[название ОС] изменить размер изображения».
Как только изображение будет уменьшено до меньшего разрешения, вам нужно будет его сжать. Сжатие немного снижает качество (обычно на ваше усмотрение) и приводит к уменьшению размера файла.
Хорошее эмпирическое правило - поддерживать качество на уровне 80%. Обычно это незаметно для человеческого глаза (или, во всяком случае, довольно близко) и приводит к достаточно хорошему увеличению размера файла. Это можно настроить, но начните с этого.
Опять же, в Интернете есть множество бесплатных инструментов для этого. Вы также можете приобрести относительно недорогой инструмент для большего контроля (я использую Squash на своем Mac).
Подожди, а что насчет видео?
Хороший вопрос. Если вам это сойдет с рук, преобразование более короткого видео в GIF приведет к значительной экономии размера файла. Этого движения или объяснения может быть достаточно, чтобы заинтересовать и донести суть.
Очевидно, что это работает не во всех случаях, но делайте это везде, где можете.
Для видео, которые невозможно конвертировать в gif, используйте видеохостинг. Это может быть что-то столь же мощное, как Vidyard, или даже просто YouTube. Хотя для этого требуется запрос (с учетом общего количества запросов), он не загружает полный видеофайл, пока посетитель его не просмотрит, поэтому вы экономите ценный размер файла при начальной загрузке страницы.
Есть золотая середина: вы можете конвертировать видео в GIF (или выбранную часть видео в GIF) и использовать это в качестве заполнителя, который ссылается на полное видео. Опять же, вам нужно убедиться, что вы не увеличиваете загрузку страницы слишком сильно.
3. Минимизируйте количество «дополнительных материалов» на странице
Хотя это звучит как соображения разработчика, важно понимать и иметь возможность вносить изменения и предложения, когда это возможно. И да, технически это подпадает под сокращение запросов, но вы не всегда сможете внести изменения здесь.
Подумайте обо всех дополнительных возможностях, которые добавляются на ваш сайт. Некоторые из них мы обсуждали ранее, например, Google Analytics, отслеживание HubSpot и мета-пиксель. Некоторые из них необходимы маркетологу, и их не следует удалять.
Но есть ли места, куда можно вставить код? Может быть, это призыв к действию или чат-сервис? Если вы используете Wordpress, они могут быть в виде плагинов. Регулярно проверяйте свои плагины и убедитесь, что вы не используете больше, чем вам нужно.
Особое внимание следует уделить видимым дополнительным функциям, поскольку браузеру необходимо отобразить их для завершения загрузки страницы.
4. При необходимости измените макет мобильного устройства
Как часто вы проверяете мобильную версию страницы перед ее публикацией? Отображаются ли изображения, видео и текст так, как вы ожидаете? Как выглядит первый экран при загрузке страницы?
Если у вас есть возможность, скройте часть лишнего контента на мобильном устройстве. Если у вас сейчас нет такой возможности, поговорите со своим разработчиком, чтобы узнать, возможно ли это.
По своей природе мобильная и настольная версии вашей страницыдолжнывыглядеть по-разному. И это нормально. Сжатие пальцев для масштабирования ушло в прошлое при загрузке страницы по умолчанию.
Старайтесь, чтобы начальный экран был простым и понятным. Если происходит слишком много всего (это означает, что загрузка, вероятно, требует больше времени), попробуйте переделать это во что-то более простое. Фон, немного текста и действие. Это может быть сложнее, но старайтесь упростить ради мобильных устройств, если у вас нет особой причины.
5. Проверьте и попросите Google повторно просканировать ваш сайт после внесения изменений
После внесения некоторых изменений снова протестируйте свою страницу, используя приведенные выше инструменты.
Когда вы будете готовы, вы можете попросить Google повторно просканировать ваш сайт, чтобы отслеживать все обновления. Google сделает это автоматически через некоторое время - если сканер сможет найти страницу, поэтому вам может понадобиться новая карта сайта! Опять же, есть о чем посоветоваться с разработчиками.
Вернитесь в консоль поиска Google и перейдите к инструменту проверки URL-адресов. Введите URL-адрес страницы, которую вы хотите переиндексировать, и все готово! Это займет. Вот более подробное описание того, как индексация проходит как можно более гладко.
Если у вас больше нескольких страниц, загрузите карту сайта.
Видите, мобильность в первую очередь не так уж и страшна
К этому моменту вы должны лучше понимать, какие элементы влияют на время загрузки страницы и как его можно улучшить. Очевидно, что многое зависит от используемых вами инструментов и вашей команды разработчиков, однако вы можете поделиться с ними еще некоторыми техническими изменениями, чтобы сократить время загрузки.
Даже если вы не можете вносить изменения на каждую страницу, вам следует лучше понимать, какие вопросы задавать, чтобы убедиться, что ваш контент оптимизирован, а ваши разработчики думают о том, что наиболее важно для вашей мобильной аудитории.
Насколько вы можете улучшить время загрузки страницы?
Прокрутите несколько страниц с помощью приведенных выше инструментов тестирования, выберите ту, которую можно улучшить, и попытайтесь внести некоторые изменения. Каждая секунда улучшения времени загрузки означает больше шансов на более высокий рейтинг.
Что еще более важно, это означает, что кто-то с большей вероятностью останется на вашей странице и будет потреблять ваш контент. Миссия выполнена.