Размещение Java-скриптов и CSS-компонентов во внешние файлы

В статье "Make JavaScript and CSS External" автор говорит о ситуациях, при которых предпочтительнее размещать скрипты и таблицы стилей во внешние файлы или внутри страницы.

Многие правила работы с сайтом связаны с управлением внешними компонентами. Но прежде всего необходимо ответить на главный вопрос:  JavaScript и CSS должны находиться во внешних файлах, или быть встроены в саму страницу?

Использование внешних файлов в реальности обычно ускоряет открытие страниц, потому, что файлы JavaScript и CSS кешируются браузером. Встроенные в HTML-документ JavaScript и CSS  загружаются при каждом обращении к HTML-документу. Это уменьшает количество HTTP-запросов, но увеличивает размер HTML-документа. С другой стороны, если JavaScript и CSS, кешируемые браузером, находятся во внешних файлах, то размер HTML-документа  уменьшается, без увеличения количества HTTP-запросов.

Ключевым фактором является частота, с которой кешируются внешний JavaScript и компоненты CSS по отношению к количеству HTML-запросов. Этот фактор, хотя и трудно поддаётся количественной оценке, может быть измерен с помощью различных метрик. Если пользователи просматривают странички вашего сайта несколько раз за одну сессию и многие из ваших страниц повторно используют одни и те же скрипты и таблицы стилей, то есть большая потенциальная выгода от внешних кэшированных файлов.

Много сайтов подпадают под средние показатели данных метрик. Лучшим решением для этих сайтов является размещение JavaScript и CSS компонентов во внешние файлы. Единственным исключением, когда предпочтение отдается размещению во внутренние файлы, является главная страница, как, например, главные страницы Yahoo! и My Yahoo!. Главные страницы сайтов, которые имеют немного (возможно только один) просмотров за сессию, могут предпочесть размещение JavaScript и CSS во внутренние файлы , что ускоряет время отклика конечного пользователя.

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

 

Оригинал статьи на developer.yahoo.com

Перевод КОМТЕТ komtet.ru