Инструменты оптимизации CSS для повышения производительности PWA

При оформлении веб-сайтов или PWA с помощью CSS вы должны проанализировать, как ресурсы CSS влияют на производительность. В этом руководстве мы будем использовать различные инструменты и связанные с ними методы, чтобы помочь в создании лучшего PWA, сосредоточившись на оптимизации CSS. В частности, мы удалим неиспользуемый CSS, добавим CSS критического пути и минимизируем полученный код.

Методы также могут быть использованы для повышения производительности обычных веб-сайтов и приложений. Мы сконцентрируемся на оптимизации CSS для PWA, поскольку они должны быть быстрыми и чувствовать себя на пользовательских устройствах.

Прогрессивные веб-приложения (PWA) — это веб-приложения, которые объединяют лучшее из двух миров: собственные мобильные приложения (устанавливаемые из магазина) и веб-приложения (доступные по общедоступным URL-адресам). Пользователи могут начать использовать приложение прямо из своего веб-браузера, не дожидаясь загрузки, установки или необходимости дополнительного места на устройстве.

Работники сервиса и кэширование позволяют приложению работать в автономном режиме и при плохом сетевом подключении. Со временем приложение может стать быстрее, поскольку все ресурсы кэшируются локально. PWA также можно установить в виде значка на главном экране и запустить в полноэкранном режиме с начальным экраном-заставкой.

Демо PWA для аудита

Прежде чем научиться проверять PWA на наличие проблем с CSS, вы можете получить код простого веб-сайта с функциями PWA из этого репозитория GitHub . PWA использует незавершенную версию Bootstrap v4 для стилевого оформления CSS и отображает набор сообщений, извлекаемых из статически сгенерированного JSON API . Вы также можете использовать размещенную версию этой демонстрации , поскольку изучение того, как создать PWA, выходит за рамки данного руководства.

PWA — это просто веб-приложения с дополнительными функциями, включая следующие элементы:

• Файл манифеста . Файл JSON предоставляет браузеру информацию о веб-приложении, такую ​​как имя, описание, значки, начальный URL, факторы отображения и т. Д.
• Сервисный работник . Файл JavaScript используется для кэширования оболочки приложения (минимальный необходимый HTML, CSS и JavaScript для отображения пользовательского интерфейса) и проксирования всех сетевых запросов.
• HTTPS . PWA должны обслуживаться из безопасного источника.

Вот снимок экрана оболочки приложения:

Снимок экрана приложения с данными:

Аудит с Google’s Lighthouse

Lighthouse — это инструмент аудита с открытым исходным кодом, разработанный Google. Он может быть использован для повышения производительности, доступности и SEO веб-сайтов и прогрессивных веб-приложений.

Доступ к Lighthouse можно получить на вкладке Audit в Chrome DevTools, программно в виде модуля Node.js, а также в качестве инструмента CLI. Он берет URL и запускает серию аудитов, чтобы создать отчет с предложениями по оптимизации.

Вы можете применять различные методы вручную или с помощью инструментов. В этой статье описывается, как такие инструменты могут быть использованы для удаления избыточных стилей, извлечения критического CSS, указанного выше, загрузки оставшегося CSS с помощью JavaScript и минимизации полученного кода.

Запустите Chrome, посетите адрес PWA https://www.techiediaries.com/unoptimizedpwa/Инструменты разработчика ( CTRL-Shift-I В инструментах разработчика выберите панель Аудит :

 $ npm install -g purify-css

 $ purifycss styles/bootstrap.css index.html -o styles/purified.css -i

 npm install cssnano

 npm install postcss-cli --global

 module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

 postcss styles/bootstrap.css > styles/bootstrap.min.css

 <script>
const link = document.createElement('link');
link.href = 'styles/bootstrap.min.css';
link.type = 'text/css';
link.rel = 'stylesheet';
const  link0 = document.getElementsByTagName('link')[0];
link0.parentNode.insertBefore(link, link0);
</script>