Клиентская оптимизацияКак ускорить работу сайта для посетителя

Мациевский Николай, Web Optimizator

1 / 24webo.in / webo.name

Интернет быстро растет

2 / 24webo.in / webo.name

Увеличивается пропускная

способность каналов связи,

средний размер веб-страниц и

сложность клиентских приложений

Но по-прежнему тормозит

3 / 24webo.in / webo.name

Проблема скорости загрузки

сайтов остается актуальной

Что обычно видит

посетитель вашего сайта?

Сколько можно смотреть на белый экран в браузере?

5 / 24webo.in / webo.name

75% пользователей уйдут

после 10 секунд ожидания

И скорее всего,

никогда не вернутся

Иногда проблема в канале

6 / 24webo.in / webo.name

Пользователи заходят через

модемы и GRPS-соединения

Пользователи заходят с другого

конца земного шара

Иногда проблема в сайте

7 / 24webo.in / webo.name

Среднее количество объектов

на странице превышает 50

Большое количество разнородных

решений замедляет загрузку страницы

Иногда проблема в компьютере

8 / 24webo.in / webo.name

JavaScript-нагрузка переходит на

процессоры конечных пользователей

Сколько ваших пользователей

смотрят на сайт через коммуникаторы?

Мой сайт хороший?

9 / 24webo.in / webo.name

Из чего состоит качество сайта?

Какие ключевые моменты?

Качество сайта

10 / 24webo.in / webo.name

• Влияет на стоимость развития и поддержки– Стандартный код– Поддержка различных технологий– Масштабируемость

Качество сайта

11 / 24webo.in / webo.name

• Влияет на цену уникального посетителя– Доступность и кроссбраузерность– Скорость загрузки сайта решает

• Влияет на постоянную аудиторию– Удобные сайты привлекают больше– А быстрые – тем более!

Средний сайт можноускорить в 3-5 раз

12 / 24webo.in / webo.name

А иногда даже больше

Как это проверить?

Проверяем доступность сервера

13 / 24webo.in / webo.name

И скорость создания страниц

Firefox + Firebug (NET Panel)

и(ли)

www.host-tracker.com

Проверяем клиентскую скорость

14 / 24webo.in / webo.name

Скорость загрузки страниц

у конечных пользователей

Firefox + Firebug + YSlow

или

webo.in

Кто виноват?

15 / 24webo.in / webo.name

И что делать?

Как исправить ситуацию?

Разработка с использованиемвеб-стандартов

16 / 24webo.in / webo.name

Стандартные решения имеют более

широкую область использования

И более низкую цену поддержки

Комплексный подходк адресному пространству

17 / 24webo.in / webo.name

Использование собственной сети

сайтов или известных «облаков»:

Amazon, Google, Microsoft, NGENIX

Инструменты оптимизации

18 / 24webo.in / webo.name

• Число файлов– Объединение CSS/JavaScript– CSS Sprites + data:URI

• sprites.in• duris.ru

– Кэширование– Использование параллельных загрузок

Инструменты оптимизации

19 / 24webo.in / webo.name

• Размер файлов– Gzip для всего– CSS Tidy– JSMin / YUI Compressor / Packer– Оптимизация графики

• jpegtran• gif2png / pngcrush / optipng

Внедрение автоматизации

20 / 24webo.in / webo.name

На рынке есть решения для

автоматической оптимизации:

GetRPO.com , Web Optimizer

http://code.google.com/p/web-optimizator/

Результаты оптимизации

21 / 24webo.in / webo.name

Скорость загрузки: с 14с до 2с

Аудитория до 4с: 78%

Прирост посещаемости: +50%

Результаты оптимизации

22 / 24webo.in / webo.name

Скорость загрузки: с 8с до 2,5с

Аудитория до 4с: 67%

Прирост посещаемости: +30%

– Использование параллельных загрузок– Оптимизация CSS- и JavaScript-логики– Примеры практического применения

«Разгони свой сайт»

• Первое в России специализированное издание– Вопросы сжатия информации– Применение кэширования– Объединение и разъединение

файлов

23 / 24webo.in / webo.name

Спасибо. Вопросы?

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

Мациевский Николай, Web Optimizator

24 / 24webo.in / webo.name