Load fonts first

Support
#1

Hello there,

We’re working on optimization and something has been flagged by PageSpeed / YSlow

The following external CSS files were included after an external JavaScript file in https://www…com/. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.

https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Raleway:600,700,300,300i,400,400i,700i,200,200i,600i,800,800i&subset=latin,latin-ext

Pro seems to load the fonts directly in the body.

Would it be possible to alter this to ensure fonts are loaded before any JavaScript?

It could be loaded right after any of these stylesheets:

  • x-fa-icon-classes-css
  • x-stack-css
  • x-woocommerce-css

Waiting for your feedback.

Thank you!

#2

Hi @thisisbbc,

Thanks for writing in!

The google fonts were designed to be loaded last in the head of the page. Regretfully you cannot alter that it would be loaded first before other scripts. If you do that, it will require a complete alteration of the code with the Font Manager which we do not recommend and way outside the scope of our support.

Thank you for your understanding.

#3

Thank you RueNel,

I’m really not the kind of person to follow advices blindly and I’m sure the team over at Themeco had their reason to do so but I’m curious to know what motivated that decision.

Is there any chance you could forward this inquiry and see if this workflow could be further analyzed?

Appreciate your help.

All best,
B

#4

Hi B,

Ruenel said it was loaded at the last of the head, in which outside the body. So this is incorrect

Pro seems to load the fonts directly in the body.

And since it’s loaded at the end of head, it’s loaded after these stylesheets

x-fa-icon-classes-css
x-stack-css
x-woocommerce-css

Which means this is already true

It could be loaded right after any of these stylesheets:

What was Ruenel referring to the last statement is, you can’t alter the current code to change its positioning other than to what’s already had. And there should be no issue since it’s not against to your current requirement.

The fonts are also loaded before other javascripts, because javascript is loaded down below before </body>.

Now, maybe this is what you’re getting. You have a 3rd party plugin or customization that adds javascript within the <head> and before the fonts. Since 3rd party plugins are created by a different author, there is no way the theme can control their loading priorities. It’s Wordpress, a modular setup where features can be created by multiple authors.

And because this is modular, there are optimization plugins that minify and combine javascripts and even CSS, then implement the defer optimization (positioning related to render blocking https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css ). I think it should be the area that could help you regarding the CSS and fonts. And this too https://wordpress.org/support/topic/render-blocking-css-by-autoptimize/

Thanks!

#5

Hello Rad,

Thank you for the detailed reply.

As I’m currently not seeing the fonts loaded at the end of head, but rather at the beginning of the body, is that a bug?

The fonts are actually loaded quite after the three stylesheets I mentionned…

I understand that Pro has no control over how third-party plugins load their content but I’m not sure why the fonts are only loaded that far down the road when Pro is loading stylesheets in the head right before.

I appreciate your suggestion to look into optimization tools, that’s exactly what we’re doing currently so I’ll definitely take a look. If you could just confirm that what I’m seeing is not a bug that would be great. I have added a link to the site as a secure note.

Thank you!

#6

Hi @thisisbbc,

When there is a broken HTML within the <head></head> , the browser inspector automatically put the rest of the element within the <body>. And if you’ll use a standard view source instead of inspector, you’ll see this

It’s correct and working, somehow, within the script at your page, it adds a malformed content to the header and breaks it.

I assume it’s due to the embed codes added to your site, you could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes!

#7

Hey Rad,

It looks like the culprit is Facebook Comments (Themeco).

As soon as it’s active the stylesheet gets in the body.

Waiting for your feedback!

#8

Hi @thisisbbc,

Ah, this is still related to your other thread https://theme.co/apex/forum/t/bug-with-facebook-comments/52101. Yes it’s known bug and already added to our issue tracker.

The temporary solution is editing the file /wp-content/plugins/tc-facebook-comments/functions/output.php through your hosting’s file manager and replace this code

if ( isset( $tco_facebook_comments_enable ) && $tco_facebook_comments_enable == 1 ) {

  add_action( 'wp_head', 'tco_facebook_app_data' );
  add_action( 'wp_head', 'tco_facebook_sdk' );
  add_filter( 'x_entry_meta_comments_number', 'tco_facebook_comments_number' );
  add_filter( 'comments_template', 'tco_facebook_comments_template' );

}

with this

if ( isset( $tco_facebook_comments_enable ) && $tco_facebook_comments_enable == 1 ) {

  add_action( 'wp_head', 'tco_facebook_app_data' );
  add_action( 'wp_footer', 'tco_facebook_sdk', -99999 );
  add_filter( 'x_entry_meta_comments_number', 'tco_facebook_comments_number' );
  add_filter( 'comments_template', 'tco_facebook_comments_template' );

}

Thanks!

#9

Hello Rad,

Apparently these issues are related yes but it wasn’t immediately clear to me that it was the same source.

I have added your provided code snippet and it works great, thank you for that.

All best,
B

#10

You’re most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.