Почему это важно
Время загрузки сайта - один из важнейших показателей, влияющий на поведение пользователей сайта. Давайте разбираться.
Снижение скорости загрузки страницы на 1 секунду влечет за собой:
- уменьшение числа просмотров на 11%;
- снижение показателя удовлетворенности пользователя на 16%;
- уменьшение конверсии до 6%.
Ниже представлен график, отражающий рост процента закрытых страниц вследствие увеличения времени загрузки сайта.
Пара лишних секунд времени загрузки сайта уменьшают шансы заинтересовать посетителей и осуществить продажи.
KISSmetrics провела исследование на тему того, как скорость загрузки сайта сказывается на поведении пользователей и покупателей:
- 47% пользователей ожидают, что страница откроется меньше чем за 2 секунды;
- 40% пользователей закрывают сайт, если он загружается дольше 3 секунд;
- 79% покупателей, которые остались недовольными удобством сайта, скорее всего, не будут покупать через него в дальнейшем;
- 44% интернет-покупателей расскажут своим знакомым о сайтах, которые их не удовлетворили.
Ускоренная загрузка сайта особенно важна для пользователей, заходящих на сайт с мобильных устройств. А так как сейчас доля мобильного трафика постоянно растет, то на ускорение на мобильном нужно сделать особый акцент.
Терпение пользователей мобильного интернета
Увеличение скорости загрузки сайта как способ увеличить конверсию
Время загрузки сайта влияет на конверсию. Рассмотрим на примере сети Walmart.
Зависимость показателя конверсии от времени загрузки страницы
Здесь мы видим, что чем выше скорость загрузки страницы, тем больше показатель конверсии.
По итогам Walmart выявило, что уменьшение времени загрузки страницы на секунду способствует повышению конверсии до 2%.
Влияние оптимизации загрузки сайта на органический трафик
В 2010 году Google заявил, что будет учитывать скорость загрузки сайтов при ранжировании результатов поиска.
Причина, по которой поисковым системам необходимо это делать, достаточно очевидна. Если поисковик будет предлагать вам “медленные” сайты, вы, скорее всего, будете реже им пользоваться.
Поэтому важно уменьшить время загрузки сайта, чтобы ваш сайт был в выдаче выше конкурентов.
Обобщая вышесказанное делаем вывод, что ускорение сайта приводит к:
- росту конверсии;
- снижению показателя отказов (процентное соотношение количества посетителей, покинувших сайт прямо со страницы входа или просмотревших не более одной страницы сайта);
- подъему в поисковых системах.
20 способов как ускорить загрузку сайта
1. Сократить число HTTP запросов
Согласно исследованиям компании Yahoo, большая часть времени при загрузке страницы тратится на загрузку изображений, файлов стилей и скриптов.
Для загрузки каждого такого файла создается отдельный HTTP запрос. Чем больше таких запросов, тем больше времени проходит до момента полной загрузки страницы.
Проверить, сколько HTTP запросов генерируется, можно очень просто - воспользоваться панелью разработчика браузера.
Рассмотрим процесс на примере браузера Google Chrome.
Первым шагом мы заходим на анализируемую страницу, правой кнопкой кликаем по любой пустой области страницы и выбираем в контекстном меню пункт “Просмотреть код”. В нижней части экрана откроется панель Chrome DevTools. Переходим во вкладку Network и перезагружаем страницу. Мы видим список всех запросов, статусы их ответов и время загрузки файлов.
2. Объединить и минифицировать CSS и JS-файлы
Теперь, когда мы знаем, сколько запросов генерируется, мы можем приступить к их уменьшению.
Самый простой способ сократить количество запросов - объединить и минифицировать (сжать) HTML, CSS и JavaScript файлы. Правильнее всего поставить эту задачу разработчикам. Если нет такой возможности, можно попробовать сделать это самостоятельно.
Открываем любой текстовый редактор, вставляем в него содержимое всех используемых css-файлов в том порядке, в котором они подключаются в шаблоне. Далее, воспользовавшись любым сервисом минификации (например, CSSminifier), сжимаем код.
В результате у нас сокращается число запросов, а из финального кода удаляются незначимые для интерпретатора символы (пробелы, табы, переносы строк и т.п.).
3. Реализовать асинхронную загрузку CSS и JS
Все мы привыкли загружать CSS файл в HTML посредством вставки тега
Однако не все куски кода настолько критичны, что их следует загружать сразу. Например, на сайте есть редко используемый компонент сравнения товаров. Имеет смысл подгружать стили и js-код для него непосредственно в тот момент, когда пользователи захотят воспользоваться таким функционалом.
Реализовать асинхронную загрузкуу CSS и JS часто под силу только профессиональным разработчикам. Отметим лишь то, что смотреть нужно либо в сторону использования значения preload атрибута rel в совокупности с атрибутом onload, либо подгружать стили js-скриптом.
4. Настроить отложенную загрузку javascript-кода
Чтобы понять, что такое отложенная загрузка javascript-кода для начала разберем, как это происходит обычно. В стандартном режиме javasсript файлы прерывают парсинг HTML-документа до тех пор, пока все такие файлы не будут получены и выполнены.
Часто нам требуется вставить какой-нибудь не особо значимый виджет социальных сетей в подвал сайта. Для нас неважно, появится ли он на странице сразу или спустя пару секунд.
Чтобы реализовать отложенную загрузку, а точнее обработку, такого скрипта, нам всего навсего необходимо прописать атрибут defer тегу <script>.
5. Ускорить получение первых байтов (TTFB)
TTFP - первый байт, полученный от страницы. Время получения такого байта - один из фактором ранжирования страницы поисковиками, требующий к себе внимания.
К сожалению, без навыком серверного администрирования, улучшить этот показатель невозможно. Можем лишь посоветовать использовать качественный и проверенный хостинг либо обратиться к нам за помощью.
6. Сократить время ответа сервера
Совет, скорее, для профессионалов backend-разработки. Однако чтобы вы смогли таким правильно поставить задачу программистам, не ошибившись с бюджетом, объясним вам, что будет делать профессионал своего дела.
Если кратко, то необходимо провести анализ всех запросов к базе данных. Найти и исправить ошибки. Оптимизировать код запросов к базе данных и избавиться или переписать плагины, написанные малоопытными разработчиками.
7. Выбрать оптимальные опции хостинга под запросы пользователей
Какой бы оптимизированный код у вас не был на сайте, с ростом числа пользователей скорость работы сайта будет медленно падать. Поэтому очень важно правильно подобрать тип и опции хостинга.
Для небольших сайтов компаний и визиток подойдет самый простой виртуальный хостинг (shared hosting). Для интернет-магазинов, порталов - VPS/VSD. Для сайтов с большой посещаемостью нужно смотреть в сторону выделенных физических сервером (Dedicated server).
8. Провести анализ сжатия страниц
В протоколе HTTP, используемом в мировой паутине, предусмотрена возможность сжатия передаваемой информации для экономии трафика и увеличения скорости загрузки данных. Большинство современных браузеров поддерживает метод gzip.
Проверить, включен ли у вас на сайте gzip, можно, воспользовавшись любым предложенным поисковиком сервисом по запросу “gzip test”.
9. Включить сжатие страниц
После того, как вы убедились, что сжатие выключено, то как можно быстрее ставим задачу на разработчиков. Если уверены в своих силах, можете поискать решение в интернете. Чаще всего, вам предложат прописать в файл .htaccess нечто подобное:
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>
Советовать использовать такое решение не будем, скажем лишь то, что здесь все не так просто, как может изначально показаться. Поэтому не рискуйте и обратитесь к нам за помощью.
10. Настроить параметры кэширования
Что такое кэширование? Объясним на примере. Пусть каждый день ваш ребенок спрашивает у вас, сколько ему лет. Вы можете каждый раз пересчитывать возраст на основе даты рождения либо один раз посчитать и использовать это число постоянно в качестве ответа, корректируя данные в каждый день рождения.
Так же и с сайтом: не всегда нужно при каждом открытии страницы генерировать тысячу запросов к базе данных. У вас интернет магазин чайников, цены на которые обновляются раз в год. Очевидно, что не стоит каждый раз проводить ресурсоемкие серверные вычисления, чтобы просто вывести цены к каждому чайнику. Достаточно сохранить эту информацию в статичном файле и настроить ее автоматическое обновление раз в год.
Это и есть настройки параметры кэширования. Сделать это можно либо в настройках используемой вами CMS либо в файле .htaccess.
11. Сжать все изображения и видео
Если на сайте располагает большое количество изображений и видео, имеет смысл сжать их. Сделать это можно либо в любом графическом редакторе, либо в онлайн-сервисах, которые в интернете в последнее время становится все больше.
12. Использовать CDN
CDN (или Content Delivery Network) - это сеть доставки контента. Если коротко, то принцип работы заключается в следующем. Сайт размещается на серверах, находящихся в различных местах мира. В зависимости от того, где находится конечный пользователь, информацию он получает с того ли иного сервера - лучшего по комплексному показателю, в котором важную роль играет географическое положение.
Использование возможностей CDN не сильно ударит по кошельку, но внесет весомый вклад в конечную цель. Тем более в рамках техподдержки мы подробно расскажем, как подключиться к сети максимально выгодно.
13. Использовать облачные сервисы
Данный пункт касается видео и других больших по весу материалов на сайте. Чтобы не загружать лишний раз ваш сервер, такие документы желательно размещать в облачных сервисах:
- видео на Youtube/Vimeo;
- файлы для загрузки в Dropbox/Yandex Disk/Google Drive
В большинстве случаев это бесплатно.
14. Сократить число inline-стилей
Задача для разработчиков. Очень часто встроенные в CMS визуальные редакторы грешат тем, что создают “грязный код”, в котором стили элементам задаются inline-методом в атрибуте style. Так, например, на странице будет несколько элементов:
<p style="color: red; font-size: 16px; font-weight: bold">Внимание! Важное объявление</p>...<p style="color: red; font-size: 16px; font-weight: bold">...
Вес страницы увеличивается, скорость обработки браузером уменьшается. Правильнее использовать css-классы. В итоге у нас должно получиться:
<p class="b-attention">Внимание! Важное объявление - 1</p>
...
<p class="b-attention">Внимание! Важное объявление - 1</p>
...
15. Реализовать отложенную загрузку изображений, видео, iframe и контента
Если на странице большое количество тяжеловесных элементов, то имеет смысл загружать их непосредственно перед моментом их использования. По аналогии с онлайн-видео - мы же не ждем каждый раз загрузку всего видео, мы ждем загрузку небольшого фрагмента и запускаем видео. Далее постепенно будет подгружаться все остальное.
Сделать это нужно для изображений, видео, iframe, а иногда и для текста (например, в случае сайта онлайн-библиотеки). Как это сделать - тема отдельной статьи.
16. Провести анализ кода и сократить число используемых плагинов
Очень часто неопытные разработчики для реализации одной единственной всплывающей подсказки на сайте подгружают целый плагин, используя одну из сотен возможностей библиотеки, то есть стреляют из пушки по воробьям. А если этот плагин использует другие библиотеки (зависимости), то на сайте появляется огромная куча неиспользуемого кода.
Стоит провести анализ кода сайта и уменьшить число редко используемых плагинов. Например, всплывающую подсказку можно реализовать, написав несколько строк на чисто Javascript либо вообще реализовав это средствами CSS.
17. Уменьшить число редиректов
Без редиректов часто не обойтись. Например, если у нас изменился адрес страницы, мы прописываем 301-й редирект, чтобы пользователи смогли открыть страницу по старой ссылке (в поисковиках ссылки обновляются не сразу).
Однако каждый такой редирект прилично увеличивает время загрузки страницы. Если 1-2 редиректа еще позволительно, то большее число крайне негативно сказывается на скорости загрузки.
Необходимо пройтись по всем редиректам на сайте и оптимизировать эти цепочки.
18. Сократить число внешних скриптов
Добавление кнопки “Поделиться” и т.п. в различных соцсетях дело хорошее. Однако нужно помнить, что для добавления каждой из них мы подключаем внешние скрипты Вконтакте, Facebook, Instagram и т.д. Это дополнительные запросы к разным серверам. Мы уже рассказывали, что необходимо как минимум реализовать их отложенную загрузку. Однако бывают ситуации, когда это невозможно.
Например, многие использую внешние скрипты, которые добавляют на сайт новые шрифты (например, Google). Несмотря на то что сам Google предупреждает, насколько снижается скорость загрузки сайта, многие неопытные разработчики добавляют шрифты наобум, ради одного заголовка на какой-то редко посещаемой странице.
В России этот совет особенно актуален. Роскомнадзор блокирует ip, а ваш сайт продолжает пытаться получить от них внешние скрипты. В этом случае время загрузки может увеличиться даже до 30 секунд!
Поэтому, где это возможно, старайтесь использовать локальные скрипты, а количество внешних сократите до минимума.
19. Провести аудит быстродействия мобильной версии сайта
Ранее уже было сказано, что Google при ранжировании обращает внимание на скорость загрузки сайта. Особое внимание уделяется мобильной версии.
Советуем использовать сервис Google PageSpeed Insights, с помощью которого можно быстро провести онлайн-аудит как десктопной версии сайта, так и мобильной. После аудита сам сервис предложит вам советы по оптимизации сайта.
20. Постоянно следить за скоростью загрузки сайта
Как избавиться от рутинных задач по проверке времени загрузки сайта и не проспать момент, когда время резко увеличилось и пользователи уходят с сайта? Проще всего сделать это, зарегистрировав бесплатный аккаунт в сервисе multiping.me и добавив туда критически важные страницы. Как только что-то пойдет не так, вы моментально получите уведомление, а ребята из технической поддержки помогут вам решить все возникшие проблемы.