В README есть руководство о том, как это сделать с использованием текущей версии AdvAgg версии 7.x-2.31 + . Также посмотрите эту вики-страницу в группе High Performance . Большинство сайтов могут набрать 100/100 баллов на https://developers.google.com/speed/pagespeed/insights/ . Инструкции о том, как этого добиться, для новой установки AdvAgg ниже.
Обязательно проверяйте сайт после каждого раздела, чтобы убедиться, что изменения не испортили ваш сайт. Изменения в AdvAgg Modifier, как правило, наиболее проблематичны, но они предлагают самые большие улучшения.
Усовершенствованная агрегация CSS / JS
Перейти к admin/config/development/performance/advagg
- Выберите «Использовать рекомендуемые (оптимизированные) настройки»
AdvAgg Compress Javascript
Установите AdvAgg Compress Javascript, если он не включен, и перейдите к
admin/config/development/performance/advagg/js-compress
- Выберите JSMin, если доступно; в противном случае выберите JSMin +
- Выберите Разбить все (самые маленькие файлы)
- Нажмите на ссылку пакетного сжатия, чтобы обработать эти файлы
AdvAgg Async Font Loader
Установите AdvAgg Async Font Loader, если он не включен, и перейдите в
admin/config/development/performance/advagg/font
- Выберите Локальный файл, включенный в агрегат (версия: XXX). Если эта опция недоступна, следуйте инструкциям прямо под опциями, как ее установить.
- Установите флажок «Использовать localStorage, чтобы флэш-стиль (FOUT) происходил только один раз».
- Установите флажок «Установить cookie-файл таким образом, чтобы вспышка нестандартного текста (FOUT) происходила только один раз».
AdvAgg Bundler
Установите AdvAgg Bundler, если он не включен, и перейдите на
admin/config/development/performance/advagg/bundler
Настройки HTTP / 2.0
- В разделе «Целевое количество пакетов CSS на странице» выберите 25
- В разделе «Целевое количество пакетов JS на страницу» выберите 25
- В разделе «Логика группировки» выберите «Размер файла».
Настройки HTTP / 1.1 (по умолчанию)
- В разделе «Целевое количество пакетов CSS на странице» выберите 2
- В разделе «Целевое количество пакетов JS на страницу» выберите 5
- В разделе «Логика группировки» выберите «Размер файла».
25 пакетов против 2 и 5 связаны с кэшированием в браузере. Чем больше файлов, тем выше вероятность того, что браузер будет иметь этот комбо в своем кэше, но чем больше файлов, тем больше соединений будет установлено и открыто в HTTP 1.1. Используйте 2 для CSS, так как этот номер не ждет новых подключений; JS равен 5, так как большинство браузеров имеют ограничение одновременных подключений 6. Это число для пакетов было выбрано после многих тестов. В HTTP 2.0 существует одно потоковое соединение, и наказание за несколько файлов CSS и JS практически отсутствует; таким образом, оптимизация кеша браузера - лучший выбор; таким образом, 25 следует использовать для CSS и JS при обслуживании HTTP / 2.0.
AdvAgg Relocate
Установите AdvAgg Relocate, если он не включен, и перейдите на
admin/config/development/performance/advagg/relocate
- Выберите «Использовать рекомендуемые (оптимизированные) настройки»
Модификатор AdvAgg
Установите модификатор AdvAgg, если он не включен, и перейдите к
admin/config/development/performance/advagg/mod
- Выберите «Использовать рекомендуемые (оптимизированные) настройки»
Создание критических файлов CSS
Перейдите на https://www.sitelocity.com/critical-path-css-generator и введите столько целевых страниц, сколько необходимо для критического CSS; 10 лучших обычно хорошее начало. Если у вас есть Google Analytics, это покажет вам, как найти ваши главные целевые страницы https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages
или для Piwik https: //piwik.org/faq/how-to/faq_160/ . Если вы не знаете, с какой страницы начать, сделайте домашнюю страницу вашего сайта. Вы также можете использовать это для создания css https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=en
Ниже приведены примеры имен файлов и путей для темы "bootstrap"; все они начинаются с sites/all/themes/bootstrap/critical-css/; в вашей теме создайте critical-css/каталог. Следующий каталог основан на пользователе; anonymous/, all/или authenticated/может быть использован.
Следующий каталог может быть urls/или type/. Глядя на urls/; front - это особый случай для первой страницы, все остальные пути используют current_path () в качестве каталога и имя файла с .cssдобавлением в конец; См. Https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x
Глядя на type/это особый случай для типов узлов. Используйте имя машины и добавьте .cssв конец. К любому узлу этого типа будет применен и встроен этот критический CSS-файл. Ниже приведены некоторые примеры, показывающие, как это работает.
допустимые примеры расположения файлов для "передней" страницы:
sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css
допустимое расположение файла примера для страницы "node / 1" current_path ():
sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css
допустимые примеры расположения файлов для типа узла "страница":
sites/all/themes/bootstrap/critical-css/anonymous/type/page.css
Если вам нужен какой-то автоматизированный способ генерации этих css-файлов, то на fourkitchens есть отличная статья о том, как это настроить:
https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-тема