Issue with Autoptimize on mobile home page

  • Resolved someguy

    (@crmuk)


    3 years, 2 months ago

    Hi

    I’m having a problem with Specific Content plugin when using Autoptimize (AO).
    It works perfect on all pages except for the home page with AO enabled.

    I am having to disable AO when processing the home page or the mobile version of the page will not show – it just shows the standard home page.

    AO is being used with CriticalCSS service to strip out all unused CSS and the homepage is one of the worst offenders using Divi – 99% of theme CSS not being used and it really improves mobile download speeds stripping this stuff away. But it would appear to be stripping your stuff away too.

    Is there any script or css or otherwise that is used by Specific Content plugin to make it correctly load the mobile version of the page which I can try and exclude from AO/CriticalCSS so that your plug in still works?

    Thanks

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Jose

    (@giuse)

    3 years, 2 months ago

    Hi @crmuk

    Specific Content For Mobile doesn’t load any asset on the frontend, so no any script.
    It simply replaces the content with mobile content, but this is done on the server. It does nothing on the client side.

    At the moment if I visit https://crmgbdev.wpengine.com/ I see all the content both on mobile and desktop, but it looks like Autoptimize is not active.

    Try activating again Autoptimize, but disable the file aggregation. In any case, you don’t really need it, because you have HTTP/2. If this was the problem, I would disable it.
    If you still don’t see the page on mobile, have a look at the console (right-click => Inspect Elements => Console) to see if you have red JS errors.

    Inspecting elements on mobile I see the mobile ID is the same as the desktop ID. But it looks like a cached version of the page. If I see the page without cache, e.g. https://crmgbdev.wpengine.com/?fsdff=dfsdfs, all seems to work right. The mobile ID is 18093 and the desktop ID is 18073.

    Check the page always adding something different to the URL, e.g. https://crmgbdev.wpengine.com/?no_cache=1, https://crmgbdev.wpengine.com/?no_cache=2, so you are sure you don’t see the cached page.

    After you are sure all works right without cache, be sure the cache distinguishes between desktop and mobile.

    Thread Starter someguy

    (@crmuk)

    3 years, 2 months ago

    Thanks for getting back to me Jose.

    I will look into your advice and try to make progress.

    You are correct that AO is not live on the home page at the moment, it has been disabled for the home page or it would not load the mobile version. This is a pre-release test site so I will enable AO on the home page again now so that you can see the issue happen.

    Thanks again.

    • This reply was modified 3 years, 2 months ago by someguy.
    Thread Starter someguy

    (@crmuk)

    3 years, 2 months ago

    I have now re-enabled AO on the home page.

    Thanks

    • This reply was modified 3 years, 2 months ago by someguy.
    Plugin Author Jose

    (@giuse)

    3 years, 2 months ago

    It looks all work right if the page is not served by cache.

    Be careful about the cache. If I visit https://crmgbdev.wpengine.com/ the mobile ID is the same as the desktop ID. But visiting a not cached version of the page all works right, e.g. https://crmgbdev.wpengine.com/?no_cache=1

    Read here for more details about the cache: https://wordpress.org/support/topic/the-caching-plugin-if-any-must-distinguish-between-mobile-and-desktop/
    What is written on that post is valid also for the cache served directly by the server.

    Thread Starter someguy

    (@crmuk)

    3 years, 2 months ago

    Thanks. Clearly is a caching issue.

    I wonder why it works on other pages but not on home page. The cache clearly does distinguish between mobile and desktop, just not in this instance.

    Thanks for the excellent support Jose.

    Plugin Author Jose

    (@giuse)

    3 years, 2 months ago

    You are welcome.

    Even with the problem, you have two different versions of the cache for the homepage, but the mobile version had a problem that you don’t see any more on the updated page.
    So I would say the caching system is able to distinguish between mobile and desktop also for the homepage, but when the cache was created you had a problem.
    Try clearing the cache of the homepage and probably all will be ok.

    Save the homepage in the backend, maybe this will clear the cache of that page.

    Thread Starter someguy

    (@crmuk)

    3 years, 2 months ago

    Great information Jose, this has really helped me track down the issue!

    The issue was caused by CriticalCSS (a connected service to AO) using a cached version of the mobile home page from a different staging server which had been pushed to this new environment.

    I hadn’t noticed that CCSS was using a cached page from an earlier version of the site, until you suggested what the issue might be. After configuring CCSS correctly, it’s all good now 🙂

    Really appreciate your plugin and your excellent support.

    Plugin Author Jose

    (@giuse)

    3 years, 2 months ago

    Thank you very much @crmuk
    Perfect! I’m happy it is solved. So I will close this thread.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Issue with Autoptimize on mobile home page’ is closed to new replies.