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 человеко-часов. Результатом остались довольны все. Говорить об улучшении поведенческих факторов и ранжировании пока рано, необходимо проводить дополнительные тесты, делать анализ со срезом за определенный период

Выводы

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

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

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

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

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

Комментарии

Войти Регистрация

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

Или email
Забыли пароль?
Или email
Нажимая "Зарегистрироваться", Вы соглашаетесь с
условиями использования Serpstat and Политика конфиденциальности
Back To Login

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

Вы уверены?

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

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

Имя
Email
Телефон
Skype или Google Hangouts
Комментарий

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

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

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

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

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

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

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

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

Вы исчерпали все доступные поинты в инструментах.

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