Интересная находка по скорости загрузки страниц

150

Интересная находка по скорости загрузки страниц:

Логотип в формате SVG на самом деле был не SVG: при просмотре его исходного кода оказалось, что это просто встроенный PNG, закодированный в base64.

А как некоторые знают:

→ Версия изображения в base64 увеличивает его исходный размер примерно на 33%

→ Таким образом, PNG размером 100 КБ при кодировании в base64 превращается примерно в 133 КБ

→ Примерно с этим я и столкнулся в данном кейсе по Core Web Vitals

Логотипы обычно являются одними из первых изображений, которые обнаруживают браузеры, и загружаются на раннем этапе, часто вместе с CSS и JS.

Это означает, что большие изображения, как этот логотип на 150 КБ, в конечном итоге начинают конкурировать с критически важными для рендеринга ассетами.

В данном случае это привело к следующему:

1️⃣ Конкуренция за пропускную способность

Логотип размером 150 КБ конкурирует с CSS за время ранней загрузки, что потенциально влияет на FCP.

2️⃣ HTTP/2 не бесплатен

Логотип занимает место в потоке (stream space), что может задерживать загрузку критически важных ресурсов.

3️⃣ Затраты на декодирование

Браузеру приходится парсить SVG, декодировать Base64, а затем декодировать PNG, задействуя ресурсы CPU еще до отрисовки.

Итак:

→ вероятно, не стоит использовать строки, закодированные в base64

→ особенно на так называемом критическом пути рендеринга

Преобразовав фейковый SVG-логотип клиента, мы смогли получить настоящий SVG размером всего 10 КБ (в 15 раз меньше) 🥳

@MikeBlazerX