Autoptimze with lazyload and critical CSS questions

  • Resolved kaboemm

    (@kaboemm)


    4 years, 9 months ago

    Hello,

    First of all thank you for these great plugins. They work like a charm.

    However, I do have a few questions about my website. Let’s take this link as a example for my questions:

    https://alleslicht.nl/product/industriele-hanglamp-zwart-met-rek-4-lichts-cage-rack/
    The CriticalCSS give green arrows at this example product page.
    Plugins I use: Cache Enabler, Optimus (Premium), Autoptimize with CriticalCSS API on WordPress WooCommerce website.
    Hosting this site on a VPS at hostnet.nl running nginx with the newest php version.

    Autotimize settings I use:
    Optimize JS
    Combine JS
    Optimize CSS
    Combine CSS files
    Add the CSS from HTML
    Above the Fold CSS
    Optimize HTML
    LazyLoad enabled
    CriticalCSS I left default.

    If I take this product page through PageSpeed Insight I have a mobile score of 46 (red) and there are a few things I cannot seem to fix:

    1. Remove Unused CSS. 1,5 second delay. I thought I could fix this with criticalCSS. Could you check if its working and if not, why its not working.
    2. Eliminate renderblocking resources. It’s only jQuery thats mentioned. I tried to use your other plugin Async JS but if I use defer or asynch my image slider on the product pages stop working. Is there any other way how I can fix this?
    3. Defer offscreen images. I use lazyload but somehow its not working for the images that are hidden between the slides (mobile version). Is there anyway I can make the images in the slider, that you cannot see if you load the page, also use the LazyLoad option? Or any other way I can fix this?
    4. Ensure text remains visible during webfont load. I use google font and a woff from the wordpress template Is there anyway I can fix this?

    Sorry for all the questions, I hope you can answer them I have spend way too much time and money on optimizing my website and still cannot get past this 46 score.

    Thank you!

    Gr Kaboemm

    The page I need help with: [log in to see the link]

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

    (@optimizingmatters)

    middag kaboemm ??

    1. The unused CSS is being reported as being Autoptimize’s, but AO merely aggregates all the CSS provided by your theme & plugins, so if you (really) want to tackle “remove unused CSS” then you should look into your theme & plugins (you might be able to get some improvement using e.g. “plugin organizer” to only allow plugins to work on specific pages). Moreover the unused CSS will likely be different for different pages (or parts of your site), so that would lead to different autoptimized CSS-files being loaded on different pages.
    2. jQuery can not always be “fixed”, but you can try the “defer jquery” option in Autoptimize -> critical CSS -> advanced settings
    3. probably not; AO tries to lazyload as many <img files as possible + images set as background-image in the style attribute of the div the image is meant to shown in, but the slider is probably doing things differently.
    4. try “aggregate & preload fonts” in Autoptimize -> Extra maybe?

    groeten uit Belgiê,
    frank

Viewing 1 replies (of 1 total)
  • The topic ‘Autoptimze with lazyload and critical CSS questions’ is closed to new replies.