Как ускорить сайт? Оптимизируем загрузку страниц сайта

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

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

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

• Позиция в поисковой выдаче. Не только пользователи, но также роботы поисковых систем оценивают скорость загрузки сайта. Ускорение выдачи контента напрямую влияет на поведенческие факторы: сколько времени посетитель проведет на площадке, сколько страниц посетит, откажется от покупки или нет. Тут мы видим прямую связь с ранжированием в выдаче.
• Конверсия. Посетитель ждет, что все будет быстро и просто. Поэтому у владельцев, которые уделяют внимание скорости, больше шансов довести посетителя до целевого действия и покупки. Естественно, что важна не только скорость загрузки, но также отсутствие багов, зависаний.
• Наполнение с пользой. Сложно проводить стримы, грузить видеоконтент и даже фотографии, когда ресурс работает медленно. Аудитория просто не дождется получения пользы и уйдет искать источники в другом месте.
• Загруженность сетей, серверов. Если запросов к контенту или посетителей слишком много, сайт может «лечь». Ускорение помогает снять перегруз с сетей и устройств.

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

Как замерить скорость процесса

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

Ваш браузер

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

**Полезно знать. **Лучше всего для этой цели подходит Chrome, у которого много опций для сравнения. На вкладке Network представлены данные по времени загрузки всех компонентов, включая HTML-документ. Когда вы наводите на элемент, то видите, сколько тратится на каждом этапе загрузки ресурса. Вкладка Performance дает максимум деталей — вплоть до периода декодирования изображений.

Pingdom

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

Page Speed Inside

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

GTmetrix

Если нужна самая точная информация об оперативности ресурса, этот инструмент не подведет. Предоставит подробный отчет о лучших способах достичь поставленной цели.

Как ускорить сайт — проверенные способы

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

Хостинг

Начнем с того, что нужно выбрать качественного хостинг-провайдера. Пока у вас немного посетителей, проблем не будет. Но стоит только числу посещений подрасти, начнется торможение. Лучше перейти на VPS или облачный хостинг.

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

Сервер базы данных (СУБД)

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

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

CMS, программный код

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

Кеширование

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

Если все сделать правильно, время сокращается до десятков миллисекунд, а сервер легко переживает пиковые моменты посещаемости. Но есть нюансы: кешируется не все, а еще кеш нужно правильно сбрасывать.

Оптимизация TCP, TLS, HTTP/2

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

Тюнинг нужен большим площадкам и платформам, серверам с подключением от 10G. Настройка TLS обеспечивает повышение безопасности, максимально сокращает период, за который происходит наладка защищенного соединения. Тогда как обновленная версия протокола HTTP тоже помогает ускориться. Обычно за счет снижения влияния сетевых задержек в процессе загрузки страницы.

Уменьшение загрузки JS, CSS и HTML

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

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

Веб-шрифты подключают все, но это негативно сказывается на скорости загрузки страницы. Все еще больше осложняется, если указатели на файлы шрифтов закопаны в CSS. Торможение усиливают публичные сервисы веб-шрифтов, например, Google Fonts.

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

Ускорить появление шрифтов можно, применяя свежие спецификации link rel=«preload» и CSS-свойства font-display. Preload поможет раньше сообщить браузеру, что нужно загрузить шрифты, а font-display поможет подсказать, как себя вести.

Сжатие картинок

Неправильный формат или слишком большой размер картинок — самая частая причина медленной работы площадки. Понять, как ускорить загрузку сайта в этом случае, довольно просто. Нужно сократить габариты изображения, подбирая оптимальный формат и инструменты (PNG для прозрачных картинок с текстом, JPEG для снимков и сложных картинок, SVG для векторной графики). Есть и новые форматы: WebP от Google помогает заменить PNG и JPEG.

Еще для картинок в формате PNG подойдут такие утилиты, как OptiPNG, PNGout. Внутреннюю оптимизацию можно проводить с применением zopfliPNG. Суть подобных разработок заключается в том, что вы можете подобрать оптимальный способ компрессии, удалить лишние данные из файла. Но нужно быть осторожным, поскольку в некоторых утилитах теряется не только вес, но и качество. Еще можно порекомендовать пакет Mozilla JPEG. Для оптимизации без потерь подойдет jpegtran.

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

Самая простая методика заключается в том, чтобы кешировать редко изменяемые ресурсы: картинки, шрифты, CSS, JS-файлы, а также сам документ. Каждый элемент по итогу запрашивается однократно, а не каждый раз.

Для тех, кто пользуется Nginx, хватит директивы:

add_header Cache-Control "max-age=31536000, immutable";

Теперь браузер будет кешировать ресурсы на протяжении года.

Как быть, если нужно поменять уже кешированный ресурс? Достаточно сменить URL. Например, можно включить версию в имя файла. Для HTML-документов такой подход будет оптимальным. Однако сроки действия кеширования сокращаются.

Сжатие данных

Важно также сжимать все текстовые данные, которые передаются от сервера браузеру. У большинства серверов применяется GZIP-сжатие ответов. Однако просто активировать опцию недостаточно. Нужно отрегулировать ступень, максимально сократив объемы. А еще стоит применять статическое сжатие: заранее обработать файлы и держать на диске. Веб-сервер сразу будет обращаться к сжатой версии и ее отдавать.

Еще эксперты советуют прибегнуть к наиболее эффективным алгоритмам сжатия: zopfli (совместим с gzip) и brotli (совместим только с https). Их стоит использовать только в статическом виде.

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

CDN

Если ваш сайт посещают в разных странах мира, можно использовать эту технологию. Как ускорить страницу сайта в этом случае? Все просто. Можно сократить расстояние от контента до клиента, поскольку пользователь получает ресурсы от ближайшего узла CDN. Вместе с этим снижается загрузка собственного сервера. Еще система может не просто раздавать контент без изменений. Она способна оптимизировать его и отдавать в сжатом виде: со сжатыми картинками, текстами, прочим. Эта оптимизация реально помогает существенно ускориться.

Подводим итоги

Индустрия ускорения ресурсов — молодая сфера деятельности, которая появилась совсем недавно. Доказывать, что скорость загрузки важна, уже никому не нужно. Это видно даже невооруженным глазом и становится важным фактором конкуренции. Поэтому вопрос оптимизации стоит сегодня остро.

Но достаточно ли просто оптимизировать скоростные параметры? К сожалению, нет. Это процесс постоянный, который нужно регулярно поддерживать. Например, следить за тем, как быстро подгружаются страницы у пользователей в разных частях мира. Этот процесс называется RUM. Чтобы его организовать, хватит подключения одной из систем веб-аналитики. Есть также специализированные сервисы мониторинга скоростных данных, если нужна информация поточнее.

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