CSS с print-media включен в PageSpeed ​​Insights Unused CSS

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

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

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

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

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


css pagespeed-insights pagespeed css-print
person Calle Bjernekull    schedule 31.01.2020    source источник
comment
выглядит как ошибка, попробуйте удалить type="text/css" и посмотрите, исправит ли он его (маловероятно, но это также может быть ненужный атрибут).   -  person Graham Ritchie    schedule 31.01.2020
comment
Пробовал как с type="text/css", так и без, но никакой разницы   -  person Calle Bjernekull    schedule 31.01.2020
comment
не обращайте внимания на проблему, PSI - это инструмент, а не все и все. Вы пробовали запустить вкладку «Аудит» в Google Chrome и видели, появляется ли она там как проблема? Это не должно так сильно влиять на вашу оценку, и если это так, я предполагаю, что файл генерируется динамически каждый раз, поскольку единственная часть вашей оценки, на которую это влияет, - это ваше общее время загрузки. Хотите поделиться своим URL-адресом, чтобы я мог вас как следует разглядеть?   -  person Graham Ritchie    schedule 31.01.2020
comment
Да, я использую вкладку «Аудит» в Chrome и сталкиваюсь с той же проблемой. И это действительно влияет на мой результат. Если тег будет удален, моя оценка увеличится примерно на 5 баллов. И конечно, вот URL-адрес общедоступного сайта: stromma.com Изменить: если вы запустите URL-адрес в PSI , вы увидите несколько других проблем, касающихся GTM, просто игнорируйте их, потому что сейчас они выходят за рамки моей компетенции.   -  person Calle Bjernekull    schedule 31.01.2020
comment
sitebulb.com/hints/page-speed /   -  person 04FS    schedule 31.01.2020

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

Другой подход может заключаться в том, чтобы прикрепить / отсоединить ваш css через javascript, определяя, печатает ли пользователь что-то, как предлагается здесь: https://stackoverflow.com/a/44918520/5778362

person Stefano Bucci    schedule 31.01.2020
comment
отличные обходные пути, так что +1, но это просто устранение проблемы для Page Speed ​​Insights, оба решения, которые вы используете в настоящее время, нарушают лучшие практики реального мира, на самом деле это ошибка PSI. - person Graham Ritchie; 31.01.2020
comment
Включение его в основной CSS не кажется хорошим решением. Если я включу print css в свой основной css, он обязательно будет загружен, а затем будет классифицирован как неиспользуемый css. Я хочу удалить неиспользуемые CSS, а не добавлять. Однако, кажется, стоит попробовать добавить css в событие печати. Но если это сработает, у меня возникнет вопрос: для чего на самом деле нужен медиа-атрибут? Это когда-нибудь нужно? - person Calle Bjernekull; 31.01.2020