Как убрать изображение записи в мобильной версии сайта на WP?

Статистика вещь упрямая и врать не будет — доля мобильных пользователей в Вебе растёт от года к году и 2020 не стал исключением. Поэтому крайне важно иметь быструю и оптимизированную мобильную версию сайта. Дело в том, что WP не предоставляет инструментов для скрытия изображения записи (featured image) для определенного разрешения экрана, т.е. оно либо есть всегда, либо его придется удалять совсем.

Наша задача сделать так, чтобы изображение записи показывалось только для десктопной версии сайта (ПК/ноутбуки). Как правило, такие пользователи используют либо проводной интернет, либо сеть Wi-Fi и со скоростью у них всё в порядке. Другое дело — планшеты и смартфоны. В некоторых местах передача данных работает весьма задумчиво и подгружать лишнее изображение им ни к чему

Зачем это нужно?

Неделю назад Google анонсировал новый алгоритм ранжирования в поисковой выдаче — Page Experience. Если коротко — всё завязано на скорости сайта. Ваш сайт должен быть максимально быстрым, чтобы быть в первых строчках поиска. Уже сейчас можете проверить главные метрики этого фактора через инструмент Google Page Speed — время отрисовки основного контента (LCP), задержка после первого ввода (FID), совокупное смещение макета при отрисовке (CLS). Алгоритм Как комплексно увеличить Page Speed на мобильной версии мы писали здесь. Итак, запомним, как открывается страница с изображением записи

Что точно не поможет?

Можете не искать плагины по работе с изображениями и/или оптимизации работы WordPress — это пустая трата времени. Ни один из плагинов, который мы протестировали, не имел нужного функционала. Так что смело можете пропускать мимо:

Как это сделать?

Если у вас адаптивный шаблон в WordPress, то в CSS-коде обязательно заложены правила, которые описывают отображение элементов при определенном разрешении экрана. Они начинаются со строк: @media only screen and (max-width: 1200px)

Наша задача найти элемент, который генерирует уменьшенную копию изображения записи и прописать ей параметр display: none;

В нашей шаблоне WP есть специальный файл responsive.css, где описаны как раз эти параметры, но в некоторых темах это прописано в основном файле (main.css или что-то вроде того). Хорошо, если код CSS состоит из 1000 срок. Но как найти нужный параметр, если их у вас 10 000? Здесь поможет инструмент DevTools в Google Chrome, который мы использовали, когда конвертировали изображения JPEG в WEBP-формат (тоже крайне помогает ускорить мобильную версию).

Чтобы запустить devtools необходимо нажать F12 (либо CTRL+SHIFT+I). Далее открываем какой-нибудь пост и смотрим, какой кусок кода отрисовывает изображение. В нашем случае это оказался параметр p-thumb img из div класса p-thumb. Для каждого шаблона на Worpress это будет свой код.

Обратите внимание, что браузер подсказывает название файла, в котором находится данный кусок кода вместе с номером строки. На скрине указан файл autoptimize, потому что он используется для оптимизации CSS-кода в данном случае. В оригинале он берёт эти данные именно из файла responsive.css

Теперь необходимо прописать display: none; для данного параметра для экранов меньше стандартного разрешения. Для этого можно использовать встроенный редактор тем (но для редактирования нужно временно дать права 777 для этих файлов). Прописываем .p-thumb img {display: none;} в файле responsive.css. Повторимся, данный кусок кода можно прописать и в «главный» файл со стилями (main.css или аналогичный)

Снова открываем devtools и в параметрах уже будут указаны новые свойства расширений, для которых мы его прописали. Соответственно, картинка при расширении экрана менее, чем 478 пикселей отображена не будет

В итоге у нас получилось создать мобильную версию без изображения записи.

Как вам статья?