Improving ‘Optimize CSS delivery’

  • Resolved vikki237

    (@vikki237)


    7 years, 3 months ago

    After fine tuning the site https://www.friedcoffee.com, I am still getting this much in the page speed scores:
    Hi Tom, I’ve used your ingredients, that is autoptimize and async javascript to load the website faster. Their are improved figures but page speed is saying some weird things even after adding the above the fold css:

    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Your page has 2 blocking CSS resources. This causes a delay in rendering your page.
    None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
    Optimize CSS Delivery of the following:
    https://www.friedcoffee.com/…pip_dynaminc_css_custom&nonce=9386f54cf9
    https://www.friedcoffee.com/…ize_8b7061bba1e034c2092dd205dbc95583.css

    Prioritize visible content
    Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content.
    The entire HTML response was not sufficient to render the above-the-fold content. This usually indicates that additional resources, loaded after HTML parsing, were required to render above-the-fold content. Prioritize visible content that is needed for rendering above-the-fold by including it directly in the HTML response.
    Only about 54% of the final above-the-fold content could be rendered with the full HTML response see screenshot show original.

    Leverage browser caching
    Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
    Leverage browser caching for the following cacheable resources:
    https://www.google-analytics.com/analytics.js (2 hours)

    Reduce server response time
    In our test, your server responded in 0.59 seconds. There are many factors that can slow down your server response time. Please read our recommendations to learn how you can monitor and measure where your server is spending the most time.

    The reduce server response time was not there previously when I used W3TC but still the site has improved figures. How can I eliminate the above messages from insights and improve further?

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

    (@optimizingmatters)

    Hi @vikki237;
    Don’t know who Tom is, but I’ll try to help you to the best of my knowledge ??

    -> wp-admin/admin-ajax.php?action=appip_dynaminc_css_custom is dynamic CSS injected by a plugin (or your theme). AO can’t optimize that, so it would remain render-blocking. try finding out which plugin injects that and check that plugins settings if you can de-activate this way of injecting CSS (ideally custom CSS is inlined in the HTML)

    -> you critical css seems to be missing some styles, compare the screenshots under “prioritize visual content” so see what might be wrong

    -> server response time; AO does not do page caching, so you would need to have a page caching plugin. this can be W3TC, but in that case make sure no minification-options in W3TC are active (as those can conflict with AO’s).

    hope this helps,
    frank

    Thread Starter vikki237

    (@vikki237)

    I have found the plugin causing the issue and have mailed the author for the same. Is their any solution for it. The plugin is amazon product in a post.
    For the second problem, I can see the screenshot in ‘prioritize visual content’ but don’t know what to do exactly about it. Can you please detail some process to find and correct the thing.
    For the third, I’ll figure that our with other page cache plugin.

    Thanks.

    Thread Starter vikki237

    (@vikki237)

    The dynamic CSS is removed and only that autoptimize css is left in render blocking script.
    I also tried to W3TC for page cache but instead, it increased load time and didn’t helped in reducing page load time.

    The last problem ‘prioritize visible content’ is still the problem and I don’t know how to rectify that.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    For the second problem, I can see the screenshot in ‘prioritize visual content’ but don’t know what to do exactly about it. Can you please detail some process to find and correct the thing.

    no simple process I’m afraid; it involves look at what’s missing in the first screenshot vs the second one and trying to see what CSS is missing in the critical CSS and addign it there. so this does require CSS-knowledge and some trial & error to see what appeases the black box that is Pagespeed Insight ??

    I also tried to W3TC for page cache but instead, it increased load time and didn’t helped in reducing page load time.

    that is … weird. maybe try one of the many other ones available (wp super cache, keycdn cache enabler, hyper cache, comet cache, … or the premium wp rocket)?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Improving ‘Optimize CSS delivery’’ is closed to new replies.