Учитывая, что многие из нас используют сторонние библиотеки CSS, такие как Bootstrap и Font Awesome, одним из самых больших узких мест в снижении скорости страницы является их эффективное использование.
Не секрет, что повышение скорости страницы улучшает взаимодействие с пользователем и повышает рейтинг вашего сайта. После того, как вы подобрали низко висящие плоды, такие как уменьшение и ленивая загрузка изображений, сжатие всего контента и т. д., вы можете врезаться в стену. В этой статье рассказывается об уменьшении некоторых ваших обязательных или устаревших файлов CSS с помощью PurgeCSS и улучшении показателя скорости страницы.
Я пытался улучшить свою домашнюю страницу на основе React и провел аудит Lighthouse. Одна из рекомендаций заключалась в том, чтобы «удалить мертвые правила из таблиц стилей и отложить загрузку CSS, не используемого для содержимого верхней части страницы, чтобы уменьшить количество ненужных байтов, потребляемых сетевой активностью». с потенциальной экономией 38K.
Это были три файла, которые мы используем в нашем приложении React, скомпилированные webpack в связанный файл CSS, упомянутый выше.
Таким образом, два из трех файлов являются зависимыми, и, как вы можете видеть, они довольно большие и составляют большую часть приведенного выше пакета.
ОчиститьCSS
Тут я наткнулся на этот отличный проект. Среди способов его использования я не мог найти способ, где я мог бы использовать его так, чтобы он собирал весь HTML из моих компонентов React (код JSX). Поэтому с небольшим взломом я использовал его, используя интерфейс командной строки.
2. И скопируйте его
3. Теперь выгрузите его в файл HTML. Если все ваше приложение является частью одного пакета, этого HTML должно быть достаточно, чтобы зафиксировать все правила. Если вы используете ленивую загрузку модулей React, возможно, вам придется повторить это упражнение для каждой отдельной страницы. Хорошо, что вы можете добавить весь этот HTML в один файл.
4. Установите PurgeCSS
npm i -g purgecss
5. Теперь используйте purgecss для создания только соответствующего CSS, подобного этому.
purgecss --css /path to css/bootstrap.css --content /path to html/Browsee.html
6. Это возвращает выходные данные JSON с полем css в виде сжатого CSS. Заменив этот CSS оригинальным bootstrap.css, мы уменьшили bootstrap.css на 164 КБ.
Повторение того же упражнения с fontawesome.css.
purgecss --css /path to css/fontawesome.css --content /path to html/Browsee.html
Вы также должны убедиться, что все ваши страницы выглядят так, как ожидалось. Если есть какое-то искажение, скорее всего, вы пропустили добавление его HTML в свой HTML-файл.
Как видите, я уменьшил размер этой рекомендации до 11 КБ. Я копнул глубже, и не похоже, что я мог бы еще больше уменьшить этот CSS. Хотя я мог бы подумать о том, чтобы сделать часть этого встроенным.
Но это здорово, я считаю это абсолютной победой. В рекомендации Google Lighthouse я также наткнулся на еще один инструмент, критически важный для достижения аналогичных результатов. Я не пробовал, но думаю использовать. Надеюсь, вы найдете это полезным!
Если вы хотите узнать, сколько ваших пользователей сталкиваются с медлительностью и неоптимальной работой, вам следует рассмотреть возможность использования Browsee. Он не только автоматически обнаруживает такие сеансы, но и показывает вам повтор всего сеанса, так что вам не остается ничего гадать. Будем рады услышать от вас.
Первоначально опубликовано на https://browsee.io 26 октября 2019 г.
