Налагодження вебу
Знайти важкі картинки та SVG-іконки
Які картинки екран завантажує даремно або завеликими, і які SVG-іконки їдуть із зайвими знаками чи в кількох копіях.
Навіщо: перший екран вантажиться повільно, а більша частина його байтів — це часто картинки, яких ніхто не бачить, та іконки з непотрібними даними шляхів. Ці вкладки кажуть, які файли виправляти першими і скільки заощадить кожне виправлення, без вікна DevTools.
Що відбувається
Section titled “Що відбувається”- Вкладка Images перевіряє кожну картинку, яку завантажують WebView застосунку.
- Увімкніть сканування картинок, щоб вона бачила, де й якого розміру сторінки їх малюють.
- Цифри вгорі підсумовують, скільки завантажено, що так і не з’явилося на екрані та що можна заощадити.
- Знахідки пояснюють кожну проблему: немає на екрані, більша, ніж малюється, PNG, який у WebP був би меншим.
- Warnings залишає те, що варто виправити першим.
- Вкладка SVG знаходить шляхи із зайвими знаками після коми, довгими командами та іконками в кількох копіях.
Приклади
Section titled “Приклади”- Перший екран повільний. Запустіть сесію з Check how pages draw their images, відкрийте екран, зачекайте десять секунд і прочитайте попередження: wasn’t on screen і draws it nowhere — це байти, за які перший екран заплатив і нічого не показав.
- Віддати картинку дизайнеру. Відкрийте знахідку: початковий розмір, розмір на екрані та розміри у WebP — саме те, що потрібно для правильного експорту.
- Перевірити виправлення. Очистіть вкладку, перезавантажте сторінку в застосунку й порівняйте Downloaded і Could save з тим, що було.
- Стиснути набір іконок. Too many decimals в
icons.jsозначає, що експорт залишив шість знаків там, де вистачає двох; shipped more than once — що одна іконка потрапила в кілька чанків.
Корисно знати
Section titled “Корисно знати”- Сканування запускає у сторінках застосунку маленький скрипт; APK не змінюється. Заразом вкладка SVG бачить
вбудовані
<svg>сторінок. - Економія вимірюється перекодуванням справжнього файлу у WebP у вашому браузері; якщо це неможливо, у знахідці написано about.
- Записи зберігають обидві вкладки й рахують усе до позиції відтворення.
Якщо не працює
Section titled “Якщо не працює”- Немає вкладок: пристрій не підтримує DevTools.
- Немає знахідок not on screen: сканування вимкнене, або картинки завантажилися до його ввімкнення. Перезавантажте сторінку в застосунку.
- Картинки немає в списку: картинки в
data:-посиланнях, редиректи та невдалі запити не потрапляють до списку.