Я строю сайт на Drupal 7. Вот некоторые из модулей, которые я использую: Adaptivetheme (тема), Панели видов и контента, Панели, Мини-панели, Панели повсюду, Диспетчер страниц, Superfish для меню, Addthis, Chosen (выпадающий).
Для повышения производительности моего сайта и работы с файлами CSS и JS я использую модуль Advagg .
При запуске теста Pagepeed в Google я получаю следующую ошибку «Следует исправить»:
Устраните блокировку рендеринга JavaScript и CSS в верхнем
содержании. На вашей странице есть 6 блокирующих ресурсов скрипта и 8 блокирующих CSS-ресурсов. Это приводит к задержке рендеринга вашей страницы.
Ни один из вышеперечисленных материалов на вашей странице не может быть обработан без ожидания загрузки следующих ресурсов. Попробуйте отложить или асинхронно загрузить блокирующие ресурсы или включить критические части этих ресурсов непосредственно в HTML.
Это информация, которую поставляет Google:
Есть ли способ изменить настройки модуля Advagg или ядра Drupal и решить эту проблему?
Есть ли другой способ достичь этой цели?
Обновление - после внесения изменений в соответствии с ответом mikeytown2 я получил следующее сообщение в тесте Google Pages:
Устраните блокировку рендеринга JavaScript и CSS в верхнем содержании. На
вашей странице есть 6 блокирующих ресурсов скрипта и 4 блокирующих CSS-ресурса. Это приводит к задержке рендеринга вашей страницы.
Ни один из вышеперечисленных материалов на вашей странице не может быть обработан без ожидания загрузки следующих ресурсов. Попробуйте отложить или асинхронно загрузить блокирующие ресурсы или включить критические части этих ресурсов непосредственно в HTML.
asyncне поддерживаются старыми браузерами. Например, агрегация по умолчанию в Drupal включает<link>теги для всех ваших CSS. Если ваш сайт CSS или JS слишком сложный, у вас всегда будет эта проблема. Если вы правильно строите свой сайт, вы можете безопасно собирать файлы. Без информации о файловых зависимостях детали вопроса слишком широки - модуль никогда не сможет решить свою проблему; все дело в том, как написаны CSS и JS, а также в порядке их включения и сложности. он никогда не говорил, что хочет неблокировать, вы предполагаете, что он этого хочет.Ответы:
В 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
Настройки HTTP / 1.1 (по умолчанию)
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-тема
источник
advagg/modстранице И / ИЛИ вы не переместили все JS в нижний колонтитул. Также, если бы я мог видеть страницы с полным исходным кодом, который обычно помогает с рекомендациями (просто ссылка на ваш сайт).Вы никогда не получите по-настоящему высоких результатов с предварительно собранными модулями drupal. Единственный способ добиться этого - посещать и тщательно анализировать каждое из предложений, сделанных инструментом ускорения Google , обращаясь к каждому из них независимо.
Некоторые вещи, которые я сделал, чтобы достичь 95 на очень активном новостном сайте , который к тому времени, когда я написал это, набрал больше очков, чем nytimes (сейчас это не так):
источник