Проблема
Клиент обратился ко мне с сайтом WordPress (более 100 страниц), загрузка которого занимает более 20 секунд.Я проанализировал сайт с помощью lighthouse и других инструментов и обнаружил, что на главной странице загружено не менее 2 Мб бесполезного CSS и других дерьмовых загрузок.
При просмотре настроек WP он использует готовую (темуstore) тема с типичным избытком бесполезного дерьма.
Наивное решение
Я могу просмотреть каждую страницу, проанализировать неиспользуемый CSS с помощью расширений браузера, а затем сопоставить результаты этих анализов в(надеюсь, меньше) theme style.css Это займет несколько часов повторяющейся механической работы с большим количеством потенциальных человеческих ошибок.
Предпочитаемая стратегия
Такие инструменты, какrifycss, способны статически анализировать окончательный результат рендеринга.Разметка для страницы и раздеть CSS-файл, чтобы он содержал только используемые правила.Я думаю, что должно быть очень возможно написать плагин, который будет выполнять что-то вроде следующего при каждой загрузке страницы:
- Конкатить все CSS-файлы вместе
- Заменить все CSS-ссылки одним конкатентомссылка
- Визуализация страницы
- Запустите очистку обработанного вывода, сохранив минимизированный и оптимизированный CSS в новый файл с хэшированным именем
- Замените объединенную ссылку ссылкойв новый оптимизированный файл
- Служите странице
Все это должно произойти до плагина кэширования.
Вопрос
Делает что-то вродеэто уже существует?Как насчет моего плана, это разумно?Я игнорирую какие-либо потенциальные ошибки?