1. Параллельная загрузка JavaScript
и CSS файлов без прерывания
парсинга страницы

2. Old school
• Известно, что следуя идеям старой школы,
а именно, добавляя ссылки на JS и CSS в
страницы, может обернуться большим
временем загрузки страницы. Браузер
отображает страницу по мере скачивания,
но останавливается, если натыкается на тег
script со ссылкой, до того момента, пока
скрипт не будет загружен и выполнен.

3. Способы ускорить загрузку
страницы
• — поместить стили и скрипты прямо в
страницу;
— установка аттрибутов async/defer тегу
script;
— склеить все скрипты в один файл;
— помесить ссылки на скрипты в конец
body;
— разместить все файлы на CDN/на разных
хостах;
— свой вариант…

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

5. Установка атрибутов async/defer
тегу script

6. Установка атрибутов async/defer
тегу script

7. Склеивание скриптов и стилей

8. Помещение stylesheet в head, а
script — в конец body
• Достойно упоминания и использования, но в этом
случае, как и в описанных выше, до момента
document.ready могут быть неразрешённые
зависимости между скриптами, и если для jQuery с
плагинами это допустимо, то для варианта, когда
мы загружаем библиотеку API Facebook'а или
VKontakte, и хотим тут же запустить наш скрипт,
который пошлёт на API запрос определения,
залогинен ли пользователь, это сулит костылями,
либо загрузкой библиотеки API в начале страницы,
блокируя её отображение.

9. Загрузка с CDN
Одноточечная дистрибуция (слева) и дистрибуция средствами CDN (справа)

10. Свое решение
• Что если попробовать загружать скрипты в
тот момент, пока страница грузится, но не
выполнять их, и вообще скрывать от
браузера, что это скрипты до того момента,
пока они не догрузились, чтобы не
блокировать первичное отображение
страницы?

11. Заключение
— встроить в head страницы script, указывающий на
загрузчик;
— встроить inline скрипт, использующий загрузчик
для подгрузки других скриптов и стилей;
— объединять скрипты и стили, использующиеся
только совместно, в один для минимизации
количества HTTP запросов;
— минимизировать скрипты и стили;
— убедиться в том, что сервер пакует
передаваемые данные gzip'ом;
— убедиться в том, что сервер правильно кеширует;
— осторожно и вдумчиво использовать сторонние
CDN и дополнительные хосты.