Оптимизация для последнего обновления Google

1. Особенности дизайна
2. Используйте высокий контраст
3. Придерживайтесь одной колонки
4. Изображение и актив Ленивая загрузка
5. Сжатие изображения
6. Сжатие шрифтов
7. Измерение скорости загрузки страницы (и успеха)
8. В итоге

Не секрет что Последнее обновление скорости от Google В мире SEO много внимания уделялось важности скорости загрузки, как с точки зрения SEO, так и с точки зрения пользовательского опыта.

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

Последнее обновление скорости пришло в 2010 Там, где скорость загрузки сайта стала взвешенной переменной в рейтинге, и с учетом того, что мобильные пользователи обошли настольный компьютер в 2015 году, скорость загрузки страницы никогда не была далека от наших мыслей.

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

Неважно, чем быстрее, тем лучше. Источник изображения: Think With Google - Google / SOASTA Research, 2017.

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

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

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

Особенности дизайна

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

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

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

Используйте высокий контраст

Люди используют свои телефоны повсюду, и естественное освещение может затруднить просмотр низкоконтрастных дизайнов и контента (без необходимости увеличивать яркость до максимума, что приведет к разрядке батарей).

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

Придерживайтесь одной колонки

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

Изображение и актив Ленивая загрузка

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

Действительно хороший пример этого на практике UnSplash , В связанном примере я искал изображения компьютеров, и он загрузил более 3000 результатов. Ленивая нагрузка едва заметна, и вам нужно очень быстро прокрутить, чтобы поймать серый квадрат, прежде чем изображение протянется, что никак не повлияет на работу пользователя.

Сжатие изображения

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

Кроме того, если вы находитесь на WordPress, есть плагины, такие как Smush а также Kraken.io это может обрабатывать сжатие изображения без потерь.

Сжатие шрифтов

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

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

Google-х Илья Григорик собрать эти руководящие принципы на Оптимизация веб-шрифтов , но TL; DR :

• Укажите каждый шрифт в форматах WOFF2, WOFF, EOT и TTF. Обязательно применяйте сжатие GZIP к форматам EOT и TTF, поскольку они не сжимаются по умолчанию.
• Многие шрифты могут быть подмножеством или разбиты на несколько юникод-диапазонов, чтобы предоставить только те глифы, которые требуются конкретной странице. Это уменьшает размер файла и повышает скорость загрузки ресурса.
• Убедитесь, что ваши серверы предоставляют долговременную метку максимального возраста и маркер повторной проверки, чтобы обеспечить эффективное повторное использование шрифта между различными страницами. Если используется сервисный работник, уместна стратегия кэширования.

Измерение скорости загрузки страницы (и успеха)

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

Так какой из них вы должны использовать? По моему опыту, все они. В том числе Google Lighthouse Tool ,

Рекомендации Google по лучшей практике рекомендуют:

• Мобильные страницы загружают контент за 3 секунды или меньше
• Время до первого байта (TTFB) на мобильном веб-сервере составляет 1,3 секунды или меньше
• Среднее количество запросов на странице для мобильных устройств составляет 50 или менее
• Средний размер веб-страницы составляет 500 КБ или меньше

В итоге

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

Однако, если ваш сайт находится на отметке 3 секунды (или медленнее), вы увидите преимущества оптимизации сайта для более быстрой скорости загрузки.

Похожие

Комментарии