Мобильный сайт быстрее, чем рабочий стол

Question

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

Разная скорость, мобильная и настольная

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

Мобильный сайт со скоростью

Какой "правильный" способ сделать мобильный сайт намного быстрее, чем настольная версия? Как я могу загрузить изображения по-разному, когда сайт реагирует через CSS?

Answer 1

Вы можете посмотреть на Yslow лучшие практики и правила работы веб-сайтов.

(взято из Ислоу):

• Минимизируйте HTTP-запросы
• Используйте сеть доставки контента
• Избегайте пустых SRC или HREF
• Добавьте Expires или Заголовок Cache-Control
• Компоненты Gzip
• Поместите таблицы стилей вверху
• Поместите сценарии внизу
• Избегайте выражений CSS
• Сделайте JavaScript и CSS Внешними
• Уменьшить количество DNS-запросов
• Сократить JavaScript и CSS
• Избегайте перенаправлений
• Удалить дубликаты скриптов
• Настроить ETag
• Сделать AJAX кэшируемым
• Используйте GET для запросов AJAX
• Уменьшите количество элементов DOM
• № 404
• Уменьшить размер печенья
• Используйте домены без файлов cookie для компонентов
• Избегайте фильтров
• Не масштабировать изображения в HTML
• Сделайте favicon.ico маленьким и кэшируемым

Если вы уже придерживаетесь этого и по-прежнему получаете время загрузки> 1 с (вы можете проверить, используя это), вы можете посмотреть дальше на Responsive Images, здесь есть хорошее прочтение, что в основном означает, в зависимости от ширины браузера, который вы обслуживаете Изображения разных размеров, что имеет смысл, потому что, например, зачем вам показывать изображение "3000px" в мобильном браузере "320px"?

Как вы говорите? Один простой пример - использование строк User Agent, чтобы определить, является ли оно мобильным или планшетным устройством... и в зависимости от этого подавать соответствующий размер изображений. Обратите внимание, что строки UA не являются на 100% точными и могут быть подделаны.

** Если вы используете PHP, есть библиотека с именем http://mobiledetect.net/, которая может вам помочь.
** Если вы хотите определить, использует ли пользователь 3G/2G, этот вопрос SO может помочь.