Початкова таблиця стилів оголошує залежність через імпорт

Чому це важливо

@import робить одну таблицю стилів залежною від іншої. Перегляд цієї залежності може спростити завантаження й підтримку. На фактичне завантаження впливають кеш, попереднє завантаження, повторні посилання й поведінка браузера; ця перевірка такого впливу не вимірює.

Що зробити

1. Прочитайте початкову адресу таблиці стилів, фрагмент імпорту й рядок, розв’язану дочірню адресу, глибину залежності та сторінки, що посилаються на таблицю стилів. Зверніть увагу на будь-яке неповне джерело чи обмеження глибини.
2. Де доречно, об’єднайте стилі під час збирання або використайте прямі посилання на таблиці стилів. Збережіть початковий порядок каскаду, умови layer, supports і media, а також розв’язання відносних адрес.
3. Після зміни перегляньте сторінку в браузері. Саме лише видалення оголошення імпорту не доводить, що візуальний результат чи час завантаження покращилися.

Коли залишити як є: Залиште імпорт, коли залежність навмисна й доречна для вашого сайту. Це пункт «Потребує перегляду», а не вимога об’єднувати кожну таблицю стилів.

Що ми читаємо

Ми починаємо з таблиць стилів, підключених у початковому head HTML сторінки, розв’язаних відносно її базової адреси, які підтверджено застосовуються до медіа screen. Посилання лише в body чи неактивне посилання не встановлює початкового кореня; іменовані набори, непевне розміщення й умови, що залежать від пристрою, лишаються неперевіреними.

Ми аналізуємо зафіксований CSS один раз і фіксуємо для кожного імпорту декодовану адресу, початковий фрагмент, рядок і стовпець, а також будь-яку умову layer, supports чи media. Імпорт, доведено некоректний чи неправильно розміщений, не враховується; коли ми не можемо визначити, чи роблять попередні правила імпорт некоректним, охоплення лишається неповним.

Відносні дочірні адреси використовують фактичну кінцеву адресу батьківської таблиці, а дочірня таблиця без власного оголошення кодування використовує зафіксоване кодування батьківської. Невідома мітка кодування залишає охоплення неповним. Аудит читає дочірні таблиці стилів за наявними правилами robots.txt, з керуванням темпом запитів, можливістю скасування й у межах лімітів запитів. Корінь має глибину нуль; ми переглядаємо до трьох ребер і не переходимо четвертим. Цикли, відсутні дочірні таблиці й обмеження роботи лишаються видимими прогалинами в охопленні.

Проблема групується за початковою адресою кореневої таблиці стилів і зберігає всі сторінки, що раніше на неї посилалися. Про відому залежність можна повідомити й за неповних даних про ланцюжок; неповне охоплення не може довести виправлення.

Приклад і докази

Ілюстративний приклад — схематичний CSS і залежність, а не реальний аудит.

Початковий head сторінки за адресою https://bakery.example/ підключає /assets/main.css для медіа screen. Ця таблиця стилів містить:

@import "theme.css" screen;

Зафіксована залежність розв’язується в /assets/theme.css. Можливе виправлення — замінити імпорт об’єднанням під час збирання або правильно впорядкованими прямими посиланнями, зберігши початкові умови й відносні адреси. Перш ніж підтвердити виправлення, новий повний аудит має прочитати ту саму кореневу таблицю стилів і кожну сторінку, що раніше її підключала, з повним охопленням.

Підтвердити й перевірити знову

Перевірте самі: Відкрийте таблицю стилів і перегляньте імпорти верхнього рівня. На панелі Network браузера окремо перегляньте фактичні запити; саме оголошення не встановлює виміряної мережевої вартості.

Повторна перевірка: Повний аудит — Запустіть новий повний аудит. Для виправлення потрібні та сама початкова таблиця стилів і кожна сторінка, що раніше її підключала, достатнє повне охоплення джерел і відсутність застосовної залежності через імпорт. Відсутні дочірні таблиці, втрачені сторінки, непридатний до читання CSS чи обмеження глибини залишають виправлення непідтвердженим.

Обмеження та джерела

Це статична перевірка коду. Ми не рендеримо сторінку, не обчислюємо умов @supports і не встановлюємо каскаду завантаження в браузері, затримки відображення чи покращення швидкості. Непідтримуваний синтаксис, непевне кодування й нерозв’язані умови лишаються неперевіреними. Перегляд імпортованих дочірніх таблиць не поширює окремі перевірки шрифтів і анімацій на каскад між таблицями стилів.

Упевненість: Висока Залежність зафіксовано в коді, але фактичну кількість запитів і затримку в браузері не вимірюють.

Джерела

• Chrome for Developers, Lighthouse переходить на аудити performance insights — Описує перехід від аудитів Lighthouse до performance insights. Дає контекст для перегляду продуктивності, а не статичне правило продукту щодо імпорту чи обмеження перегляду трьома ребрами. Перевірено 10 жовтня 2026.

Редакційна перевірка: 30 жовтня 2026