Усуньте JavaScript та CSS, що блокують візуалізацію, у верхньому вмісті

Я будую сайт Drupal 7. Це деякі з модулів, які я використовую: Adaptivetheme (тема), Панелі перегляду та вмісту, Панелі, Міні панелі, Панелі скрізь, Менеджер сторінок, Superfish для меню, Addthis, Chosen (випадає).

Для підвищення продуктивності мого сайту та роботи з файлами CSS та JS я використовую модуль Advagg .

Під час запуску тесту Pagespeed Google у мене з’являється така помилка як «Поправити»:

Усуньте блокування JavaScript та CSS, що блокує візуалізацію, у верхній частині
вмісту На вашій сторінці є 6 блокуючих ресурсів сценарію та 8 блокуючих ресурсів CSS. Це спричиняє затримку візуалізації вашої сторінки.
Жоден із наведених вище вмістів на вашій сторінці не може бути відображений, не чекаючи завантаження наступних ресурсів. Спробуйте відкласти або асинхронно завантажити блокирующие ресурси або вбудувати критичні частини цих ресурсів безпосередньо в HTML.

Це інформація, яку постачає Google:

• Видаліть JavaScript, що блокує візуалізацію
• Оптимізуйте доставку CSS

Чи є спосіб змінити параметри модуля Advagg або ядра Drupal і вирішити цю проблему?

Чи є інший спосіб досягти цієї мети?

Оновлення - після впровадження змін відповідно до відповіді mikeytown2 я отримав таке повідомлення в тесті Pagespeed Google:

Усуньте блокування JavaScript і CSS, що блокує візуалізацію, у верхньому контенті На
вашій сторінці є 6 блокуючих ресурсів сценарію та 4 блокування ресурсів CSS. Це спричиняє затримку візуалізації вашої сторінки.
Жоден із наведених вище вмістів на вашій сторінці не може бути відображений, не чекаючи завантаження наступних ресурсів. Спробуйте відкласти або асинхронно завантажити блокирующие ресурси або вбудувати критичні частини цих ресурсів безпосередньо в HTML.

У README є посібник, як це зробити за допомогою поточної версії AdvAgg 7.x-2.31 + . Також дивіться цю сторінку вікі в групі «Висока ефективність» . Більшість сайтів можуть досягти ідеального 100/100 балів на https://developers.google.com/speed/pagespeed/insights/ . Нижче наведено вказівки, як досягти цього для встановлення AdvAgg.

Не забудьте перевірити сайт після кожного розділу, щоб переконатися, що зміни не зіпсували ваш сайт. Зміни в AdvAgg Modifier, як правило, найбільш проблемні, але вони пропонують найбільші вдосконалення.

Йти до admin/config/development/performance/advagg

• Виберіть "Використовувати рекомендовані (оптимізовані) налаштування"

Встановіть AdvAgg Compress Javascript, якщо він не включений, і перейдіть до admin/config/development/performance/advagg/js-compress

• Виберіть JSMin, якщо такий є; в іншому випадку виберіть JSMin +
• Виберіть Стріп все (найменші файли)
• Клацніть посилання пакетного стиснення, щоб обробити ці файли

Встановіть AdvAgg Async Loader Font, якщо він не включений, і перейдіть до admin/config/development/performance/advagg/font

• Виберіть Локальний файл, включений у сукупність (версія: XXX). Якщо ця опція недоступна, дотримуйтесь вказівок, розташованих нижче під опціями, як її встановити.
• Поставте прапорець "Використовуйте localStorage, щоб спалах нестирного тексту (FOUT) відбувся лише один раз."
• Поставте прапорець "Встановити файл cookie, щоб спалах нестиркого тексту (FOUT) відбувся лише один раз."

Встановіть 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, якщо його не включено, і перейти до admin/config/development/performance/advagg/relocate

• Виберіть "Використовувати рекомендовані (оптимізовані) налаштування"

Встановіть модифікатор AdvAgg, якщо його не включено, і перейдіть до admin/config/development/performance/advagg/mod

• Виберіть "Використовувати рекомендовані (оптимізовані) налаштування"

Перейдіть на сторінку 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=uk

Приклади назви файлів і шляхів нижче для теми "завантажувальна програма"; всі вони починаються з sites/all/themes/bootstrap/critical-css/; у вашій темі створіть critical-css/каталог. Наступний каталог базується на користувачеві; anonymous/, all/або authenticated/може бути використаний.

Наступним каталогом може бути urls/або type/. Дивлячись на urls/; спереду - особливий випадок для титульної сторінки, всі інші шляхи використовують 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 -друкарська-7-тема

Ви ніколи не отримаєте по-справжньому високих балів за допомогою попередньо вбудованих модулів друпалу, єдиний спосіб досягти цього - відвідавши та ретельно проаналізувавши всі пропозиції, зроблені інструментом швидкість Google , звертаючись до кожного з них незалежно.

Деякі речі, які я зробив, щоб досягти 95 на дуже активному сайті новин , який до того моменту, як я це писав, набрав кращий результат, ніж nytimes (зараз це не так):

• [блокування сценаріїв] Затримка виконання сторонніх скриптів, таких як sharethis, віджети facebook, google plus тощо, для запуску лише після повного відтворення сторінки. Це вимагало декількох простих замін рядків на виході html.tpl.php, щоб схопити ці сценарії та поставити їх у чергу для подальшого виконання.
• [блокування сценаріїв] Збережіть змінну $ script у складі html.tpl.php (з json_encode) у змінній javascript, щоб поставити їх у чергу після запуску після завантаження першої сторінки. Це неприродно, але необхідно. Деякі проблеми, пов’язані з веб-переглядачем, потрібно було розібрати
• [блокування css] Реалізовано щось подібне до методики Кіта Кларка , але з rel = "prefetch". Це вводить необхідність вирішення FOUC .
• [Мінімізація та стискання] Екстерналізація стиснення та мінімізації на сервер розподілу, де я можу використовувати Imagemagic, yui-компресор, pngoptim та інші речі для подолання цих правил, не перетворюючи інсталяцію drupal в некерований безлад.