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

Скорость работы интернет-магазина

  • Upload
    rusonyx

  • View
    5.273

  • Download
    1

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Скорость работы интернет-магазина

Юрий Устинов, РУСОНИКС

Электронная торговля - 2012

Page 2: Скорость работы интернет-магазина
Page 3: Скорость работы интернет-магазина
Page 4: Скорость работы интернет-магазина
Page 5: Скорость работы интернет-магазина

ХЫ-ХЫ-ХЫ

Page 6: Скорость работы интернет-магазина

0,1 сек. — свободное

течение

Page 7: Скорость работы интернет-магазина

0,1 сек. — свободное

течение

1 сек. — прерывание

мысли

Page 8: Скорость работы интернет-магазина

0,1 сек. — свободное

течение

1 сек. — прерывание

мысли

10 сек. — отвлечение

на другие дела

Page 9: Скорость работы интернет-магазина

Google

Google, 9 апреля 2010

Мы включили новый критерий в наш алгоритм поискового ранжирования: скорость сайта.

Make the Web Faster

http://googlewebmastercentral.blogspot.com/../

Page 10: Скорость работы интернет-магазина

Яндекс

Google

Браузер «для реальных дорог»

Google, 9 апреля 2010

Мы включили новый критерий в наш алгоритм поискового ранжирования: скорость сайта.

Make the Web Faster

http://googlewebmastercentral.blogspot.com/../

Page 11: Скорость работы интернет-магазина

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

Page 12: Скорость работы интернет-магазина

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

РФ: 2,5 сек. По данным Google Analytics на апрель 2012

http://analytics.blogspot.com/

Page 13: Скорость работы интернет-магазина

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

РФ: 2,5 сек.

на 11% меньше просмотров

на 16% меньше довольных посетителей

на 7% ниже конверсия

По данным Google Analytics на апрель 2012 http://analytics.blogspot.com/

По данным Aberdeen Group

Page 18: Скорость работы интернет-магазина

Shopzilla Site Redo Presentation

shopzilla.com октябрь, 2008

Конверсия: +7-12% Кол-во показов: +25% Доступность: 99,71% → 99,94% Инфраструктура: -50% (200 серверов вместо 402)

Источник:

Page 19: Скорость работы интернет-магазина

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

Результат: конкретные рекомендации

Методика: измеряем → улучшаем → → измеряем → делаем выводы

Page 20: Скорость работы интернет-магазина

Интернет-магазин мебели «из коробки», виртуальный сервер с 1Гб памяти, 2

процессорами по 1ГГц, быстрый дисковый массив

Посетитель: виндовс, эксплорер, интернет

1,5 Мбит/с

Виртуальный сервер: 2 х 1 ГГц, 1 Гб памяти

Интернет-магазин: «из коробки»

Измерение: sitespeed.ru, webpagetest.org

Page 21: Скорость работы интернет-магазина
Page 22: Скорость работы интернет-магазина

Врем

я з

агр

узк

и с

трани

цы

, сек.

Количество одновременных посетителей

2,8 сек Магазин без нагрузки

Page 23: Скорость работы интернет-магазина

Врем

я з

агр

узк

и с

трани

цы

, сек.

Количество одновременных посетителей

+0,3 сек или +10% к замеру при 0

Page 24: Скорость работы интернет-магазина

Врем

я з

агр

узк

и с

трани

цы

, сек.

Количество одновременных посетителей

+1,4 сек! или +50% к замеру при 50

Page 25: Скорость работы интернет-магазина

Врем

я з

агр

узк

и с

трани

цы

, сек.

Количество одновременных посетителей

приехали

Page 26: Скорость работы интернет-магазина

Врем

я з

агр

узк

и с

трани

цы

, сек.

Количество одновременных посетителей

1,6 сек до 130 посетителей

Page 27: Скорость работы интернет-магазина

Загрузка страницы:

Создание страницы:

0,70 сек → 0,16 сек

Передача контента:

2,20 сек → 1,20 сек

3 сек → 1,6 сек

Page 28: Скорость работы интернет-магазина

70

130 одновременных

посетителей

Page 29: Скорость работы интернет-магазина
Page 30: Скорость работы интернет-магазина

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

Page 31: Скорость работы интернет-магазина

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

2. Генерация страницы на сервере

Page 32: Скорость работы интернет-магазина

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

2. Генерация страницы на сервере

3. Передача контента по сети

Page 33: Скорость работы интернет-магазина

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

2. Генерация страницы на сервере

3. Передача контента по сети

70-90% возможностей для ускорения

Page 34: Скорость работы интернет-магазина

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

KeepAlive

Page 35: Скорость работы интернет-магазина

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

2. Размещайте магазин ближе к потребителям

KeepAlive

Page 36: Скорость работы интернет-магазина

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

2. Размещайте магазин ближе к потребителям

3. Минимизируйте количество файлов

KeepAlive

Page 37: Скорость работы интернет-магазина

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

Page 38: Скорость работы интернет-магазина

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

2. Установите легкий веб-сервер NGINX

Page 39: Скорость работы интернет-магазина

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

2. Установите легкий веб-сервер NGINX

3. Используйте PHP-акселераторы, н-р, APC

Page 40: Скорость работы интернет-магазина

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

2. Установите легкий веб-сервер NGINX

3. Используйте PHP-акселераторы, н-р, APC

4. Включайте встроенное кэширование в CMS

Page 41: Скорость работы интернет-магазина

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

Page 42: Скорость работы интернет-магазина

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

2. Настройте заголовки Expires для статики

Page 43: Скорость работы интернет-магазина

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

2. Настройте заголовки Expires для статики

3. Удаляйте неиспользуемые стили и скрипты

Page 44: Скорость работы интернет-магазина

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

2. Настройте заголовки Expires для статики

3. Удаляйте неиспользуемые стили и скрипты

4. Минимизируйте изображения

Особое внимание!

Page 45: Скорость работы интернет-магазина
Page 46: Скорость работы интернет-магазина

PNG, 440 Кб Оригинал

JPG, 31 Кб Копия

Примерный размер на сайте

Page 47: Скорость работы интернет-магазина

главная 2,6 Мб 16 сек

каталог 20,2 Мб 119 сек

ШТО?

Page 48: Скорость работы интернет-магазина

Загрузка страницы: 13,3 с Начало отображения: 3,9 с

Объем данных: 2,5 Мб Запросы к серверу: 146

Page 49: Скорость работы интернет-магазина

12 CSS 20 java-скриптов, в т.ч. _6_ с элементами jquery Оптимизация скриптов и стилей: -0,5 сек. Объединение файлов: -0,6 сек.

Отложенная загрузка слайдов: -3…-5 сек.

36 стандартных png-изображений Объединение png в спрайт: -0,6 сек. 3 шрифта без кэширования: -0,3 сек. Перенос изображений на под-домен, н-р img.euroset.ru: -1..2 сек

Отказаться от анимированной собаки на сайте: бесценно

Заголовок expires для статики: -4 сек. при повторной загрузке Данные: sitespeed.ru, webpagetest.org

Page 50: Скорость работы интернет-магазина

12 CSS 20 java-скриптов, в т.ч. _6_ с элементами jquery Оптимизация скриптов и стилей: -0,5 сек. Объединение файлов: -0,6 сек.

Отложенная загрузка слайдов: -3…-5 сек.

36 стандартных png-изображений Объединение png в спрайт: -0,6 сек. 3 шрифта без кэширования: -0,3 сек. Перенос изображений на под-домен, н-р img.euroset.ru: -1..2 сек

Отказаться от анимированной собаки на сайте: бесценно

Заголовок expires для статики: -4 сек. при повторной загрузке Данные: sitespeed.ru, webpagetest.org

Page 51: Скорость работы интернет-магазина

12 CSS 20 java-скриптов, в т.ч. _6_ с элементами jquery Оптимизация скриптов и стилей: -0,5 сек. Объединение файлов: -0,6 сек.

Отложенная загрузка слайдов: -3…-5 сек.

36 стандартных png-изображений Объединение png в спрайт: -0,6 сек. 3 шрифта без кэширования: -0,5 сек. Перенос изображений на под-домен, н-р img.euroset.ru: -1..2 сек

Отказаться от анимированной собаки на сайте: бесценно

Заголовок expires для статики: -4 сек. при повторной загрузке Данные: sitespeed.ru, webpagetest.org

Page 52: Скорость работы интернет-магазина

12 CSS 20 java-скриптов, в т.ч. _6_ с элементами jquery Оптимизация скриптов и стилей: -0,5 сек. Объединение файлов: -0,6 сек.

Загрузка всех слайдов одновременно Отложенная загрузка слайдов: -3…-5 сек.

36 стандартных png-изображений Объединение png в спрайт: -0,6 сек. 3 шрифта без кэширования: -0,5 сек. Перенос изображений на под-домен, н-р img.euroset.ru: -1..2 сек

Отказаться от анимированной собаки на сайте: бесценно

Заголовок expires для статики: -4 сек. при повторной загрузке Данные: sitespeed.ru, webpagetest.org

Page 53: Скорость работы интернет-магазина

12 CSS 20 java-скриптов, в т.ч. _6_ с элементами jquery Оптимизация скриптов и стилей: -0,5 сек. Объединение файлов: -0,6 сек.

Загрузка всех слайдов одновременно Отложенная загрузка слайдов: -3…-5 сек.

36 стандартных png-изображений Объединение png в спрайт: -0,6 сек. 3 шрифта без кэширования: -0,5 сек. Перенос изображений на под-домен, н-р img.euroset.ru: -1..2 сек

Отказаться от анимированной собаки на сайте: бесценно

Заголовок expires для статики: -4 сек. при повторной загрузке Данные: sitespeed.ru, webpagetest.org

Page 54: Скорость работы интернет-магазина

Время загрузки страницы: 13,3 → 7,0 сек.

Начало отображения: 3,9 → 2,8 сек.

Запросы к серверу: 146 → 105

Page 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)

Page 56: Скорость работы интернет-магазина

Юрий Устинов РУСОНИКС Facebook: yuri.ustinov rusonyx Twitter: @sukahitriy @rusonyx Email: [email protected] [email protected]

http://rusonyx.ru/ http://SiteSpeed.ru/