Чем дольше загружается веб-страница, тем больше вероятность, что посетитель не дождется конца загрузки и покинет ресурс. И уйдет куда-нибудь, где его не заставят ждать так долго. «Долго» — в понятии современного интернета, это больше 3 секунд.
Особенно критичным вопрос скорости загрузки сайта становится для тех пользователей, которые просматривают интернет через свой смартфон. Без оптимизации этого технического параметра ресурса все остальные действия по его SEO-продвижению и улучшению теряют смысл.
Специалисты Rubika предоставили свои рекомендации, как узнать скорость загрузки сайта, и что делать, если она оставляет желать лучшего.
Скорость загрузки и SEO
Косвенно, скорость, с которой загружается веб-страница, влияет на ее продвижение в поисковиках, в частности — в Google. Еще в 2010 году представители корпорации заявили о том, что скорость загрузки входит в список основных факторов ранжирования.
В 2017 году все стало еще серьезнее. Google выпустил свой поисковый алгоритм “mobile-first”. Он отслеживает наличие у вебсайтов адаптивной версии (и ее качество) для просмотра на мобильных устройствах, и да, скорость загрузки сайта тоже входит в список параметров, подлежащих проверке.
Исследования SOASTA за 2017 год подтверждают, что даже рост времени, за которое загружается страница, с 1 до 10 секунд увеличивает риск отказа на 127%.
Другие исследования, проведенные агентством Unbounce среди активных приверженцев покупок в интернете, показали, что 70% опрошенных станут сомневаться, совершать ли покупку в интернет-магазине, чей сайт загружался дольше, чем они того ожидали. В их сознании отложится информация, что это — медленный ресурс, и в дальнейшем они задумаются, стоит ли сюда возвращаться вообще.
Описанные данные показывают, что изучение информации, как увеличить скорость загрузки сайта, и работа над этим вопросом не пройдут зря. В первую очередь — в глазах пользователей. Ведь именно на их поведение ориентируется поисковый робот, определяя — стоит ли ресурсу быть в индексе в принципе.
Услуга | Сроки |
---|---|
Техническая оптимизация сайта | от 1 недели |
Продвижение сайтов (SEO) | от 3 месяцев |
Самостоятельная оптимизация скорости сайта
Иногда небольшой ревизии основных параметров хватает, чтобы увеличить скорость загрузки до 90%! Такое случается с веб-ресурсами, которые собирались некомпетентными фрилансерами, без глубокого знания процесса веб-разработки.
Для самостоятельной оптимизации скорости загрузки сайтов у их владельцев в распоряжении — множество специальных онлайн-сервисов, которые проведут технический аудит в автоматическом режиме и выдадут список ошибок и рекомендаций по их исправлению.
Одним из таких инструментов является PageSpeed Insights — специальный инструмент от Google. Но этот инстумент только открывает возможности для изучения данных. Вне зависимости от выбранного сервиса, чек-лист параметров, подлежащих оптимизации, будет примерно одинаков (его приведем в конце статьи).
Шаг 1. Очертите границы ускорения загрузки
Нужно определить, какая должна быть скорость загрузки сайта после всех оптимизационных мероприятий. Под этим подразумевается изучение всего объема изображений, иконок, изучение CSS и JS файлов.
Их придется пересмотреть, чтобы исправить в них ошибки, тормозящие загрузку страницы. Обычно, если сайт долго не появляется в окне браузера — это проблема слишком большого куска кода, который система не может прочитать быстро.
Для среднего ресурса, который делал обычный фрилансер или начинающий разработчик, характерна следующая ситуация:
- Скрипты находятся в разных файлах, которых много, и у них — сложная система приоритетов чтения. Верстка сайта плохо структурирована и плохо прослеживается вложенность элементов. Браузер долго обрабатывает все команды, переключаясь от документа к документу в поисках конечной, что становится причиной низкой скорости сайта (low pagespeed);
- Таблицы стилей CSS создавались разными верстальщиками, в разное время. В таких документах нет единой системы стилей, которая позволяла бы быстро прочитать таблицу. Отдельный кусок разметки был написан для какого-то особенного блока в неположенном месте (чем ниже прописано правило стилей — тем выше у него приоритет), и этого может быть достаточно, чтобы начать тормозить загрузку.
Когда таких ошибок в CSS- и JS-файлах немного, то снижение скорости загрузки по причине их наличия не заметно. Когда же на каждой странице есть блок с неправильно прописанными стилями или большое количество тяжелых скриптов с приоритетом обработки до того, как загрузится HTML-разметка — время, необходимое для загрузки страницы, начинает расти в кратном размере.
Шаг 2. Определите актуальную скорость загрузки
Сделать это можно с помощью того же Google PageSpeed Insights. Для первичной, общей проверки его достаточно.
Чтобы получить более подробную информацию, может воспользоваться инструментами:
- WebPagetest;
- GTmetrix.
С помощью этих сервисов вы можете проводить и дальнейшую работу по оптимизации, проверяя отдельные параметры. К тому же, можно использовать их статистику, чтобы проверить результаты скорости загрузки сайта, которые выдает PageSpeed Insights от Гугла.
WebPagetest и GTmetrix позволят посмотреть данные по доле ресурсов JS и CSS на сайте в процентах.
Дополнительно, у каждого есть свои особенности:
WebPagetest дополнительно показывает данные по запросам, тоже в графическом виде. Через него можно проверить, насколько верно была проведена работа по настройке .htaccess, посмотрев, какие файлы были сжаты методом GZIP;
GTmetrix показывает диаграмму загрузки файлов, вдобавок в отчетах об ошибках и предупреждениях предоставляет рекомендации, как каждую из ошибок оптимизировать.
Использование отчетов в Google Analytics
Для неопытного пользователя инструменты Google Analytics могут показаться сложными, и без двух-трех разъяснительных статей с инструкциями сложно понять, как ими пользоваться. Но для того гигант и снабдил свой аналитический комплекс подробными справками, чтобы, изучив их, пользователь смог открыть удобство сбора данных о своих ресурсах.
Конкретно для оценки скорости загрузки сайта, в GA есть одноименная группа отчетов. С их помощью можно определить, насколько быстро идет загрузка ресурса и как быстро он реагирует на команды посетителя. Этой статистики уже достаточно, чтобы провести минимальный комплекс по оптимизации сайта и, в дальнейшем, отслеживать изменения показателей.
Основные отчеты по скорости загрузки страниц в Google Analytics:
- Пользовательское время — скорость отклика ресурса на действие пользователя по типу действия и контента (клик, загрузка изображения, запуск видео, нажатие кнопки, переход и т.д.);
- Время загрузки страниц — сколько времени нужно странице, чтобы загрузиться. Имеется в виду, с помощью фильтров, можно проверить скорость загрузки сайта в разных странах;
- Хронометраж DOM — отдельный раздел в отчете “Время загрузки страниц” показывает, с какой скоростью браузер обрабатывает данные и выводит страницу на экран пользователя.
Как ускорить загрузку: чек лист по оптимизации
Приведем напоследок чек-лист, как самостоятельно оптимизировать скорость загрузки сайта путем настройки и исправления технических показателей.
Оптимизация изображений
- Картинки должны быть строго в том разрешении, которое нужно на странице. Это значит, что, если на странице картинка 640 на 480px — то нужно использовать именно в этом размере изображение, а не 800 на 600px и более;
- Объединяйте иконки в спрайты (единое изображение). Так браузер будет посылать меньше запросов на сервер;
- Сжимайте изображения. Специально для этого можно воспользоваться одним из онлайн-сервисов (например, TinyPNG, Kraken.io), которые могут сжать файлы JPEG, GIF, SVG и др. без потери визуального качества.
Количество запросов на сервер и оптимизация CSS/JS
- Уменьшение количества изображений, сведение однотипных в спрайты.
- Объединение CSS-файлов в один.
- Объединение или сведение к минимальному количеству всех JS-файлов.
- Уменьшение количества элементов с динамической загрузкой, чтобы снизить число запросов к базе данных.
- Реализация загрузки всех JS-скриптов и CSS-стилей в конце, после загрузки страницы.
Занимались SEO продвижением интернет магазина, улучшали удобство использования, добавляли новый функционал и скидки с акциями, но показатель отказов был высоким — не могли понять из-за чего. Потом проверили скорость загрузки и поняли что все дело в в этом! Спасибо за статью! 🙏🏻