website optimization on client side

1,216 views

Published on

Published in: Self Improvement
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,216
On SlideShare
0
From Embeds
0
Number of Embeds
112
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

website optimization on client side

  1. 1. Клиентская оптимизация Как ускорить работу сайта для посетителя Мациевский Николай, Web Optimizator 1 / 24 webo.in / webo.name
  2. 2. Интернет быстро растет 2 / 24 webo.in / webo.name Увеличивается пропускная способность каналов связи , средний размер веб-страниц и сложность клиентских приложений
  3. 3. Но по-прежнему тормозит 3 / 24 webo.in / webo.name Проблема скорости загрузки сайтов остается актуальной Что обычно видит посетитель вашего сайта?
  4. 5. Сколько можно смотреть на белый экран в браузере? 5 / 24 webo.in / webo.name 75% пользователей уйдут после 10 секунд ожидания И скорее всего, никогда не вернутся
  5. 6. Иногда проблема в канале 6 / 24 webo.in / webo.name Пользователи заходят через модемы и GRPS- соединения Пользователи заходят с другого конца земного шара
  6. 7. Иногда проблема в сайте 7 / 24 webo.in / webo.name Среднее количество объектов на странице превышает 50 Большое количество разнородных решений замедляет загрузку страницы
  7. 8. Иногда проблема в компьютере 8 / 24 webo.in / webo.name JavaScript- нагрузка переходит на процессоры конечных пользователей Сколько ваших пользователей смотрят на сайт через коммуникаторы?
  8. 9. Мой сайт хороший? 9 / 24 webo.in / webo.name Из чего состоит качество сайта? Какие ключевые моменты?
  9. 10. Качество сайта <ul><li>Влияет на стоимость развития и поддержки </li></ul><ul><ul><li>Стандартный код </li></ul></ul><ul><ul><li>Поддержка различных технологий </li></ul></ul><ul><ul><li>Масштабируемость </li></ul></ul>10 / 24 webo.in / webo.name
  10. 11. Качество сайта <ul><li>Влияет на цену уникального посетителя </li></ul><ul><ul><li>Доступность и кроссбраузерность </li></ul></ul><ul><ul><li>Скорость загрузки сайта решает </li></ul></ul><ul><li>Влияет на постоянную аудиторию </li></ul><ul><ul><li>Удобные сайты привлекают больше </li></ul></ul><ul><ul><li>А быстрые – тем более! </li></ul></ul>11 / 24 webo.in / webo.name
  11. 12. Средний сайт можно ускорить в 3-5 раз 12 / 24 webo.in / webo.name А иногда даже больше Как это проверить?
  12. 13. Проверяем доступность сервера 13 / 24 webo.in / webo.name И скорость создания страниц Firefox + Firebug (NET Panel) и(ли) www.host-tracker.com
  13. 14. Проверяем клиентскую скорость 14 / 24 webo.in / webo.name Скорость загрузки страниц у конечных пользователей Firefox + Firebug + YSlow или webo.in
  14. 15. Кто виноват? 15 / 24 webo.in / webo.name И что делать? Как исправить ситуацию?
  15. 16. Разработка с использованием веб-стандартов 16 / 24 webo.in / webo.name Стандартные решения имеют более широкую область использования И более низкую цену поддержки
  16. 17. Комплексный подход к адресному пространству 17 / 24 webo.in / webo.name Использование собственной сети сайтов или известных «облаков»: Amazon, Google, Microsoft, NGENIX
  17. 18. Инструменты оптимизации <ul><li>Число файлов </li></ul><ul><ul><li>Объединение CSS/JavaScript </li></ul></ul><ul><ul><li>CSS Sprites + data:URI </li></ul></ul><ul><ul><ul><li>sprites.in </li></ul></ul></ul><ul><ul><ul><li>duris.ru </li></ul></ul></ul><ul><ul><li>Кэширование </li></ul></ul><ul><ul><li>Использование параллельных загрузок </li></ul></ul>18 / 24 webo.in / webo.name
  18. 19. Инструменты оптимизации <ul><li>Размер файлов </li></ul><ul><ul><li>Gzip для всего </li></ul></ul><ul><ul><li>CSS Tidy </li></ul></ul><ul><ul><li>JSMin / YUI Compressor / Packer </li></ul></ul><ul><ul><li>Оптимизация графики </li></ul></ul><ul><ul><ul><li>jpegtran </li></ul></ul></ul><ul><ul><ul><li>gif2png / pngcrush / optipng </li></ul></ul></ul>19 / 24 webo.in / webo.name
  19. 20. Внедрение автоматизации 20 / 24 webo.in / webo.name На рынке есть решения для автоматической оптимизации: GetRPO.com , Web Optimizer http://code.google.com/p/web-optimizator/
  20. 21. Результаты оптимизации 21 / 24 webo.in / webo.name Скорость загрузки: с 14с до 2с Аудитория до 4с: 78% Прирост посещаемости: +50%
  21. 22. Результаты оптимизации 22 / 24 webo.in / webo.name Скорость загрузки: с 8с до 2,5с Аудитория до 4с: 67% Прирост посещаемости: +30%
  22. 23. «Разгони свой сайт» <ul><li>Первое в России специализированное издание </li></ul><ul><ul><li>Вопросы сжатия информации </li></ul></ul><ul><ul><li>Применение кэширования </li></ul></ul><ul><ul><li>Объединение и разъединение файлов </li></ul></ul><ul><ul><li>Использование параллельных загрузок </li></ul></ul><ul><ul><li>Оптимизация CSS- и JavaScript- логики </li></ul></ul><ul><ul><li>Примеры практического применения </li></ul></ul>23 / 24 webo.in / webo.name
  23. 24. Спасибо. Вопросы? Клиентская оптимизация Мациевский Николай, Web Optimizator 24 / 24 webo.in / webo.name

×