Оптимизируем скорость загрузки сайта – улучшаем ПФ и позиции

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

Как влияет скорость загрузки сайта на поведение пользователей? Еще в 2009 году команда Google проводила эксперимент – небольшой группе пользователей искусственно занизили скорость загрузки страниц выдачи на 100-400 м. Это сразу сказалось на их действиях – пользователи стали вводить меньше запросов, чем обычно. Более того, чем дольше они подвергались этому эксперименту, тем реже начинали обращаться к строке поиска.

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

Чем быстрее сайт, тем выше ПФ

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

Вам знакома ситуация, когда по конкурентному запросу сайт то попадает в ТОП-5, то откатывается на 10-20 позиций, и так много раз подряд? По весу и уровню оптимизации он даже лучше конкурентов, но обойти их и стабильно закрепиться в выдаче почему-то не получается. Причиной часто являются слабые показатели поведенческих факторов. В такой ситуации можно провести аудит юзабилити, поработать над интерфейсами и внутренней структурой, но иногда достаточно просто обратить внимание на скорость загрузки страниц сайта.

Мы провели свой эксперимент с одним сайтом по недвижимости.

Сократив время загрузки страниц с 6-7 до 3 секунд, мы получили:
– уменьшение показателя отказов с 44% до 40%;
– увеличение глубины просмотра с 3,5 до 5 страниц на посетителя;
– при этом среднее время на сайте не изменилось.

Снижение показателя отказов:

Рост глубины просмотра:

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

Как измерить скорость загрузки сайта?

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

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

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

Отчет по скорости загрузки в Google Analytics

Зайдите в Google Analytics – Поведение – Скорость загрузки сайта - Обзор:

Не пугайтесь, тут показана средняя скорость загрузки из разных стран, браузеров и девайсов. Обычно это в 2-3 раза выше, чем на вашем компьютере.

Скорость загрузки с разных браузеров

Проверить скорость загрузки с разных стран и браузеров можно на сайте Webpagetest.org. Вы получите данные по скорости при первом заходе и при повторном посещении, а еще детальный «водопад» процессов, из которых состоит сама загрузка вашей страницы:

На графике видно, что, запрашивая данные каждый раз с нового хоста, мы теряем время на DNS Lookup. А все java-скрипты блокируют параллельную загрузку остального контента. Тут же мы видим медленный DNS Lookup www2.acint.net – это счетчик Sape.ru (хорошо, что он стоит внизу и не блокирует вывод остального контента).

Favicon и изображения в рекламных блоках Яндекса с одной стороны повышают CTR объявления, с другой замедляют скорость загрузки сайта. Порой небольшая картинка в РСЯ может весить около 60 кб, хотя ее можно сжать до 10 кб. Задержки с загрузкой блоков РСЯ так же случаются, потому для скорости сайта лучше использовать блоки без картинок, ну и не забываем про асинхронную загрузку кода РСЯ.

Детальная таблица с затраченным временем на каждый элемент выглядит так:

Как происходит загрузка страницы

Чтобы начать оптимизировать скорость загрузки сайта нужно понимать сам процесс ее генерации. Что же происходит, когда вы набираете адрес сайта и жмете кнопку Enter?

1. От браузера идет DNS запрос. Так браузер узнает ip адрес, по которому можно найти ваш сайт. Потом идет TCP-запрос к серверу на соединение и ответ сервера разрешающий коннект (подробнее тут). Мы еще даже не начали ничего загружать, а уже потеряли 50-100 мс.

2. На сервере начинается генерация страницы сайта. Запускается выполнение PHP, считываются данные из MySQL-базы. Время процесса зависит от загрузки сервера на данный момент, его настроек и конфигурации, а так же от качества кода страницы. Оптимальным считается 200 мс, но часто этот показатель выше. Сгенерированный код пересылается браузеру.

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

4. Браузер отрисовывает страницу из полученных элементов и выполняет java-скрипты.

5 советов по оптимизации скорости загрузки страницы

1. Используйте параллельные загрузки. Браузеры могут загружать элементы сайта в несколько потоков. Одновременное число коннектов к одному хосту обычно не больше 6. Т.е. браузер не может одновременно скачивать более 6-ти объектов. Общее число соединений с разными хостами в Chrome ver.24 – 9, для Firefox ver.18 – 11. Если вынести картинки на отдельный поддомен, то у них будет возможность загружаться параллельно с элементами размещенных на других хостах. Но не увлекайтесь с поддоменами, на каждый новый поддомен добавится время на обработку DNS запроса.

2. Размещайте java-скрипты в конце кода страниц, так как они блокируют загрузку других элементов.

3. Используйте асинхронныый код при размещение внешних счетчиков. Модули и кнопки социальных сетей, счетчики, метрика, блоки РСЯ (особенно с картинками) – все это делает ваш сайт медленнее, а иногда и блокирует загрузку вашего сайта. Старайтесь размещать такие скрипты только с поддержкой асинхронной загрузки.

4. Сжимайте картинки. Думаете, ваши изображения хорошо сжаты? С помощью сервиса Сompressjpeg.com почти все картинки можно уменьшить на 60-70%, а это очень важно для мобильного трафика. Для уменьшения числа коннектов, лучше использовать спрайты для объединения картинок в одну.

5. Попробуйте работать с CDN. Это сети, хранящие отдельные элементы сайта (например, шрифты на fonts.gstatic.com, java-скрипты на ajax.googleapis.com, элементы Яндекса на yastatic.net и т.д). Такие сети призваны ускорить загрузку сайта, отдавая файлы с ближайшего геосервера, они не нагружают ваш сервер и уменьшают его трафик. Но целесообразность использования CND нужно проверять на своем сайте, порой получается обратный эффект. К примеру, одному из наших сайтов, шрифты c CDN подгружались дольше, чем со своего сервера.

Что еще нужно оптимизировать?

Получить готовый список рекомендаций по вашему сайту можно с помощью инструмента PageSpeed Insights for Chrome. Устанавливается в браузер, после чего находим его через меню: Дополнительные инструменты – Инструменты разработчика – Вкладка PageSpeed – Кнопка «Начать анализ».

Полезное видео про оптимизацию скорости загрузки сайта:
– Клиентская оптимизация, Иван Карев
– Оптимизация фронтенда, Олег Мохов
– Верстка. Вид снизу, Марина Широчкина

• Комментарии