Support » Plugin: Autoptimize » Preload ao’s js & css

  • Resolved sdawales

    (@sdawales)


    Hi,

    I am trying to improve my site and AO has just been amazing. I get great performance because of it. Today I was trying to track down an issue in my mobile nav. Every time I would reload or change pages, I would get a unformatted navigation flashes. Basically the nav links.

    After trying everything, it looks like it was being caused by the inline and defer. I disabled that and of course, render blocking was the result but the nav was perfect. Then I left that unchecked and inlined all css. The render blocking has gone and it doesn’t look like it hurt me too much in terms of performance.

    That said, I use a CDN and basically only serve the home page from our webserver so it would make sense (in my tiny little mind) that in the 500ms its taking to connect, dns and load, the js and css files could be pre-loading from the CDN. Is that not possible or practical? If it were preloaded, it seems like the site would be fully loaded and complete sooner. Keep in mind that I am not a developer, just a website owner.

    Thanks.

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

    (@optimizingmatters)

    well, you could try the code in https://github.com/futtta/autoptimize/issues/49#issuecomment-305156931 πŸ™‚

    re. “inline & defer CSS”; it’s a question of finding/ using the correct critical CSS.

    Thread Starter sdawales

    (@sdawales)

    Thanks Frank. I read that thread twice and now I am more confused. πŸ™‚ I guess this is a bit over my head. I can think outside the box and see things in the real world but from a coding POV, I am in the stone age.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    well, the exact link I provided highlights an answer with a code snippet, give that snippet a try and see if it works for you? πŸ™‚

    Thread Starter sdawales

    (@sdawales)

    Thanks Frank. I’d like to give that a go. If it’s not too much of a silly question, where would I place that snippet?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    The easiest & safest solution is using the code snippets plugin πŸ™‚

    Thread Starter sdawales

    (@sdawales)

    I have it running right now and still have the flash on the menu. It looks like it is pushing css but not js.(Inline above fold css)

    It’s also showing a syntax error;

    header(‘link: <‘.$in.’>; rel=preload; type=’.$pushType,false);

    CSS
    Priority: HIGHEST
    Protocol: HTTP/2
    HTTP/2 Stream: 1, weight 256, depends on 0, EXCLUSIVE

    JS
    Priority: LOWEST
    Protocol: HTTP/2
    HTTP/2 Stream: 11, weight 147, depends on 9, EXCLUSIVE

    First Contentful Paint
    1.1 s
    Speed Index
    2.7 s
    Time to Interactive
    4.2 s
    First Meaningful Paint
    1.1 s
    First CPU Idle
    4.1 s
    Max Potential First Input Delay
    230 ms

    • This reply was modified 1 year, 2 months ago by sdawales.
    • This reply was modified 1 year, 2 months ago by sdawales.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    so what’s the syntax error?

    Thread Starter sdawales

    (@sdawales)

    LOL. I don’t know. It shows that on the pressertech.com home page. http://www.pressertech.com/:4 Uncaught SyntaxError: Unexpected string

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I see the code snippet in the HTML which is not the goal, how did you add it?

    Thread Starter sdawales

    (@sdawales)

    Via the code snippet function but I can add it anywhere you think it should be the regular way.

    • This reply was modified 1 year, 2 months ago by sdawales.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    weird, that shouldn’t echo the code snippet in the HTML. can you share a screenshot of the snippet screen?

    Thread Starter sdawales

    (@sdawales)

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    ah ok, you’ll have to remove the first 3 and the last 3 lines, the snippet does not output JavaScript, it’s PHP-code that has to be executed.

    Thread Starter sdawales

    (@sdawales)

    Done. I told you that you were dealing with an idiot! πŸ˜‰ Done and I will report back. Thank you. Have a good weekend.

    Thread Starter sdawales

    (@sdawales)

    No change. CSS is push but not js;

    Priority: LOWEST
    Protocol: HTTP/2
    HTTP/2 Stream: 5, weight 147, depends on 3, EXCLUSIVE

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘Preload ao’s js & css’ is closed to new replies.