Тестирование производительности я решил начать с проекта, продемонстрировавшего самый лучший показатель “firstPaint”.
Основные показатели
Быстрое начало прорисовки сайта обусловлено малым количеством запросов и небольшим размеров “блокирующих загрузок”.
Но дальше начинается интересное.
Тестирование загрузки проводилось при скорости 1Mbps (Good 3G).
Обратите внимание на синий цвет, это длительность процесса загрузки изображений.
Как мы видим, наибольшую часть времени загрузки страницы занимает загрузка изображений, и их на странице 1.8 Мбайт из 1.9 общего объёма. (95% веса страницы!)
IMG_1638_1.jpg, IMG_2218_1.jpg - замечательные названия для изображений, не правда ли? В таких случаях хочется сказать: “Спасибо что не BMP или RAW”.
Может такое качество оправдано и изображения необходимы странице, но…
Картинка с разрешением 1024x683 и весом в 630 Кб выводится размером 70x47 пикселей. Такое изображение будет весить всего 12.6 Кбайт. В 50 раз меньше, Карл! Т.е. за счёт оптимизации одной лишь картинки можно сократить 1⁄4 веса страницы!
Есть мнение, что кеш браузера решает эту проблему. Один раз загрузив изображение, он больше не будет её скачивать. Да это так, но важно понимать что с этим изображением происходит в браузере. Он работает с этой картинкой постоянно, сжимает до необходимых размеров. Даже когда “скролит”!
60 FPS
Для того чтобы добиться плавной работы сайта в 60FPS, нужно чтобы на один кадр уходило не больше 16 мс!
42 миллисекунды потребовалось браузеру чтобы декодировать изображение.
На этом скриншоте изображён timeline процесса прокрутки. Сайт сначала прокрутили вниз, потом вверх. Зелёные столбцы (которые выше полосы 60fps и 30fps) отображают работу браузера над растеризацией перед отображением (превращением изменённого документа в изображение).
Никогда не сжимайте картинки стилями!
Итог
Основная беда данного проекта - слишком высокое разрешение картинок. Это, казалось бы, мелочь, но оказывает пагубное влияние как на скорость загрузки, так и на производительность сайта. Комбинирование CSS и JS желательно, но это “незаметные” оптимизации на фоне избыточных размеров изображений.