Розробники · Base64 енкодер & decoder
Inline Base64 зображень в CSS: коли дані: УРТ допомагають і коли вони болять
· Чому це питання
Опубліковано ToolAcre · Редакція журналу
бази64 продуктивність
Увімкнення зображення як бази64 даних: URI виводить запит, але виростає файл і розбиває кешування. Ця публікація виділяється, коли торгівля коштує і коли окремий файл швидше.
Стильний аркуш, який виріс на сотні кілбайтів — одна команда, що нахиляє середовище і як він показав час на завантаження
Команда розробників вирішила, що підкреслення малих ікон як бази64 даних: УРТ у своїх CSS зменшити HTTP Запитання та поліпшення швидкості завантаження сторінок. З часом були додані ще іконки, стилістика виросла 400 кілограми.
Про нас CSS пакет, який повинен містити правила стилю, тепер переважає дані зображення. Команда вимірювала тривалість навантаження і виявила, що сторінка була повільніше, ніж до нахилу, не швидше. Проблема стала чіткою: 400-kilobyte стильний аркуш завантажується на кожній сторінці завантаження і кешується на сторінку, в той час як якщо іконки були окремі файли, один файл іконки буде кешовано і поділений на кожну сторінку.
Які дані: URI inlines і чому це Base64 — синтаксис, медіа тип і розмір штрафу
Додаючи більше сторінок сайту, зробив проблему гірше, оскільки кожна сторінка завантажує той же стильний аркуш з усіма вбудованими зображеннями знову. Цей запис пояснює, що дані: URI Саме тому він Base64, як ізоляція впливає на кешування і виконання, а правила великого пальця для викидання, коли торгово-офф варто. Дані: URL – спосіб зібрати ресурс безпосередньо в HTML або CSS файл замість посилання на зовнішній файл. Синтаксис - дані:медіаТип; base64,encoded bytes.
МедіаТип заявляє, що таке ресурс, як зображення/svg+xml для SVG, зображення/png для PNG, або текст/plain для тексту. ;base64 прапор вказує на те, що завантаження є Base64-encoded, а не процентів-encoded тексту. Закодовані байти є фактичними даними. При виникненні даних браузера: URL в href, src або фоно-зображення нерухомості, він decodes the Base64 і надає ресурсу в режимі онлайн. Ні HTTP запит відбувається тому, що ресурс вже там, введений у батьківський документ. Це зберігає один або кілька HTTP запити, які стосуються HTTP/1.1 світу, де кожен запит має накладну.
Кашинг і критичний шлях — чому вбудовані байти завантажуються знову з кожної сторінки, яка включає в себе стильний аркуш
У HTTP/2 або HTTP/3 у світі, де багато запитів можуть бути багаторазовими за одне з'єднання, заощадження менше. Розмір штрафу за кодування Base64 є прямим і значним. Анжела SVG Ікона 3 при збереженні в якості XML файл стає 4 кілбайти при Base64-encoded і вбудованих як дані: URI. У 33Збільшення розміру % від кодування необхідно додати в кожну сторінку, яка включає в себе стильний аркуш. Якщо ікона використовується на десяти сторінках, стильний аркуш завантажується в десять разів, кожен раз, в тому числі це те ж саме 4-kilobyte закодовано зображення.
Якщо іконка була окремим файлом, 3-kilobyte оригінально буде завантажено один раз і кешувати, потім використовується з кешу на всіх десяти сторінках. Економічний вибір чіткий для більшості ікон: окремі файли менші в цілому. Якщо іконка використовується саме на одній сторінці або дуже мало сторінок, і іконка дійсно критична для цієї сторінки. Favicon, що з'являється на кожній сторінці, є поганим кандидатом для нахилу, краще як окремий файл кешування.
Витрата пар на клієнту — як обробляється великі рядки в режимі онлайн CSS і HTML аналізатори, описані якісно
Для збереження запиту можна використовувати лише одну ілюстрацію. Свербіння перемог більшість переваг нахилу даних: URIs в стилістики. Стильний аркуш, як правило, з'являються протягом днів або тижнів. Коли завантажено стиль, кожен ресурс, який знаходиться в ньому, знову завантажується, навіть якщо браузер вже має це зображення. Якщо в таблиці стилі оновлюється, всі вбудовані дані повинні бути перероблені або перезавантажені, навіть якщо тільки один CSS Змінено правила.
Це викликає блоат: зміни кольорів або спаксування тригера повного перезавантаження стильного аркуша, включаючи кілограми даних зображення, які не змінилися. Окремий файл образу можна скомбінувати самостійно з власними гарячими головками, оновлюється окремо і перевикористається по стилів та сторінках. В кеші браузера набагато ефективніше, коли ресурси є окремими файлами, ніж коли вони вбудовані в більші документи. При великих рядках Base64 вбудовуються в таблиці стилів. Р CSS парсер повинен прочитати весь стильний аркуш перед застосуванням правил.
Виготовлений приклад: нахил невеликого SVG Ікона як текст — написання розмітки в конвертер і складання даних: URI від руки
Р 400-kilobyte стильний аркуш з вбудованим Base64 400 до будь-яких правил можна застосувати кілограми тексту, які повинні бути приписані до будь-яких правил. Анжела HTML рендеринг сторінка з великими даними: URI в атрибуті стилю або властивість фонового зображення повинні декодувати Base64 і створення зображення перед елементом може рендерити. Для простих SVG ікони це тривіал. Для більш складних образів або великих іконок відбувається декодування і рендеринг на головній нитки, потенційно блокує міжактивність. Якісна вартість є реальною, але важко виміряти без профілювання.
Як правило, якщо вбудований образ нічого більше, ніж кілька кілограмів, окремі файли швидше. Приклад роботи показує точний торговельний пункт. Просте SVG іконка стріли, 1.2 кілограми XML. Base64-encoded він стає 1600 символи, або про 1.6 кілограми з даними: URL префікс. Окремий CSS правило з фоном зображення: виворітна(/icons/arrow.svg) Додати 40 bytes до таблиці стилів. Ім'я файла іконки завантажується один раз, кешується і повторно використовується. Захищаючи один HTTP запит на цю іконку, але додає 1.6 кілбайти до кожного стилю навантаження.
Правила великого пальця, який тримається — крихітні, критичні, однокористувацькі активи, все інше як файл
Якщо таблиця стилю 50 кілбайти і спільні через 20 сторінки, ввівши цю ікону виростає повне завантаження 32 кілбайти за відвідування сайту. Про нас HTTP запитайте, що він зберігає кілька сотень байтів накладної. Запит також автоматично багаторазово HTTP/2, усунення різниці накладних. Увімкнення торгівлі втрачається погано, якщо таблиця стилю крихітна, ікона є величезною або іконою з'являється на точно одній сторінці і ніде ще. Правила великого пальця, який вижити гомілки обмежені і специфічні.
Крихітні, критичні, однокористувацькі активи можуть бути ізольовані. Р 200-біте SVG стрілка, яка з'являється тільки на одній незвичайній сторінці, може бути налаштована, щоб зберегти запит накладним. Все інше повинно бути відокремленим. Критична логістика, що надає логічні питання: якщо іконка повинна бути видима відразу і кожен мілісекунд перетворення витрат на навантаження, нахил може виграти. Для типових сторінок з типовими іконами, окремі файли практично завжди краще. Випробуйте обидва підходи до ваших фактичних активів та вимірюйте завантаження сторінок, вдаривши ставки кешу та запитайте водоспад.
Що це не криється — HTTP/2 і HTTP/3 мультиплексування деталей та стиснення зображень
Не приймаємо інлінінг – оптимізація без вимірювання. Найлегший спосіб завершення з розблокованою стилістикою полягає в тому, щоб незрівнянно без міркування, чи дійсно кожен додаток швидше. Base64 encoder & decoder дозволяє приймати це рішення перед здійсненням нахилу. Записатись SVG розмітка або інше джерело ікони в інструмент як текст. Натисніть кнопку Закодувати і встановити параметри, щоб генерувати дані: URI. Інструмент показує вам точну довжину даних: URL. Порівняйте, що до розміру окремого CSS правило і сам файл активу.
Розрахувати, скільки сторінок потрібно поділити стильний аркуш, щоб розбити навіть на вкладених між собою окремих файлів. Збільшити дані: URI і перевірити його в актуальному режимі HTML сторінка перед тим, як ви вмітите його в стильний аркуш. Якщо URI Довгий за кілька сотень персонажів, вартість вбудовування, швидше за все, більше, ніж користь економії запиту. Використовуйте інструмент для тестування ваших фактичних іконок і активів, після чого виміряйте вплив на вашу реальну сторінку навантаження метрики до і після нахилу.
Відправка: в режимі реального часу і вимірювання — як Base64 енкодер & decoder дозволяє вам закодувати SVG розмітка і див. точний розмір перед вами
Виконаючий підхід полягає в тому, щоб вибратися з нахилу. Ікони, які використовуються на кожній сторінці або через багато сторінок, є окремими файлами. Ікони, які використовуються на одній сторінці або дійсно критично важливі для першого фарбування, можуть бути ізольовані. Виміряйте торгову марку за свої фактичні активи та сторінки, а не такі загальні поради. Використовуйте Base64 енкодер & decoder, щоб побачити точний розмір будь-якого вбудованого активу, перш ніж додати його в стильний аркуш. Розмір штрафу - це реальний і багатоповерхівковий вигляд.
Свербіння і запит багаторазового вилучення зробили оригінальну користь для нахилу менш важливим. Для більшості сучасних додатків, менших таблиць стилів і кращої ефективності кеш-пам'яті від окремих файлів, зважити запит накладним. В режимі реального часу, вимірювати результат і довірити вимірювання перевизначення.