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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политика конфиденциальности

Принять и продолжить

Сообщить об ошибке

Отменить
19107 117 28
SEO Читать 7 минут 23 июня 2017

Как увеличить скорость загрузки сайта?


Геннадий Федоров
SEO-специалист imserv.ru
С внедрением Java-технологий для оформления внешнего вида начали подключать большое количество скриптов, увеличился объем графики, видео, аудио. Сайты стали выглядеть лучше, появились красивые выпадающие меню, массивные слайдшоу, "живые" фоны (бэкграунды) и другое.
Эти факторы пагубно сказались на скорости загрузки веб-ресурсов и подтолкнули на поиски решения проблемы. Я в свое время также столкнулся с такими проблемами и нашел их решение.

Как именно, читайте дальше.
Статья написана в рамках статейного конкурса Serpstat и SEOnews. Условия конкурса
Само понятие "Скорость загрузки сайта" основано на измерении времени получения браузером пользователя информации с интернета, а именно:

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

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

Какое время загрузки считать оптимальным?

Правильный ответ: <1 секунды, то есть, чем быстрее, тем лучше. Но даже 3 секунды в отдельных случаях можно считать нормальным показателем — все зависит от общего размера страницы, целей веб-ресурса, физического расположения сервера, скорости канала интернет.

Исследования по скорости и ее влиянию проводили: Google, Айри, Amazon, Equation Research, Strangeloop, Akamai, Walmart, 1С-Битрикс… перечислять можно бесконечно. Если усреднить все данные, можно найти золотую середину. Ускорение сайта даже на 0,5 сек в 80% случаев дали отличные результаты:

  • увеличение конверсии;
  • снижение отказов;
  • увеличение глубины просмотра;
  • рост среднего чека и выручки;
  • улучшение ранжирования в поисковых системах (ПС).

Не слабо, правда? Все эти показатели прямо влияют на успешность вашего бизнеса.
Для тех, кто хочет наглядно оценить рост конверсии относительно скорости загрузки, умельцы из sharpedigital разработали онлайн-приложение. Сервис не претендует на эталонные данные, а оценивает приблизительную разницу в прибыли, оптимизаторам будет полезен для общения с клиентами :)

Способы решения проблем со скоростью загрузки сайта

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

Если сократить:
1
Время ответа сервера (Time To First Byte). Для проверки можно использовать ping-admin.ru или webpagetest.org (нет наших серверов, данные по времени отличаются, но раскрывает всю картину).
Скриншот с сервиса ping-admin.ru до правок
Скриншот с сервиса webpagetest.org до правок
2
Время отрисовки страницы или загрузки всего HTML (DOMready),
Скриншот с сервиса webpagetest.org до правок
3
Время полной загрузки с фото, видео и т.п. (onload)
Тестируемый сайт показал не очень хорошие результаты, время ответа сервера превысило 1000 мс, а на отрисовку страницы ушло целых 7 секунд.

Кто будет ждать более 9-10 секунд до полной загрузки, даже если это будет авторитетный ресурс?

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

Разберем подробней, что сделано...

Каждый из пунктов, следующего списка, отвечает за ускорение определенной части процесса загрузки страницы и сокращает количество запросов к серверу.

Чек-лист:

  • Связали nginx и Apache, что дало прирост в вычислениях на сервере. Сам по себе nginx довольно хорошо работает с кэшем, при первых запросах к Apache время обработки и загрузки проходит от начала до конца, при последующих nginx отдает готовую версию html-страницы из кэша без повторной обработки.

  • Упростили серверную логику. Настроили логирования для прорисовки всего дерева вызовов. По логам определили самые времязатратные операции и исправили, удалили лишние.

  • Перенастроили базу данных, очистили от "мусора".

  • Настроили OPcache,

  • Включили Gzip-сжатие на сервере, для архивации содержания текстовых данных "в реальном времени".

  • Внедрили HTTP/2 для увеличения кол-ва одновременной обработки запросов (пришлось перейти на протокол HTTPS).

  • Расширили время кэш для JavaScript и CSS.

  • Включили кэширование изображений на стороне пользователя (в браузере).

  • Все стили CSS объединили в один файл.

  • Повторили тот же фокус с JavaScript.

  • Построили порядок загрузки — стили CSS, контент, JavaScript.

  • Почистили CSS и JavaScript от ненужного кода (убрали пробелы, комментарии).

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

  • Перенесли стили CSS с тела страниц в head, в избежании двойной отрисовки элементов.

  • Перенесли содержимое внешне подключенных стилей CSS в общий файл стилей сайта для сокращения лишних запросов к сторонним ресурсам.

  • И опять тот же фокус с JavaScript.

  • Поменяли абсолютные URL на относительные для HTML-атрибутов href и src (пример: было https://site.ru/about, стало /about).

  • Включили согласование META тегов с HTTP заголовками.

  • Распределили часть контента (изображения, jQuery) на поддомены, а часть на CDN (cloudflare.com) для сокращения расстояния между сервером и пользователем.

  • Сжали (оптимизировали) изображения, для этого можно использовались онлайн сервисы (пример: optimizilla.com).

  • А также не обошлось без "подсказок" для браузера: dns-prefetch, preconnect, prefetch, preload и prerender. Подробное описание можно найти на сайте Хабрахабр.

Результаты после проделанной работы

Скриншот с сервиса webpagetest.org после правок
Время ответа сервера сократилось со среднего значения 1 секунды до 0,12 с.
Скриншот с сервиса webpagetest.org после правок
Время отрисовки страницы сократилось на 5,8 секунд, а время полной загрузки страницы составило всего 3,1 секунды.

В силу внешних факторов, на все работы потрачено ~60 человеко-часов. Результатом остались довольны все. Говорить об улучшении поведенческих факторов и ранжировании пока рано, необходимо проводить дополнительные тесты, делать анализ со срезом за определенный период

Выводы

Порядок действий по увеличению скорости загрузки страницы:

  • Настройка сервера.
  • Сокращение количества запросов (обращений) к серверу.
  • Сжатие всего, что можно сжать (фото, скрипты...).
  • Распределение нагрузки на облачные сервисы.

В статье раскрыты не все приемы и возможные решения, описаны только самые результативные. Но можно сделать однозначный вывод по поводу необходимости работы со скорость загрузки, поскольку он косвенно влияет на комплекс показателей:
  • поведенческие факторы (показатель отказов);
  • ранжирование в поисковой выдаче;
  • конверсию;
  • размер дохода, получаемого с сайта.
Читайте, учитесь, развивайтесь!

Оцените статью по 5-бальной шкале

(2.6 из 5 на основе 5 оценок)
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Рекомендуемые статьи

Хотите узнать новые фишки по интернет-маркетингу?
Подпишитесь на нашу рассылку — только полезные статьи, реальные кейсы и новости Serpstat раз в неделю.
Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя
Email
Телефон
Будем рады вашему комментарию

Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Plan А или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов

Новый год – это время чудес.

Вы на финальном шаге нашего квеста. Осталось собрать последнюю часть кода, чтобы получить скидку -55%.

Не нашли предыдущих нескольких частей пазл-кода? Все равно заполните форму.

Имя
Email
Телефон