35830 54 27
SEO Читать 7 минут 6 июля 2020

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

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

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

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

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

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

Правильный ответ: <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 — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

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

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

Используйте лучшие SEO инструменты

Проверка обратных ссылок

Быстрая проверка обратных ссылок вашего сайта и конкурентов

API для SEO

Получите быстро большие объемы данных используя SЕО API

Анализ конкурентов

Сделайте полный анализ сайтов конкурентов для SEO и PPC

Мониторинг позиций

Отслеживайте изменение ранжирования запросов используя мониторинг позиций ключей

Поделитесь статьей с вашими друзьями

Вы уверены?

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Я принимаю условия Политики конфиденциальности.

Спасибо, мы сохранили ваши новые настройки рассылок.

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

Отменить
Открыть чат технической поддержки
mail pocket flipboard Messenger telegramm