Как ускорить работу сайта: 9 способов

В чем важность иметь быстро работающий сайт

Скорость работы веб-проекта влияет на его позицию в поисковой выдаче и возможность попадания на SERP. Исследования показали, что 40% пользователей покидают сайт, если до появления информации в браузере проходит более 3 секунд. 47% ожидают, что загрузка веб-страницы не продлится больше 2 секунд. Медленная работа сайта — признак низкого качества обслуживания и удобства сервиса, поэтому веб-ресурсы могут быть закрыты до появления содержимого страницы. Такое поведение посетителей влияет на рост «показателя отказов». По меркам Google и Яндекс значения метрики в идеале не должны превышать 25%. Гугл даже разработал для владельцев сервисов специальный инструмент мониторинга PageSpeed Insights, который измеряет время до первой отрисовки контента, продолжительность отрисовки крупных файлов и задержку ввода (отклика содержимого на команду юзера).

Изображение от rawpixel.com на Freepik.

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

Какие факторы влияют на скорость загрузки сайта

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

1. Отправка браузером DNS-запроса.
2. TCP-подключение к серверу сайта.
3. Установка http- или https-соединения.
4. Запрос HTML-кода веб-страницы.
5. Сканирование HTML.
6. Загрузка браузером внешних элементов страницы (стилей, изображений, скриптов и так далее).
7. Рендеринг страницы со всем контентом.
8. Выполнение JS-кода.

Задержка передачи контента может произойти на любом из шагов. Разберем проблемы, приводящие к снижению скорости веб-ресурса и возникающие на обеих сторонах «клиент–серверных» отношений. Чтобы их обнаружить, нужен специальный сервис, например, PageSpeed Insights, о котором мы говорили ранее. После теста сайта он дает владельцу рекомендации по оптимизации веб-проекта. Что может быть установлено онлайн-сервисом:

• медленная работа сервера;
• недостаточная производительность CMS;
• большая удаленность сервера от пользователя;
• тяжесть CSS-, JavaScript-, HTML- и мультимедийных файлов;
• большое количество файлов;
• избыточное количество http-запросов;
• наличие ресурсов, блокирующих отрисовку страницы.

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

Как ускорить работу сайта

Особенно в ускорении работы нуждаются популярные среди пользователей веб-страницы, для остальных быстродействие является менее важной характеристикой. Следить необходимо за следующими показателями времени:

• time to first byte (TTFB) — время до первого байта, полученного браузером от сервера после отправки запроса;
• начало рендеринга страницы;
• load time — время загрузки.

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

Оптимизация картинок

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

Изменение ширины в меньшую сторону. Манипуляция проводится с изображениями, ширина которых достигает 5000 пикселей. Значение можно понизить до 1600. Исключение — фото товаров, предназначенные для просмотра под лупой, поскольку они открываются не сразу, а только после применения инструмента.

Сжатие объема картинок с большим весом. Исходные фотографии сжимают с помощью редакторов изображений, плагинов или онлайн-сервисов.

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

Кэширование на стороне браузера

При первой загрузке сайта браузер сохраняет отдельные его элементы в собственную память — кэш. Это позволяет клиенту избежать повторного запроса статического контента (файлов стилей, скриптов и картинок) у сервера при новом посещении веб-ресурса и переходе на другие его веб-страницы. Извлечение файлов из кэша проходит быстрее. Чтобы браузер понимал, какие файлы отправлять в cache, нужно создать для него инструкцию. Сделать это можно через файл htaccess:

<IfModule mod_expires.c>

 ExpiresActive On

 ExpiresDefault "access plus 5 days"

 ExpiresByType image/gif "access plus 5 days"

 ExpiresByType text/css "access plus 5 days"

</IfModule>

Значение «access plus 5 days» предполагает, что контент будет храниться в кэше браузера 5 дней. После «image» указываем нужные для сохранения типы файлов:«jpg», «jpeg», «png», «svg+xml». Для веб-сервера Nginx уточняем:

server {

 ...

 location ~* \.(jpg|jpeg|gif|png|ico|css|js|txt)$ {

     root /var/www/user/data/www/site.ru;

     expires 10d;

 }

 ...

}

Минимизировать css- и js-файлы

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

Порядок загрузки css- и js-файлов

После того как браузер получает код страницы, он определяет порядок, в котором будет отрисовывать элементы сайта. Если очередь из файлов выстраивается неверно, могут происходить задержки загрузки контента. Например, если в окне браузера уже начала появляться какая-нибудь форма, а файл с ее стилями поступил в обработку позже, отрисовка контента останавливается. Для корректного отображения веб-страницы рекомендуем располагать файлы сайта в определенном порядке: в начале кода (в теге <head>) размещать все файлы стилей (css) и шрифтов, а файлы скриптов (js) только перед закрывающим тегом </body>.

Убрать лишние счетчики или плагины

Важно поддерживать код в «чистоте» — удалять из него ссылки на плагины, которые перестали использоваться веб-мастером. Под мусором подразумеваются участки кода, которые остаются после отключения / замены плагинов и счетчиков.

Использование CDN

Браузер может долго ждать данные от сервера со слишком удаленным дата-центром. Для международных проектов сложно подобрать хостинг, который одинаково быстро передавал бы файлы пользователям из разных стран. Решить проблему с расстоянием помогает сеть доставки контента CDN — сеть серверов, рассредоточенных по стране / миру и хранящих копии основного сайта. Посетитель получает ответ от ближайшего к нему сервера.

Оптимизация шрифтов

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

Сокращение количества http-запросов

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

Сокращение HTML-кода

На сайте добавляются новые функции и скрипты. Для настройки быстродействия проекта лишний код нужно удалять.

Заключение

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

Автор: Макхост

Оцените статью

Поделиться