Delay on page load

Try setting font-display to Swap under Advanced Settings and regenerate the stylesheet.

Post back with the results!

Hi Daan,
Many thanks for the quick response – I made the changes you suggested, couple of results.

Result 1 – the reference to OMGF in Google Page `inside have now reduced in how many are shown as an issue in Mobile and Desktop, the remaining font issue is as follows;

—–
MOBILE
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more.
URL
Potential Savings
…fonts/eicons.woff2?5.6.2(www.globalrelocations.com)
20 ms
…webfonts/fa-solid-900.woff2(www.globalrelocations.com)
——

DESKTOP
Preload key requests
0.67 s
Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load. Learn more.
URL
Potential Savings
…fonts/eicons.woff2?5.6.2(www.globalrelocations.com)
670 ms
…omgf-webfonts/quicksand-600-normal-a-wg.woff2(www.globalrelocations.com)
300 ms
…omgf-webfonts/quicksand-700-normal-a-wg.woff2(www.globalrelocations.com)

_____

Result 2
The page preloading issue remains, you can see this if you go to https://www.globalrelocations.com – flicking between pages in desktop you can see an annoying preload on the left of the screen showing content shown as bulletpoints, and then it renders correctly. When viewing in mobile it show large text for a second or 2 then renders.

• This reply was modified 4 years, 7 months ago by Andycaps.
• This reply was modified 4 years, 7 months ago by Andycaps.

Great to hear that part of it resolved the issue.

The 2 font files you suggest aren’t Google Fonts, so OMGF isn’t going to help you there.

The preload issue: find out which fonts they are that flicker and leverage the preload option in OMGF for these font styles. Don’t forget to apply the changes.

HI
Sorry, not sure how to do this, what the easiest approach to do this?
I suggest its these…

The following resources have no character set specified in their HTTP headers. Specifying a character set in HTTP headers can speed up browser rendering.

https://www.globalrelocations.com/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2?5.6.2
https://www.globalrelocations.com/wp-content/plugins/styles-layouts-gf-field-icons%202/webfonts/fa-solid-900.woff2

thanks again
Andy

• This reply was modified 4 years, 7 months ago by Andycaps.

No problem, in Firefox, right click on the line of text for which you’d like to know the font and click ‘Inspect Element’. Then navigate to Inspector > Fonts.

I check it for your site, these are the fonts that should be preloaded: https://imgur.com/a/50pES5a

Yes – Quicksand fonts, in your plugin do I check do I select the “Preload”?” option?

Hi have a CloudFlare can, it it worth checking that setting? I have no idea what my can url is…

No, for CloudFlare, you don’t have to set the cdn url

Yes – Quicksand fonts, in your plugin do I check do I select the “Preload”?” option?

Yes, select the preload checkboxes and click ‘Apply Changes’.

Hi Daan,
This is the latest info from Google PageSpeed Insights:
———
The following resources have no character set specified in their HTTP headers. Specifying a character set in HTTP headers can speed up browser rendering.

https://www.globalrelocations.com/wp-content/cache/omgf-webfonts/quicksand-300-normal-a-wg.woff2
https://www.globalrelocations.com/wp-content/cache/omgf-webfonts/quicksand-400-normal-a-wg.woff2
https://www.globalrelocations.com/wp-content/cache/omgf-webfonts/quicksand-500-normal-a-wg.woff2
https://www.globalrelocations.com/wp-content/cache/omgf-webfonts/quicksand-600-normal-a-wg.woff2
https://www.globalrelocations.com/wp-content/cache/omgf-webfonts/quicksand-700-normal-a-wg.woff2
————–

I have followed all your instructions – what am I missing?

thanks
Andy

Daan
I just attempted to re-install my custom fonts through your plugin, I got this error message at the top of my admin page…

Warning: implode(): Invalid arguments passed in /home/gradmin/public_html/wp-content/plugins/host-webfonts-local/includes/class-api.php on line 70

Warning: implode(): Invalid arguments passed in /home/gradmin/public_html/wp-content/plugins/host-webfonts-local/includes/class-api.php on line 70

Warning: implode(): Invalid arguments passed in /home/gradmin/public_html/wp-content/plugins/host-webfonts-local/includes/class-api.php on line 70

Warning: implode(): Invalid arguments passed in /home/gradmin/public_html/wp-content/plugins/host-webfonts-local/includes/class-api.php on line 70

Warning: implode(): Invalid arguments passed in /home/gradmin/public_html/wp-content/plugins/host-webfonts-local/includes/class-api.php on line 70

Warning: Cannot modify header information – headers already sent by (output started at /home/gradmin/public_html/wp-content/plugins/host-webfonts-local/includes/class-api.php:70) in /home/gradmin/public_html/wp-includes/functions.php on line 6221

Warning: Cannot modify header information – headers already sent by (output started at /home/gradmin/public_html/wp-content/plugins/host-webfonts-local/includes/class-api.php:70) in /home/gradmin/public_html/wp-admin/includes/misc.php on line 1259

Any ideas why this is now happening, its since your update yesterday

Hi Andy,

The font you’re using doesn’t have local-attributes specified in the Google Fonts API. I wrongfully assumed in my code all fonts would have this.

Try updating to 3.3.5 and try again. This should fix it.

Also, pro-tip: notices and warning messages should only appear in your admin screen if you have WP Debug enabled. You shouldn’t have this enabled on a production site, as the exposure of the absolute paths is a security risk.

Oh, how do I durn the debug off?