Improving laoding of font Entypo-Fontello - Support | Kriesi.at - Premium WordPress Themes (2024)

marcie73

Hello,
can you do anything to improve the loading or preloading of the font Entypo-Fontello used in avia builder?
Please have a look at “Preload key requests”, which impacts a lot.
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.officinadeiricordi.it%2F&hl=en

Thank you for help!

Ismael

Hey marcie73,

Thank you for the inquiry.

Currently, there is no other way to load the icon font aside from using font face, so the only way to optimize it is to adjust the font-display property.

function avf_custom_font_display( $font_display, $font_name ){// Check for a font and change the default theme settingif( 'entypo-fontello' == $font_name ){return 'block';}return $font_display;}add_filter( 'avf_font_display', 'avf_custom_font_display', 10, 2 );

This makes sure that the icons are not visible while the font file is still loading. However, please note that this change will not affect the improve the score in the page speed insight tool.

Best regards,
Ismael

marcie73

marcie73

Hello,
I don’t know why is so impacting on loading.
Is the font loaded if icons are not used?
Maybe you can think of integrate also font awesome, so the user can use two different icon sets.
As fair as I know, using other themes, font awesome does not have this kind of impact.

Thank you!

Mike

Hi,
Sorry for the very late reply and thanks for your patience, I have two ways to load font awesome with functions.php snippets, the first one enqueues it and the second loads the css in the wp_head, you can try both (one at a time) to see which will give you a better load time, but there really should not be too much difference between them. Also note that the first one was loading v4.7.0 when I saved the code and the second was loading v5.3.1, but you can adjust to suit, I left the original links to demonstrate the link format.

add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );function enqueue_font_awesome() {wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );}

function Font_Awesome_5(){ ?> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <?php }add_action('wp_head', 'Font_Awesome_5');

Best regards,
Mike

marcie73

Sorry, I forgot myself that I unistalled font awesome because it was unused, and this because it was listed together with fontello in Google page speed.
However you did not answer by the possibility to replace fontello with fontawesome in the avia editor, but I guess it is not possibile, unless you implement the avia editor.
Honestly, after a huge amount of work in optimization, and a homepage of 1,46MB, I still cannot achieve a positive score in core web vitals for mobile view, and this because of this font.
Maybe you should consider loading it from a cdn so that you can add <link rel=preload>.
Other people seems to have the same issue.

and you addressed them to another thread, very old:
https://kriesi.at/support/topic/slow-loading-entypo-fontello-woff/
I’m using a CDN and I’m wondering if it is still possibile to do this.
Please any help on summing up the procedure? I struggle to understand.
Thank you so much!

Mike

Hi,
I don’t believe that the dev team will be interested in replacing fontello with fontawesome in the avia editor, it would be a major job to recode the ALB and elements and I don’t believe that the backend icons affect the frontend view. Perhaps this post will help you: Scoring 100/100 In Google Pagespeed Insights, Gtmetrix Pagespeed And Yslow

Best regards,
Mike

marcie73

The post is dated May 2018 and since November 2020 GTmetrix is using Lighthouse and now is more aligned with Google Page Speed Insight.
Anyway all mentioned in the article has been done already.
As you may know Google is mobile first and its web core vitals have an impact in positioning. My website with Enfold is performing very well desktop wise (95%) and around 70% mobile with only one dot green.
If you don’t believe that this icon (frontend, not backend) has an impact just see this speed test.
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.officinadeiricordi.it%2F&hl=en&tab=mobile

I just wanted an help to try loading entypo fontello using cdn, if you don’t know how, maybe someone else of the team can help me?
Thank you

Mike

Hi,
Ok, I will ask the team for suggestions on loading entypo-fontello with a cdn.

Best regards,
Mike

thinkjarvis

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 2 years, 11 months ago by thinkjarvis.

Yigit

Hi,

Thanks for your help, Thomas! :)

Regards,
Yigit

marcie73

Hello thinkjarvis , thank you for your interest and help!
I added it but it still see the other one loaded, so maybe I need to find a way to “deregister” the original one.
The original one is loaded using css and all other formats are loaded.
Please see the source code of my homepage at line 294

Thank you! :)

thinkjarvis

Looking at lighthouse. Its picking up the non CDN version of the font as the one to load instead of the CDN version. This is why you are still seeing the error. Not entirely sure how to fix that without looking in to it in detail.

Try clearing your cache first and clearing the merged Stylesheets and JS cache as well.
If your CDN provider allows it. Clear the CDN cache as well and let it re-build.

As for not passing web vitals lowing the remaining figures could have something to do with your server setup or page layout. I cannot tell without checking the settings.

I always recommend using the built in script merging function in Enfold. Rather than using a third party. I wonder if the issues are actually caused by third party plugins rather than Enfold itself?

Sorry I cannot help further – But it appears to be an issue with the CDN and Enfold rather than a problem with Enfold itself.

marcie73

Thank you for trying anyway!
It seems all very complicate.
Of course I cleared all levels of cache (Breeze, Varnish e keycdn zone).
In GTmetrix waterfall the font now is loaded twice, and the one I added with your snippet is loading much faster! (the one served by cdn).

I’ll also try to use combination offered by the theme, hoping it won’t have problems of sync with Varnish Cache on the server.
In the meantime I hope the Enfold team will help me! :)

• This reply was modified 2 years, 10 months ago by marcie73.

marcie73

Hello, I see nobody has answered yet.
As suggested by thinkjarvis I disabled grouping and minification by breeze, and tried activated the Enfold one.
I have a little improvement probably based on the fact that only Enfold scripts are grouped and other (plugins) are excluded.
Maybe more small files are delivered quicker than a big one.
Anyway the grouped css file is considered as render-blocking along withe other css files of plugins.
I should defer some less important css, any help on doing this? Otherwise any suggestion based on Enfold Performance settings?

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.officinadeiricordi.it%2F&hl=en&tab=mobile

Thank you!

• This reply was modified 2 years, 10 months ago by marcie73.

marcie73

Jay

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 2 years, 5 months ago by thinkjarvis.

Yigit

Hi,

@thinkjarvis Thanks so much for your input :)

Best regards,
Yigit