WP + Woocommerce как добиться 90 pagespeed?

Question

[Fqwd123]

(!) Хочу сразу отметить что буду благодарен ответу даже не один вопрос, которых тут множество.
У меня есть проект на обслуживании, писал не я, лишь немного допиливал. Сайт типичный маленький магазин(где то до 500 товаров) на Woocommerce, для мультиязычности используется WPML, для "оптимизации" стоит Autooptimize. Сейчас в виду неких заморочек Google PageSpeed выдаёт 30 на мобилке, 50 на компе, но в целом если всё подчистить то можно добиться стабильных 60-70. Но хочется все 90, подскажите каким способом этого можно добиться?
- Как сократить первую отрисовку? У меня получается очень тяжелая страница, много картинок, на главной отображается много товаров - всё это запросы к БД, как это побороть. Использовать аякс и прелоадеры?
- Есть ли смысл, и возможно ли прикрутить WebPack к wordpress? К примеру для конвертации изображений в Webp или сборки файлов в модули. В целом насколько я понимаю там функционал близок к бесконечности и можно настраивать под себя( в отличии от этих чудо плагинов, в которых поставил пару галочек и всё "летает" - хотя поправьте насчёт плагинов если я не прав).
- Если вебпак отпадает, что можно придумать с картинками? Есть уже готовая база из десятков тысяч изображений, все они jpeg, есть ли смысл заморачиваться с изменениями формата? С одной стороны картинки много весят и это плохо, но с другой стоит задача адекватного отображения на retina дисплее, как быть?
- Раз уж всё будет с нуля переписываться, на какие ещё моменты стоит обратить при разработке что бы добиться максимальной производительности?

Comments

[Fqwd123]

Антон Литвиненко, на самом деле сайт реально очень долго грузится, но а вообще у меня было достаточно клиентов для которых это основной показатель "качества", в код же они не будут лезть. Но а в целом согласен, учитывая что 99% вместо реальной оптимизации просто пытаются обмануть алгоритм, в целом штука не особо показательная

[Дмитрий]

Антон Литвиненко, ну потому как с августа гугл будет учитывать попугаи пейджспида в ранжировании
https://developers.google.com/search/blog/2021/04/...

Fqwd123,

Если вебпак отпадает, что можно придумать с картинками?

вебпак добавить можно, но проще будет поставить Jetpack
этот плагин автоматом будет все картинки грузить через свой CDN, автоматом меняя им формат на более маленький и оптимизируя качество

[Антон Литвиненко]

Fqwd123, так вот то что он долго грузится то тут вполне можно юзать подсказки пейджспид и постараться ускорить. А добиваться эфимерных 90+ это личный фетиш каждого

[Юрий Горбунов]

Антон Литвиненко, ну вообще показатель PageSpeed с 1 мая официально учитывает Гугл. Он и раньше наверняка учитывал, но теперь официально объявили, что сайты с более высоким настоящим PageSpeed индексом котироваться будут выше и на своих примерах увидел, что действительно все оптимизированные сайты "взлетели"

[Fqwd123]

Дмитрий, спасибо за совет с JetPuck, он у меня как раз стоял, но у меня почему то качество картинок заметно ухудшилось, страшно представить как это выглядит на retina, не знаете, можно ли это как то пофиксить?

[Дмитрий]

Fqwd123,
1. настроить качество

add_filter('jetpack_photon_pre_args', 'jetpackme_custom_photon_compression' );
function jetpackme_custom_photon_compression( $args ) {
    $args['quality'] = 80;
    $args['strip'] = 'all';
    return $args;
}

2. раздавать картинки с srcset

[Fqwd123]

Дмитрий, спасибо помогло, но 1 большой баннер все равно размытый как бы я не игрался с quality. А можно как то сделать что бы определенный баннер вовсе игнорировался?

[Fqwd123]

Дмитрий, вернее не баннер, а блок с баннерами, как отдельную картинку/страницу задизейблить я нашел, но в блоке с баннерами картинки часто меняешься, пихать ссылки точно не вариант

[Дмитрий]

Fqwd123, почему не вариант?
загрузка всех картинок через их CDN вполне себе неплохой вариант

скорее всего проблема из-за того, что размер картинки небольшой. Или не корректно указаны значения width/height у картинки

[Fqwd123]

Дмитрий, дело в другом, у меня есть 3-4 больших картинки в баннере, и мне нужно что бы блок к картинками баннера игнорировался и не загружался в CDN так как слишком видны потери в качестве( в то время как другие картинки намного меньше и потерь не видно). В документации я нашел что можно отдельную ссылку на картинку взять и внести в исключение, но как быть если эти ссылки у меня постоянно меняются, как сделать что бы сам блок с картинками перестал грузится

Answer 1

[GadGG]

Memcached, из памяти выдавай стр, а не генерируй каждый раз новую + minify css/js, lazyload.
Смени хоста, поставь OpenLiteSpeed сервер, из под коробки быстрее, чем apache

Answer 2

[Артем Золин]

Тяжелые запросы к БД можно решить статичным кэшированием (fastest cache/wp rocket). В этих плагинах будет куча полезных доп. настроек - gzip, minify html/css/js и т.д.

Изображение придется сжать без потери качества —robin image optimizer, tinypng, gulp-imagemin

Еще ключи для гугла — redis, cloudflare, openlitespeed, php-fpm