Начните искать ключевые слова
Используйте Serpstat, чтобы находить лучшие ключи
Как увеличить скорость загрузки сайта?
С внедрением Java-технологий для оформления внешнего вида начали подключать большое количество скриптов, увеличился объем графики, видео, аудио. Сайты стали выглядеть лучше, появились красивые выпадающие меню, массивные слайдшоу, «живые» фоны (бэкграунды) и другое.
Эти факторы пагубно сказались на скорости загрузки веб-ресурсов и подтолкнули на поиски решения проблемы. Я в свое время также столкнулся с такими проблемами и нашел их решение.
Как именно, читайте дальше.
Как именно, читайте дальше.
Само понятие «Скорость загрузки сайта» основано на измерении времени получения браузером пользователя информации с интернета, а именно:
- запрос к стороннему серверу,
- получение ответа,
- загрузке скриптов, стилей, изображений,
- компиляции страницы (отрисовка внешнего вида на стороне пользователя).
Какое время загрузки считать оптимальным?
Правильный ответ: <1 секунды, то есть, чем быстрее, тем лучше. Но даже 3 секунды в отдельных случаях можно считать нормальным показателем — все зависит от общего размера страницы, целей веб-ресурса, физического расположения сервера, скорости канала интернет.
Исследования по скорости и ее влиянию проводили: Google, Айри, Amazon, Equation Research, Strangeloop, Akamai, Walmart, 1С-Битрикс… перечислять можно бесконечно. Если усреднить все данные, можно найти золотую середину. Ускорение сайта даже на 0,5 сек в 80% случаев дали отличные результаты:
Исследования по скорости и ее влиянию проводили: Google, Айри, Amazon, Equation Research, Strangeloop, Akamai, Walmart, 1С-Битрикс… перечислять можно бесконечно. Если усреднить все данные, можно найти золотую середину. Ускорение сайта даже на 0,5 сек в 80% случаев дали отличные результаты:
- увеличение конверсии;
- снижение отказов;
- увеличение глубины просмотра;
- рост среднего чека и выручки;
- улучшение ранжирования в поисковых системах (ПС).
Способы решения проблем со скоростью загрузки сайта
Тесты проводились на одном из клиентских сайтов (не удалось получить разрешение на публикацию домена).
На деле все выглядит так, если сильно не углубляться в подробности.
Если сократить:
Если сократить:
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 секунд до полной загрузки, даже если это будет авторитетный ресурс?
По результатам тестов был составлен план и проведены работы по устранению проблем.
Кто будет ждать более 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 человеко-часов. Результатом остались довольны все. Говорить об улучшении поведенческих факторов и ранжировании пока рано, необходимо проводить дополнительные тесты, делать анализ со срезом за определенный период
В силу внешних факторов, на все работы потрачено ~60 человеко-часов. Результатом остались довольны все. Говорить об улучшении поведенческих факторов и ранжировании пока рано, необходимо проводить дополнительные тесты, делать анализ со срезом за определенный период
Выводы
Порядок действий по увеличению скорости загрузки страницы:
В статье раскрыты не все приемы и возможные решения, описаны только самые результативные. Но можно сделать однозначный вывод по поводу необходимости работы со скорость загрузки, поскольку он косвенно влияет на комплекс показателей:
- Настройка сервера.
- Сокращение количества запросов (обращений) к серверу.
- Сжатие всего, что можно сжать (фото, скрипты...).
- Распределение нагрузки на облачные сервисы.
В статье раскрыты не все приемы и возможные решения, описаны только самые результативные. Но можно сделать однозначный вывод по поводу необходимости работы со скорость загрузки, поскольку он косвенно влияет на комплекс показателей:
- поведенческие факторы (показатель отказов);
- ранжирование в поисковой выдаче;
- конверсию;
- размер дохода, получаемого с сайта.
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Используйте лучшие SEO инструменты
Проверка обратных ссылок
Быстрая проверка обратных ссылок вашего сайта и конкурентов
API для SEO
Получите быстро большие объемы данных используя SЕО API
Анализ конкурентов
Сделайте полный анализ сайтов конкурентов для SEO и PPC
Мониторинг позиций
Отслеживайте изменение ранжирования запросов используя мониторинг позиций ключей
Рекомендуемые статьи
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити :)
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.