Я просто перешёл на сайт WordPress в качестве разработчика от другого разработчика, поэтому многие вещи уже созданы. В настоящее время сайт обслуживает одно и то же изображение большого размера (и большого размера, более 500 КБ для одного файла) - изображение, и я бы хотел получить его, чтобы производительность и скорость загрузки на мобильных устройствах были намного выше (есть также несколько больших изображений).
Моя первая мысль - возможно, переопределить вещь и использовать простой медиа-запрос - только один для «больших» экранов (например, рабочий стол) и один для экранов, которые, скажем, маленький iPad и ниже.
Однако я не уверен, насколько «дорогой» медиа-запрос и какой метод (или что-то еще полностью) даст наилучший прирост производительности:
a) Сохраняйте вещи такими, какие они есть в настоящее время, и просто поддерживайте отображение больших изображений для небольших устройств.
b) Используйте 2 медиазапроса в основной таблице стилей - один для больших экранов и один для меньших (все, что посередине, просто получит то, что получит).
в) Что-то еще?
Сайт WP очень индивидуален и использует некоторые дополнительные плагины и код, которые делают его таким, чтобы WP не автоматически обслуживал меньший размер, как обычно, и это не то, что я действительно могу изменить, по крайней мере, сейчас.
Мой главный вопрос: насколько «дороги» медиа-запросы CSS? Я просмотрел много постов, но не смог найти однозначного ответа для такого типа ситуаций.
Мне интересно, если бы обработка медиа-запроса на самом деле заняла бы больше времени в конце, чем если бы пользователь просто загрузил изображение довольно значительного размера (а их несколько)?
Используйте что-то вроде:
/* This would be for the mobile or at least smaller screens across the board */
@media only screen and (max-width: 600px){
imageOne img {
background-image: url("smallerFile.jpg");
}
}
/* Then, this would be for larger screens, across the board */
@media only screen and (min-width: 601px){
imageOne img {
background-image: url("LARGERFile.jpg");
}
}
Мой клиент очень застрял в идее использования Google PageSpeed Insights и получения большого числа. Вот тут-то и возникает мысль об использовании медиазапроса, так как в настоящее время сайт получает высокий балл на настольном компьютере, но очень низкий балл на мобильном (многие из них связаны с большими размерами изображений) .
Я знаю, что оценка PageSpeed Insights не всегда приводит к увеличению скорости в реальном мире, но мой клиент, ну, в общем, мой клиент.
В конце концов, мне интересно, гоняюсь ли я по кроличьей норе, пытаясь просто получить высокий ранг / число. Но несколько 500KB + изображений на мобильных устройствах определенно не очень оптимизированы, во всяком случае, я смотрю на это. Какие-нибудь мысли?
Это мой самый первый пост в Stack Overflow, так что я надеюсь, что я заполнил все правильно, и это имеет смысл. Извините, если я сделал что-то слишком длинным, пытаясь вписаться в детали или слишком много фона.
Я знаю, что это полуосновный вопрос, и я пытался что-то тестировать с помощью инструментов тестирования браузера, но я не профессионал в этом, поэтому я мог легко читать вещи неправильно или даже не смотреть на правильные значение.
И я действительно прошел через бесчисленные сайты и посты и до сих пор не смог точно сформулировать четкий ответ на этот вопрос - поскольку я точно не знаю, как все обрабатывается и сколько «облагается» налогом. Медиа-запрос обрабатывается (вот почему я думал о том, чтобы оставить его равным 2, а не более сложным - разве что я должен?). Извините за бессвязных,
Большое спасибо всем, и я очень надеюсь, что кто-то сможет указать, что, по их мнению, будет лучшим подходом?