Как увеличить скорость работы веб-ресурса

Скорость веб-ресурса — это один из самых существенных факторов с точки зрения клиентского опыта и в плане SEO-продвижения.

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

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

Разбираемся, от чего зависит скорость загрузки сайтов и как её сократить.

От чего зависит скорость работы веб-ресурсов

От множества разных факторов. В этой статье мы разберём три основных:

• Время ответа сервера.
• Особенности контента и скорость его отображения.
• Отрисовка страницы.

1. Время ответа сервера

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

Альтернативное название для этого понятия — время получения первого байта (Time To First Byte, или TTFB).

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

От чего зависит показатель:

• Нагрузка на сервер. Сколько посетителей заходит в веб-сервис, сколько трафика приходит одновременно. Чем больше, тем медленнее всё будет обабатываться. 
• Характеристики машины. Достаточно ли она мощная.
• Расположение относительно ваших юзеров. Чем дальше, тем медленнее будет идти информация.
• Работа с базами данных. Если ваше приложение взаимодействует с БД, возможно, это тоже является причиной задержек, если она расположена на машине, у которой недостаточно ресурсов, или имеет не подходящие настройки.

2. Особенности контента и скорость его отдачи

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

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

3. Отрисовка страницы

Ваше веб-приложение — это фотки, видео, текст, различная графика и так далее. Когда веб-приложение загружается, всё собирается воедино и отображается на экране. Это называется отрисовкой страницы.

Обычно именно темп отрисовки проверяют различные сервисы вроде популярного Page Speed Insight.

От чего зависит темп отрисовки:

• Количество компонентов.
• В каком порядке они загружаются (самые важные отображаем в самом начале).
• Вёрстка.

Как уменьшить время ответа сервера

1. Оптимизировать работу с базами данных

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

Это особенно актуально, если речь идёт о динамическом контенте (соцсети, форумы, список рекомендаций в интернет-магазинах и всё остальное, что не хранится в готовом виде, а создаётся после того, как его запросят). В этом случае надо не только «забрать» файлы, но и сформировать то, что должен увидеть юзер.

Оптимизировать взаимодействие с БД — задача для опытных программистов. Самое основное, что необходимо сделать:

• Оптимизировать запросы к базе данных. Используйте команду EXPLAIN в своих БД, чтобы понять, что работает медленно, и придумать, как ускорить.
• Кешировать ответы на самые частые, одинаковые запросы. Это особенно нужно в случае с динамическими приложениями. Вместо того чтобы каждый раз формировать содержимое заново, база будет отдавать уже сформированный материал из кеша.
• Настроить индексы БД. Поиск данных по таблицам необходимо настроить по индексируемым полям.

2. Подключить CDN

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

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

Эту проблему решает CDN (Content Delivery Network) — сеть доставки контента. Это множество связанных между собой CDN-серверов (точек присутствия), которые забирают содержимое с сервера-источника, кешируют его и отдают потребителям.

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

Кеширование происходит на CDN-серверах:

• Допустим, ваш сервер-источник располагается в Германии, а клиенты живут по всей Европе, в Америке и в Китае. Вы подключаете сеть с точками присутствия во всех этих регионах.
• Когда кто-то, например, из Америки первый раз заходит веб-приложение, запрос идёт к серверу-источнику.
• Но полученная информация сохраняется на ближайшем к пользователю CDN-сервере.
• Когда следующий юзер из Америки зайдёт на ваш ресурс, он направится уже не к источнику, а к ближайшей точке присутствия.

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

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

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

3. Уменьшить нагрузку

Сначала попробуйте сократить количество запросов.

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

Есть несколько приёмов, помогающих сделать это так, чтобы внешний вид страницы не изменился:

• Использовать CSS-спрайты — комбинированные изображения, содержащие в себе несколько маленьких картинок. Обычно в 1 спрайт объединяют фоновые изображения, части интерфейса (например, иконки, кнопки), фото, имеющие одну цветовую палитру.
• Использовать inline-изображения — изображения, которые используют схему dаta: URL (изображение включается в сам HTML-файл).
• Объединить несколько элементов в один: например, несколько CSS-файлов или JS-файлов.

CSS-спрайты в некоторых случаях даже уменьшают объём картинок и помогают ускориться. Но вот inline-изображения увеличивают объём HTML-файла. Объединённые файлы тоже получаются большими. Поэтому здесь выходит палка о двух концах: вы снижаете TTFB, но утяжеляете содержимое.

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

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

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

Количество трафика снижается, он обрабатывается быстрее.

Шилдинг предоставляют многие продвинутые CDN-провайдеры. У EdgeCDN он тоже есть.

4. Разместить доменные имена на ближайших DNS-серверах

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

Получается, браузер сначала обращается к DNS-серверу, чтобы выяснить IP. Подробнее, как это работает, читайте в статье «DNS-сервер: что это и как работает?».

Чем дальше находится DNS-сервер, на котором размещены ваши доменные имена и их IP, тем дольше он будет отвечать.

Как лучше поступить? Разместить свои доменные имена на DNS-серверах как максимально близко к вашим клиентам. И выбрать надежный DNS-хостинг с большим числом локаций и возможностью балансировать нагрузку.

5. Сменить конфигурацию

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

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

Если нет, смените тариф хостинга на более мощный или перейдите к другому провайдеру.

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

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

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

Но при уменьшении размера не должно сильно ухудшаться качество.

Чтобы ускорить онлайн-ресурс и при этом сохранить высокое качество, применяют современные инструменты сжатия, такие как Gzip, Brotli и WebP.

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

Gzip умеет сжимать только текст. Находит в файле одинаковые строки и объединяет их. За счёт этого содержание уменьшается на 60–70%.

Brotli работает с любой информацией. Он берёт уже встроенный в браузеры словарь. В этом словаре хранится почти 100 000 фраз и фрагментов, которые чаще всего встречаются в интернете. Brotli вычисляет новые фрагменты и передаёт только их, а всё остальное заменяет кусками из словаря.

Такая технология позволяет сжимать на 20–25% эффективнее, чем Gzip.

WebP — сжимает изображения. Сейчас его используют как эффективный аналог PNG и JPEG. WebP сжимает картинки без потерь на 26% лучше, чем PNG, и на 25–34% эффективнее JPEG.

Всё происходит в два этапа:

• Алгоритм пытается предсказать содержание блока по уже декодированным.
• Кодирует и исправляет ошибки предсказания.

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

EdgeCDN не только поддерживает эти алгоритмы, но и умеет сжимать файлы. В процессе отдачи Gzip работает на CDN-серверах, а Brotli — на шилдинге. Это значит, что вам не нужно настраивать сжатие и прописывать код на своей стороне. Вы можете загрузить исходники, а при доставке они будут сжаты автоматически.

Как оптимизировать отрисовку

1. Поместите jаvascript-файлы в конец. Мы упоминали, что самое важное должно загружаться в первую очередь. JS-файлы к важному не относятся.

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

2. Скройте то, что не обязательно для мобильной версии. На многие веб-ресурсы сейчас заходят со смартфонов. Мобильные устройства слабее стационарных ПК. А если к этому прибавляется нестабильный мобильный интернет, всё сильно замедляется.

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

Выводы

• Более 50% пользователей закрывают онлайн-ресурс, если он грузится дольше 3 секунд, а поисковики в выдаче отдают предпочтение быстрым сайтам. Поэтому очень важно сделать так, чтобы ваш веб-ресурс работал быстро.
• Скорость зависит от TTFB, загрузки контента, отрисовки страницы и других факторов.
• Для сокращения 1-го показателя есть разные методы: улучшите взаимодействие с базами данных, разместите доменные имена на DNS-серверах, близких к вашим клиентам, и подключите CDN. Если всё это не помогает, возможно, нужно увеличивать вычислительные мощности.
• Чтобы содержимое грузилось быстрее, нужно максимально снизить его вес. Отличное средство — алгоритмы сжатия Brotli, Gzip, WebP.
• Чтобы ускорить отрисовку, поместите JS-файлы в конец и скройте элементы, не нужные для мобильной версии.
• CDN влияет на ускорение и отказоустойчивость. Это отличный способ оптимизации, особенно если сеть поддерживает удобные функции: например, шилдинг и сжатие на лету. Это ещё и повысит отказоустойчивость, поможет оптимизировать файлы и картинки.
• Все эти функции есть у EdgeCDN.

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