Как ускорить загрузку контента для мобильных устройств на сайте с адаптивным дизайном?
Итак, у меня есть сайт с адаптивным дизайном. Исследования показывают, что для мобильных устройств нам нужно показывать немного меньше контента (графики и тому подобного), и что нам нужно ускорить загрузку сайтов для мобильных телефонов.
Если я настрою некоторые элементы страницы в css для отображения: нет для мобильных устройств, эти блоки не будут отображаться, но это не значит, что загрузка содержимого в этих блоках не займет много времени. Так что в итоге мы прячемся, но все равно служим.
Как скрыть блоки на адаптивном сайте элементы страницы и не предоставлять их содержимое мобильным пользователям для ускорения загрузки страницы?
3 answers
Если блок содержимого скрыт с помощью CSS, браузеру все равно необходимо загрузить HTML-код внутри этого элемента. Все браузеры, кроме Opera, также загружают изображения. (На самом деле, поскольку Opera перешла на Webkit, она, скорее всего, теперь загружает скрытые изображения.)
Один из лучших способов снизить нагрузку в мобильных браузерах - по возможности использовать фоновые изображения в CSS (например, спрайты), а затем использовать адаптивный дизайн для мобильных устройств. Это означает, что стандартный CSS будет работать для мобильных телефонов, а затем использовать медиа-запросы для целевых больших экранов, а не наоборот. Поместите изображения меньшего размера в стандартный CSS, затем переключитесь на большие изображения в запросах мультимедиа на большом экране.
Медиа-запросы работают во всех современных браузерах, включая IE9+. IE8 и ниже имеют долю менее 6 % по всему миру, поэтому, на мой взгляд, показать этим пользователям мобильный сайт не является большой проблемой.
Если в вашей ситуации важна поддержка старого IE, вы все равно можете использовать медиа-запросы только для изображений. Для например, создайте сайт для рабочего стола как обычный, но с изображениями с более низким разрешением, которые будут быстрее загружаться на мобильном устройстве. Затем используйте один медиа-запрос для адаптивного мобильного макета, а другой медиа-запрос, предназначенный для больших экранов, чтобы поменять изображения для лучшей версии.
Оптимизация для мобильных устройств почти такая же, как и для настольных компьютеров, поскольку вы легко стремитесь обслуживать как можно меньше в минимально возможном размере. Из-за мобильных телефонов с более низким разрешением экрана изображения с разрешением рабочего стола не требуются, и вы можете просматривать адаптивные изображения, что означает, что они будут отображать изображение с другим разрешением в зависимости от того, на каком устройстве вы находитесь. Это можно сделать с помощью cdn, поддерживающий адаптивные изображения, JS Адаптивные изображения или структура, такая как Фонд Zurb это подтверждает это.
Для всего остального я рекомендую вам проверить идеи по ускорению загрузки страниц а также многие другие вопросы, связанные со скоростью на профессиональных веб-Мастерах.
Я обнаруживаю мобильный просмотр с использованием PHP на стороне сервера и обслуживаю CSS, изображения и шаблон пользовательского интерфейса для устройства в альбомной и портретной...