Как подключить стили в Wordpress по методу Google (PageSpeed ​​Insights)?

Question

[Анатолий]

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Подскажите, как правильно подключить стили в wordpress, чтобы Google обрадовался?
Сейчас они подключается по хуку wp_enqueue_scripts, и что их переподключить на хук wp_print_footer_scripts?
Как правильно загружать асинхронно?

PS. Мне просто интересно, оценки у меня и так хорошие, с выключенном кешем 93/98, c включенным 96/99, но мне просто интересно по этому вопросу, что он хочет?

Answer 1

[Орхан Гасанлы]

Здравствуйте!
В принципе, вам правильно подсказали, что если все ок, то не нужно трогать и не надо гнаться за оценкой 100 из 100. Честно, это абсолютно ничего не дает. Конечно же оптимизировать сайты нужно, но в меру.
Здесь, я подробно ответил насчет оптимизации - Почему Google ругается сам на себя в Google PageSpeed Insights по поводу шрифтов?
Суть "метода подключения скриптов и стилей PageSpeed" заключается в том, что вы загружаете их в подвале, а не в шапке для устранения render blocking JS & CSS.
С JS обычно, не возникают проблемы, а вот, с CSS могут быть проблемы с отображением (как вам уже и сообщили). Чтобы минимизировать проблемы с отображением надо сгенерировать критичный CSS.
Можно применить плагины Autoptimize + Autoptimize Critical CSS (платный сервис) или же PageSpeed Ninja. Можно самому сгенерировать критичный CSS - онлайн сервисы, средствами nodejs и т.д.
https://jonassebastianohlsson.com/criticalpathcssg...
Критичный CSS подключаете инлайн в шапке, а все остальное убираете в подвал.

Comments

[Анатолий]

Плагинами не пользуюсь (кроме парочки при отладке).
Что значит: "надо сгенерировать критичный CSS и разместить их инлайн"?

К примеру, на сайте размещены стили:
- шрифты
- стили слайдера
- основной файл стилей + нормализатор
- стиль видеоплеера

Разбор:
- Стиль плеера можно вниз (плеер используется ближе к концу документа)
- Шрифты можно вниз
- Слайдер использую swiper (он не мой), так что лезть в его css как-то не особо хочется, но он на первом экране.
- Нормализация стиля тоже вроде как обязательна, а то все перекосит
- основной файл стилей - это 1500 строк (с комментариями и пробелами ), из них 200 строк только медиа запросов, так как не понятно в каком разрешении будет просматриваться сайт, короче можно конечно порезать его на 2 части, но инлайново это закидывать в шапку, что-то не хочется, размер сайта от этого только увеличится!

Критический CSS это ИМХО ну совсем для мазахистов или надо это делать как-то автоматом, но плагины не хочется ставить.

[Орхан Гасанлы]

Анатолий, если у вас VPS вы можете сгенерировать используя различные либы. Напрмиер, https://github.com/addyosmani/critical

[Анатолий]

azerphoenix, ИМХО это хрень какая-то!
Поясню, насколько я понял там обязательно нужно задавать размеры viewport, а как их задать, если мой сайт рассчитан на любой экран от 320px до 3200px. Или мне надо потом 200 строк медиазапросов просто руками дописать?

[Орхан Гасанлы]

Анатолий, по идее, вы выбираете только важный CSS код - напрмиер, "каркас" сайта и добавляете для него все необходимые медиа.
Например, шрифты в критичном CSS вы можете не подключать. А использовать font-display
https://css-tricks.com/almanac/properties/f/font-d...
Грубо говоря, минимизировать все стили и подключать только то, что нужно в шапке.
На самом деле много нюансов. Например, использование прогрессивного CSS, вместо критичного CSS.

[Анатолий]

Прогрессивный ИМХО это ваЩе песец, это как заменить все классы на id, и продублировать для каждого блока на странице ))

По шрифтам у меня вопросов нет, так и сделано.
Ладно, надо посмотреть, что он там генерирует в critical версии.

[Орхан Гасанлы]

Анатолий, мне лично двух плагинов хватает с лихвой fastest cache + fastest cache premium. Но бывают заказы, когда люди хотят pagespeed 100 из 100 и тут приходиится прибегать к разным хитростям, чтобы добиться этого. Например, даже плагины для оптимизации картинок не сжимают картинки достаточно, чтобы гугл не жаловался. И тогда использую различные либы (jpegoptim и другие) и с потерей качества (ставлю 30%). С недавних пор гугл еще стал жаловаться на формат изображений. Он хочет png, webp. Про bmp, gif, tiff и другие я вообще молчу)))

[Анатолий]

Да есть такое. Я заморочился написал bash файл, он оптимизирует jpg и создает webp как только файл попадает в uploads, демоном отслеживаю события записи/удаления, так что с этим у меня тоже проблем нет.
Картинки даже под retina x2 показываю, а еще написал свой ленивый плеер ютуба, и много чего еще ))
Видимо до чего у меня не дотянулись руки, это до критиских инлайн стилей )

[Анатолий]

azerphoenix, подскажите еще как мне оптимизировать с помощью https://github.com/addyosmani/critical?
ОС Debian 9, nodejs 10.15.1, npm 6.4.1, тестовый сайт: /var/www/www1/, стили в папке css
npm i -D critical@latest

создал файл test.js

var critical = require('critical');

critical.generate({
    // Inline the generated critical-path CSS
    // - true generates HTML
    // - false generates CSS
    inline: true,

    // Your base directory
    base: '/var/www/www1/',

    // HTML source
    html: '<html>...</html>',

    // HTML source file
    src: 'index.html',

    // Your CSS Files (optional)
    css: ['/var/www/www1/css/fonts.css',
        '/var/www/www1/css/swipper.min.css',
        '/var/www/www1/css/youtube-player.css',
        '/var/www/www1/css/style.css'],

    // Viewport width
    width: 1900,

    // Viewport height
    height: 1200,

    // Target for final HTML output.
    // use some CSS file when the inline option is not set
    dest: 'index-critical.html',

    // Minify critical-path CSS when inlining
    minify: true,

    // Extract inlined styles from referenced stylesheets
    extract: true,

    // Complete Timeout for Operation
    timeout: 30000,

    // Prefix for asset directory
    pathPrefix: '/MySubfolderDocrot',

    // ignore CSS rules
    ignore: ['font-face'],

    // overwrite default options
    ignoreOptions: {}
});

запускаю nide test.js

получаю

(node:42977) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!
/var/npm-server/node_modules/puppeteer/.local-chromium/linux-599821/chrome-linux/chrome: error while loading shared libraries: libXcomposite.so.1: cannot open shared object file: No such file or directory

TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/mas...

at onClose (/var/npm-server/node_modules/puppeteer/lib/Launcher.js:342:14)
at Interface.helper.addEventListener (/var/npm-server/node_modules/puppeteer/lib/Launcher.js:331:50)
at Interface.emit (events.js:194:15)
at Interface.close (readline.js:379:8)
at Socket.onend (readline.js:157:10)
at Socket.emit (events.js:194:15)
at endReadableNT (_stream_readable.js:1103:12)
at process._tickCallback (internal/process/next_tick.js:63:19)
(node:42977) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:42977) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:42977) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!
/var/npm-server/node_modules/puppeteer/.local-chromium/linux-599821/chrome-linux/chrome: error while loading shared libraries: libXcomposite.so.1: cannot open shared object file: No such file or directory

TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/mas...

at onClose (/var/npm-server/node_modules/puppeteer/lib/Launcher.js:342:14)
at Interface.helper.addEventListener (/var/npm-server/node_modules/puppeteer/lib/Launcher.js:331:50)
at Interface.emit (events.js:194:15)
at Interface.close (readline.js:379:8)
at Socket.onend (readline.js:157:10)
at Socket.emit (events.js:194:15)
at endReadableNT (_stream_readable.js:1103:12)
at process._tickCallback (internal/process/next_tick.js:63:19)
(node:42977) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

проверил на диске нет файла libXcomposite.so
---
установил apt install libxcomposite-dev -y
скопировал в папку:
cp /usr/lib/x86_64-linux-gnu/libXcomposite.so /var/npm-server/node_modules/puppeteer/.local-chromium/linux-599821/chrome-linux/
ничего не изменилось ((
---
я вот что подумал, а нужно ли этому модулю GUI? а то у меня только консоль!

[Орхан Гасанлы]

Анатолий, я не использовал эту либу, хоть и скинул вам ссылку. Но сомеваюсь, что ей нужна GUI.

[Анатолий]

azerphoenix, понятно. А чем пользуетесь если не секрет, онлайн сервисами? )

[Орхан Гасанлы]

Анатолий, если сильно просят, то да онлайн-сервисами. Не у каждого заказчика есть vps и порой надо решать задачи на shared хостингах)
Вот, еще неплохой набор плагинов - https://github.com/o10n-x/ В частности, wordpress-css-optimization
Раньше они выпускали плагины, но потом что-то с ВП не подружили и их плагины были удалены из репо.

[Анатолий]

А какие онлайн сервисы посоветует, плагин сразу - нет, не хочу их ставить.
А зачем клиенту vps? Вы правите код прямо на сервере? Я думал правильно будет туда заливать уже исправленный код/стиль?!

[Орхан Гасанлы]

Анатолий, вот, простой и бесплатный онлайн-сервис - https://jonassebastianohlsson.com/criticalpathcssg...
сайт разрабатывается на локалке, но генерировать-то критичный CSS надо на сервере или хотя бы открыть доступ к локальному сайту извне, чтобы онлайн-сервисы могли сгенерировать critical css.
Минус бесплатных онлайн сервисов в том, что вы сгенерируете для одной страницы. Т.е. этот метод подойдет, если увас все страницы используют один и тот же шаблон и не сильно отличаются.
Можно и средствами ноды сгенерировать критичный CSS - https://brianflove.com/2016/07/18/generate-critica...
Я не использовал ноду, если честно. Хотя, как по мне на vps это является более адекватным решением, динамически формировать стили для каждой страницы и кэшировть

[Анатолий]

Все понятно, ну что же, тема исчерпана, теперь ясно, что хочет гугл.
Спасибо за ответы, а я пойду открою новую тему, может кто подскажет как через nodejs все таки это реализовать. Еще раз спасибо.