Лучшие практики для обслуживания файлов ресурсов (JS, CSS, изображений) в адаптивном веб-дизайне

Question

При чтении не на мобильном телефоне вашего родителя: UX Design Guidelines for Smartphones - Smashing Magazine , в разделе «Передача данных и ценообразование» мое внимание привлекло следующее:

В последнее время много говорится о гибком веб-дизайне. Этот подход создает некоторые проблемы с минимизацией передачи данных. У Джейсона Григсби очень хорошая реферат по специфике. Подводя итог, можно сказать, что медиа-запросы CSS - часть волшебного соуса адаптивного дизайна - практически ничего не делают для снижения издержек при передаче данных на мобильные устройства. Изменение размера или скрытие ненужных изображений по-прежнему требует загрузки полных изображений в браузер. Кроме того, такие ресурсы, как библиотеки JavaScript, могут быть загружены на мобильные устройства, даже не будучи включенными для пользователей.

В то время как я читаю длинную статью Джейсона Григсби, как упомянуто в статье Smashing mag, я хотел бы знать, если какой-либо из них следует некоторым лучшим методам, чтобы избежать таких проблем?

Answer 1

1. Хорошо разрешить Google размещать ваши библиотеки jQuery по разным причинам. Читайте здесь
2. Не разбрасывайте ваши функции Javascript по многочисленным файлам. Чем меньше файлов нужно получить клиенту, тем быстрее. Несколько файлов означает несколько запросов.
3. Часто прекрасно работает включение ваших скриптов в конце вашей HTML разметки. Это ускоряет загрузку разметки HTML (страница генерируется быстрее), после чего файлы JS затем извлекаются.
4. Научитесь использовать спрайт-листы для вашего CSS. Спрайт-лист - это в основном большое изображение, содержащее различные нужные вам изображения. Одно большое изображение меньше, чем сумма его частей, потому что ему нужно только поддерживать одну таблицу цветов. Кроме того, еще раз, меньшие файлы для извлечения = меньшие запросы.

Answer 2

В этом посте есть кое-что хорошее: http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

РЕДАКТИРОВАТЬ: Еще несколько ссылок

https://developer.mozilla.org/en/Web_Development/Responsive_Web_design

http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/

http://www.html5rocks.com/en/mobile/mobifying.html

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

Если вы спрашиваете об условной загрузке ресурсов, посмотрите yepnope.js

Answer 3

Я бы порекомендовал какое-нибудь внутреннее решение для адаптации контента. На нашем сайте мы используем Apache Mobile Filter для удаления лишнего контента, который не будет иметь отношения к пользователям мобильных устройств и / или планшетов, а также изменения размера изображения для сокращения времени загрузки.

Существуют и другие методы внешнего интерфейса, такие как отложенная загрузка изображений (загрузка изображений только в том случае, если они находятся рядом с окном просмотра - проверьте jQuery lazy loading ) и загрузка кнопок совместного использования в социальных сетях. по запросу (например, TechCrunch.com ).