Лучшие практики для обслуживания файлов ресурсов (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) и загрузка кнопок общего доступа по требованию (например, http://www.techcrunch.com/).