Css with print-media is included in PageSpeed Insights "Unused CSS"

Question

I'm using Google PageSpeed Insights and one problem appears under "Remove unused CSS" I'm using a separate css for print-media:

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

Apparently, PageSpeed Insights suggests that it should be removed, because it's not used (ofcourse).

If I remove the link-tag, my score increases with approx 5 points.

Why is it even loaded? What's best practice to have print-css on page, and still keep good score on PageSpeed Insights?

Answer 1

You could try two solutions:
The first one is to embed print style inside your main css

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

@media print will ensure that styles applied inside will be only applied for Print layout

Another approach could be to attach/detach your css via javascript, detecting if the user is printing something as suggested here: https://stackoverflow.com/a/44918520/5778362