Как оптимизировать картинки на сайте wordpress?
Есть сайт, который на pagespeed имеет параметр оптимизации 49/100 главной страницы, это очень мало, хотелось бы выйти хотя бы из красной зоны.
Для этого, понятное дело, нужно исправить хотя бы важные ошибки, это:
Оптимизировать изображения. Поставил плагин WP Smush, он как бы оптимизировал все изображения в медиафайлах, но осталась проблема, например в портфолио, там выводятся не миниатюры изображений, а родные уменьшенные картинки, а pagespeed хочет чтоб я их урезал, если я это сделаю, то и в самом портфолио внутри будет маленькая картинка, аналогичная ситуация и с блоком "последнее в блоге", тут же выводятся последние записи с блога, но картинки выводятся не в миниатюрах, а в родных картинках вставленных в статью и уменьшенных для показа в этом блоке, надеюсь Вы поняли, что я имел ввиду.
Что делать со скриптами и css, блокирующим отображение в верхней части страницы? Ставил плагины типа: autoptimize или speed boost pack, или тот же W3 Total Cache и после включения некоторых параметров я получал + на pagespeed, но страница могла потерять слайдер или развалится вообще.
Ответы (1 шт):
Насчёт портфолио - вам надо создать кастомный размер изображения, соответствующий реальному размеру портфолио 266x250, прогнать картинки через regenerate thumbnails и выводить картинку уже кастомного размера.
Сократите время до получения первого байта от сервера - смените хостинг, лучше на VPS. Как минимум, попробуйте поставить объектное кеширование с Redis.
Устраните ресурсы, блокирующие отображение - я не знаю, что это за чудесные скрипты типа /s/45665f.js. Выглядят вообще подозрительно. Откажитесь от них или запускайте их после события DOMContentLoaded. css для NotoSans надо запускать inline, тогда swap сработает как надо. Но я не вижу, используется этот шрифт или нет. Может, отказаться от него? У вас и так много шрифтов.
Используйте современные форматы изображений - ставьте ewww plugin, и выводите всё в webp.
Удалите неиспользуемый код CSS - практически нерешаемо, слишком много ручной работы.
Настройте подходящий размер изображений - тут понятно, выводите изображения подходящего размера.
Минимизируйте работу в основном потоке -уменьшайте кол-во скриптов на странице
Сократите размер структуры DOM - упрощайте структуру страницы и кол-во элементов на ней