Оптимизация ресурсов Frontend: запросы против кэширования

Question

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

Например:

page 1: 
    - default.css 
    - page1.css 
    - some-feature.css 
    - default.js 
    - page1.js 
    - some-feature.js 

page 2: 
    - default.css 
    - page2.css 
    - default.js 
    - page2.js 

page 3: 
    - default.css 
    - page3.css 
    - some-feature.css 
    - some-other-feature.css 
    - default.js 
    - page3.js 
    - some-feature.js 
    - some-other-feature.js 

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

У меня есть ощущение, что они ресурсы будут обслуживаться быстрее (как на начальном, так и на последующих запросах), если они были агрегированы и уменьшены в одном js и одном файле css на странице. Например, page1.css + page1.js, а на другой странице будет page2.css + page2.js. Хотя это приведет к меньшему количеству запросов, это также приведет к загрузке некоторого общего содержимого в два раза (например, оригинал default.css)

Каким будет предпочтительный способ загрузки этих ресурсов? И есть ли у вас какие-либо результаты теста?

Answer 1

Так у вас есть severall вопросы:

1. Синдиката и преуменьшать или запланировать его для подзапросов. Для этого важны две метрики: во-первых, насколько большой должен быть сжатый и мини-файл .js? Я бы настоятельно рекомендовал поддерживать уровень ниже 300 КБ (даже при мобильном использовании). Но если все ваши страницыX.js вместе имеют 100 кб, объедините их. (Является ли это советом очевидным?) - если ваши файлы более 300 кб на страницу, пожалуйста, оставьте ниже на огромные активы js.

2. Как насчет дубликата default.css/js Code? Если вы храните их отдельно, поместите их на один и тот же URL-адрес. URL-адреса кэша браузера и не будут перезагружать файл, если они просто загрузили его (также см. Заголовок http expiry для улучшения кэширования). Кроме того, рекомендуется хранить их на быстром, реплицируются внешнем пространстве (например, Amazon Cloud Front/S3)

Общая рекомендация:

common (externally hosted, same url): 
- default.minified.css 
- default.minified.js 

page 1: 
- page1.css 
- page1.js 

page 2: 
- page2.css 
- page2.js 

page 3: 
- page3.css 
- page3.js 

** Огромные JS активы **

Хорошо, если ваш page3.js становится большим (> 500kb). Тогда вы действительно должны думать о ленивой загрузке. Это означает, что основная функциональность, необходимая для взаимодействия с пользователем, загружается первой.

После этого существует несколько подходов для загрузки одиночных javascript-файлов async (Google: lazy load javascript) для каждой библиотеки. например. с JQuery как

проделать описанное here

$.getScript('tinymce.js', function() { 
    TinyMCE.init(); 
}); 

Answer 2

TLDR: Люди предпочитают кэширование, потому что ваша страница будет выжить в первой загрузке страницы с полезной нагрузкой с gzip'нутыми

Большинство проектов, которые я видел, были все передний конец активы, объединенные в отдельные файлы.gzip сжатие будет очень полезно, вы можете быть поражены тем, насколько огромным является уменьшение размера файла.

Рассмотрите возможность вывода небольших количеств CSS-кода для страниц в виде встроенного стиля.

Что касается JavaScript, самое лучшее, что вы можете сделать, это преобразовать все активы в модули AMD и использовать что-то вроде RequireJS для обработки зависимостей и порядка выполнения.

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

В конце концов, имея огромное количество рекламы огромное разочарование для передней Эндер, если вы не можете сделать баннеры для загрузки асинхронно (см postscribe)

Рассмотрите возможность использования PageSpeed Tools с помощью Google, это довольно простой инструмент, что может дать вам советы по оптимизации вашей полезной нагрузки.