Quick question re: Go theme – AMP compatibility issues

  • Resolved learn2love

    (@learn2love)


    3 years, 6 months ago

    To whom it may concern,

    I hope this message finds you well.

    I am having some trouble getting my page to load in AMP. I am getting an error in the AMP plugin that the theme’s .CSS file is too big. The specific file error ID I got had this tag: id=”go-style-css”

    A screenshot of the error is here: https://droneview.ca/wp-content/uploads/2021/05/Screen-Shot-2021-05-14-at-5.59.48-PM.png

    The go-style-css file is #7 on the list

    It seems that resolve this, the AMP plugin shrunk this file by 68%, it was originally 189kb which I see is above the limit. However, this appears to have broken the theme. I am just a bit confused because the go theme shows to be AMP compatible on this list: https://amp-wp.org/ecosystem/themes/

    I also recieved a notice when setting up the plugin that translational mode is reccomended, as the theme is AMP compatible (which I am using).

    I am wondering if this is an error on my end, or if the theme is not AMP compatible? By removing the ?amp=1 tag, you can see it seemed to break the theme as the go-style-css file is not loading properly. Maybe there is a way to shrink this file.

    Also, I suppressed many of the plugins on AMP and the others I was using didn’t have a validation error, and it was just this file that flagged with the red symbol.

    Thank you for your time and best wishes,

    Dory ??

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    Hello!

    AMP has a limit of 75000 bytes of custom CSS, and the way the AMP plugin achieves this on sites is by “tree shaking” to remove the style rules that aren’t relevant to a given page. This generally works, but there are cases where it isn’t able to tree-shake enough and this results in what you are seeing where a stylesheets gets excluded to keep the total under 75000 bytes. Nevertheless, the plugin tries to prioritize the theme’s stylesheets over other stylesheets so I’m surprised that it is the one that got excluded. We’ll investigate further. We may be able to submit a fix to Go to reduce the amount of CSS that is added to the page.

    Thread Starter learn2love

    (@learn2love)

    Thank you very much for this @westonruter and your quick reply, I appreciate it!

    That would be excellent if some sort of fix could be applied. I was quite surprised that the theme’s stylesheet is so large – I wonder if there may be a way around it, getting a very similar style with much less code.

    Please keep me posted if there is anything else I could attempt to do to support this process.

    Best wishes,

    Dory

    Plugin Author Weston Ruter

    (@westonruter)

    Sorry for the delay.

    I wanted to confirm that when I have Go active and I try accessing a post that has a large number of blocks, such as via the Block Unit Test for Gutenberg plugin, I get an excessive CSS error:

    The style-shared.css from Go is indeed very large:

    The AMP plugin was able to remove 74.2% of the CSS via tree shaking, which is quite good. However, because the total original CSS is 216KB, it’s just too much to be able to remove enough CSS to bring it down to to 75,000 bytes.

    When looking at the CSS, I don’t see a quick solution to reduce the size of CSS. So I’ve filed an issue with Go to see if this is something they can address at a deeper level: https://github.com/godaddy-wordpress/go/issues/673

    So, if you want to use AMP on your site, there are two options:

    1. You can use Reader template mode to serve different templates for AMP pages.
    2. You can use Standard template mode which will make AMP only version. When there is excessive CSS in Standard mode, it will be kept by default. The result is an unmarked AMP page being served. You’ll still get the benefits of the AMP framework in terms of Core Web Vitals for Page Experience. It’s just it won’t be a valid AMP page, so you won’t get the added benefit of the AMP Cache and prerendering on search results. Going forward we’re planning to do much more to make this a more common path as part of the Bento AMP initiative.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Quick question re: Go theme – AMP compatibility issues’ is closed to new replies.