Hello,
I implemented the code in this thread (https://siteorigin.com/thread/annoying-woff-error-found-while-using-pagespeed-insight/) exactly as instructed, but Google Pagespeed Insights is still reporting the same thing: “Consider using “ to prioritize fetching resources that are currently requested later in page load. …fonts/slider.woff?8p86w5”
I have tested many times, waited different times and tested again. I tested both ways: by adding it to my functions.php file and when that didn’t work I removed it from there and added it through the ‘Code Snippets plugin’. Still no real change reporting in Pagespeed insights (at least not for mobile, but I did notice like a 10 point boost on average for desktop, but on mobile only a few points -and mobile score overall is extremely low in all tools that I’ve tested it in).
So is that code working or not? I am using the North theme.
Oh, and by the way I also tried just adding the image via an Editor widget, and Pagespeed insights still reported the same annoying error. And yes, I fully cleared my cache and test at different times. So the culprit seems to be with the widgets bundle or something.
Here’s my site if it helps, right now the code is back in the functions.php file (childtheme): bulkcomments.net
Hi Multimastery
Thanks for reaching out.
I’ve updated our FAQ with an explanation of why WOFF files aren’t preloaded and what you might do about it.
Page: FAQ
This is an advanced customization and not really something we can dive too deep into within our free support scope. I can see that there isn’t a preload in your source code. Perhaps check the function at the above link and ensure that your Code Snippets function is activated as it’s possible to save but not activated. The function should be set up to run on the site front end in Code Snippets.
Hi Andrew,
I got an error when trying putting it in the functions.php file; it messed up my blog page so I took it off. I’ll try it in the code snippets, but where exactly do I put the ‘conditional’ in this code for it to work properly?
The function as is in the documentation would run the preload on every page. You can find out more about WordPress conditionals here https://codex.wordpress.org/Conditional_Tags.
I’ve added a conditional example to docs: Page: FAQ. Hope that helps.
Thanks Andrew. I have added the code via the Code Snippets plugin using the conditional for the ‘front page’ just as it is shown in the example. When I added it via the plugin, my site did not produce any errors either, so not sure why it was producing errors when I put the code directly in the functions.php file…oh well.
But what I’m wondering now is should I keep the conditional set to just work on the front page, or should I just delete that conditional to have it work on all pages (or maybe set something to work on multiple pages). Being that I don’t really know or understand how deep this WOFF issue runs, please let me know what you recommmend, thanks.
Glad to hear you’re making progress :)
The file in question only loads where the Hero widget is used. It would be counterproductive to remove the conditional, you’d then preload the file even on pages where it isn’t being used so you’d be slowing your site down.
Are you really sure that file loads only where the Hero widget is used? Reason I ask is because during some of my past testing with all of this, at one point I went so far as to delete the Hero widget just to see what would happen and replaced it with a text editor widget, and yet & still Pagespeed Insights still reported the same WOFF issue.
In fact, although this recent change did make some progress with a score boost in pagespeed insights, it’s still reporting the same ole nagging issue: “Consider using “ to prioritize fetching resources that are currently requested later in page load.” fonts/slider.woff?8p86w5
The Widgets Bundle will only load assets as required. If you can set up an example of the above issue described, I’d be happy to take a look.
I’m not sure what you mean by ‘example’, You can simply run it through Pagespeed insights and see that it’s still showing that error even though you see that I have clearly added the code: https://developers.google.com/speed/pagespeed/insights/
You can try changing the Code Snippets function to the following:
function siteorigin_preload_slider_font() { if ( wp_script_is( 'sow-slider-slider' ) ) { ?> <link rel="preload" href="<?php echo plugin_dir_url( SOW_BUNDLE_BASE_FILE ); ?>css/slider/fonts/slider.woff?8p86w5" as="font"> <?php } } add_action( 'wp_head', 'siteorigin_preload_slider_font' );The woff file has a query string that was causing the issue. Please, keep in mind this quite far beyond the support we’re normally able to offer here on the forums. Hopefully, the above change helps.
Thanks Andrew, but do I still check the box to only run this new code on the front-end like last time – or do I run it everywhere or something else??
Also, I guess this new code doesn’t require this front-end conditional anymore? is_front_page
Update:
I just tested it running on the front-end and now Pagespeed Insights is showing the following error message…so not sure what’s up.
I have removed the new code for now until I find out what that error is all about.
Hi, using the updated function the home page conditional isn’t required.
The function should be run on the front-end using Code Snippets settings.
Please, check your Code Snippets list, do you still have the original function running? It looks like you might be? If so, deactivate or delete the snippet.
Which page were you testing with Page Speed Insights when the warning appeared? The home page? Thanks.
I have republished the new code exactly as is on the front-end in code snippets. I do not have the old snippet enabled at all. I tested my homepage in Pagespeed Insights: bulkcomments.net – still the same error.
I will leave the snippet published for about another day or so that hopefully you’ll get a chance to see it by then. Also, I see very little in score improvement with this change so far.
I also just checked some inner pages and that same warning is showing on those too. So I suspect the warning is probably showing on all pages now.
Thanks for the update.
The preloaded file is being used by the browser. https://imgur.com/a/jE8nfp4
To resolve this particular “Opportunity” as Google is calling it (it isn’t an error), you can change the function to the following:
function siteorigin_preload_slider_font() { if ( wp_script_is( 'sow-slider-slider' ) ) { ?> <link rel="preload" href="<?php echo plugin_dir_url( SOW_BUNDLE_BASE_FILE ); ?>css/slider/fonts/slider.woff?8p86w5" as="font" crossorigin> <?php } } add_action( 'wp_head', 'siteorigin_preload_slider_font' );More on
crossoriginhere.Thanks Andrew, that new code got rid of that message. One thing I do see remaining though about the whole woff issue is there’s a suggestion in Pagespeed Insights showing “Ensure text remains visible during webfont load”. Any final tweaks on how to best fix that?
Super, glad that helped :)
I’ve logged your request regarding font display here https://github.com/siteorigin/so-widgets-bundle/issues/938.
Does that mean it’s fixed now or is it still being investigated?
Hi, it’s in development, you can follow along at the above URL, once the pull request is reviewed and approved, it’ll get merged into the develop branch and be included in the next release.