Быстродействие фронтенда: параллельная загрузка ресурсов

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

Еще раз о важности уменьшения количества запросов

Прежде чем перейти к рассмотрению приема параллельной загрузки CSS и Javascript, хотелось бы напомнить о важности уменьшения количества запросов к этим самым ресурсам. Если у вас есть возможность объединить между собой несколько CSS или JS файлов, сделайте это! Каждый запрос к серверу является достаточно дорогой операцией и сокращение их количества принесет большую пользу, нежели их параллелизация.

Параллельная загрузка CSS и JS

Браузеры имеют ограничение на количество одновременно загружаемых ресурсов с одного домена. В этом вы можете убедиться, открыв панель разработчика в Google Chrome или Firefox (Firebug) и выбрав закладку "Network", в которой происходит визуализация загрузки ресурсов на временной шкале "Timeline". Полученная в процессе обработки страницы диаграмма напоминает лестницу, где каждая ступенька представляет собой набор ресурсов, загружаемых одновременно. Все ступеньки идут последовательно и чем больше их в полученной лестнице, тем медленнее работает фронтенд сайта.

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

У многих популярных сайтов есть домены для статических ресурсов. Например Facebook использует static.ak.fbcdn.net, а Twitter abs.twimg.com.

Все это замечательно, однако есть одна проблема - DNS-запросы. При первом обращении к новому домену происходит довольно долгий DNS-запрос (от 20 до 120 мс) и вы должны быть уверены в том, что оно того стоит. Если ваш сайт небольшой, то будет лучше и проще не использовать дополнительный домен вообще. Если у вас 10-15 ресурсов, задумайтесь над тем, чтобы раздавать их с дополнительного домена. Если у вас, например, 40 ресурсов, возможно имеет смысл разделить их на 2 дополнительных домена. В любом случае, универсального рецепта нет. Вы должны сами, методом проб и ошибок, найти для себя наилучший в плане производительности вариант: издержки на DNS-запросы или просто раздача с одного домена.

И все же я рекомендую использовать дополнительные домены, если количество ваших CSS и JS файлов велико. Тем более, что существует прием, позволяющий оптимизировать DNS-запросы.

Предзагрузка DNS

Что делает предзагрузка DNS, понятно из названия. Допустим вы хотите запросить ресурсы с widget.f13.by. Для того, чтобы предзагрузить DNS для данного домена, необходимо добавить в секцию <head> всего одну строчку.

<head>
   <link rel="dns-prefetch" href="//widget.f13.by">
</head>

Эта строчка объявит браузерам, которые поддерживают функцию предзагрузки, что им необходимо загрузить DNS до того, как это понадобиться сделать для получения ресурса. Данный тег <link> полностью обратно совместим и никак не повлияет на стабильность работы сайта в не поддерживающих его браузерах.

Выводы:

  1. Использование дополнительных доменов для "раздачи" статических ресурсов позволяет браузеру загружать их параллельно, что приведет к повышению быстродействия фронтенда.
  2. Использование параллельной загрузки ресурсов должно быть обосновано, а количество дополнительных доменов должно зависеть от количества этих самых ресурсов.
  3. Ресурсы из внешних источников следует загружать асинхронно. В противном случае используйте предзагрузку DNS.