Как кэшировать background (фоновую картинку сайта)?

Question

[BLM21]

Приветствую вас, уважаемые знатоки.
Какие идеи есть, чтобы кэшировать фон сайта, если в CSS прописано так (первый скрин) ? В .htaccess уже прописан код (второй скрин).

Всё удаётся кэшировать, кроме фона, подтягивающегося через ссылку. И этот метод подтягивания надо сохранить, ибо, насколько осведомлён, он является лучшим и без артефактов. Но как кэшировать фон, ответа не нахожу.

body{

    background: url(/img/fon17.jpg);

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$">  
Header set Cache-Control "max-age=10368000"  
</FilesMatch>

Цель - избавиться от этого (на скрине). А сделать это можно, лишь задав время жизни кэша для данного фона сайта.

Comments

[Adamos]

Выкладывать CSS, не глядя на выделенную в нем ошибку - это я даже не знаю, как назвать.
По вопросу - CSS вообще ни при чем. Кэширует браузер, имея линк и заголовок к нему от Апача. Надо думать, кэширует вполне успешно, но тут у кого-то с руками при наборе CSS приключилось.

[Вадим]

насколько осведомлён, он является лучшим и без артефактов

Я правильно понял, что Вы говорите о якобы преимуществе фоновой картинки над обычной? Если да, то не знаю где Вы такое могли услышать.

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

[BLM21]

Вадим, Нет, я имею в виду сам вариант представления фоновой картинки нужно сохранить имеющийся, так как другие методы у многих вызывают артефакты, видные человеческому глазу, например, мерцание и т.п.
Хочется перестать видеть это (на скрине). Для этого, логично, нужно задать правило кэша, например, как уже задано в .htaccess

[BLM21]

Adamos, Мде. И что бы сделали? Стёрли строку? Все строки стираете, где редактор показывают ошибку?

Верно ли я Вас понял, что стерев строку, по Вашему мнению, кэш фона заработает?

[Алексей Дубровин]

BLM21, Что за артефакты. И почему их нет при проставление через CSS?

[Вадим]

BLM21,
Давайте проясним пару моментов.
1) Артефакт != мерцание.
2) У Вас в вопросе только скрины с кодом, что, к слову, запрещено правилами сервиса. Судя по Вашим комментариям - должен быть ещё какой-то скрин.

И по прежнему не понятна Ваша проблема. На данный момент Вы говорите что у пользователей есть мерцание. Я так понимаю, при открытии страницы. Как Вы собираетесь это решить? При первом посещении пользователем сайта это неизбежно, так как браузер загружает ресурс по сети, а не берёт из кеша. А вот при повторном посещении - возьмёт из кеша. Разумеется если сервер сконфигурирован адекватно. Никаких дополнительных манипуляций для кеширования конкретно фоновых картинок производить не нужно. Сервер знать не знает что фоновое, а что нет. И обычная картинка и фоновая - просто медиа ресурс.

[Геннадий]

BLM21, Это читали?
https://nehrena.ru/web/настройка-правил-эффективно...

[Алексей Дубровин]

BLM21, Ну типо если у вас показывает ошибку значит что вы в той строке что-то сделали не так)

[irishmann]

Выложите код текстом. Пункт 3.8. Правил сайта запрещает размещение кода в картинке.

[BLM21]

Вадим, Впервые слышу о таком запрете в правилах. Благодарю за просвещение. Не знаю, просмотрели ли Вы мой комментарий выше с гуглом. У меня нет проблем, кроме заданного вопроса, на который не получаю ответ. Сервер-сервер... А что ещё я могу прописать и где, чтобы гугл больше не заявлял мне, что я не задал время жизни кэша бэкграунда?

Нет проблем у меня или пользователей. Но я начитался прежде, чем задать свой вопрос, ибо тоже подумывал сменить метод для отображения фона сайта. Отсюда мне и известно, что метод в моём css лучше, ибо проблемы у других людей решались методом, который у меня уже используется.

[BLM21]

irishmann, Ясно, сейчас проведём редакцию.

[BLM21]

Алексей Дубровин, Да, а бывает и иначе.

[Вадим]

BLM21,

Впервые слышу о таком запрете в правилах.

Правила сервиса

3.8. Использовать для демонстрации фрагментов кода только специальный тег <code> или специальные демонстрационные ресурсы (например, JsFiddle - https://jsfiddle.net/). Размещение фрагментов кода в виде изображений запрещено.

А по вопросу не подскажу, что-то специфичное и не совсем по моему профилю.

[BLM21]

Вадим, Понимаю. Вон смотрите, сколько людей не знают, как решить вопрос. Даже великий Adamos ляпнул и замолчал, не предоставив решения для вопроса.

Похоже, вопрос заслуживает уровня "сложный".

[Adamos]

BLM21, ну, ты же теперь успешно спрятал причину, по которой у тебя ломается фон. Что тут скажешь?

[BLM21]

Adamos, Дорогой, Adamos, не ломается фон вовсе. Нормально с ним всё. Вы просто не внимательно прочли описание к вопросу, может, обстановка у Вас неспокойная, отвлеклись. В описании написано: НАСКОЛЬКО Я ОСВЕДОМЛЁН, ...

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

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

Я нашёл решение, благодаря ThunderCat . Вот уж тоже поистине великий человек данного сообщества. Сейчас я опубликую правильный ответ. Возможно, есть моя вина в том, что ответ нашёл сам. Но на верные мысли поставить - это тоже засчитаю ответом на вопрос. Мне нужен был кэш бэкграунда, я его добыл.

[Алексей Дубровин]

BLM21, Эм вам раз 5 сказали что причина не в css.
Вы неправильно составили первоначальный вопрос. Вам ответили что причина не в css.
Вы говорите про какие-то магические артефакты которые таким же магическим образом исчезают в css - Вам был задан вопрос. Каким именно образом именно через CSS эти артефакты появляются ?.
Так же вам ответили что всё кэширование происходит на стороне сервера и не важно какой именно ресурс от туда берёте.

Все проблемы с пониманием сугубо из-за вашей постановки вопроса. Как мы уже поняли вы его составили не правильно. Мы сидим тут тоже не 1 раз и понимаем что у людей чаще всего из-за незнаний "ПРЯМО КАК ТУТ" неправильно задаётся вопрос. Вы говорите про артефакты - Значит проблемы с CSS. Далее мы додумываем что у вас не в кэшировании проблема. А в стилях. Смотрим на ваш код который вы скинули - "У ВАС ТАМ БЫЛА ОШИБКА"

Дело увы не в невнимательности.

Answer 1

[ThunderCat]

1) Гугл тоже может ошибаться, проверьте верно ли у вас отдается эта картинка сервером, зайдите в нетворк, посмотрите тянется ли она с нужными заголовками, возможно в гуглпэйджспид не обновились данные...
2) проверьте расширение картинки, возможно оно написано в верхнем регистре, а в правилах у вас кейс сенситив регулярка.

Пока идей больше нет...

Comments

[BLM21]

сейчас постараюсь выполнить указанное Вами, и отпишусь.

[ThunderCat]

BLM21,
Насколько я вижу все нормально кэшируется.

[BLM21]

ThunderCat, Да, как видите (показывает Ваш скрин), фона подтягивается два файла. К моменту Вашего скрина я произвёл правки в .htaccess, потому порядок налицо.
Мне создали сайт в 2017 за 15к, благо, не самым худшим образом и на MODX. Он так страшен и содержит столько профессиональных ошибок, что я потихоньку его правлю самостоятельно, пытаюсь из него сделать красоту. Представьте, человек, который ни в зуб ногой был ни в html, ни в css, сам, еле-еле что-то пытается произвести нечто похожее на идеал, чтобы больше не прибегать к услугам псевдо-спецов, и т.к. не могу оплачивать услуги реальных гуру, которых здорово надо материально мотивировать для создания подлинного идеального сайта, который впоследствии просто начинять SEO-контентом. Придёт время, я на радость Adamos дойду до правки идеального CSS, а пока силюсь сделать идеальный HTML валидный на всех 32 страницах (впрочем, почти дошёл, осталась правка лишь контента каждой страницы; шапку, подвал, боковушку добил вроде уже), а так же DOM для браузеров.

Даже не представляю, каких трудов Вам стоило, чтобы стать таким великим. Навеки запомнил Ваш лучший ответ - "Господин Цукерберг, перелогиньтесь!" Как досадно, что мало людей может оценить, ведь это тематическое, и надо иметь чуть извилин и представление, чтобы осознать, как это смешно. Великолепный юмор. И в который раз Вы меня выручаете. Признателен, и берегите себя, у Вас невероятно просветлённый мозг и человечность так же при Вас - что редкость для современности.

[ThunderCat]

BLM21, Это не 2 файла, там все норм, посто для того чтобы в кеше файл появился я сделал 2 запроса странички.

Answer 2

[BLM21]

Ответ нашёл сам.

.htaccess содержал ещё такой код:

<IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteCond %{HTTP_ACCEPT} image/webp
     RewriteCond %{REQUEST_URI}  (.*)(\.(jpe?g|png))$
     RewriteCond %{DOCUMENT_ROOT}/%1\.webp -f
     RewriteRule .* %1\.webp [L,T=image/webp]
 </IfModule>
 <IfModule mod_headers.c>
     Header append Vary Accept env=REDIRECT_accept
 </IfModule>
 <IfModule mod_mime.c>
   AddType image/webp .webp
 </IfModule>

Великий ThunderCat навёл на верные мысли, дав понять, что всё правильно в .htaccess, что должно действовать правило жизни кэша, поэтому надо копать, как вариант - в расширение файла background.
Но так как расширение верное, копать пришлось глубже, и код выше дал понять, что в правило не дописано расширение .webp
Стоило дописать в правило жизни кэша webp, и стала вот такая красота (на скрине), и это по мобильной версии, а для десктопа - вообще сотка. Признателен всем знатокам за участие, включая Adamos за критику.