Прошлогоднее исследование компании Keynote (PDF) показывает, что порядка 80% пользователей не удовлетворены скоростью работы мобильных сайтов. Тем временем прогноз, согласно которому к 2014 году в половине всех случаев пользователи будут входить в Интернет посредством мобильных устройств, действительно сбывается. Потому запуск мобильной версии для сайта (или создание адаптивного дизайна) — задача приоритетная для любого ресурса, особенно если речь идет о коммерческих сайтах.
Предпочтения Google
Компания Google поддерживает три варианта оптимизации сайта под мобильные устройства.
- Сайты с адаптивным веб-дизайном. Адаптивный веб-дизайн означает, что на всех устройствах открываются одни и те же URL. Код HTML при этом не меняется, а адаптация страницы к определенной платформе обеспечивается за счет разметки CSS. Google рекомендует использовать эту конфигурацию.
- Сайты, которые на любых платформах задействуют один и тот же набор URL, но при этом обычным компьютерам и мобильным устройствам динамически предоставляется разный код HTML (и CSS).
- Сайты, которые предоставляют разные URL обычным компьютерам и мобильным устройствам.
Итого, вы можете приобрести уже готовую адаптивную тему для своей CRM, поставить задачу для своего веб-дизайнера переработать уже существующую тему или создать отдельный веб-сайт, рассчитанный на мобильные устройства.
Чего хотят пользователи
Из инфографики выше следует, что 71% пользователей ожидают от вашего сайта ту же производительность, что и на лэптопах или стационарных компьютерах. Предел терпения для 74% пользователей смартфонов и планшетов — 5-секундная загрузка страницы, а порядка 60% пользователей не желают ждать более 3 секунд. Во всех случаях половина разочарованных пользователей, скорее всего, не вернется на ваш сайт, не говоря уж о том, что не порекомендует его кому-нибудь еще.
Конечно же, помимо скорости загрузки, есть масса других причин, которые могут в два счет отвратить посетителей. О многих из них мы говорили в статье про оптимизацию мобильных целевых страниц. Даже если речь идет не о «лэндингах», вся информация должна быть структурирована и легкодоступна. Всегда и везде.
Скорость и латентность сети
К сожалению, даже 3G-интернет в Украине оставляет желать лучшего, не говоря уж о более прогрессивных технологиях. Впрочем, не только скорость подключения играет ключевую роль во время загрузки страниц. Так, гугловский инженер из команды Make The Web Faster уверяет, что скорость сети не столь важна, как ее латентность (определяющая, сколько времени требуется пакету данных для прохождения от точки А до точки Б, а также как это время соотносится с ожидаемой нормой). Нюансов масса, и умение учесть их все — сродни искусству.
Как бы там ни было, эту статью мы посвятим обработке изображений. Задачей № 1 при оптимизации любой страницы является сокращение кол-ва обращений к серверу, что, в свою очередь, во многом завязано на работе с изображениями. Под работой подразумевается их конвертация, минимизация размеров и замена более легкими CSS-альтеранативами.
Работа с изображениями
Загрузка изображений через CSS
Один из самых действенных способов ускорения сайта — это оптимизация мультимедийного контента. Автор тематической статьи в Smashing Magazine подчеркивает, что полагаться на display: none или visibility: hidden не стоит, т.к. в этом случае изображения все равно подгружаются. Взамен можно использовать код, который успешно работает на многих сайтах компании Amazon:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
"]<div class="image"></div><meta name="viewport" content="width=device-width"/> <style> @media (max-width:600px) { .image { display:none; } } @media (min-width:601px) { .image { background-image: url(image1.jpg); } } </style> <div class="image"></div> |
Таким образом, мы загружаем картинки в качестве фонового изображения в CSS, а также используем media queries для того, чтобы, при необходимости, их скрыть.
Вообще, CSS предоставляет массу возможностей, которые дают значительно лучших эффект, чем использование обычных изображений: CSS-градиенты вместо фоновых изображений существенно сокращают количество обращений к серверу и повышают скорость загрузки страницы; такой же эффект имеют закругленные границы, тени и разнообразнейшие иконки, которые можно создать с помощью каскадных таблиц стилей.
Схема data: URI
Data: URI — это схема, которая позволяет включать небольшие элементы данных в строку URL, как если бы они были ссылкой на внешний ресурс. Таким образом, можно работать только с HTML и CSS, не используя ни единой ссылки на внешние файлы. Наиболее распространенное применение данной схемы — замена изображений и файлов веб-шрифтов на несложный код, заметно уменьшающий кол-во HTTP-обращений.
Используется следующий формат:
|
1 |
"]data:[MIME−type][;charset=encoding][;base64],[data] |
Например, вот логотип Smashing Magazine, созданный таким методом:
И сам код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
"]<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA BAAAAAQCAIAAACQkWg2AAACI0lEQVQoz2P48/bFX1Tw58vn3/dv/rp56dfD238+vocI fl029UOC3dsgS4Y/nz4gq/794sm3VbO+zmr/MqX+S1/l597yb2vn/rpx6VN14od4+3c BRgx/vn9F1vB9/+bPPeVfJlZ/6S793JwDVPcxL/BjQeiHFNf3cbbvgw0Z4JZCwM/Lpz 81Zn2qS/1Ul/apOv5jUfiHbP8PSc7vY23fh5m+C9JjALoVzQ8/zx7+0lh3IcvnQ4bXh wzPD8muINXhZu+C9N56zB8mdr49cfdHfPdj36bPLbkgpYH670KNQaoDdV47aTK8j7H+ tmXpX6zg95+f545+7ix656PxzlP5jaf2c2M1hvcRZu8jzb4umfrn6xfs2v78+XFkx9s I2+fass8N1Rje+eudtR+YaD0Jj70296df3+xKrr593bL91tnmnJMbwwVXtuoAbU+kxD 5pmu4pvYkK9rVvz58B5Tz7dd257pKDAAlT43giEDFZA2NclXAe5fN60DOgZFx48fb6I CGRCqIchY/bmhKkibivinOdPRLPnQ1cwAUqGrCFQBVIes7ZmmzEtni9+vXiFr+DR9Is MzHfnXIV5vs5OeqUs/05B+rqcIdBhQ81M1yRfW+r+fPUHRMLWfAejir+tWATlf1ix/H R34wlL3ub7Scx2F56Yan6ZPQnPS+6oihlc+Tr/fv4OG+Levv+7d+X700PeDe3/dv4um +tfjhy9drQDa2DKqOJhVKgAAAABJRU5ErkJggg==" /> |
WordPress.com
Такой способ используется на многих ресурсах, включая адаптивные сайты WordPress.com или Boston Globe, которые в среднем загружаются за 4 секунды. Практически вся графика и веб-шрифты «Водрпресса» — это data: URI.
Тут следует оговориться, что разные браузеры по-разному обрабатывают данные запросы, поэтому в каждом конкретном случае следует тестировать скорость загрузки реальных изображений и их аналогов, созданных с помощью data: URI. В целом же второй вариант должен быть в разы эффективнее.
SVG вместо изображений
Работа с масштабируемой векторной графикой проходит по аналогии с предыдущим методом. SVG точно так же можно включить в HTML-код, чтобы сократить количество запросов. Такую графику следует делать в специализированных программах типа Adobe Illustrator. Создав изображение, копируем код в текстовом формате (удалив все ненужные мета-данные), затем конвертируем в data: URI — и вставляем в шаблон вашего сайта.
Например, такое изображение:
Его исходный код:
|
1 2 3 4 5 6 7 8 9 10 |
"]<svg version="1.1" id="drop" x="0px" y="0px" width="17.812px" height="28.664px" viewBox="296.641 381.688 17.812 28.664" enable-background="new 296.641 381.688 17.812 28.664" xml:space="preserve"> <path fill="#EE1C4E" d="M314.428,401.082c-0.443-5.489-5.146-9.522-7 .52-14.186c-0.816-1.597-1.352-5.208-1.352-5.208 s-0.555,3.792-1.388 ,5.425c-2.233,4.371-7.127,8.999-7.507,14.047c-0.36,4.794,4.101,9.191 ,8.896,9.191 C310.49,410.354,314.816,405.941,314.428,401.082z"></path> </svg> |
И конечный результат:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
"]background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0i MS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx 1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOi A2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL 0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8x LjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzE iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Im h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3a WR0aD0iMTcuODEycHgiIGhlaWdodD0iMjguNjY0cHgiIHZpZXdCb3g9IjI5Ni42NDEg MzgxLjY4OCAxNy44MTIgMjguNjY0Ig0KCSBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDI 5Ni42NDEgMzgxLjY4OCAxNy44MTIgMjguNjY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj 4NCjxwYXRoIGZpbGw9IiNFRTFDNEUiIGQ9Ik0zMTQuNDI4LDQwMS4wODJjLTAuNDQzL TUuNDg5LTUuMTQ2LTkuNTIyLTcuNTItMTQuMTg2Yy0wLjgxNi0xLjU5Ny0xLjM1Mi01 LjIwOC0xLjM1Mi01LjIwOA0KCXMtMC41NTUsMy43OTItMS4zODgsNS40MjVjLTIuMjM zLDQuMzcxLTcuMTI3LDguOTk5LTcuNTA3LDE0LjA0N2MtMC4zNiw0Ljc5NCw0LjEwMS w5LjE5MSw4Ljg5Niw5LjE5MQ0KCUMzMTAuNDksNDEwLjM1NCwzMTQuODE2LDQwNS45N DEsMzE0LjQyOCw0MDEuMDgyeiIvPg0KPC9zdmc+DQo=); |
Как и в предыдущем случае, следует сравнить эффективность SVG-графики и внешних изображений, чтобы выбрать оптимальный вариант.
CSS-спрайты для оптимизации логотипов и иконок
Идея спрайтов заключается в «сращивании» нескольких изображений в один файл, что влечет за собой сокращение количества HTTP-запросов. В теории, сделав из четырех изображений один спрайт, вы сократите количество запросов в четыре раза. Далее спрайт отображается с помощью свойства CSS background-position, которое устанавливает местоположение нашей картинки. При этом свойству обычно присваивается пара значений — для определения горизонтального и вертикального положений.
Вот пример таких иконок от Amazon:
Иконические веб-шрифты
Многие изображения элементарно заменить соответствующими иконками, которые войдут в состав одного шрифта. Многие знают о запатентованных «Майкрософтом» Wingdings и Webdings, но есть и другие варианты. Например, сервис IcoMoon позволяет создать свой собственный алфавит из тех иконок, которые вам действительно нужны.
Суть этого метода схожа с использованием спрайтов. Связав все иконки в один шрифт, вы уменьшаете количество HTTP-запросов до одного. Если же этот веб-шрифт встроен с помощью data: URI, то запросы сводятся к нулю. Именно так работает WordPress, который может послужить примером во многих аспектах веб-разработки.
WordPress.com
По материалам: smashingmagazine.com, searchenginejournal.com
