Как улучшить скорость загрузки сайта: почему это важно, инструменты и рекомендации

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

В материале расскажем, за счёт чего можно увеличить скорость загрузки страниц и для чего это нужно бизнесу.

Когда пора увеличивать скорость загрузки?

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

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

При этом хорошими показателями считаются 1—3 секунды, а вот если время загрузки более 7 секунд, то это повод задуматься и начать процесс оптимизации.

Что влияет на скорость загрузки сайта?

Сайт — «живой» и весьма сложный организм, на работу которого влияет множество факторов: от количества виджетов до серверных факторов.

Вы добавляете на сайт чат, обратный звонок, аналитику, рекламные пиксели… Всё это называется сторонним кодом — и часто из-за него сайт начинает грузиться медленнее. Поэтому прежде чем добавить что–то, необходимо проанализировать ситуацию и оценить технические возможности. Например, если сервис обратного звонка временно перестаёт работать, то страница может подгружаться очень медленно или вообще не до конца. Это создаёт ошибки и, в конечном счёте, ухудшает работу проекта.

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

Даже если вы вставили всего одну строчку, она может подключать ещё кучу всего, а вы об этом даже не будете знать до момента возникновения проблем. Чужой сервис — всегда потёмки и неизвестно насколько он оптимизирован. Поэтому старайтесь не перегружать страницу сервисами.

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

Инструменты для улучшения скорости загрузки сайта

Загрузка страницы происходит за счёт обмена данными между браузером и сервером. Пользователь совершает действие в браузере, после чего сервер получает соответствующие запросы и инициирует процесс передачи информации. Чем меньше будет совокупная нагрузка на сервер, тем быстрее будет проходить обмен. Для того чтобы добиться этого можно провести ряд действий, например:

1. Минификсация файлов CSS и JS

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

— Минификация CSS проводится с помощью Pretty Diff или CSSmin.

— Минификация JavaScript активируется через UglifyJS или Microsoft Ajax Minifier.

Для оптимизации ряда других файлов может подой программа Google Closure Compiler.

2. Уменьшение количества HTTP–запросов

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

Объединить элементы CSS и JS в отдельные файлы.
Распределить компоненты страниц между серверами, за счёт этого уменьшится нагрузка.
Встраивайте inline–картинки в таблицы файлов CSS.
Объединяйте графические элементы формата SVG в единый файл.

3. Использование поддоменов для параллельного скачивания

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

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

4. Кэширование заголовков

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

Cache-Control — задает срок хранения ресурсов в кэше. В случае со статическими файлами целесообразно установление длительного срока, например, от года и выше.
Expires — определяет конкретную дату окончания кэширования.
ETag — помогает серверу сообщать браузеру об изменении ресурса. Если тег не поменялся, браузер продолжает использовать локальную версию.

Возможны ситуации, когда требуется обновить кэшированный файл. Для этого можно изменить его URL, например, вместо styles.css использовать styles_v2.css. В таком случае, браузер распознает новый адрес как уникальный и загрузит его в кэш.

5. Использование CDN для загрузки JS–контента

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

Так, например, у Google есть собственная система CDN — Google Libraries, которая применяется для некоторых библиотек JavaScript. Одновременное использование JS-фреймворка jQuery и Google Libraries значительно снижают серверную нагрузку. Помимо этого, применение технологий позволяет браузеру производить кэширование файлов со скриптами, избегая повторных загрузок.

6. Выбор провайдера

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

Наличие современного оборудования на сервере, такого как SSD–диски, мощные процессоры и достаточный объём оперативной памяти.
Расположение дата–центра: чем он ближе к пользователям, тем ниже вероятность задержек при передаче данных.

7. Оптимизация изображений и файлов

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

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

Не стоит обходить вниманием и другие файлы: видео, текст и прочие. За их объёмом тоже нужно следить и при необходимости уменьшать сжатием или конвертацией.

Как ускорить загрузку страниц, если нет доступа к ядру платформы?

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

— Ставьте сторонний код ближе к концу шаблона. Например, вставляйте его перед </body>, а не в «шапку» (<head>). Так страница загрузится быстрее, а виджеты появятся чуть позже, но пользователи этого не заметит.

— Загружайте код с задержкой. Можно сделать так, чтобы, например, чат появлялся через 3–5 секунд или после прокрутки. Это значительно ускоряет первую загрузку сайта.

— Удаляйте всё ненужное. Например, рудиментный код, которым раньше вы пользовались, а сейчас уже нет. Часто у большинства клиентов остаются старые пиксели или трекеры, которые уже не используются. Они продолжают загружаться и тормозить сайт. Почистите шаблон — код станет легче и сайт будет заметно быстрее.

— Используйте минимум внешних скриптов. Если какой-то инструмент можно не использовать — лучше от него отказаться. Особенно на мобильных версиях, где скорость максимально критична.

Кроме того, раз в месяц нужно проверять сайт на скорость. Например, наши клиенты могут воспользоваться внутренними инструментами платформы, такими как, «Ракета» и удалить всё, что не используют. Это легко сделать даже без программиста, ну а если что–то идёт не по плану, то всегда можно обратиться в нашу круглосуточную Техническую поддержку.