I'm testing my page's performance through GTmetrix and I noticed that the biggest element loaded on my page is the font-family. Is there a way to lower this somehow? Here is how I load my font:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#500;600&display=swap" rel="stylesheet">
If you're using Google Fonts just for a few words, consider using the text parameter in the URL. The font will then only be loaded for the specified letters/characters.
Let's say you wanna use the font for the word 'Welcome'. By inserting &text=Welcome in the URL, you can load the font just for the six different letters of this word:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#500;600&display=swap&text=Welcome" rel="stylesheet">
This will reduce the size of the font file considerably.
Of course, this will not work if you need the whole set of characters.
Related
I've just deployed my website that I built using react.js, I am using Raleway font for the whole website, but when I opened it with my iphone using safari browser it shows me another font, how can I solve this problem ?
Do you import your font in your website? You can add those lines in your index.html so anyone that doesn't have installed Raleway (including mobiles apps) will be able to display it.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
If you need specific styles, you can select them and generate your import lines here: https://fonts.google.com/specimen/Raleway
I use 2 google font on my site.
In the HEAD preload the fonts:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Biryani:wght#400;700&family=Noto+Sans:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
I set css below this:
body{margin:0;padding:0;font-size:14px;font-family: 'Noto Sans', sans-serif;line-height:1.2em ;background-color:#F8F9FA;}
h1,h2,h3,h4,h5,h6{font-family: 'Biryani', sans-serif;color:#404040}
Page Speed Insights, on the other hand, measures a CLS of 0.36 and reports most problems on the title and block of text.
Please help, what can I do.
The tested page url is: https://megveszlak.hu/elado-haz-godollo
Thank You
In our website we using external Google font:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500;700&display=optional" rel="stylesheet">
As a result it returns CSS like this:
#font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 300;
font-display: optional;
src: url(https://fonts.gstatic.com/s/rubik/v19/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
...
When new users first time comes to site fonts are never do apply - and that acceptable to me, because it's one of the drawbacks of using font-display: 'optional'. Also I can confirm that both CSS file from Google and fonts are still loaded by the browser and are cached (they are just do not apply on first page visit). CSS file is cached for 24h and font files itself are cached for 1 year. If I reload same page (Ctrl+R) then fonts are applied. So far all good.
But the problem is that if I open same page in new Chrome tab (i.e. new session) then fonts doesn't apply again. I checked DevTools's Network tab and I can confirm that fonts were loaded from Disk Cache. Since fonts were loaded from cache I expect that they will be applied every time until cache time expires - but that doesn't happen. Fonts are applied only if I'm refreshing same Chrome tab. New sessions (new tabs) gives me page without fonts.
I understood 1 thing: if I do simple page reload (Ctrl+R) then I see that fonts were loaded from Memory cache, and fonts are applied. But new sessions (new tabs) will cause fonts to load from Disk cache - and probably that's why they don't apply. On my developer machine I have pretty fast M2 SSD disk, so it's a little bit weird why Disk cached fonts doesn't apply.
One more thing may worth to mention - I have pretty bad Total Blocking Time score (Core Web Vital TTB metric). Can it be the reason why Disk cached fonts do not apply?
Is there some way to fix this problem?
Thanks.
This is happening because you are using display: optional, as stated yourself. You need to make this to display: swap in order for things to work properly. Below is what your updated links would look like:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500;700&display=swap" rel="stylesheet">
Notice we are not using optional display anymore, so now cached fonts will apply, as requested.
If you are loading the external Google links in your <head> like this:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500;700&display=optional" rel="stylesheet">
</head>
Then in your CSS, you do not need to use the #font-face, you simply add the font-family to your class/tag, like so:
body {
font-family: 'Rubik';
font-size: 16px;
}
Just I have tested on my system on every new tab will load from the memory cache only if we use swap in the link tag.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500;700&display=swap" rel="stylesheet">
I'm trying to use variable fonts for the first time, namely Quicksand from Google fonts. Here are the tags it gives you...
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
It's definitely using Quicksand on the page but the problem is that when I change the font weight from 400 to 500 it doesn't change. 300 does nothing either but if I change it to a value above 550 it seems to go very bold. It's as if I've set it to download just two different weights, a very light one and a very bold one.
I looked around and found an article that said to do this:
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#100..900&display=swap" rel="stylesheet">
but that doesn't seem to have change anything. Am I missing something?
I found the problem. I was specifying a range of weights which exceeded the range available for this font. Instead of doing this:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght#200..900" />
I should have used 300..700
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300..700" />
Also, I wasn't always doing a proper refresh when changing the import because I've got too used to React's hot reloading but obviously if you change the font links in the head then you have to F5.
You aren't importing the font correctly. Here use this instead:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap" rel="stylesheet">
On google fonts page you need to select all the font weights you want to import. Not just the base if you want to work with font weights.
i'm trying to optimize this website: electronicsportsitalia-it and when i try to analyze it on Google PageSpeed the platforms says that there is a google font blocking the page rendering:
https://fonts.googleapis.com/css?family=Lato:300,400,700
The font firstly was loaded through php but then i inserted it directly in html code trying to load it with this code: <link rel=stylesheet id=avia-google-webfont href='//fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css' media=all lazyload> -put also before the </body> tag- but it didn't worked.
So i tryed to load it with Web Font Loader and actually the website is runnging this script:
`
</script>
<script>
WebFont.load({
google: {
families: ['Lato']
}
});
</script>`
but always the same problem on PageSpeed.
Can someone help me?
You can preload any styles (including google fonts)
<link
rel="preload"
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
rel="stylesheet"
type="text/css"
/>
</noscript>
You can read more on web.dev
UPDATE
Base on Lucas Vazquez comment I've also added &display=swap (which fixes this issue "Ensure text remains visible during webfont load")
You question boils down how to include less critical CSS asynchronously. I recommend to read this article.
Its similar to Claudiu's answer however, it is recommended in the article not to use preload, because of this:
First, browser support for preload is still not great, so a polyfill (such as the one loadCSS provides) is necessary if you want to rely on it to fetch and apply a stylesheet across browsers. More importantly though, preload fetches files very early, at the highest priority, potentially deprioritizing other important downloads, and that may be higher priority than you actually need for non-critical CSS
Here is the alternative:
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
media="print"
onload="this.media='all'"
/>
<noscript>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
rel="stylesheet"
type="text/css"
/>
</noscript>
This is how it works. The attribute media=print will skip the css on page rendering. Once the page has loaded, it will load the print css. The onload JS event changes the media to all, now the font will be loaded and change the page rendering. Most importantly, the font will no longer render-block your page.
For the edge case, that a user has js disabled, the "noscript" tag will load the font directly.
You can take advantage of the onload attribute like this -
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap"
rel="stylesheet"
type="text/css"
media="print"
onload="this.media='all'"
/>
Set the media attribute to print at first, but change it to all when the download callback fires.
I noticed that Laravel added this tag to its html head output recently:
<link rel="preconnect" href="https://fonts.gstatic.com">
I copied it and added it before my font request, i.e:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" id="google-fonts-css">
This simple tag took me from a Mobile Pagespeed score of 80 up to 95, but I can't be entirely sure that it was in fact the tag I have to thank for this score increase - PageSpeed is unpredicatable. I'm not sure if it's just a Chrome thing or a new standard.
In my case, I will generate my font using a font-face generator tool which is easier to use and less hassle but when I use google fonts, this is what I do.
You can use style element at the end of body, just before the closing </body> tag:
<style>
#import "//fonts.googleapis.com/css?family=Lato:300,400,700"
</style>
or you can refer to How to keep CSS from render-blocking my website?
The following font files must be loaded before this JS file: https://electronicsportsitalia.it/wp-content/plugins/google-analytics-for-wordpress/assets/js/frontend.min.js
https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2
https://fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2
https://fonts.googleapis.com/css?family=Lato
https://fonts.gstatic.com/s/roboto/v18/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2
https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2