Download - Ускорение сайта на стороне клиента
![Page 1: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/1.jpg)
Ускорение сайта на client-side
Юрий Устинов Русоникс
Москва, 20 марта 2014
![Page 2: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/2.jpg)
Загрузка сайта
DNS (узнаем, где сайт)
![Page 3: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/3.jpg)
Загрузка сайта
DNS (узнаем, где сайт)
Сеть (стучимся туда, где сайт)
![Page 4: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/4.jpg)
Загрузка сайта
DNS (узнаем, где сайт)
Сеть (стучимся туда, где сайт)
Ждем ответа сервера (он создает html)
![Page 5: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/5.jpg)
Загрузка сайта
DNS (узнаем, где сайт)
Сеть (стучимся туда, где сайт)
Ждем ответа сервера (он создает html)
Загружаем содержимое (html)
![Page 6: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/6.jpg)
![Page 7: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/7.jpg)
Установка соединения
ПосетительСервер
![Page 8: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/8.jpg)
RTT – правда жизни
Round Trip Timeвремя за которое сигнал проходит от
посетителя к серверу и обратно
![Page 9: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/9.jpg)
Скорость света конечна, да
Москва Москва
Москва Германия
Москва Нидерланды
30-50 мс
70 мс
100 мс
![Page 10: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/10.jpg)
Данные отправляются сегментами
• Повлиять на размер сегмента без хаков на стороне клиента нельзя
• Максимальный размер сегмента для Ethernet = 1500 байт, на практике меньше.
![Page 11: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/11.jpg)
Страница этого семинара
• 30,4 кб / 1,4 = 22 сегмента
• 22 сегмента на RTT 100 мс = 2200 мс
• К счастью, есть окно отправки и получения данных.
![Page 12: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/12.jpg)
Страница этого семинара
• 30,4 кб / 1,4 = 22 сегмента
• 22 сегмента на RTT 100 мс = 2200 мс
К счастью, есть окно отправки и получения данных.
![Page 13: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/13.jpg)
TCP receive window VS
Congestion window
• Размер окна меняется по ходу передачи данных
• Стабильнее канал – больше окно• Одно окно – много сегментов за раз
![Page 14: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/14.jpg)
Страница этого семинара
• В нашем случае 9 целых сегментов в 1 окне• 9*1400 = 12600 байт (1 окно = 1 RTT)
• 30,4 кб / 12,6 кб = 3 окна (т.е. 3 RTT)
• Итого 100 мс + 3* 100 мс = 400 мс
30,4 Кбhtml
![Page 15: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/15.jpg)
Страница этого семинара
• В нашем случае 9 целых сегментов в 1 окне• 9*1400 = 12600 байт (1 окно = 1 RTT)
• 30,4 кб / 12,6 кб = 3 окна (т.е. 3 RTT)
• Итого 100 мс + 3* 100 мс = 400 мс
30,4 Кбhtml
![Page 16: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/16.jpg)
Страница этого семинара
• В нашем случае 9 целых сегментов в 1 окне• 9*1400 = 12600 байт (1 окно = 1 RTT)
• 30,4 кб / 12,6 кб = 3 окна (т.е. 3 RTT)
• Итого 100 мс + 3* 100 мс = 400 мс
30,4 Кбhtml
![Page 17: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/17.jpg)
![Page 18: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/18.jpg)
6 потоков – важно!
![Page 19: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/19.jpg)
6 потоков – важно!
![Page 20: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/20.jpg)
Что же с этим теперь делать?
![Page 21: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/21.jpg)
Загрузка контента
Неправильно:для каждого файла новое соединение
![Page 22: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/22.jpg)
Загрузка контента
Неправильно:для каждого файла новое соединение
Правильно: на одно соединение много файлов
![Page 23: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/23.jpg)
Увеличение числа параллельных потоков
От такого использования поддоменанет никакого выигрыша
Данные: sitespeed.ru, webpagetest.org
![Page 24: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/24.jpg)
ОК
Данные: sitespeed.ru, webpagetest.org
Увеличение числа параллельных потоков
![Page 25: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/25.jpg)
Сжатие данных
![Page 26: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/26.jpg)
Сжатие данных
![Page 27: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/27.jpg)
Снижение количества файлов
Правило 6 потоков.
Идеальная схема: до 3 js + до 3 css примерно равного размера
![Page 28: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/28.jpg)
СпрайтыОдин большой спрайт – тоже плохо. Помним правило 6 потоков!
![Page 29: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/29.jpg)
Спрайты: математика
• 20 мелких повторяющихся элементов, суммарно 100 кб
• 1 окно: 12 600 байт (например)• 20 окон или 20*100 мс = 2000 мс
• 1 спрайт, 100 кб• 8 окон или 8*100 мс = 800 мс
![Page 30: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/30.jpg)
Спрайты: математика
• 20 мелких повторяющихся элементов, суммарно 100 кб
• 1 окно: 12 600 байт (например)• 20 окон или 20*100 мс = 2000 мс
• 1 спрайт, 100 кб• 8 окон или 8*100 мс = 800 мс
![Page 31: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/31.jpg)
Спрайты: математика
• 20 мелких повторяющихся элементов, суммарно 100 кб
• 1 окно: 12 600 байт (например)• 20 окон или 20*100 мс = 2000 мс
• 1 спрайт, 100 кб• 8 окон или 8*100 мс = 800 мс
![Page 32: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/32.jpg)
Спрайты: математика
• 20 мелких повторяющихся элементов, суммарно 100 кб
• 1 окно: 12 600 байт (например)• 20 окон или 20*100 мс = 2000 мс
• 1 спрайт, 100 кб• 8 окон или 8*100 мс = 800 мс
![Page 33: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/33.jpg)
Уменьшение изображений
• Не уменьшать картинки тегами в html• Сохранять в правильном формате• Lazy Loading!
• УДАЛЯТЬ служебную информацию из картинок!
![Page 34: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/34.jpg)
Реальный пример
Сайт веб-студии
-2 Мб фон в PNG
> 15 cек
> 5 cек
Оптимизация
файлов
3 cек
![Page 35: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/35.jpg)
Реальный пример
Сайт веб-студии
-2 Мб фон в PNG
> 15 cек
> 5 cек
Оптимизация
файлов
3 cек
![Page 36: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/36.jpg)
Реальный пример
Сайт веб-студии
-2 Мб фон в PNG
> 15 cек
> 5 cек
Оптимизация
файлов
3 cек
![Page 37: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/37.jpg)
SiteSpeed.ru: для клиентов
![Page 38: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/38.jpg)
WebPageTest.org: для профи
![Page 39: Ускорение сайта на стороне клиента](https://reader035.vdocuments.site/reader035/viewer/2022062300/55d08e3fbb61eba2748b458d/html5/thumbnails/39.jpg)
Хостинг, где сайты работают быстро
Спасибо :)
Юрий Устинов РУСОНИКСFacebook: yuri.ustinov rusonyxTwitter: @sukahitriy @rusonyxEmail: [email protected] [email protected]
Псс-с-с! Легендарные Серверы без заботTM 2.0
с SSD для Битрикса уже в наличии!