Shoot me now…responsive design has seemingly become confused with an opportunity to reduce performance rather than improve it. (Пристрелите меня… похоже, что адаптивный дизайн воспринимается в качестве возможности снижения производительности, а не увеличения)
Stephanie Rieger
Адаптивный дизайн в современном мире IT – решение очень популярное. После того, как его начали применять такие гиганты, как Disney или Microsoft, интерес к адаптивной верстке стали проявлять самые разные компании. А решение Google повысить позиции в мобильной выдаче для адаптивных сайтов сделало этот вариант дизайна еще более востребованным.
Итак, сегодня при создании или модернизации проекта адаптивные технологии применяют в 9 из 10 случаев. При этом дизайнеры рисуют красивые и яркие макеты, контент-менеджеры стараются выкладывать рисунки в очень высоком качестве, программисты стараются подарить пользователям максимум полезных возможностей, в результате для каждой страницы загружается множество объемных изображений, скриптов и библиотек. И очень мало кто задумывается, а как это все будет работать на мобильном устройстве при низкой скорости интернета?
Минусы «тяжелых» сайтов
Сегодня очень многие производители, привыкшие к высокоскоростному интернету и дорогостоящим мобильным устройствам, даже не задумываются, как видят их сайт менее продвинутые пользователи устройств с небольшими экранами. И это – очень большой минус.
При высокой производительности процессора и наличии высокоскоростной линии даже 4-мегабайтный сайт загружается на маленьком экране быстро, и выглядит при этом – очень привлекательно. Но ведь в интернет ходят и с обычных недорогих смартфонов, при этом наиболее распространённый вариант беспроводного интернета — это 3G-соединение, а в некоторых случаях пользователи даже через 2G пытаются получить нужную информацию!
Что дальше? Практика показывает, что, например, 5,942-килобитный сайт на обычном Андроид-устройстве в 3G-сети будет загружаться около 90 секунд. Т.е. полторы минуты пользователь будет смотреть на белый экран или наблюдать частичную загрузку страницы!
А теперь задумайтесь, какое количество пользователей закроет вкладку, так и не дождавшись загрузки? А сколько среди них ваших потенциальных покупателей или читателей вашего информационного ресурса?
Повышаем производительность: начинаем с простого
Оптимизация HTML-кода – это набор методов, которым почему-то пренебрегают очень многие веб-мастера. А ведь существует прямая связь между количеством HTML-запросов, числом разных конструкций, элементов на странице и скоростью загрузки. О том, как правильно оптимизировать код, в свое время очень хорошо написали разработчики в «правилах Yahoo!» для html-страниц.
Если вы применяете фоновые изображения, не забывайте объединять их в спрайты, тем более что для их создания существуют удобные инструменты. Также обязательно оптимизируйте изображения, чем меньше «весит» каждая картинка, тем быстрее она загрузится. Не забывайте о таких простых вещах!
Работа с изображениями: будьте внимательны!
Очень часто на страницы сайта загружаются ненужные изображения или несколько файлов разного размера вместо одного, наиболее подходящего. Старайтесь внимательно проверять свой код, и не забывайте, что свойство display:none только прячет изображение от пользователей, а загрузка его все равно производится.
Также частая ошибка при работе с фоновыми изображениями – это загрузка нескольких одинаковых картинок вместо одной. Здесь нужно просто проявлять внимательность и отслеживать, не повторяется ли у вас в коде обращение к файлу изображения лишний раз.
Если ваш сайт загружается на маленьком экране, картинка также должна загружаться маленькая. Следите, чтобы не производилась также загрузка большой картинки, это приведет не только к снижению скорости загрузки страницы, но и к замусориванию памяти устройства. Для адаптивной верстки обязательно применяйте инструменты Adaptive Images или сервис автоматического ресайза изображений в зависимости от типа устройства src.sencha.io.
Также обратите внимание на очень полезный для адаптивной верстки элемент <picture>, начиная с 2014 года его поддерживают практически все популярные браузеры, а потому смело пользуйтесь его возможностями для загрузки и отображения подходящего изображения в зависимости от размера экрана.
Применяйте выборочную загрузку
Не нужно загружать на устройства с маленьким экраном возможности, которые не будут использоваться. Так, если скрипт будет работать только на десктопах, то при адаптивной верстке нужно использовать matchMedia polyfill. Аналогично следует поступать и с файлами CSS. Если они нужны только в определенных случаях, определяйте их загрузку с помощью eCSSential.
Также стоит обратить внимание на возможность выборочной загрузки, которую первым презентовал Джереми Кейт. Действительно, для мобильных устройств часть контента может быть просто не нужна. А потому и загружать ее не стоит. Очень удобный инструмент для выборочной загрузки контента был создан Filament Group под именем Ajax-Include Pattern.
Избегайте ненужных фреймворков!
Очень заметно «утяжеляют» сайты объемные JavaScript-библиотеки, которые загружаются в случае применения фреймворков. С одной стороны, фреймворк для многих веб-разработчиков уже стал неким стандартом, и применяют их массово, даже не задумываясь. С другой, JavaScript по праву считается одним из самых медленно загружающихся и долго отображающихся ресурсов.
А потому каждый раз, когда вы намерены подключить очередной фреймворк или плагин, подумайте, а действительно ли он нужен в данном случае? Может быть, можно обойтись простыми методами JavaScript и CSS?
При создании дизайна всегда помните о производительности
Если вы хотите получить качественную адаптивную верстку, которая будет хорошо работать на любых устройствах, ни в коем случае не останавливайтесь на привлекательности. Обязательно проверяйте производительность вашего сайта, оптимизируйте его. Ваши пользователи будут вам благодарны!
А для того, чтобы верстка вашего сайта занимала минимум времени, отправляйте ваш макет в обработку на нашем сайте автоматической HTML верстки, после чего уже готовую качественную и аккуратную верстку можно будет доработать и адаптировать. «Роботы» не совершают ошибок по невнимательности, и работать с гарантированно аккуратным кодом будет очень удобно!
