Improving laoding of font Entypo-Fontello

I’ve just implemented the following in functions.php to preload the font and prevent font swap.

Add the following to functions.php to preload fontello

add_action('wp_head', 'tj_preloadfonts');
function tj_preloadfonts(){
echo '<link rel="preload" as="font" href="https://yourdomainnamehere.co.uk/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/fonts/entypo-fontello.woff2" crossorigin>';
}

You can also upload your chosen Google font and preload it from local to remove the warning. Complete code below for a font I use on my website:

add_action('wp_head', 'tj_preloadfonts');
function tj_preloadfonts(){
echo '<link rel="preload" as="font" href="https://yourdomainhere.co.uk/wp-content/uploads/avia_fonts/type_fonts/varela-round/varelaround-regular.ttf" crossorigin>
      <link rel="preload" as="font" href="https://yourdomainhere.co.uk/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/fonts/entypo-fontello.woff2" crossorigin>';
}

Don’t forget to change the domain to your own! If you are pre-loading Google fonts make sure you change/tweak it to the ones you are using!

@mike – This seems to work on my company website https://www.thinkjarvis.co.uk – Although I have mostly focused on the home page so far.

• This reply was modified 3 years, 7 months ago by thinkjarvis.

@marcie73 @jay

There are multiple issues mentioned in your last posts and the solution will depend on your host and setup. It will be hard for the support team to advise further without looking at your actual setup in detail. Web vitals optimisation is bespoke and depends on any extra plugins and your server setup.

Without knowning your hosting setup it is difficult to advise on the best plugins to resolve the issue.

I tend to recommend Wp-Optimize as a free caching and html compression plugin. I let Enfold process the CSS and JS files from the performance panel. If you combine this with EWWW image compression plugin and Jetpack Boost. You have effectively added everything premium plugins can do without any extra costs.

Free critical CSS generator
Jetpack Boost includes a free critical CSS generator. This will remove the render blocking warning from Web Vitals but in most situations makes little difference to the performance scores. It can also cause some CLS issues because the CSS load order is altered by the inline critical CSS. So you will need to try it and see if it works for you without custom code in addition to the critical CSS.

Please see below to give you a better understanding of how web vitals works.
Most of the time a perfect score is impossible. This is because of the way elements load on the page.
Enfold is capable of a 90+ score. This is without critical CSS and without a CDN.

A CDN is only really needed if you have customers in multiple countries, or the actual server you have isnt very powerful so it uses the CDN to compensate for poor response times. Really, a CDN is designed to serve content from local servers to reduce server response times for global customers.

Critical CSS generators remove the render blocking warning and improve FCP and LCP in web vitals but can affect TBT scores negatively due to extra processing.

If you have added plugins that add extra front end elements then this will lower the performance score unless optimisation has been applied.

Hosting
The type of host you have will also depend on the plugins you need. If your host includes server side caching then you probably do not need a caching plugin at all. If your host has its own CDN like a dedicated wordpress host then this will also be cached serverside in most cases – So probably do not need a caching plugin.

Enfold on its own includes its own script merge function and some extra features that optimise wordpress itself (all in the performance panel) so the only things missing from the performance stack are Caching, Critical CSS and CDN.

If your server is a apache linux server you will need to add Gzip compression and cache control headers to the .htaccess file to remove these warnings. Most optimisation plugins can do this with one click setup.

If you want to reduce the size of your images you can use EWWW plugin to convert them to WebP. HOWEVER if your CDN uses Polish like Cloud Flares premium system it can be set to automatically convert and compress images. So depends on your setup and if your CDN includes image compression.

CDN and Font serving
A host like WPEngine automatically replaces URLs with the CDN URL once it is set up correctly. This includes fonts loaded via html/head.

If you added a third party CDN not provided by your web host – you will need to ensure that your DNS settings, any caching plugin and any CDN intergration plugin is configured properly to serve content via the CDN. So make sure you check the settings are correct.

Doing these last bits isn’t easy. You may find that removing the render blocking warning makes some of the other metrics worse.

I hope this helps!

• This reply was modified 3 years, 2 months ago by thinkjarvis.