html — включает семантические изображения с php, если порт просмотра больше 1024px
Я искал решение, которое помогло бы повысить производительность мобильных веб-сайтов с адаптивным интерфейсом.
Эта проблема:
Мне нужно сделать SEO оптимизированные встроенные изображения для веб-сайта. Одна вещь, которую я сделал, — это использование picturefill.js для обслуживания небольших изображений для небольших устройств.
Но … В дизайне, который я получил от дизайнера, меньше изображений для мобильных устройств (всего 3) и 9 для настольных. Это означает, что, если они должны быть встроенными и семантическими, маленькие устройства все равно будут запрашивать другие 6, и это кажется слишком большим для медленного соединения 3g.
Итак, есть ли хороший способ включить изображения (не в качестве фона + дисплей: нет), если они просматриваются на экране больше, чем обычные портативные устройства, может быть, с php?
Надеюсь, что это не считается «blackhat» SEO.
Решение
Лучший способ сделать это — проверить пользовательский агент, который делает запрос. Это не надежное доказательство, но вы можете решить большинство ваших случаев использования с ним.
Как то так из PHP документы:
<?php
echo $_SERVER['HTTP_USER_AGENT'] . "\n\n";
$browser = get_browser(null, true);
print_r($browser);
?>
После того, как вы узнаете пользовательский агент, который делает запрос, вы можете отправить серверу соответствующую версию для этого запросчика.
if($type_a){
//do type a stuff
}else{
//do type !a stuff
}
Некоторые крайние случаи включают в себя широкий спектр размеров экрана с Android. Это также не совсем «отзывчивый», а скорее «mdot» способ подойти к проблеме, но, честно говоря, таков и ваш дизайн. Истинно отзывчивый, по моему мнению, будет либо полагаться на ленивую загрузку ресурсов на основе порта представления, либо обслуживать те же версии, полагаясь исключительно на js, html и css для решения проблемы.
Другие решения
Других решений пока нет …