Edge and IE11 issue when loading optimized css file

  • chicop

    (@chicop)


    7 years, 8 months ago

    Hi Autoptimize Team!

    I’m having a problem with the request load of a CSS file that is generated with “Autoptimized”. The request process of the file falls into a loop, always giving me a 304 response. This only happens on Edge and IE11.
    I made some changes to the project I’m working on which only involved deactivating the JS process of the plugin. Any idea on what is causing this?

    Thanks!

    • This topic was modified 7 years, 8 months ago by chicop.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    7 years, 8 months ago

    are you using the default “static file” delivery of the Autoptimized files or did you deactivate that optioni chicop?

    frank

    Thread Starter chicop

    (@chicop)

    7 years, 8 months ago

    Hi Frank,

    Yes, I have the default enabled

    https://d.pr/i/JLM6Nv

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    7 years, 8 months ago

    In that case the static file is served directly by the webserver and WordPress or Autoptimize are not in the picture. Could be an issue with webserver config or with a proxy between the browser and the webserver or even just browser cache (try clearing browser cache maybe)?

    Technically: 304 means “not modified” and the webserver gives that reply if the request has a if-modified-since in the request header. if your browser sends if-modified-since and the webserver replies with 304, then the browser is supposed to have the older version in cache and use that. more info on https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-Modified-Since

    hope this helps,
    frank

    Thread Starter chicop

    (@chicop)

    7 years, 8 months ago

    This is a more detailed description:

    The 1st request is a 200, then the loop starts and the server answer with 304 which is the expected behaviour. The problem is that the application keeps asking the server for the autoptimize file as you can see here.

    The generated element on IE11 and Edge has an attribute that other browsers don’t have (data-loadcss). Is this the expected behaviour? Apart from the different engines, this is the only difference detected:

    <link onload="this.onload=null;this.rel='stylesheet'" href="https://[OMITTED].pantheonsite.io/wp-content/uploads/autoptimize/css/autoptimize_b343e2a5a7f5cf1c9a206a99ae3d3a96.css" rel="stylesheet" media="all" as="style" data-loadcss="true">

    Also, I noticed this issue on Github: here
    It reports the same problem I have and I think that is the same polyfill that autoptimizes uses.

    This error began when we disabled the JS process on the ‘Autoptimize’ plugin and added a hash to our new minified js files with our build process (webpack).

    Thanks for the help

    • This reply was modified 7 years, 8 months ago by chicop.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    7 years, 8 months ago

    AO indeed also uses loadCSS and it appears to be the same issue at first sight, but the solution proposed and confirmed working is in there (the onload="this.onload=null;this.rel='stylesheet'").

    but what surprises me is that data-loadcss="true"> part, as that is not added by Autoptimize. are you using any other plugin/ tool to do performance optimization?

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Edge and IE11 issue when loading optimized css file’ is closed to new replies.