Как сделать выборочную / отложенную загрузку js, css и изображений?

#javascript #html #dom #оптимизация_сайтов

Какими способами и инструментами можно оптимизировать загрузку мобильных версий сайта
применительно к адаптивному веб-дизайну? Иногда необходимо переделывать фронтэнд без
возможности изменений серверной стороны, поэтому ищу лучшее решение с учетом этого момента.

Ситуация 1. Есть 2 js и 2 css файла. Как можно сделать, чтобы грузился только js
#1 и css #1, в зависимости от screen.width например?

Ситуация 2. В dom есть элементы с классом .only-desktop, в которых находятся изображения.
Какой наиболее быстрый и правильный способ предотвратить загрузку изображений в .only-desktop?
    

Ответы

Ответ 1

Здесь официальное руководство от google, с примерами.

Для начала воспользуйтесь одним из готовых решений, примеры прилагаются. HeadJs,
пожалуй, проще всего. 

Сложные правила для media queries  становятся сильно проще, если использовать какой-либо
препроцессор стилей и миксины

Пример для раздельных Javascript с помощью enquire:




Этот пример подразумевает, что вы используете require или webpack, поддерживающие
сборку догружаемых модулей. Конечно, вы можете использовать любой доступный способ
инжекции скриптов и ресурсов.

Тем же способом можно подгрузить enquire, или любую другую из вышеперечисленных библиотек
из cdn, не меняя серверную часть.


Согласно этому исследованию, самым эффективным путём запрета загрузки изображений
является каскадная перезапись свойства посредством @media queries


Ответ 2

Это похоже на какую-то преждевременную оптимизацию. Если у вас действительно такой
большой сервис, то тогда проще генерировать макеты под девайсы на серверной стороне,
как это делает например apple. 

Подгружать css в зависимости от разрешения, можно указав атрибут media
в теге link




Для JavaScript можно использовать такой хак




Вы писали про modernizr.js, посмотрите на yepnopejs  с помощью него, вы сможете загружать
необходимые вам стили и js файлы в зависимости от условий. 

Чтобы изображения не загружались сразу, используйте атрибут fake-src и туда пишите
url для фото, потом с помощью JS подставлять url изображения из fake-src в src.


Ответ 3

Вы можете выставить media queries для загрузки файлов в зависимости от разрешения
экрана (Ситуация 1) или для загрузки классов внутри файла стилей (Ситуация 2).
Или я не правильно понял ваш вопрос?


Ответ 4

добавляейте атрибуты async или defer в зависимости от того что нужно