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

[YoungSkipper]

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

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

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

[aaliaksandr]

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

[Pyjamec]

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

[FireStorm]

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

[Alexznadr]

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

[Alexznadr]

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

[aaliaksandr]

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

[Hellcunt]

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

[0dmin]

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

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

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

[aaliaksandr]

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

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

[0dmin]

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

[Zigmar]

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

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

[0dmin]

Даже согласно вашему источнику 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]

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

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

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

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

[Zigmar]

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

[Zigmar]

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

[msk01]

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

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

[fledgling]

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

[Tomasina]

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

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

[aaliaksandr]

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

[Tomasina]

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

[0dmin]

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

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

[aaliaksandr]

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

[radist2s]

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

[AndrewStephanoff]

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

[kastaneda]

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

[AndrewStephanoff]

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

[kastaneda]

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

[AndrewStephanoff]

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

[kastaneda]

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

<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]

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

[kastaneda]

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

[Pirro]

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

[yeremeiev]

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

[wiktar]

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

[Hellcunt]

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

[kirilloid]

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

[Hellcunt]

> используйте минимизацию и обфускацию кода 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.»