Css с печатными носителями включено в PageSpeed ​​Insights "Не используется CSS"

Question

Я использую Google PageSpeed ​​Insights, и в разделе "Удалить неиспользуемые * CSS" появляется одна проблема. Я использую отдельный css для печатных носителей:

<link href="/sass/print.min.css" rel="stylesheet" media="print" type="text/css" />

Как видно, PageSpeed ​​Insights предлагает что это должно быть удалено, потому что это не используется (конечно).

Если я уберу тег ссылки, моя оценка увеличится примерно на 5 баллов.

Почему он даже загружается? Как лучше всего печатать - css на странице и при этом сохранять хорошие результаты в PageSpeed ​​Insights?

Answer 1

Вы можете попробовать два решения:
Первое - встроить стиль печати в ваш основной css

@media print { /* All your print styles go here */ #header, #footer, #nav { display: none !important; } }

@ media print гарантирует, что стили, примененные внутри будет применяться только для макета печати

Другой подход может заключаться в том, чтобы прикрепить / отсоединить ваш css через javascript, обнаруживая, печатает ли пользователь что-то, как предлагается здесь: { ссылка }