Почему вам надо срочно увеличить скорость сайта?

Время чтения:10 минут

То, насколько быстро загружается сайт, очень сильно влияет на всю эффективность его работы. Причем это касается не только технической стороны, как, например, позиция в выдаче ПС, но затрагивает элементы психологии человека – пользователь с большей вероятностью закроет вкладку с долго загружающимся порталом и у вас вырастут отказы. Оптимизация скорости – довольно сложный процесс со своими подводными камнями. В этой статье мы расскажем вам, как стоит улучшать сайт, чтобы он быстрее грузился, а также какие «грабли» ждут вас на этом пути.

скорость-загрузки-сайта.jpg

Зачем вообще ускорять сайт?

Исходя из опыта компаний, работающих в интернете (Amazon, Wallmart, Shopify), пользователи замечают даже малейшие изменения в скорости загрузки величиной в 100 миллисекунд. Это приносит значительную прибыль – растет конверсия, пользователи чаще заходят на портал, чаще рассказывают друзьям о сайте, они более лояльно относятся к компании, процент отказов уменьшается и т.д.

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

Начинаем ускорение

Для начала необходимо оценить нынешнее положение. Например, можно воспользоваться этим сервисом от Google. Вот основные метрики, которые необходимы для дальнейшей работы:

  • время загрузки страницы (load time) – время до начала загрузки основных элементов, не учитывая дополнительные запросы не блокирующие работу сайта.
  • начало рендеринга (start render) – показывает время, которое прошло с начала до момента старта отрисовки страницы в браузере.
  • время до интерактивности (time to interactive) – показывает то, когда ресурс начнет откликаться на действия пользователя.

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

нормы-скорости-загрузки.jpg

Тестирование необходимо проводить как можно тщательнее. Попробуйте открыть сайт из разных стран, с разных браузеров, с телефона или планшета. Ориентируйтесь на основные показатели вашей целевой аудитории.

Теперь, когда мы знаем свои нынешние показатели, нужно понять, что влияет на скорость и почему она может снизиться. Условно, оптимизацию можно поделить на серверную и клиентскую. Первая – это действия, направленные на повышение скорости генерации HTML-документа, а также уменьшения задержек от сервера. Вторая – это работа над всеми остальными компонентами страницы, которые отображаются в браузере: CSS-кода, JavaScript-кода, изображений, подключаемых шрифтов, видео и т.д. Давайте подробно разберем каждый аспект.

скорость-загрузки-сайта-на-компьютерах.jpg

Серверная оптимизация

В большей степени оптимизация серверной части очень индивидуальна, поэтому мы расскажем лишь об общих способах повышения скорости формирования HTML-страниц. На серверной стороне работают разные компоненты, которые могут замедлять загрузку. От того, какого типа хостинг (виртуальный, выделенный VPS, сервер) зависит то, на какие компоненты можно повлиять, поэтому чаще всего решение проблемы со скоростью решаются переносом портала на хостинг более высокого уровня.

Главным показателем оценки серверной части является «время до первого байта» (TTFB – time to first byte, еще можно встретить название «время ответа сервера»). Наилучшим значением считается показатель менее 200 мс, а значение до 500 мс принято считать нормальным.

Теперь подробнее про сами точки ускорения и замедления сайта:

Во-первых, это код. Независимо от того CMS ли у вас или полностью самописный код, в любом случае внутри кода могут быть участки, которые требуют значительное количество времени на работу, поэтому с ним необходимо что-то делать. Если это сторонний плагин, то следует найти ему более быструю замену, а если собственный участок кода, то переписать. Помочь в деле поиска подобной проблемы поможет профилирование программного кода. Для разных языков программирования существуют собственные средства для осуществления этого.

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

Во-вторых, это СУБД и SQL-запросы. Все страницы сайта формируются посредством большого числа запросов к БД, поэтому скорость обработки этих SQL-запросов сильно влияют на оптимизированность сайта. Поняв, какие именно запросы тормозят загрузку, следует оптимизировать их или уменьшить общее количество.

Дальнейшая работа над ускорением серверной части подразумевает оптимизацию настроек СУБД (сервера баз данных). В настройках есть множество параметров, оптимизация которых поможет ускорить загрузку.

Также на скорость может влиять операционная система. В идеале, она не должна оказывать влияние на сайт, но иногда (во время высоких нагрузок) требуется оптимизация низкоуровневых системных настроек.

Не забывайте своевременно обновлять системный софт, так как это даёт приросты в скорости работы и появляются новые возможности.

Еще стоит упомянуть о конфигурации сервера и сетевых параметрах. Если у вас на проекте собственное железо, то его нужно корректировать в соответствии с запросами проекта. Нужно больше? Добавьте больше!

С сетевыми ресурсами немного проще – чем больше пропускная способность канала, тем лучше. Особенно чувствительны к этому ресурсы, на которых есть тяжеловесный контент (например, видео). Кроме того, задумайтесь о том, чтобы размещать сайт как можно ближе к потенциальным посетителям, а если ваша ЦА не находится в одной конкретной стране, воспользоваться CDN (content delivery network).

скорость-загрузки-сайта-на-мобильниках.jpg

Клиентское ускорение

После того как вы оптимизировали серверную часть, следует приступить к клиентской. Именно она больше всего влияет на итоговую скорость загрузки. Что входит в клиентскую часть?

CSS-код

Этот код – главный элемент сайта, без которого пользователь не сможет ничего увидеть. Существует несколько путей ускорения его доставки в браузер:

  • Убрать нерабочий (отключенный) код.
  • Провести компрессию данных (а потом отдавать в браузер именно эти сжатые данные).
  • Минификация кода (удаление или изменение неоптимизированных элементов кода).
  • Оптимизация запросов к БД.
  • Поместить сайт на тот же домен, что и HTML-документ (с использованием существующего TCP-соединения).
  • Использование кэша браузера клиента.

JS-код

Этот код идем сразу после CSS. Но иногда именно JavaScript больше всего нагружает «железо» пользователя. Существует два вида JS-кода: блокирующий отрисовку страницы и неблокирующий (асинхронным, отложенным). Чтобы его ускорить, необходимо:

  • Убрать нерабочий (отключенный) код.
  • Перенести код из блокирующего режима в асинхронный (defer, async атрибуты).
  • Найти и удалить повторяющийся код.
  • Обновить JS-библиотеки.
  • Провести компрессию данных (а потом отдавать в браузер именно эти сжатые данные).
  • Минификация кода.
  • Оптимизация запросов к БД.
  • Разбить на блоки до 50 кб, для постепенного исполнения в браузере.
  • Оптимизировать конкретные участки кода по результатам профилирования в браузере.
  • Поместить сайт на тот же домен, что и HTML-документ (с использованием существующего TCP-соединения).
  • Использование кэша браузера клиента.

Изображения

Изображения – это основной элемент контента. Без них сайт потеряет свой внешний вид. Именно они занимают большую часть трафика (около 80%). Стоит отметить, что они не препятствуют рендерингу страницы, поэтому главная задача по их оптимизации – это уменьшить их объем, сохранив при этом прежнее качество.

Добиться этого можно разными путями:

  • Применять более эффективные форматы. Например, вместо JPEG использовать WebP.
  • Использовать векторную графику (формат SVG) и выносить текст из картинок.
  • Оптимизировать сжатие хорошими сервисами mozJPEG, zopfliPNG, optiPNG и других.
  • Поменять размер в пикселях для точного соответствия.
  • Использовать миниатюры вместо масштабирования через браузер.
  • Почистить файлы от метаданных.

Шрифты

Чем меньше подключаемые шрифты влияют на процесс отображения страницы, тем лучше. 

Способы оптимизации шрифтов:

  • Сократите число вариантов и гарнитур. Например, отключите один из нескольких похожих гарнитур. Кроме того, загружайте только те варианты, которые на самом деле используются в работе сайта: жирный, курсив и т.п.
  • Также можно попробовать загружать ограниченный набор символов, необходимый для сайта. Грузите только latin и cyrillic, а остальную тысячу символов из шрифта – нет.
  • Использовать формат с лучшим сжатием – WOFF2 (или WOFF).
  • Критичный для отображения основного текста шрифт следует объявлять как можно раньше (сделайте preload для него в секции head).
  • Установите неблокирующий режим font-display: fallback для шрифтов.
  • Использование кэша браузера клиента.

Резюме

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

Связаться с нами

Нажимая на кнопку "Отправить" вы соглашаетесь с политикой обработки данных!