Главная страница Публикации Статьи Ускорение сайта своими силами

Ускорение сайта своими силами

Ускорение сайта своими силами и бесплатно – возможно ли?

к.э.н. Лавлинский Н. Е., технический директор ООО «Метод Лаб»

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

Мы уже более 5 лет профессионально занимаемся ускорением сайтов и на основе своего опыта можем рекомендовать решения для наиболее частных проблем со скоростью. В этой статье мы рассмотрим те шаги, которые может сделать любой руководитель проекта для ускорения подопечного сайта. Возможно, местами не будем грузить техническими подробностями (всего в одной статье всё равно не описать), чтобы не потерять общую картину.

Начинаем с базы: хостинг

Качественный хостинг нужен любому проекту. Это необходимое, но не достаточное условие. В нашем случае хостинг определяет серверную производительность (ресурсы, доступные нам: CPU, RAM, сеть, диск) и возможность настройки (тюнинга) сервера.

Рекомендации здесь следующие: строго «нет» виртуальному хостингу, не важно, сколько он стоит – 300 или 3000 рублей в месяц. Если вы сейчас на виртуальном хостинге, нужно будет сначала перенести сайт на нормальную площадку.

Минимальный уровень хостинга: VPS (виртуальный выделенный). При росте проекта можно апгрейдить тарифный план или переезжать на выделенный сервер (арендованный или собственный). Более подробно про выбор хостинга можете узнать из нашей статьи: выбор хостинга.

При наличии полноценного VPS или выделенного хостинга мы можем использовать все рекомендации по ускорению и не зависеть от мнения технической поддержки хостера.

Минимальный набор требований по настройке хостинга следующий:

  • Используйте Nginx для раздачи статики.
  • Включите кеширующие заголовки для статики (Expires: max).
  • Включите сжатие Gzip для всех текстовых форматов.
  • Используйте keepalive соединения, обеспечьте достаточный их лимит.
  • Проведите базовую настройку СУБД для работы с сайтом.
  • Если сайт работает через HTTPS, используйте HTTP/2 и оптимальную настройку TLS в Nginx.

Более подробные инструкции по настройке различных компонент (Nginx, MySQL, HTTP/2 и других) можно посмотреть в наших обучающих видео (мастер-классах)

Клиентская оптимизация

Если с серверной частью более-менее разобрались, то основные проблемы со скоростью будут в клиентской части.

Если посмотреть на проблему системно, то клиентская оптимизации заключается в сокращении критического пути рендеринга сайта и минимизации общего трафика.

Критический путь рендеринга – набор ресурсов, требующихся для отображения страницы браузером. Состав его следующий (в порядке важности):

  • HTML-документ (сама страница) – время её получения зависит от сервера, времени подключения и количества трафика.
  • CSS-код (стили оформления) – обычно набор из нескольких (бывает и до 20) файлов, которые браузер будет загружать до начала рендеринга. Время загрузки зависит от количества и объёма файлов.
  • JS-код (программный код страницы) – несколько файлов JS-библиотек и собственного кода сайта, также блокируют рендеринг страницы ниже по коду нахождения JS. Время загрузки зависит от количества и объёма файлов. После загрузки также требуют компиляции (нагрузка на CPU).
  • Веб-шрифты – подключаемые шрифты для оформления сайта. До загрузки блокируют отрисовку текста (до таймаута). Время загрузки зависит от количества и объёма файлов.

Из этого определения уже понятно, что делать с критическим путём: максимально выбрасывать все ненужные компоненты, оставшиеся отдавать максимально быстро с лучшим сжатием. Чтобы реально сократить критический путь рендеринга страницы, нужно разобраться с её функциональностью и «методом тыка» убирать подозрительные элементы с последующим тестированием на предмет «что-то отвалилось». Если добиваться максимального результата, можно потратить довольно большой объём трудозатрат, но результат окупит все усилия.

Теперь перейдём к вопросу сокращения объёма трафика. Сейчас мы говорим об оптимизации размера ресурсов за счёт различных вариантов сжатия. Ранее мы указывали, что любой текстовый контент должен передаваться сжатым методом Gzip, для максимальной оптимизации можно использовать Zopfli. На подходе новый стандарт сжатия: Brotli (еще более эффективный).

Для графического контента есть широкий набор стандартов сжатия и форматов. Общие правила примерно такие.

  • По возможности используйте векторную графику (SVG).
  • Для фото используйте JPEG (c минимально допустимым качеством), используйте оптимизаторы.
  • Для прозрачных картинок: PNG, также применяйте оптимизации.
  • Используйте формат WebP для поддерживаемых браузеров (есть варианты для замены как JPEG, так и PNG).
  • Всегда проводите реальное изменение размеров картинок для показа (нарезка миниатюр), а не масштабируйте в HTML.

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

Сухой остаток

Итак, по содержанию шагов по оптимизации вы можете легко ответить на вопрос: «Можно ли самостоятельно ускорить сайт?» Если всё понятно, вам интересно заниматься оптимизацией, вы готовы погрузиться в эту область – отлично, можно начинать уже сейчас! Будет ли такой процесс «бесплатным», зависит от вашего отношения к собственным усилиям и времени.

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

Лучшее ускорение сайтов в Рунете

Ускорение сайтов

Цена от 19 900 Р