Включить отдельные файлы CSS и JS в заголовок ИЛИ весь код в один файл CSS и один JS?

Question

Я пытаюсь оптимизировать свой сайт.У меня есть несколько подключаемых модулей (jquery-плагины с CSS) и мой собственный код javascript.

Теперь у меня есть CSS в отдельных файлах для разных плагинов, так как я их скачал.И , если мне нужно одно на текущей странице, я генерирую код, чтобы включить это.То же самое с файлами JS.Но когда дело доходит до визуализации сложной страницы с большим количеством материала, можно вызвать 9 файлов CSS и 7 или 8 файлов JS, каждый из которых является HTTP-запросом.

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

Я подумал о третьем способе: генерировать файлы CSS и JS с помощью PHP.Тогда это будет всегда один JS и один CSS-файл, и только с теми вещами, которые необходимы.Или это абсурдный путь?

Что вы скажете, что использовать для сокращения времени загрузки страницы?

Answer 1

Лучше включить весь CSS в файл и все JS в файл и минимизировать их, используя множество онлайн-сервисов, которые минимизируют и сжимают CSS и Javascript.это уменьшит количество запросов http, а также объем загружаемых данных.

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

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

сокращение числа запросов HTTP очень важно.

Answer 2

Для меня лучший способ где-то посередине - для CSS-файлов вам лучше взять их все, объединить и сжать в один файл.Для кода JS - создайте, например, 3+ файла: один со сжатыми и объединенными внешними библиотеками, один со своими общими вещами и, возможно, следующие файлы для каждого более крупного раздела - но я не думаю, что это необходимо.Возможно разделение вашего JS-кода на части, необходимые перед входом в систему и после входа в систему.

Не забудьте минимизировать и рассмотреть асинхронную загрузку (например, с LAB.js ).

О, и этот скрипт php ... Я не думаю, что это хорошая идея - лучше использовать / написать какой-нибудь скрипт, который объединяет и минимизирует ваши статические показатели при компиляции (или развертывании, или даже запуске вручную), поэтому нет необходимости генерироватьвсе снова и снова.

Answer 3

Это во многом зависит от того, как ваши пользователи используют вашу страницу.Если большинство пользователей просто просматривают одну страницу, то имеет смысл отправлять им только то, что им нужно для отображения этой страницы (объединяя все в минимально возможное количество запросов).С другой стороны, если большинство пользователей просматривают несколько страниц, имеет смысл отправлять их больше, чем им нужно, поэтому у них уже будет CSS & JS при просмотре следующей страницы.Но в этом случае вы должны убедиться, что вы всегда генерируете один и тот же CSS и JS с одним и тем же URI, чтобы браузер не перезагружал один и тот же контент под другим именем.Вы также должны настроить правильное HTTP-кэширование.

Я обычно делю JS / CSS на две части.У каждой страницы есть «common.css» и «common.js», в которых есть материал, который нужен каждой странице (стили header / footer / ... для CSS, а затем jquery / common js / ... для JS).Тогда каждая подстраница имеет свой собственный JS & CSS, в котором есть только то, что вам нужно для этой страницы (если требуется).

Answer 4

Я думаю, что ваше последнее решение лучшее.

Создайте один файл js и один файл css из php, и не забудьте свести их к минимуму / gziped:)

Вот очень хорошая статья об оптимизации: http://developer.yahoo.com/performance/rules.html