Низкая скорость загрузки сайта - один из “смертных грехов” продвижения, причем “бьет” медлительность сразу по нескольким позициям. Это и раздражающий фактор для пользователя, который скорее уйдет искать нужное дальше, чем будет тратить время на медленной странице, и “красная тряпка” для систем поисковой выдачи.
Подняться в топ без оптимизации скорости загрузки сайта - миссия только для отчаянных. Страница, которой для открытия требуется более 3 секунд, уже сейчас не вызывает доверия у поисковиков. Дальше этот алгоритм будет только набирать обороты. Поэтому, сколько бы сил вы ни вложили в другие направления модернизации ресурса, без работы над ускорением не обойтись.
Как проверить данный показатель и что делать, если дела идут хуже, чем хотелось бы? Собрали для вас всю полезную информацию по теме в одном материале.
Core Web Vitals - именно так называются факторы Google для оценки качества ресурса, которые поисковик продолжает применять в 2022 году. Они учитывают в том числе время, потребовавшееся на ожидание первого взаимодействия с контентом. И поверьте, чем большим будет этот показатель, тем меньше шансов останется на хорошее ранжирование.
Исследователи DoubleClick (компании-пионера интернет-рекламы) подсчитали, что более половины пользователей покидают сайт, если тот грузится дольше 3 секунд. Каждая следующая секунда ожидания отрезает от количества ваших клиентов еще до 7%. В мобильной версии все еще хуже - пользователи смартфонов совсем не склонны ждать даже лишнюю секунду.
Медленная загрузка - более 4 секунд
Средняя - 2,5-4 секунды
Быстрая - 0 - 2,5 секунд
Важно! В некоторых случаях медлительность ресурса вполне простительна - если это крупный интернет-магазин, портал с большим количеством графического контента.
Узнать, как обстоят дела с данным показателем, гораздо проще, чем кажется на первый взгляд. Существует довольно много автоматизированных инструментов проверки, вам остается лишь выбрать подходящий.
Признанный лидер среди seo-специалистов и владельцев сайтов. Это официальный ресурс Google, и он не просто дает максимально подробную информацию по всем нужным параметрам, но и рекомендует действия для улучшения показателей.
Кроме стандартной функции оценки скорости загрузки сайта, дает возможность смотреть историю проверок. Это удобно для того, чтобы анализировать эффективность принятых мер и отслеживать изменения.
Оценивает сайт по собственной шкале (от 0 до 100 баллов). Содержит множество удобных инструментов и сразу указывает на проблемные места ресурса.
При помощи этого сервиса удобно мониторить скорость загрузки страниц сайта в деталях. Он дает представление о том, насколько быстро происходит отрисовка элементов CSS, как долго загружаются картинки, скрипты и прочее. Благодаря такому детальному анализу можно понять, где именно кроется корень проблемы, а значит, решить ее быстрее и эффективнее.
Итак, проверка выполнена, проблема налицо. Что делать дальше? Для ускорения сайта нужно проанализировать слабые места и предпринять меры по их устранению. Рассмотрим основные позиции, которые стоит проработать.
Важно! Очередность проработки проблемных мест обязательно должна быть продиктована уровнем неполадок - сначала нужно устранить самые большие бреши, и только после этого совершенствовать остальное.
Скорость отрисовки напрямую зависит от “тяжести” картинок. Минимум, который стоит попробовать без ущерба для визуала - сжать изображение по длинной стороне хотя бы до 1600 пикселей. Можно также пожертвовать 10-20% качества. Скорее всего, это не будет заметно, но сэкономит килобайты. Попробуйте сделать это и провести повторную проверку скорости загрузки сайта - увидите мгновенный результат.
Хороший вариант сжатия - gzip. В случае использования техники, данные сайта архивируются на специальном сервере. В браузер они передаются именно в сжатом виде, и он сам распаковывает их. Таким образом можно ощутимо “облегчить” ресурс, при этом без видимых изменений.
Страница будет весить еще немного меньше, если упростить код. Сделать это поможет инструмент под названием jscompress.
Не забывайте об оптимизации: удалите пустые строки, отдавайте предпочтение использованию максимально коротких переменных. Этот процесс лучше доверить опытному программисту, иначе можно сделать только хуже.
С тех пор, как появились шрифты, выделить свой ресурс среди сотен конкурентов стало проще, зато и вес сайтов повысился. Оригинальное оформление вполне могло сказаться на быстродействии, особенно в случае, если в коде CSS есть указатели на fonts-файлы.
Как вариант решения проблемы стоит рассмотреть выбор форматов WOFF и WOFF2, при этом в наборах символов оставить только латиницу и кириллицу.
В случае, когда кэширование на сайте не настроено, любой сервис проверки скорости загрузки сайта укажет на эту проблему. Исправить ее необходимо как можно быстрее.
Важно, чтобы большая часть данных шла в кэш браузера при первичной загрузке, в таком случае повторное открытие страницы ускоряется за счет того, что загружаться в дальнейшем будут только новые данные.
Базовая директивы для кэширования - это указание времени, на протяжении которого актуалбно хранение кэша (это может быть хоть день, хоть неделя, хоть год). Называется оно Expires или Cashe-Control max age.
Эта важная функция помогает избегать ошибки 404 и переводит пользователя на нужную страницу. Но если редиректов на ресурсе скопилось слишком много, page speed падает, особенно в мобильных версиях. Попробуйте найти ненужные редиректы и оптимизировать их количество, используя утилиту Screaming Frog.
Это можно сделать, используя HTML5 - если скрипты будут грузиться в последнюю очередь, когда базовый контент отрисован, скорость загрузки страниц сайта вырастет.
В стремлении автоматизировать как можно больше процессов на этапе разработки можно получить не самый приятный побочный эффект - снижение page speed. Найти и убрать “мусорный код” - еще один важный шаг на пути к оптимизации скорости загрузки сайта.
Хотите уметь все это и гораздо больше? Чувствуете, что готовы программировать, но не можете систематизировать знания и понять, как правильно выполнять действия на практике?
Курс HTML5 + CSS3 + JS с нуля до готового проекта от Академии Wezom - это 21 урок, 21 практическая работа, 20 тестов и финальный проект, который докажет ваше мастерство. Программа рассчитана на обучение верстке с нуля.
На курсе вы научитесь базовому языку HTML и мета-языку CSS, узнаете, как переводить дизайнерский макет в рабочий код, узнаете, из чего состоит полный цикл работы верстальщика.
Прокачать свои скиллы и стать востребованным специалистом за 2 месяца - реально!