1

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). enter image description here

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?

Calle Bjernekull
  • 71
  • 1
  • 5
  • looks like a bug, try removing the `type="text/css"` and see if it fixes it (unlikely but as it is an unneeded attribute might as well). – GrahamTheDev Jan 31 '20 at 10:01
  • I've tried both with and without `type="text/css"`, but no difference at all – Calle Bjernekull Jan 31 '20 at 10:11
  • ignore the problem, PSI is a tool, not the be all and end all. Have you tried running the 'audits' tab in Google Chrome and seen if it shows up as a problem there? It shouldn't affect your score that dramatically and if it is I would guess the file is being generated dynamically each time as the only part of your score it affects is your total download time. Care to share your URL so I can have a proper look for you? – GrahamTheDev Jan 31 '20 at 10:23
  • Yes, I'm using the "Audits" tab in Chrome, and get the same issue. And it acually do affect my score. If tag is removed, my score will increase with about 5 points. And sure, here's the url for the public site: https://www.stromma.com/ Edit: If you run the url in PSI, you will see several other issues regarding GTM, just ignore them because they are out of my scope right now. – Calle Bjernekull Jan 31 '20 at 10:42
  • 1
    https://sitebulb.com/hints/page-speed/stylesheet-is-loaded-in-with-media-print/ – 04FS Jan 31 '20 at 10:51

1 Answers1

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

Stefano Bucci
  • 140
  • 2
  • 10
  • 1
    great workarounds so +1, but this is just fixing a problem for Page Speed Insights, both solutions your present break real world best practices, in reality this is a bug with PSI. – GrahamTheDev Jan 31 '20 at 10:18
  • Including it in main css doesn't seem like a good solution. If I include print css in my main css, it will definitely be loaded, and will then be classified as "unused css". I want to _remove_ unused css, not add. However, adding css on print-event seems worth trying. But if that works it would leave me with a question: what is media-attribute actually good for? Is it ever needed? – Calle Bjernekull Jan 31 '20 at 10:21