0

I have an additional CSS file that loads from the header, only for mobile devices.

It is the Tablesaw too, which changes the way tables look for my mobile visitors.

Google Page speed see this as critical problem, giving me 77 score, telling me to:

Eliminate render-blocking JavaScript and CSS in above-the-fold content,

by Optimize CSS Delivery of the following:

  1. Main CSS File
  2. Google Fonts file (I can't control)
  3. Table Saw CSS file

Currently Mobile users get the Tables saw css this way:

<head>
//
//
<link rel="stylesheet" type="text/css" href="/dist/tablesaw.css" media="screen and (max-width: 767px)">
//
//
</head>

Is there a better practice to do this, to make google happy?

Gary Holiday
  • 3,297
  • 3
  • 31
  • 72
Bucky
  • 35
  • 8
  • What are you using to render your web page templates? You can normally detect the user agent relatively reliably backend (unless the user spoofs it, but that's their problem) - and use a simple `if ($isMobile)` to render out the inclusion for mobile devices only – tw_hoff Apr 25 '17 at 16:30
  • Is the `tablesaw.css` minified? – m.spyratos Apr 25 '17 at 16:30
  • http://stackoverflow.com/a/39067551/233337 After seeing this thread I personally stopped chasing the perfect score. I don't think it's reasonable. – Serg Chernata Apr 25 '17 at 16:33
  • http://stackoverflow.com/questions/18761251/eliminate-render-blocking-css-in-above-the-fold-content – Michael Coker Apr 25 '17 at 16:34
  • @tw_hoff currenlty I'm not using anything special to render them. Is is 100% reliable? The main idea is not mobile or not, it is the size of the screen. for example, for wide tablet, I don't want the additional CSS, but for narrow one, yes. And yes, it is minified – Bucky Apr 25 '17 at 16:38
  • maybe I should just include the whole tablesaw CSS in the main file, under a `@media screen and (max-width: 767px){[content]}` ? – Bucky Apr 25 '17 at 16:44
  • The one thing I'm not sure about is if the media attribute on the `` tag actually prevents the stylesheet from being loaded - I would assume the browser will load it regardless, and then only apply it when the media query condition is met. I'm not sure if this is what Google is complaining about though... do you have any render blocking JS? – tw_hoff Apr 26 '17 at 16:34

1 Answers1

0

To optimise your css files you can can can do multiple things..

  1. Reduce the requests to the server so put all the css in one file
  2. Minify your css file, this means all your code gets shrinked and every blank space gets removed, here is a site where you can do this.
  3. Copy the critical path css directly in the html file, you can get this on this website, if you don't know how to do this you should probably watch a video about it

Be aware that this has more impact on very big css files

Hansi Reit
  • 11
  • 3