Найти тяжёлые картинки и SVG-иконки

Зачем: первый экран грузится медленно, а большая часть его байтов — это часто картинки, которых никто не видит, и иконки с ненужными данными путей. Эти вкладки говорят, какие файлы чинить первыми и сколько сэкономит каждое исправление, без окна DevTools.

Что происходит

1. Вкладка Images проверяет каждую картинку, которую загружают WebView приложения.
2. Включите сканирование картинок, чтобы она видела, где и какого размера страницы их рисуют.
3. Цифры сверху суммируют, сколько скачано, что так и не появилось на экране и что можно сэкономить.
4. Находки объясняют каждую проблему: нет на экране, больше, чем рисуется, PNG, который в WebP был бы меньше.
5. Warnings оставляет то, что стоит чинить первым.
6. Вкладка SVG находит пути с лишними знаками после запятой, длинными командами и иконками в нескольких копиях.

Примеры

• Первый экран медленный. Запустите сессию с 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 — что одна иконка попала в несколько чанков.

Полезно знать

• Сканирование запускает в страницах приложения маленький скрипт; APK не меняется. Заодно вкладка SVG видит встроенные <svg> страниц.
• Экономия измеряется перекодированием настоящего файла в WebP в вашем браузере; если это невозможно, в находке написано about.
• Записи сохраняют обе вкладки и считают всё до позиции воспроизведения.

Если не работает

• Нет вкладок: устройство не поддерживает DevTools.
• Нет находок not on screen: сканирование выключено, или картинки загрузились до его включения. Перезагрузите страницу в приложении.
• Картинки нет в списке: картинки в data:-ссылках, редиректы и неудачные запросы не попадают в список.

Подробнее: Images, SVG.