StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How to optimize Optimize CSS Delivery [Google Fonts]?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to optimize Optimize CSS Delivery [Google Fonts]?

This topic is: not resolved

Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 5, 2014 at 11:58 am #103722
    maheshone
    Member

    Hello,

    My blog URL is http://www.minterest.org. I'm using Google PageSpeed Service CDN to optimize the performance of the blog. However the PageSpeed Insights is recommending the optimization of CSS delivery.

    It says:

    "Your page has 1 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page."

    Screenshot:

    I can see the code:

    /*
Imports
---------------------------------------------------------------------------------------------------- */

@import url(//fonts.googleapis.com/css?family=Lato:300,700);

    in Genesis: Stylesheet (style.css)

    And the following hook that executes in the document <head>

    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>

    So how can I do that?

    Thanks!

    Twitter — @maheshone
    Blog — http://www.minterest.com/
    vCard — http://www.maheshone.com/

    http://www.minterest.org/
    May 7, 2014 at 1:10 am #104014
    Tom
    Participant

    WPbeginner has a nice article on this, suggesting you could at least combine the calls to Google.

    88 is a fairly respectable speed from Google. You're minifying html and css. Next steps would include trying a caching plugin and/or CDN. You've already got Jetpack loaded so you could use Photon, or try Cloudflare's free program.

    Choose your next site design from over 350 Genesis themes.
    [ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

    May 7, 2014 at 1:14 am #104015
    maheshone
    Member

    Hi Tom,

    Thanks for the reply...

    Earlier today I optimized little bit.. I was able to find the unused Google Font code and removed it... So now I can see only one reference to Google Font API website and that's for the current font.

    And yes, I'm already using a caching plugin (W3 Total) and a CDN (Google PageSeed Service) to optimize the content. So all the images and content is delivered from the Google server.

    Twitter — @maheshone
    Blog — http://www.minterest.com/
    vCard — http://www.maheshone.com/

    May 7, 2014 at 1:16 am #104016
    maheshone
    Member

    One more thing...

    Yes, I understand that 88 is a good score... but the question was about the reference to unused Google Fonts.. But then I noticed the same in Functions.php and removed it.. So now it's clean...

    Twitter — @maheshone
    Blog — http://www.minterest.com/
    vCard — http://www.maheshone.com/

    May 7, 2014 at 6:50 am #104040
    Lauren @ OnceCoupled
    Member

    Ah, you didn't mention that the fonts were unused and you wanted to remove them completely. Good to hear you got it accomplished. 🙂

    Best,
    Lauren

    We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

    May 7, 2014 at 7:44 am #104044
    maheshone
    Member

    Hi Lauren,

    Actually I didn't know that those fonts were unused. I thought it was used by the theme to show some text at some parts of the blog... So I checked all font styles manually and realized that it was unused. 🙂

    That's how I realized that the one I removed was the default google font used by the theme. So I replaced it with my custom google font.

    Twitter — @maheshone
    Blog — http://www.minterest.com/
    vCard — http://www.maheshone.com/

    July 19, 2015 at 10:24 am #159816
    smkyle1
    Member

    What tool did you use to help you to determine that the Google font was unused?

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.