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

Разбираемся, от чего зависит скорость работы веб-приложений и как её сократить.

Скорость работы веб-ресурса — один из самых важных факторов и с точки зрения клиентского опыта, и с точки зрения 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 информация кешируется в точках присутствия после первого запроса:

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

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

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

У EdgeCDN десятки точек присутствия по всей России и в СНГ, и огромная партнёрская сеть на всех континентах, кроме Антарктиды. Благодаря отличному покрытию мы обеспечиваем среднее время отклика по миру в пределах 30 мс. Суммарная ёмкость сети составляет уже более 110 Тбит/с.

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

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

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

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

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

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

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

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

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

Основная функция шилдинга — защита вашего сервера от слишком большого количества запросов. Все запросы от 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 фраз и фрагментов, которые чаще всего встречаются в интернете. Алгоритм вычисляет новые фрагменты в файлах и передаёт только их, а всё остальное заменяет элементами из словаря.

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

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

Сжатие происходит в два этапа:

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

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

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

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

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

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

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

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

CDN влияет на ускорение сайта и его отказоустойчивость. Это отличный способ оптимизировать работу ваших ресурсов, особенно если сеть поддерживает удобные функции: например, шилдинг источника и сжатие Brotli, Gzip и WebP. Такая CDN ещё и уменьшит нагрузку на сервер и поможет оптимизировать контент.

Все эти функции есть у EdgeCDN.