Local Google Fonts GT Metrix

  • Hi,

    I’m having some issues with my google fonts and a bit stuck as to why.

    Using Kadence Theme/Kadence Blocks

    Under “Customiser>General>Performance” I have enabled “Load Google Fonts Locally” & “Preload Local Fonts”

    Theres 3 font files being loaded on this page:
    wp-content/fonts/montserrat/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2
    wp-content/fonts/rubik/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-4I-FV0U1.woff2
    wp-content/fonts/rubik/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFV0U1.woff2

    All roughly the same size – around 19kb each

    On the GT Metrix waterfall view, these first two .woff2 files always seem to load within 30-50ms but the last one is usually 300ms+ (Blocking)

    I am using LiteSpeed Cache & Quic.cloud CDN.

    LiteSpeed Cache:
    Page Optimisation > CSS Settings >
    Font Display Optimisation – Swap (Available options are Default, Block, Swap, Fallback, Optional)

    Page Optimisation > Optimisation >
    Load Google Fonts Asynchronously – Off
    Remove Google Fonts – Off

    I’m not entirely sure why the rubik font has 2 files being loaded and montserrat only one.

    Additionally I’ve been googling and trying to figure out the best way to load these fonts without slowing down the page score but am just getting a bit confused honestly.

    If anyone can shed any light on this it’d be super appreciated.

    • This topic was modified 3 years, 10 months ago by Lucid Edge.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Lucid Edge

    (@lucidedge)

    Just to add. When this happens –

    The page score goes from A (99%) to B (86%)
    Structure from 97% to 95%
    Largest Contentful Paint from 400ms – to 1.5sec+
    Total blocking time from 80ms to 300ms+

    Only difference I can see in the waterfall when this happens is a big blocking time for the last font I mentioned, never usually the first 2 fonts.

    I’m sure it’s not a server related issue as its not hitting any hardware bottlenecks and TTFB is always around the same

    • This reply was modified 3 years, 10 months ago by Lucid Edge.
    • This reply was modified 3 years, 10 months ago by Lucid Edge.
    Thread Starter Lucid Edge

    (@lucidedge)

    I’ve found something but it seems to be the opposite of what GT Metrix shows…

    under googles console > network>font there are 2 fonts under the initiator “index” and 1 font under the initiator wp-content/litespeed/cssjs/142c2.css?f9917

    It’s the last one coming from the CSS thats usually slowest on GT Metrix but for some reason, its fastest under chrome console?

    View post on imgur.com

    Unfortunately I’m not smart enough to figure out why its being loaded in both these places but hopefully a higher being can help me ??

    Thread Starter Lucid Edge

    (@lucidedge)

    for now I’ve disabled the settings under customise>general>performance for local google font & preload.

    Under chrome console these font related objects are now appearing:

    /wp-content/plugins/litespeed-cache/assets/js/webfontloader.min.js

    /css?family=Rubik:regular,700%7CMontserrat:600&display=swap
    Link: https://fonts.gstatic.com>; rel=preconnect; crossorigin
    Authority: fonts.googleapis.com

    /s/rubik/v12/iJWKBXyIfDnIV7nBrXw.woff2
    Referer: https://fonts.googleapis.com/
    Authority:fonts.gstatic.com

    /s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2
    Referer: https://fonts.googleapis.com
    Authority: fonts.gstatic.com

    I’m guessing the issue I’m facing is both kadence theme & lightspeed cache both trying to load google fonts? Whats the best way out of this?

    Can I give full control the the kadence theme/litespeed cache? or can I make them play nice together?

    Apologies if I’m on the wrong track – it’s been an extremely long time since I did any web dev.

    Hey

    You would load two fonts for rubik because you are loading two weights. Each weight is it’s own font file.

    rel=preconnect is not the same thing as downloading a file, preconnect helps with the dns connections.

    I just tested your site and it’s showing 100 page speed score and rubik font loading locally.

    Ben

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Local Google Fonts GT Metrix’ is closed to new replies.