@aaliaksandr15 июл 2011 в 06:16

Оптимизация скорости мобильных сайтов

8 мин

11K

Клиентская оптимизация *

+53

Комментарии 38

@YoungSkipper 15 июл 2011 в 06:32

используйте CSS-градиенты вместо фоновых картинок — это координально сократит количество обращений к серверу;

Размер png градиента 1x320 пикселей сравним с размером описания css-градиента. Но css градиент рендерится примерно раз в пять медленнее. Тестов не могу предоставить, он на android трубках было заметно.

Чтобы убрать обращение к серверу можно png картинку встроить прямо в html код.

@aaliaksandr 15 июл 2011 в 07:42

Совершенно верно, поэтому также было предложено использовать технику data URI для встраивания картинок.

@Pyjamec 15 июл 2011 в 07:04

А разве Webkit не поддерживает WebSoсkets? Или имеется ввиду только мобильный Webkit?

@FireStorm 15 июл 2011 в 07:15

Спасибо. А на каком наборе устройств/браузеров нужно тестировать сайт? В статье упомянуты Andriod, iOS, Blackberry, Opera Mobile. А как насчёт Opera Mini, Symbian? Есть ли для них всех эмуляторы или лучше обзавестись реальными устройствами?

@Alexznadr 15 июл 2011 в 08:16

У нокии есть неплохой сервис доступный разарботчикам бесплатно (к сожалению сейчас не могу найти ссылку)
Там через java-апплет получаешь удаленный доступ к телефону. Моделей телефоннов там много. Время сеанса работы с телефоном ограничено несколькими десятками минут. На некоторые модели телефонов бывают «очереди». Но в GMT+3 вроде бы нечасто и не большие.

@Alexznadr 15 июл 2011 в 08:18

www.developer.nokia.com/Devices/Remote_device_access/

@aaliaksandr 15 июл 2011 в 08:26

Довольно часто сайты «затачиваются» под конкретные платформы, для них и проводятся тесты. Использовать эмуляторы для тестирования/анализа производительности не рекомендуется, немного об этом здесь.

@Hellcunt 18 июл 2011 в 16:37

Вот, есть варианты — github.com/shichuan/mobile-html5-boilerplate/wiki/Mobile-Emulators-%26-Simulators

@0dmin 15 июл 2011 в 07:41

Еще не наступило то время, когда мобильный сайт — это сайт для Webkit браузеров. Лет через 5 — возможно.

— Широкая поддержка HTML5 и CSS3 в мобильных браузерах

На сегодня, пока, что 40% пользователей мобильного интернета — Symbian, 15% — Windows Mobile. Какие речи о HTML5 и CSS3 в мобильном интернете?

@aaliaksandr 15 июл 2011 в 07:50

А можно представить источник статистики? Если верить следующей ссылке
gs.statcounter.com/#mobile_browser-ww-monthly-201101-201106-bar

то ситуация несколько иная.

@0dmin 15 июл 2011 в 07:54

Я про Россию, Матушку, в первую очередь, так как привык работать только с Российским трафиком. До сих пор жив «рувап», так сказать…

@Zigmar 15 июл 2011 в 09:52

Так там по России тоже статистика есть:
Opera+Android+iPhone = 90% трафика
Нокиа — 6%
IEMobile — 0.5%

Вот вам и «40% симбиан, 15% винмо»…

@0dmin 15 июл 2011 в 10:01

Даже согласно вашему источнику gs.statcounter.com/#mobile_browser-RU-monthly-201101-201106-bar

Тут 70% — Opera (а это не HTML5+CSS3), это как раз-таки Symbian, Windows Mobile и прочие телефоны, которые вообще незнают ничего про вышеописанное и имеют очень большие ограничения и работают скорее всего используя XHTML Mobile

iOS — 10%
Android — 8%

А не то, что вы указали. А я судил по статистике другой. У меня есть реальная статистика по проектам крупной компании, занимающийся мобильными сайтами в РФ. Графиков показать, к сожалению не смогу…

Подводя итог, согласно ВАШЕМУ же источнику:

Opera + Nokia = уже 76%, а это как раз те, кто приносит доход в мобильном интернете, как вы не затачивали бы сайты под iPhone… Таковы реалии жизни…

@0dmin 15 июл 2011 в 10:08

На всякий случай… Я говорю про сайты — это раз. Во 2х — топик в принципе хороший, тем более в нем есть полезная информация. Просто меня задела фраза:

— Широкая поддержка HTML5 и CSS3 в мобильных браузерах

Все. В остальном претензий не имею =)

«Зануда мод» выключил. Ушел работать.

@Zigmar 15 июл 2011 в 11:13

Ну вообще это сильно от региона зависит. В Штатах например, iOS+Android+BB это больше 90% мобильного интернета. В Европе чуть другая картина, но тоже доминирует смартфоны со «взрослыми» броузерами.

@Zigmar 15 июл 2011 в 09:50

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

@msk01 15 июл 2011 в 10:49

Если симбиан — это не смартфоны, то что же тогда смартфоны?

Я хожу встроенным браузером с Nokia 5228 на нормальные большие сайты, и никакая опера мне там не нужна.

@fledgling 15 июл 2011 в 07:49

Ох, взгляд максималиста.

@Tomasina 15 июл 2011 в 08:18

«используйте обфускацию кода CSS и JavaScript;» — чем это поможет мобильным устройствам? Насколько я знаю, обфускация только увеличивает размер кода.

P.S. не «координально», а «кАрдинально».

@aaliaksandr 15 июл 2011 в 08:21

Одна из основных целей обфускации как раз уменьшение размера кода.

@Tomasina 15 июл 2011 в 08:24

да, теперь согласен, чуточку образовался.
Только это не основная цель, а побочный эффект запутывания кода.

@0dmin 15 июл 2011 в 08:30

Обфуска́ция (от лат. obfuscare — затенять, затемнять; и англ. obfuscate — делать неочевидным, запутанным, сбивать с толку) или запутывание кода — приведение исходного текста или исполняемого кода программы к виду, сохраняющему ее функциональность, но затрудняющему анализ, понимание алгоритмов работы и модификацию при декомпиляции.

А уменьшение размера кода — это компрессия.

@aaliaksandr 15 июл 2011 в 08:38

В любом случае, речь шла об использовании таких тулов как YUI Compressor для минимизаци и обфускации кода. Но спасибо за уточнение.

@radist2s 15 июл 2011 в 09:56

Ну тот же гугл кложур и обфускацию делает, и код оптимизирует и уменьшает объем.

@AndrewStephanoff 15 июл 2011 в 08:22

Определить возможности мобильного клиента можно при помощи WURFL, это позволит не угадывать разрешение девайса, а сразу отдавать необходимую css.

@kastaneda 15 июл 2011 в 11:56

Интересно. а Вы пользуетесь этой базой? Как впечатления?

@AndrewStephanoff 15 июл 2011 в 12:15

Я использовал одну инсталляцию TeraWURLF с кешированием в mysql; остальные проекты подключались к ней через REST и сохраняли результат в memcache. Мои впечатления — очень удобно, если знать как с этим работать; мне этот функционал пришлось переделывать за другими разработчиками, где был жуткий хардкод и тормоза. Если интересует, могу дать ссылку на свои классы для Zend Framework для работы с TeraWURFL

@kastaneda 15 июл 2011 в 16:51

Спасибо, но у меня .Net проект.
Сначала было обрадовался, но вспомнив свою статистику посещений (подавляющее большинство ходит с Opera Mini) расстроился :-(
И почему бы Опере не отправлять хотя бы разрешение экрана девайса, могут ведь. IEMobile, например, отправляет в заголовках.

@AndrewStephanoff 15 июл 2011 в 16:55

да, этим Опера конечно свинью подложило изрядную
у меня были европейские проекты для смартфонов, там опера (к счастью) даже не рассматривалась

@kastaneda 18 июл 2011 в 14:06

эх, позор мне на мою седую голову — сегодня случайно заметил в логах следующие строчки:

<serverVariables>
<item name="HTTP_USER_AGENT">
<value string="Opera/8.01 (J2ME/MIDP; Opera Mini/3.1.10423/1724; ru; U; ssr)"/>
</item>
<item name="HTTP_X_OPERAMINI_FEATURES">
<value string="basic, inputhints"/>
</item>
<item name="HTTP_X_OPERAMINI_PHONE_UA">
<value string="Nokia5070/2.0 (04.21) Profile/MIDP-2.0 Configuration/CLDC-1.1"/>
</item>
<item name="HTTP_X_OPERAMINI_PHONE">
<value string="Nokia # 5070"/>
</item>
</serverVariables>

Задаваясь вопросом почему я раньше не додумался загуглить «opera mini headers» нахожу на DevOpera нужный материал — Opera Mini request headers.
И сейчас уже понимаю, что не могли оперовцы не передавать такую важную информацию как модель телефона, не могли :-)

@AndrewStephanoff 15 июл 2011 в 16:57

ну и насчет WURFL — не нужно использовать XML файл напрямую, это будет очень долго, нужно сохранять результат в быстрый кеш и работать с ним.

@kastaneda 16 июл 2011 в 05:53

Да, разумеется. В ASP.NET есть единый общедоступный кэш приложения. Туда и кэшируется WURFL, с этим проблем нет.

@Pirro 15 июл 2011 в 10:08

Очень правильные рекомендации. Добавлю лишь один упущенный вами, но очень важный момент:
— всегда используйте CACHE MANIFEST

@yeremeiev 15 июл 2011 в 15:44

Насколько я знаю, использование CSS media-queries не помогает не загружать ненужный контент.

@wiktar 17 июл 2011 в 23:35

А есть где-нибудь эксперименты на эту тему и исследования?

@Hellcunt 18 июл 2011 в 16:36

Вот тут можно посмотреть — www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

@kirilloid 18 июл 2011 в 16:03

Вы перепутали время жизни LocalStorage и SessionStorage.
Я вот localStorage пользуюсь-пользуюсь, и никак он не очистится, хотя не только браузер, но и систему перезапускал.

@Hellcunt 18 июл 2011 в 16:33

> используйте минимизацию и обфускацию кода CSS и JavaScript;

Если уже используется gzip, то нет смысла проводить обфускацию css или js. Выйгрыш крайне мал, если вообще есть. Разработчик Webo Site SpeedUp проводил соответствующие тесты, результаты есть в одной из его книг.

> CSS позволяет нам определять текущее разрешение экрана пользователя и в зависимости от этого передавать ему ту версию картинки, которая имеет более подходящее разрешение.

Косяк в том, что браузер не передаст, а только отобразит необходимую версию картинки. Скачает он обе версии. Цитата из книги A List Apart «Responsive Web Design»:

«The problem with this approach is that some small screen browsers, most notably Mobile Safari on the iPhone and the iPad, will actually download both graphics, even if only one is ultimately applied to the page. While smaller screens don’t always equate to lower bandwidth, we’re currently punishing users on smaller screens with the download of a much heavier image than they’ll ever see.»

Зарегистрируйтесь на Хабре, чтобы оставить комментарий