Support » Plugin: Autoptimize » Inline and Defer CSS – not working on mobile?

  • Resolved AoxoA

    (@aoxoa)


    I used the Inline and Defer CSS feature. According to PageSpeed, it appears to have worked on the desktop–previously render blocking css (/cache/autoptimize/css/autoptimize_f2716812a197cdb88af3ec6f3d464402.css) is not showing. However, on the mobile report the render blocking css (/cache/autoptimize/css/autoptimize_f2716812a197cdb88af3ec6f3d464402.css) is still blocking.

    Have a look at my pagespeed.

    Any Ideas?
    https://wordpress.org/support/plugin/autoptimize/

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Frank Goossens

    (@futtta)

    in that case the critical CSS you entered is not sufficient for mobile @aoxoa, you’ll have to amend that.

    hope this clarifies,
    frank

    So to target small devices my theme uses syntax like

    @media screen and (max-width:520px) {
      .site-header {
        text-align: center;
      }

    I had to take out the @media stuff in the css because i was getting an error when trying to save (i think the @ sign caused problems). Is there another way to notate the mobile parts of my css?

    • This reply was modified 1 year, 3 months ago by  AoxoA.
    • This reply was modified 1 year, 3 months ago by  AoxoA.
    Plugin Author Frank Goossens

    (@futtta)

    the @ should not be an issue AoxoA … what error did you get where?

    My bad. I was making a screen recording for you and it was not the @media (good news). It was @font like:

    @font-face {
      font-family: dashicons;
      src: url(//aoxoa.co/wp-includes/css/../fonts/dashicons.eot);
    }

    Screen cast of that issue (if you wanted to check it out). https://youtu.be/sVVVydjXIZo

    • This reply was modified 1 year, 3 months ago by  AoxoA.
    Plugin Author Frank Goossens

    (@futtta)

    interesting. could you put that entire block of critcss (incl. @font-face) on pastebin or as a github gist so i can play around with that?

    Sure: as a github gist.

    The block is the same as the one in the vid. Note: i do not have “dashicons.min.css” excluded from being optimized.

    Let me know if you want anything else.

    Should I mark this as resolved?

    • This reply was modified 1 year, 3 months ago by  AoxoA.
    Plugin Author Frank Goossens

    (@futtta)

    tested with your critical css on 2 dev-machines and in both cases it worked OK AoxoA.

    from an AO perspective the textarea just gets saved as a WordPress option, there’s no extra parsing or checks done in AO.

    so my hunch (and I’ve seen another user with the same problem actually but haven’t heard back from him) is that there is some-security thingie (a wordpress plugin or an apache module or …) that is filtering incoming requests and that something in the @font-face code triggers a false positive which results in the request being offed.

    what would be interesting:
    * relevant info php errorlog
    * relevant info webserver errorlog
    * if something like mod_security is in place (managed by you or hoster); relevant info in those logs

    and then also checking with variations of the code, what do these do;

    @font-face {
      font-family: dashicons;
    }
    @font-face {
      font-family: dashicons;
      src: url(/wp-includes/css/../fonts/dashicons.eot);
    }
    @font-face {
      font-family: dashicons;
      src: url(//aoxoa.co/wp-includes/fonts/dashicons.eot);
    }

    (the /../ could be intepreted as a directory traversal attack which could put some … dumb web application firewall on edge)

    anyways; interesting mystery! 😉

    I’ll try to find out more about this and report back (as time allows). Moving it out of our high priority box for now 😉

    Thank you for your time and sharing your knowledge.

    • This reply was modified 1 year, 3 months ago by  AoxoA.

    I marked this as resolved because inline and defer does work on mobile ;-). Once I gather some info on the @font issue I’ll open another thread for you.

    Plugin Author Frank Goossens

    (@futtta)

    Once I gather some info on the @font issue I’ll open another thread for you.

    I’m particularly looking forward to unraveling that mystery 🙂

    Plugin Author Frank Goossens

    (@futtta)

    (the /../ could be intepreted as a directory traversal attack which could put some … dumb web application firewall on edge)

    didn’t know mod_security-rules could be that dumb 😉

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Inline and Defer CSS – not working on mobile?’ is closed to new replies.