CDN issue

  • Resolved theukdirectory

    (@theukdirectory)


    6 years, 11 months ago

    my CSS is being loaded from a CDN.

    Non of my amp pages are working when I do this and I get the following error:

    The style[amp-custom] element is populated with:
    0 B: style[amp-custom=]
    73 B (57%): link#amp-default-css[rel=stylesheet][id=amp-default-css][href=https://sheffield.bigstamp.co.uk/wp-content/plugins/amp/assets/css/amp-default.css?ver=1.1.3][type=text/css][media=all]
    34528 B (88%): link#dashicons-css[rel=stylesheet][id=dashicons-css][href=https://sheffield.bigstamp.co.uk/wp-includes/css/dashicons.min.css?ver=5.2.1][type=text/css][media=all]
    223 B (0%): link#bp-nouveau-css[rel=stylesheet][id=bp-nouveau-css][href=https://sheffield.bigstamp.co.uk/wp-content/plugins/buddypress/bp-templates/bp-nouveau/css/buddypress.min.css?ver=4.3.0][type=text/css][media=screen]
    1671 B (34%): link#td-plugin-newsletter-css[rel=stylesheet][id=td-plugin-newsletter-css][href=https://sheffield.bigstamp.co.uk/wp-content/plugins/td-newsletter/style.css?ver=9.7.3][type=text/css][media=all]
    2047 B (57%): link#td-theme-amp-css[rel=stylesheet][id=td-theme-amp-css][href=https://sheffield.bigstamp.co.uk/wp-content/plugins/td-composer/mobile/style-amp.css?ver=9.7.3][type=text/css][media=all]
    29 B: style[type=text/css]
    74 B: h2.amp-wp-b371fd6[class=amp-wp-b371fd6]
    97 B: span.amp-wp-dffa517[class=amp-wp-dffa517]
    75 B: div.td-author-name vcard author amp-wp-9c76635[class=td-author-name vcard author amp-wp-9c76635]
    75 B: p.amp-wp-224b51a[class=amp-wp-224b51a]
    93 B: amp-iframe.amp-wp-b3bfe1b[src=https://www.googletagmanager.com/ns.html?id=GTM-TD2R4HW][height=400][sandbox=allow-scripts allow-same-origin][layout=fixed-height][class=amp-wp-b3bfe1b]
    Total included size: 38,985 bytes (48% of 80,016 total after tree shaking)

    The following stylesheets are too large to be included in style[amp-custom]:
    25439 B (45%): link#td-theme-css[rel=stylesheet][id=td-theme-css][href=https://sheffield.bigstamp.co.uk/wp-content/plugins/td-composer/mobile/style.css?ver=9.7.3][type=text/css][media=all]
    Total excluded size: 25,439 bytes (45% of 55,892 total after tree shaking)

    Total combined size: 64,424 bytes (47% of 135,908 total after tree shaking)

    If I don’t serve via the CDN everthing works fine.

    I’ve tried a few different plugins to see whether it was an issue with litespeed and i get the same problem with all the other CDN plugins.

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

    (@westonruter)

    6 years, 11 months ago

    You should turn off serving CSS from a CDN on AMP pages because the AMP plugin concatenates, minifies, and inlines the CSS into the page. So there is no need for a CSS CDN at all. Are you using a plugin to do the CSS CDN?

    Are you Transitional mode or Native mode (soon to be called “Standard”).

    Thread Starter theukdirectory

    (@theukdirectory)

    6 years, 11 months ago

    I’m using transitional mode and Litespeed cache.

    I’m not sure how you’d turn it off just for amp pages.

    Plugin Author Weston Ruter

    (@westonruter)

    6 years, 11 months ago

    To confirm, it is this plugin? https://ww.wp.xz.cn/plugins/litespeed-cache/

    Thread Starter theukdirectory

    (@theukdirectory)

    6 years, 11 months ago

    Yes,

    I’ve also had the same issue with the cdn enabler as well https://en-gb.ww.wp.xz.cn/plugins/cdn-enabler/ as I use that currently on another site as I’ve not had time to switch it over to Litespeed yet.

    Plugin Author Weston Ruter

    (@westonruter)

    6 years, 11 months ago

    For Lightspeed, you can try adding something like this to your custom theme’s functions.php or a custom plugin:

    add_filter( 'litespeed_can_cdn', function( $can ) {
    if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
        $can = false;
    }
    return $can;
} );

    Some docs on that here: https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:cache:lscwp:bypass

    Using is_amp_endpoint() may not work properly since I’m not sure if the filter is applied to early. So what you may need to use instead in Transitional mode is this:

    add_filter( 'litespeed_can_cdn', function( $can ) {
    if ( function_exists( 'amp_get_slug' ) && isset( $_GET[ amp_get_slug() ] ) ) {
        $can = false;
    }
    return $can;
} );

    There are a bunch of other filters in Lightspeed that you can use to configure its behavior similarly.

    Thread Starter theukdirectory

    (@theukdirectory)

    6 years, 11 months ago

    Many Many Many Thanks!

    Your first option seems to have done the trick, I’d have been going round in circles for weeks trying to figure it out.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘CDN issue’ is closed to new replies.