[Resolved] Google Fonts And PageSpeed Insights

Home Forums Support Google Fonts And PageSpeed Insights

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #91685
    Paula Noah

    Hi Tom

    GeneratePress is absolutely incredible theme. With compression, caching, image optimization and minification, GP constantly maintains Google PageSpeed Insights score at 98/100. But that can only be achieved by using “Default Font”.

    For example, if I use “Open Sans” for GP, PageSpeed score trembles down to 75-78 with this suggestion:

    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Your page has 1 blocking CSS resources. This causes a delay in rendering your page.
    None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
    Optimize CSS Delivery of the following:

    http://fonts.googleapis.com/…700&subset=latin%2Clatin-ext&ver=1.2.9.2

    Could you please guide me how to pass that one if I’d use Google fonts?

    Thanks Tom.

    Paula

    #91763
    Tom
    Lead Developer
    Lead Developer

    Hi Paula,

    This is actually kind of funny, because Google is complaining about the optimization of a file they serve.

    So basically, you don’t have to worry about this.

    Even when using the Google Fonts website to choose your fonts, they give you these instructions:

    Instructions: To embed your Collection into your web page, copy the code as the first element in the <head> of your HTML document.

    This is exactly what GeneratePress does for you – it loads the stylesheet provided by Google into the section of your website.

    Of course, you can stop GeneratePress from doing this for you with the following PHP snippet:

    add_action('after_setup_theme','generate_remove_google_fonts_stylesheet');
    function generate_remove_google_fonts_stylesheet()
    {
          remove_action('wp_enqueue_scripts','generate_display_google_fonts', 0);
    }

    This will allow you to choose the font you want in the Customizer as you usually would, but then you’ll have to go to http://www.google.com/fonts, choose your fonts, and follow their directions on how to add them.

    Hope this helps 🙂

    #91772
    Paula Noah

    Tom,

    First, thanks for PHP snippet. Make me laugh 🙂 “complaining about the optimization of a file they serve”.

    When I use @font-face rule, that suggestion goes away. I read pros and cons about @font-face but don’t get solid solution. It’s not like reading a debate. What’s your though on using @font-face? I rather like to go with your opinion.

    Aside Google, testing my website (several times) on GTmetrix and Pingdom – you know what – that GeneratePress speed and performance always stay green with 98 – 99%! To be frank, I still couldn’t believe it. :O

    Hands down. You’re impressive.

    #91780
    Tom
    Lead Developer
    Lead Developer

    I don’t think there’s anything wrong with @font-face unless you’re overusing it like crazy.

    The link Google is referring to links to a stylesheet with @font-face.

    For example, here’s the one on this site: http://fonts.googleapis.com/css?family=Open+Sans%3A300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic&subset=latin%2Clatin-ext&ver=1.2.9.2

    Just a few @font-face blocks 🙂

    Glad you’re enjoying GP!

    #218114
    Rob

    I have noticed there are Google Fonts in the console that I assume GP is installing. I pasted the function you provided above in the functions.php in the child folder, but it did not stop the fonts from loading. Any ideas on what I might be doing wrong?

    #218140
    Tom
    Lead Developer
    Lead Developer

    If you don’t want to use Google Fonts, just choose one of the standard ones in “Customize > Typography” 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.