Как ускорить загрузку сайта - советы и рекомендации

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

Сделать красивый сайт несложно. Сложно сделать его быстрым и технологичным. Если Pagespeed Insights показывает "красную карточку" вашему сайту - значит вы задались вопросом, ответ на который сможете найти здесь.

Как ускорить загрузку сайта - рассказываем коротко и ясно.

Перед тем, как перейти к сути, вынуждены подчеркнуть - это не туториал и не инструкция. Это скорее советы и важные пункты, на которые следует обратить внимание в первую очередь.

Как проверить скорость загрузки сайта

Как проверить скорость загрузки сайта | IM-Support

Для проверки скорости создали целый ряд инструментов с разной направленностью. Мы выделили 4 наиболее интересных:

  • Google Pagespeed Insights. Вокруг него ходит много споров касательно правдивости и эффективности, но в качестве рекомендаций более чем сгодится. Найдет проблемные места и укажет на них, а уж стоит ли исправлять - решать самому веб-мастеру
  • GTmetrix. Сам по себе инструмент не сильно отличается от Pagespeed, однако есть важная фишка. GTmetrix хранит историю проверок, что позволит увидеть, как меняется скорость загрузки сайта при проведении работ
  • Pingdom Website Speed Test. Поможет проверить скорость ответа сервера с различных точек мира. Также даст комплексную информацию о сайте - какой контент тормозит сайт, сколько запросов и так далее
  • Webpage Perfomanse Test. Сервис загружает страницу дважды, тем самым проверяя корректность работы кеширования. Сервер расположен в Далласе, что не позволит корректно проверить скорость для ряда регионов. Однако проверка кеша - весьма полезная вещь

Лично я предпочитаю ориентироваться на Pagespeed - наиболее понятный и полный для нас инструмент. Единственный серьезный минус - он кеширует результат. То есть при повторной проверке показатели сайта буду выше, даже если вы еще не успели что-либо изменить. В остальном претензий к инструменту нет.

При проверке всегда указывайте полный адрес сайта. Если у вас подключен SLL-сертификат (HTTPS-протокол), то инструменты автоматически подставят HTTP - так заложено по умолчанию почти везде. Такая проверка будет включать в себя и редирект с HTTP на HTTPS, что увеличит скорость загрузки и, следовательно, не даст реального результата.

Важно уточнить один момент - нет такого общего параметра, как "Скорость загрузки сайта". Есть параметр "Скорость загрузки страницы". Важно видеть эту разницу при проведении аудита. Тот же Pagespeed Insights показывает скорость загрузки конкретной страницы (URL которой вы указали), но никак не скорость загрузки всего сайта. Мы не будем менять привычную для всех терминологию, но просто имейте в виду эту разницу.

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

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

Почему сайт долго загружается

Почему сайт медленно загружается | IM-Support

На скорость загрузки сайта влияет масса факторов:

  • Количество подключенных модулей (особенно у Wordpress)
  • Общий вес страницы - изображения, текст, код
  • Качество сервера - не каждый хостинг предоставляет быстродействующее железо
  • Количество подключенных библиотек - CSS и JavaScript
  • Отсутствие кеширования - на первую загрузку это никак не повлияет, но переходы между страницами будут заметно ускорены

Это, пожалуй, основные и наиболее важные.

Про модули стоит сделать небольшой комментарий. Любой модуль или плагин в абсолютно любой CMS - это всегда нагрузка, даже если модуль призван ускорить работу сайта. Почему? Да потому что модули пишутся под широкую аудиторию и являются коробочным решением. А любая "коробка" - это набор кучи бесполезных функций на все случаи жизни и возможные хотелки потребителя (которые работают в фоновом режиме).

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

Как ускорить загрузку сайта

Итак, подобрались к сути. Загрузку можно повысить следующими стандартными способами:

  • Уменьшите размер изображений. Готовы поспорить, что на вашем сайте лежат изображения в разрешении 2-4к пикселей. Кроме нагрузки этот размер вам ничего не даст. Возьмите за правило - максимальный размер изображения - 1920х1080, под размер современных мониторов (да и это слишком много). Используйте миниатюры с технологией Fancybox или Lightbox - это снизит нагрузку
  • Используйте подходящий формат изображений. В идеале - WEPG (или хотя бы JPG). Для иконок обычно используют PNG, но им есть лучшая альтернатива - SVG. Вообще от крупных картинок в PNG старайтесь отказываться, слишком тяжелый формат
  • Используйте минимум библиотек CSS/JavaScript. Почти на каждом клиентском сайте наблюдаем по 10-20 таких библиотек с целью подключить иконки или спойлеры. А ведь они используются для верстки всего сайта, а не конкретного элемента! Проанализируйте сайт и найдите редко используемый (или неиспользуемый вовсе) код, отключите его и избавьтесь от бесполезной библиотеки
  • Настройте кеширование. Самая первая загрузка сайта будет максимально долгой - это правда. Вот только все следующие переходы и повторное посещение сайта будут напорядок быстрее. Без кеша высокой скорости не добиться
  • Используйте технологию Lazy Load. Так называемая "Ленивая загрузка" - подгрузка изображений будет идти постепенно вместе со скроллом, а не сразу после перехода на сайт.
  • Используйте технологию Pre-load с осторожностью. Этот инструмент в целом только повышает скорость отрисовки первого экрана, но иногда он необходим, чтобы скрыть от посетителя технические неурядицы. Не делайте пре-лоад слишком большим
  • Избегайте редиректов. Без редиректов не всегда получается обойтись - сменили адрес страницы, переехали на новый домен и т.д. Но помните, что любой редирект - это нагрузка. По возможности избавляйтесь от них
  • Сокращайте код. Если используете Bootstrap или иные фреймворки для верстки сайта - то вам вряд ли это удастся. А если верстаете свои разработки - то стремитесь сокращать количество блоков и их вложенность. Меньше кода -> меньше обработка -> быстрее загрузка

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

Заключение

Ускорение загрузки сайта является одним из наиболее важных элементов ранжирования поисковыми системами. Если раньше на этот параметр в большей степени реагировал только Google, то сейчас и Яндекс предъявляет не менее высокие требования. Так что если хотите видеть свой сайт в топах поисковой выдачи - извольте сделать его быстрым. С марта 2021 года Google вообще откажется от десктопов в поиске.

Хотите узнать больше про методы и эффективные способы поискового продвижения? Читайте в подробной статье.