Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Responsive design and PageSpeed Insights

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 21, 2016 at 8:15 am #238210
    analis
    Participant

    <link href=”desktop.css” rel=”stylesheet” type=”text/css” media=”screen and (min-width: 768px)” />

    <link href=”mobile.css” rel=”stylesheet” type=”text/css” media=”screen and (max-width: 767px)” />

    Use CSS for desktop and one css for mobile devices. By controlling the speed of loading pages with Page Speed Insights me an error is detected:

    Optimize CSS publication of the following:

    http: //www.abcd/mobile.css

    Css desktop is lighter mobile css because the problem is mobile css?

    There seem large files?

    desktop.css 49k
    mobile.css 39k

    February 21, 2016 at 11:25 am #238220
    Paulie_D
    Member

    …and what is your question?

    February 21, 2016 at 12:43 pm #238232
    Shikkediel
    Participant

    It’s probably about render blocking style links. Which has little to do with the file of the size itself. My advice – ignore it. It’s only a tiny fraction of the total score and way too much hassle (at this point in time) to dynamically create the element with JS.

    February 22, 2016 at 3:27 am #238263
    analis
    Participant

    yes , render blocking style links.

    -8 point

    how can I create dynamically?

    February 22, 2016 at 4:36 am #238269
    Shikkediel
    Participant

    Google’s got it’s own recommendation there. :-)

    <body>

...

<script>
  var cb = function() {
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = 'mobile.css';
    var h = document.getElementsByTagName('head')[0];
    h.parentNode.insertBefore(l, h);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(cb);
  else window.addEventListener('load', cb);
</script>
</body>

    As far as I’ve seen, it only contributes 2 points though.

    What Google doesn’t say – best to create a fallback. This is possible with HTML5 :

    <head>
<noscript><link href="mobile.css" ... ></noscript>
</head>
    February 22, 2016 at 4:43 am #238271
    Shikkediel
    Participant

    file of the size

    I wasn’t as think as you drunk I am there.

    February 22, 2016 at 8:04 am #238283
    analis
    Participant

    thanks

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.