Tagged: , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 23, 2022 at 1:12 pm #1377203
    thinkjarvis

    I have found a bug that will affect all Enfold sites using a CDN to serve static assets:

    WP-Rocket used
    Standard Asset CDN with CDN URL entered in the CDN settings for WP-Rocket
    KeyCDN with a typical setup.

    This will occur with any CDN that requires URL re-writes (All of them).

    https://www.thinkjarvis.co.uk/
    See line 83 in the HTML document you can see my pre-loads getting pulled from the CDN and the critical CSS below covering the @font-face from the CDN.

    Then in the dynamic CSS
    The URL in the dynamic Avia folder for custom uploaded fonts is the full URL including the domain name.
    This is causing the fonts to load twice. Once preloaded from the CDN and once from the server once dynmic Css is loaded.
    https://www.thinkjarvis.co.uk/wp-content/uploads/dynamic_avia/thinkjarvis.css

    You can see the problem in Google Chrome Dev Tools in the network panel.
    The fonts preload and then near the bottom of the list the fonts download again from the local server once dynamic Avia has been processed.

    https://www.thinkjarvis.co.uk/wp-content/uploads/dynamic_avia/thinkjarvis.css
(https://thinkjarvis-1d89e.kxcdn.com/wp-content/uploads/dynamic_avia/thinkjarvis.css?ver=63a420504dd48)

    Currently looks like this:

    @font-face { 
     font-family: 'varelaround-regular';
     src:    url('https://www.thinkjarvis.co.uk/wp-content/uploads/avia_fonts/type_fonts/varelaround-regular/varelaround-regular.woff2') format('woff2');
     font-style:  normal;
     font-weight: 400;
     font-display: swap;
}

    It should be this to stop the font getting served again:

    @font-face { 
     font-family: 'varelaround-regular';
     src:    url('/wp-content/uploads/avia_fonts/type_fonts/varelaround-regular/varelaround-regular.woff2') format('woff2');
     font-style:  normal;
     font-weight: 400;
     font-display: swap;
}

    Note on this site I only uploaded the Woff2 fonts – So you dont see a full set of Src URLs.

    Proposed Solutions
    Is it possible to adjust the generator for the font data to include relative URLs instead of including the full domain
    OR
    Is it possible to either remove/turn off the font info included in dynamic CSS?

    • This topic was modified 1 year, 12 months ago by thinkjarvis. Reason: TIDY UP OUTPUT
    December 24, 2022 at 2:01 pm #1377288
    Günter

    Hey Thomas,

    Thank you for this input.

    With next release 5.4 I decided to add a new option:

    “Performance -> Show Advanced -> Custom Font Loading Source”

    If you select to load from CDN server output of @font-face is suppressed in dynamic CSS file (only a comment line about that is added and can be seen when WP_DEBUG = true).

    Meanwhile to test in file framework\php\font-management\class-avia-type-fonts.php function handler_create_dynamic_stylesheet() around line 1177 you find:

    
			if( ! in_array( $context, array( 'before' ) ) )
			{
				return $output;
			}

    after this line add:

    
return $output;

    Now you can use your custom CSS for @font-face.

    Hope this helps with the CDN problem.

    Best regards,
    Günter

    January 3, 2023 at 11:56 am #1377447
    thinkjarvis

    Thanks Gunter,

    Happy New Year!

    This problem will occur with all asset CDNs so really pleased with the fix above. Thank you for looking into this.

    I’ll be looking at this again properly in a few weeks – Likely after 5.4 is launched.

    My trial of Key CDN ends this week. I have decided to look for an alternative – The TTFB is actually a lot slower on the CDN resources than just using the server direct. I was also getting issues where KeyCDN refused to serve critical assets (Cache Miss) so I do not think it is the right solution at this stage. Moving on to Bunny CDN and Stack Path next. Trying to avoid CloudFlare because it is expensive at enterprise level.

    I think I’ll end up using StackPath EdgeCaching or the new Bunny CDN Permacache. This means a copy of the entire site is held on their network not just static assets. Soves a cache miss problem and improves TTFB times globally because HTML gets cached. This is simillar to how CloudFlare works when used at DNS level. The irony is that my server here in the UK is outperforming a clients server over in America where they use WPEngine and CloudFlare. I get comparable global TTFB scores without a CDN – With the TTFB scores being much much better in the UK due to server location. So I do not think it is as good as people make out.

    If after my trials I am still seeing cache misses and worse TTFB scores. I’ll just use something like AnyCast DNS to improve DNS resolution times instead and leave CDNs alone until I have a client who requires globally equal TTFB scores.

    • This reply was modified 1 year, 11 months ago by thinkjarvis.
    February 15, 2023 at 12:21 pm #1398055
    thinkjarvis

    This appears to have solved the problem thanks Gunter.

    I have moved on from Key CDN and it looks like I will be using Stack Path as my CDN partner for all sites on my servers that require it.

    This fix will also apply to any Edge Caching setup. Thank you for providing a fix.

    You may close this issue.

    February 15, 2023 at 1:11 pm #1398069
    Mike

    Hi,
    Glad Günter could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Bug: CDN Use and fonts loading twice’ is closed to new replies.