Как ускорить загрузку сайта:
8 основных способов
8 основных способов
Увеличение скорости загрузки — это один из способов улучшить поведенческие факторы и юзабилити сайта, а, вместе с этим — конверсию. Часто владельцы сайтов не понимают, почему их ресурсы загружаются медленно.
Поэтому в данной статье я решил собрать 8 основных факторов, тормозящих сайт, и способы их устранить. Хотите сделать сайт быстрее? Поехали!
Поэтому в данной статье я решил собрать 8 основных факторов, тормозящих сайт, и способы их устранить. Хотите сделать сайт быстрее? Поехали!
Измерение скорости загрузки сайта
Для этих целей подойдут такие инструменты, как:
Google PageSpeed insights. Наиболее популярный инструмент, позволяющий проводить анализ как мобильной, так и десктопной версии сайта. Дополнительно сервис дает рекомендации по улучшению показателей.
Pingdom Tools. Еще один инструмент измерения скорости загрузки сайта, показывающий время в миллисекундах и выдает баллы для оценки показателя оптимизации.
Для чего это нужно?
В первую очередь, согласно данным Google (исследование SOASTA), скорость загрузки сайта влияет на конверсию. Так, оптимальное время, за которое должна открыться страница, составляет менее 2,2 секунд.
Согласно другим исследованиям, компания Walmart добилась увеличения коэффициента конверсии на 2% за каждую 1 секунду ускорения. Также IT-гигант Mozilla смог повысить количество загрузок на 15%, уменьшив время на отображение страницы на 2.2 секунды.
Данный источник утверждает, что загрузка страницы за менее, чем 100 миллисекунд дает пользователю ощущение моментальной загрузки. Как показали исследования, около половины (40%) посетителей откажутся от сайта, если он загружается более 3 секунд. Было замечено, что при превышении времени загрузки контента 2-х секунд показатель отказов увеличивается на 30%.
Дополнительным стимулом для вебмастеров становится влияние этого фактора на мобильную выдачу в Google с июля 2018 года.
Дополнительным стимулом для вебмастеров становится влияние этого фактора на мобильную выдачу в Google с июля 2018 года.
Тестирование и примеры
Для того, чтобы проверить эффективность части методов, которые были описаны, использовалась проверка одной и той же страницы (мобильной версии) через сервис Google PageSpeed insights, имеющей следующие показатели:
Баллов: 85;
Время загрузки первого контента: 2,1 сек;
Время загрузки для взаимодействия: 5,2 сек.
В каждом отдельном примере отключалась одна из функций и замерялись результаты, что позволит понять, что лучше всего реализовать на своем сайте.
8 способов ускорить сайт
Способ #1
Сжатие изображений
Уменьшить размер страницы можно, сжав изображения при помощи сервисов:
Это позволит уменьшить вес изображений на 60−90% и, как следствие, значительно снизить размер страницы.
Способ #2
Сжатие страницы
Улучшить скорость загрузки страницы по протоколу HTTP можно через компрессию (сжатие), которую лучше всего выполнить через технологии:
ZIP;
GZIP.
Проверить результаты сжатия можно на сайте whatsmyip.
Способ #3
Использование WebP
Формат WebP даст возможность сделать страницу еще «легче». Он позволяет получить размер на 26% меньше, чем PNG. Без его использования можно получить следующие результаты:
Баллов: 79;
Время загрузки первого контента: 2,3 сек;
Время загрузки для взаимодействия: 5,7 сек.
Способ #4
Lazy load изображений
LazyLoad (Ленивая загрузка) — это отложенная загрузка изображений. Благодаря данной технологии изображения будут загружены лишь в том случае, если они требуются пользователям. Схема работы LazyLoad.
Результаты до:
Баллов: 40;
Время загрузки первого контента: 2,5 сек;
Время загрузки для взаимодействия: 13 сек.
Способ #5
Кэширование
Кэширование — это способ оптимизации Web, при котором медленные SQL запросы заменяются статическим HTML-кодом. Как правило, сохраняется код на некоторое время (час, день, неделя или любое другое), после чего кэш очищается, и начинается генерация нового файла.
Результаты без кэширования:
Результаты без кэширования:
Баллов: 77;
Время загрузки первого контента: 2,6 сек;
Время загрузки для взаимодействия: 5,6 сек.
Способ #6
Сократить CSS и Javascript
При помощи использования специальных средств для упрощения кода JavaScript и CSS, можно снизить «вес» страницы. Для того, чтобы выполнить эту операцию, достаточно использовать инструмент jscompress.
Пример, кода без сжатия:
Пример, кода без сжатия:
Баллов: 81;
Время загрузки первого контента: 2,7 сек;
Время загрузки для взаимодействия: 5,3 сек.
Подробнее о сжатии JavaScript и CSS можно узнать в статьях:
Способ #7
Уменьшить количество запросов
При загрузке страницы браузер пользователя отправляет на сервер сайта большое количество запросов, ответы на которые могут замедлять отображение страницы. Соответственно, можно уменьшить количество запросов, убрав часть картинок с сайта, файлов или кода/функций.
Например, сайт Google, который выглядит максимально просто, поэтому имеет идеальные данные по Google PageSpeed insights.
Например, сайт Google, который выглядит максимально просто, поэтому имеет идеальные данные по Google PageSpeed insights.
Способ #8
Уменьшить расстояние «сервер-клиент»
Расстояние между сервером и пользователем играет важную роль в оптимизации скорости загрузки сайта. Для решения проблемы можно использовать CDN-сервисы, которые загрузят нужные файлы (как правило, картинки) с собственного сервера, находящегося ближе всего к пользователю.
Наиболее популярные CDN сервисы:
Наиболее популярные CDN сервисы:
Кстати, найти на сайте неполадки, тормозящие его работу, а также много других уязвимостей, мешающих хорошему ранжированию, можно с помощью инструмента «Аудит сайта» от Serpstat.
Вот категории неполадок, на наличие которых Serpstat проверяет сайт:
Вот категории неполадок, на наличие которых Serpstat проверяет сайт:
Коды ответов.
Мета-теги.
Заголовки.
Контент
Мультимедиа.
Индексация.
Редиректы.
Ссылки.
Параметры сервера.
Сертификат HTTPS.
Атрибуты hreflang.
Проверки AMP.
Проверки разметки.
Скорость загрузки для компьютеров.
Скорость загрузки для мобильных.
Все еще думаете, почему у вашего сайта не складываются отношения с поисковыми системами? Проверьте его на уязвимости и устраните их.
Вот несколько статей, которые помогут в работе с инструментом:
Вот несколько статей, которые помогут в работе с инструментом:
Заключение
Как видно из примера, каждый из указанных способов поможет сделать страницы сайта «легче», и как следствие улучшить usability. Благодаря представленным способам, и их результативности, можно определить, к какому из вариантов лучше всего приступить в первую очередь, посчитать сложность разработки и возможный результат.
Чтобы быть в курсе всех новостей блога Serpstat, подписывайтесь рассылку. А также вступайте в чат любителей Серпстатить и подписывайтесь на наш канал в Telegram.
Сэкономьте время на изучении Serpstat
Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?
Оставьте заявку и мы свяжемся с вами ;)
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Рекомендуемые статьи
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор Анастасия подберет материалы, которые точно помогут в работе. Присоединяйся к уютному комьюнити :)
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.
