Группы Web overclock WordPress тема

29 ноября 2019 в 13:04

на сайт, и вы сможете вступить в группу.
Вы сможете подписаться на выход новых материалов группы.
Вы сможете подписаться на новые комментарии к выбранной записи группы.

Загружаем background в WordPress тему только для широких экранов (ПК)

Хоть и тенденция к палатам психиатрических больниц всё чаще встречается в вебе (новый "дизайн" старейшего ресурса по WordPress - WP-Tavern) - некоторые пользователи не хотят терять индивидуальности и держат на своём сайте фоновое изображение сайта.
Но этот background, они, с лёгкой руки, загружают и для мобильных устройств (размеры от 1920px и весом 50-800 килобайт).

В этой небольшой заметке я расскажу: как верно подключить фоновое изображение сайта для широких экранов и как не грузить его для узких мобильных - где его и так никто не увидит из-за минимальных размеров боковых полей.

Во первых: не пользуйтесь встроенной в вордпресс возможностью задать фоновое изображение сайта (в админке: внешний вид -> настроить -> фоновое изображение).
Да - это удобный механизм (для "домохозяек"), но он вставляет его "в лоб", а еще и инлайном в страницу примерно так:

body.custom-background {
    background-image: url("http://ваш-сайт.ru/wp-content/uploads/2019/11/pic_1920.jpg");
    background-position: center top;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: fixed;
}

Почему это сразу нет!?

Цель веб оверклокера:

Мы, в "Веб overclock", ставим целью разгонять сайты, а не замедлять их.

Теперь более понятным языком:
inline (встроенные в html страницу) стили не кешируются. Это не отдельный css-файл, который раз передался к пользователю и закешировался в его браузере. А вот эти стили, указанные в статье выше, при загрузки страницы будут каждый раз передаваться в её теле. Это только один случай некритичных стилей (А сколько их ещё у вас будет...). Держите в теле страницы только критичный css. Все остальные в файл!

Хорошо - в кастомайзере фоновое изображение мы убрали. Проверьте через F12 браузера что его в body нет:

Добавим background изображение правильно

В свой CSS-файл добавьте следующее:

body {
    background-attachment: fixed;
    background-image: linear-gradient(0deg, rgb(23, 52, 60) 0%, #438ABD 40%, #438ABD 40%, #61AED8 75%, #46deff 100%);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #26364e;
}
@media screen and (min-width:1280px){
    body {
        background-image: url("http://ваш-сайт.ru/wp-content/uploads/2019/11/pic_1920.jpg");
    }
}

Вся магия начинает работать с 9-й строки. Медиазапрос, при ширине экрана 1280px (и выше) - будет подгружать наше изображение. Если ширина устройства меньше этого значения - изображение не загружается. Совсем! Это не тупо скрытие изображения - это минус один запрос к серверу на запрос к загрузке изображения.

А на 3-й строке мы подготовили градиентную заливку - она будет всегда, но её перекроет фоновое изображение на широком экране.

Поиграйте с F12 - и адаптивностью - проверьте в деле:

На ширине 1100px нет фонового изображения

А на широких экранах у нас всё загружается как нужно. При этом мы можем выразить индивидуальность своего сайта:

1280px у нас на этой ширине и выше загрузится изображение

На мобильниках громадное изображение не загружается:

С цветами градиента, указанными на 3-й строке, поиграйтесь самостоятельно, настроив его по вкусу.

Таким образом: мы улучшили метрики для мобильной версии сайта. Это -1 запрос к серверу на мобильном и фоновое изображение, если содержит много деталей и если оно объёмное - то весить может много. Пользователям мобильников (и часто - медленного интернета) - мы улучшили жизнь.

Для сжатия изображений я рекомендую сервис squoosh.app

Данный приём реализован на этом сайте.

Поделитесь опытом и впечатлениями - как у вас произошел ещё очередной веб разгон?

Копировать ссылку

2 комментария

Vadik O:

2020-01-22 в 19:17
Тема ускорения загрузки сайта, наверное для многих интересная.
Как то тоже искал способ не загружать фон для мобильных и где то нашел такой код
```
add_action( 'after_setup_theme', 'ra_remove_mobile_bg_image', 11 );

function ra_remove_mobile_bg_image() {
   if ( wp_is_mobile() && !is_admin() && !is_customize_preview() ) {
      remove_theme_support( 'custom-background' );
   }
}
```
и им пользовался.
Теперь прописал через css стиль.
Спасибо. ?

0
Войдите, чтобы ответить
1. Владимир Otshelnik-Fm:
  
  2020-01-22 в 19:57
  
  Лучше через css - т.к. это фронтенд технология. И медиазапросы - 99.99% что отработает (остальное - если зашли с ооочень древнего браузера)
  
  На стороне php проверять что это мобильный клиент - там слишком много неточностей. Правило внутри функции wp_is_mobile - слишком примитивное.
  
  0
  
  Войдите, чтобы ответить

Оставьте комментарий Отменить ответ

Чтобы оставить комментарий: Войдите на сайт

Загружаем background в WordPress тему только для широких экранов (ПК)

Добавим background изображение правильно

Другие записи автора в группе:

2 комментария

Оставьте комментарий Отменить ответ