Support » Plugin: Autoptimize » Preload

  • Resolved martychc23

    (@martychc23)


    Hey Frank,

    AO creates 1 css and 1 JS file that appear to be the same for all posts. I have put my cdn link into AO so those load from the cdn.

    Could you tell me, is there any benefit/advantage of including the AO CSS + JS in my header using the preload command as such:

    
    <link rel="preload" href="AO.js" as="script">
    <link rel="preload" href="AO.css" as="style">
    

    Basically, is this going to do what i hope it will do?

    Thank you

Viewing 15 replies - 1 through 15 (of 23 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    css preloading is done when you have “inline & defer” active, but -given there’s no preload-support in all browsers yet– uses the Filamentgroup’s preload polyfill + their loadCSS to make sure the CSS is indeed loaded.

    preloading your JS could indeed work (although I’ve read about Chrome complaining about preloaded files being un-used, and re-downloading under certain circumstances).

    so … why don’t you give it a try and see what happens? πŸ™‚

    ok, after testing this out i seem to get the issue you describe. I saw my AO css appearing multiple times in the network tab in Chrome developer tools. One page had 4 copies of the AO css.

    Shame, as the page did actually seem to open faster. There was less of that initial delay/hesitation before the page started to render.

    I guess when it’s time to introduce such optimization you will bring them into the plugin when ready.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    One page had 4 copies of the AO css.

    which one, I’d like to look have a look at that. who knows what we’d come up with πŸ˜‰

    I removed the preload code so that page doesn’t have 4 AO css now, but my pages still have 2 AO css. I think this may have been because i added the preload as “style” giving one AO css as “style” and the other as “text/css”.

    I had also added jquery.js as a preload, and that might have caused the 4 css duplicate issue as it was listed as an “initiator” in the developer tools.

    Was going to clear my cdn cache and try and resolve this, but will hold off if you wanna have a look.

    Here’s an example page:

    https://www.celebrityhealthcritic.com/how-jennifer-garner-overcomes-procrastination-in-10-minutes/

    You will have to open chrome developer tools using the menu (not f12) and reload the page. In the network tab, sort by type and you will see the duplicate AO css.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I confirm this happens in Chrome (locally), and this is consistent with this bug report in Filamentgroup’s loadCSS (which AO uses).

    Now the weird thing is that another quick test on webpagetest.org (using Chrome as browser) still only sees one CSS-file being loaded.

    If I were you, I would test with and without “inline & defer” and test (with e.g. webpagetest.org) which provides the best performance (as in “time to start render” and “load time” mainly). It is my conviction these simple number are a lot more relevant then what a “performance score” tells you πŸ˜‰

    frank

    I’m using critical css and also have local fonts put in the inline and defer section. So i don’t really have an option but to use this, do i?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    So i don’t really have an option but to use this, do i?

    well, if test would prove that it would make your site load slower (which I doubt), then not using would be an option, wouldn’t it?

    I was more referring the flash of unstyled content which occurs when not using the critical css inlined. But ok, i will test this.

    Hey Frank, just wanted to double check something with you. That bug with the css appearing twice due to AO using loadcss, would that only occur when preloading the AO CSS? Or also when preloading other resources?

    Testing on my local site it doesn’t seem to load the AO css/js twice when i preloaded jquery.js.

    ok, here’s what i’ve found. I can preload other resources without causing the duplicate loading issue with AO files. But i can’t preload the AO files without duplicates occurring.

    Strangely, when inserting videos using my themes’ built in functionality, it also creates duplicate AO files even though the AO files are not preloaded. Fortunately, this issue doesn’t occur when the videos are inserted using Youtube Lyte.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    No, the double loading of CSS issue is due to specifically how the Filamentgroup’s loadCSS tries to cater for browsers that don’t have support for preload (as otherwise the full CSS would never be loaded on those).

    Sorry Frank, I wasn’t clear from your response. Are you saying the double loading issue with AO resources will occur even if AO resources are not preloaded (but other resources are) when on a browser that doesn’t support preload? In which case, i can’t use preload with other resources when using AO as it will cause the double load issue?

    n/m looks like on the production site i still get the duplicates occurring even when not preloading AO resources.

    I also seem to have duplicate AO css now even after removing all preload code from header. I’ve cleared cdn cache, page cache, AO cache, uninstalled/reinstalled AO, but still have 2 identical AO css.

    Testing on local install and i have 1 AO css + js as expected. Not sure why this is still happening on the production site after removing preload from header. but i can’t seem to get rid of the duplicates now.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    well, you’re doing “inline & defer CSS”, which has rel="preload" for the CSS, which indeed is also preloading.

    But why doesn’t this occur on my local install? I have the same setup, inline & defer css, and have no duplicate css/js. But on my production site the same setup does give duplicates.

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Preload’ is closed to new replies.