• Hi, in order to find out a conflict problem, I have changed the theme once and deactivated all plug-in. It turns out to be a plug-in problem. The problem has been fixed now. But when I change the theme back and retest on page on PageSpeed Insight and GTmetrix, I find that there is a common problem showed on both report:

    —————————————————————
    The following inline script blocks were found in https://www.barrelleaf.com/ between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.

    Inline script block #4
    The following external CSS files were included after an external JavaScript file in https://www.barrelleaf.com/. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.

    https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic|Lato:400,400italic,700,700italic
    https://www.barrelleaf.com/wp-content/uploads/fvm/cache/header-a3cc5162-1496627222.min.css

    ——————————————————-
    I’m not very sure whether the first one is about the theme, but the second I think it is the font that used in the theme. Is there any setting or adjustment I can make to fix this?

    Thanks in advance.

    My site: https://www.barrelleaf.com/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi there,
    If you have any Custom CSS you will need to add it in your Child style.css

    Have a look at this guide to learn more about child themes and how to create one.www.cssigniter.com/ignite/beginners-guide-child-themes/

    to avoid the inline CSS.

    Now for the second one, you will need to download Lora and Lato font families from Google Fonts then create a folder named fonts in your theme’s main folder and place the files in there. Then declare the font in your style.css file on using the @font-face declaration ( here is how to use it https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ if you are not already familiar with it).

    Let me know if this helps

    Thread Starter barrelleaf

    (@barrelleaf)

    Hi, thanks for the reply.

    I do not actually know whether I have Custom CSS. I only add some code in the custom CSS box in the theme editor. I actually do not want to use a Child theme because I think the custom CSS box in custom editor is enough. If this is the case, how should I find the inline block and figure out whether I can do with or without it?

    For the second, I already find the two fonts from Google Fonts and find a folder name “fonts” in the theme file. I think I should just download the two fonts and place them into the folder. But after I download them, I find that they have different styles (italic, light, regular, etc.) Should I put all font style into the folder or just the regular one? Thanks.

    I’m actually not really familiar with this.
    Thank you.

    • This reply was modified 7 years, 9 months ago by barrelleaf.

    Hi there,
    if you dont want any render blocking css you will need to use a child theme, then you can move your custom css to your child stylesheet.
    Have a look at this guide to learn more about child themes and how to create one
    https://www.cssigniter.com/ignite/beginners-guide-child-themes/

    This applies also for you fonts. I you dont want to render them via Google Fonts you will need to open functions.php and remove

    
    	$font_url = '';
    	/* translators: If there are characters in your language that are not supported by Lora and Lato, translate this to 'off'. Do not translate into your own language. */
    	if ( 'off' !== _x( 'on', 'Lora and Lato fonts: on or off', 'ci-theme' ) ) {
    		$font_url = add_query_arg( 'family', urlencode( 'Lora:400,700,400italic,700italic|Lato:400,400italic,700,700italic' ), '//fonts.googleapis.com/css' );
    	}
    	wp_register_style( 'ci-theme-google-font', esc_url( $font_url ) );

    from inside.
    I suggest downloading Lora and Lato from https://www.fontsquirrel.com which provides a Webfont Kit (in zip) with the exact code and files you will need to use. This is quite complicated procedure and I really wont have so much impact on your site’s loading speed.

    Best Regards

    • This reply was modified 7 years, 9 months ago by Fotis.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Inline script blocks’ is closed to new replies.