Доклад о влиянии скорости загрузки страниц на конверсию интернет-магазина. Информация об исследовании основных факторов, влияющих на время отображения страниц. Советы по ускорению сайтов.

1. Юрий Устинов, РУСОНИКС
Электронная торговля - 2012

5. ХЫ-ХЫ-ХЫ

6. 0,1 сек. — свободное
течение

7. 0,1 сек. — свободное
течение
1 сек. — прерывание
мысли

8. 0,1 сек. — свободное
течение
1 сек. — прерывание
мысли
10 сек. — отвлечение
на другие дела

9. Google Make the Web Faster
Мы включили новый
критерий в наш алгоритм
поискового ранжирования:
скорость сайта.
http://googlewebmastercentral.blogspot.com/../
Google, 9 апреля 2010

10. Google Make the Web Faster
Мы включили новый
критерий в наш алгоритм
поискового ранжирования:
скорость сайта.
http://googlewebmastercentral.blogspot.com/../
Google, 9 апреля 2010
Яндекс Браузер «для реальных дорог»

11. МИР: 3 сек., мобильные – 5 сек.

12. МИР: 3 сек., мобильные – 5 сек.
РФ: 2,5 сек. По данным Google Analytics на апрель 2012
http://analytics.blogspot.com/

13. МИР: 3 сек., мобильные – 5 сек.
РФ: 2,5 сек. По данным Google Analytics на апрель 2012
http://analytics.blogspot.com/
на 11% меньше просмотров
на 16% меньше довольных посетителей
на 7% ниже конверсия По данным Aberdeen Group

14. Время загрузки страницы, мс
3 500
3 000
2 500
2 000
1 500
1 000
1 2 3 4 5 6 7 8 9 10
Интернет-канал, Мбит/с
Источник: More Bandwith Doesn't Matter (much)

15. Время загрузки страницы, мс
3 500
Проблема
3 000
2 500
ТОЛСТОГО
2 000
самолета
1 500
1 000
1 2 3 4 5 6 7 8 9 10
Интернет-канал, Мбит/с
Источник: More Bandwith Doesn't Matter (much)

16. shopzilla.com
октябрь, 2008
Источник: Shopzilla Site Redo Presentation

17. shopzilla.com
октябрь, 2008
Конверсия: +7-12%
Кол-во показов: +25%
Доступность: 99,71% → 99,94%
Источник: Shopzilla Site Redo Presentation

18. shopzilla.com
октябрь, 2008
Конверсия: +7-12%
Кол-во показов: +25%
Доступность: 99,71% → 99,94%
Инфраструктура: -50% (200 серверов вместо 402)
Источник: Shopzilla Site Redo Presentation

19. Задача: выявить основные факторы,
влияющие на время загрузки страниц
Методика: измеряем → улучшаем →
→ измеряем → делаем выводы
Результат: конкретные рекомендации

20. Виртуальный сервер: 2 х 1 ГГц, 1 Гб памяти
Интернет-магазин мебели «из коробки»,
Интернет-магазин: «из коробки»
виртуальный сервер с 1Гб памяти, 2
процессорами по 1ГГц, быстрый дисковый
массив
Посетитель: виндовс, эксплорер, интернет
Измерение: sitespeed.ru, webpagetest.org
1,5 Мбит/с

22. Время загрузки страницы, сек.
2,8 сек
Магазин без нагрузки
Количество одновременных посетителей

23. Время загрузки страницы, сек.
+0,3 сек
или +10% к замеру при 0
Количество одновременных посетителей

24. +1,4 сек!
Время загрузки страницы, сек.
или +50% к замеру при 50
Количество одновременных посетителей

25. Время загрузки страницы, сек.
приехали
Количество одновременных посетителей

26. Время загрузки страницы, сек.
1,6 сек
до 130 посетителей
Количество одновременных посетителей

27. Загрузка страницы: 3 сек → 1,6 сек
Создание страницы:
0,70 сек → 0,16 сек
Передача контента:
2,20 сек → 1,20 сек

28. 130
одновременных
посетителей
70

30. 1. Установка соединения

31. 1. Установка соединения
2. Генерация страницы на сервере

32. 1. Установка соединения
2. Генерация страницы на сервере
3. Передача контента по сети

33. 1. Установка соединения
2. Генерация страницы на сервере
3. Передача контента по сети
70-90%
возможностей
для ускорения

34. 1. Разрешите серверу удерживать соединения
KeepAlive

35. 1. Разрешите серверу удерживать соединения
KeepAlive
2. Размещайте магазин ближе к потребителям

36. 1. Разрешите серверу удерживать соединения
KeepAlive
2. Размещайте магазин ближе к потребителям
3. Минимизируйте количество файлов

37. 1. Настройте сервер по рекомендациям CMS

38. 1. Настройте сервер по рекомендациям CMS
2. Установите легкий веб-сервер NGINX

39. 1. Настройте сервер по рекомендациям CMS
2. Установите легкий веб-сервер NGINX
3. Используйте PHP-акселераторы, н-р, APC

40. 1. Настройте сервер по рекомендациям CMS
2. Установите легкий веб-сервер NGINX
3. Используйте PHP-акселераторы, н-р, APC
4. Включайте встроенное кэширование в CMS

41. 1. Включите сжатие текста (gzip, deflate)

42. 1. Включите сжатие текста (gzip, deflate)
2. Настройте заголовки Expires для статики

43. 1. Включите сжатие текста (gzip, deflate)
2. Настройте заголовки Expires для статики
3. Удаляйте неиспользуемые стили и скрипты

44. 1. Включите сжатие текста (gzip, deflate)
2. Настройте заголовки Expires для статики
3. Удаляйте неиспользуемые стили и скрипты
4. Минимизируйте изображения
Особое внимание!

46. Оригинал Копия
PNG, 440 Кб JPG, 31 Кб
Примерный размер на сайте

47. главная каталог
2,6 Мб 20,2 Мб
16 сек 119 сек
ШТО?

48. Загрузка страницы: 13,3 с Объем данных: 2,5 Мб
Начало отображения: 3,9 с Запросы к серверу: 146

49. 12 CSS
20 java-скриптов, в т.ч. _6_ с элементами jquery
Оптимизация скриптов и стилей: -0,5 сек.
Объединение файлов: -0,6 сек.
36 стандартных png-изображений
Объединение png в спрайт: -0,6 сек.
3 шрифта без кэширования: -0,3 сек.
Перенос изображений на под-домен, н-р img.euroset.ru: -1..2 сек
Отложенная загрузка слайдов: -3…-5 сек.
Отказаться от анимированной собаки на сайте: бесценно
Заголовок expires для статики: -4 сек. при повторной загрузке
Данные: sitespeed.ru, webpagetest.org

50. 12 CSS
20 java-скриптов, в т.ч. _6_ с элементами jquery
Оптимизация скриптов и стилей: -0,5 сек.
Объединение файлов: -0,6 сек.
36 стандартных png-изображений
Объединение png в спрайт: -0,6 сек.
3 шрифта без кэширования: -0,3 сек.
Перенос изображений на под-домен, н-р img.euroset.ru: -1..2 сек
Отложенная загрузка слайдов: -3…-5 сек.
Отказаться от анимированной собаки на сайте: бесценно
Заголовок expires для статики: -4 сек. при повторной загрузке
Данные: sitespeed.ru, webpagetest.org

51. 12 CSS
20 java-скриптов, в т.ч. _6_ с элементами jquery
Оптимизация скриптов и стилей: -0,5 сек.
Объединение файлов: -0,6 сек.
36 стандартных png-изображений
Объединение png в спрайт: -0,6 сек.
3 шрифта без кэширования: -0,5 сек.
Перенос изображений на под-домен, н-р img.euroset.ru: -1..2 сек
Отложенная загрузка слайдов: -3…-5 сек.
Отказаться от анимированной собаки на сайте: бесценно
Заголовок expires для статики: -4 сек. при повторной загрузке
Данные: sitespeed.ru, webpagetest.org

52. 12 CSS
20 java-скриптов, в т.ч. _6_ с элементами jquery
Оптимизация скриптов и стилей: -0,5 сек.
Объединение файлов: -0,6 сек.
36 стандартных png-изображений
Объединение png в спрайт: -0,6 сек.
3 шрифта без кэширования: -0,5 сек.
Перенос изображений на под-домен, н-р img.euroset.ru: -1..2 сек
Загрузка всех слайдов одновременно
Отложенная загрузка слайдов: -3…-5 сек.
Отказаться от анимированной собаки на сайте: бесценно
Заголовок expires для статики: -4 сек. при повторной загрузке
Данные: sitespeed.ru, webpagetest.org

53. 12 CSS
20 java-скриптов, в т.ч. _6_ с элементами jquery
Оптимизация скриптов и стилей: -0,5 сек.
Объединение файлов: -0,6 сек.
36 стандартных png-изображений
Объединение png в спрайт: -0,6 сек.
3 шрифта без кэширования: -0,5 сек.
Перенос изображений на под-домен, н-р img.euroset.ru: -1..2 сек
Загрузка всех слайдов одновременно
Отложенная загрузка слайдов: -3…-5 сек.
Отказаться от анимированной собаки на сайте: бесценно
Заголовок expires для статики: -4 сек. при повторной загрузке
Данные: sitespeed.ru, webpagetest.org

54. Время загрузки страницы: 13,3 → 7,0 сек.
Начало отображения: 3,9 → 2,8 сек.
Запросы к серверу: 146 → 105

55. Почитать:
Исследование факторов, влияющих на скорость загрузки сайтов. Rusonyx (рус)
Инициатива Google: Make The Web Faster (eng)
Подборка кейсов, публикаций, инфографики (eng)
Протокол SPDY (Google)
Измерить и оценить:
SiteSpeed.ru – сервис для РФ, по-русски + подробный отчет с рекомендациями
WebPageTest.org (eng) – зарубежный сервис
PageSpeed Insights (eng) – сервис Google
Yslow (eng) – плагин для браузеров. Измеряет и дает рекомендации (Yahoo)
Уменьшить изображения без потери качества: Smush.it (Yahoo)
Использовать в аналитике: About Site Speed (Google Analytics)
Поэкспериментировать (админам): mod_pagespeed (apache)

56. Юрий Устинов РУСОНИКС
Facebook: yuri.ustinov rusonyx http://rusonyx.ru/
Twitter: @sukahitriy @rusonyx http://SiteSpeed.ru/
Email: u@rsnx.ru info@rusonyx.ru