@fabriziomazzei Thanks for contacting me.
I took a look at your site on webpagetest.org, and after looking at the waterfall diagram (list of individual resources that are load on your site), it can become more clear.
1) Add a preconnect hint for these URL’s:
https://s7.addthis.com
https://connect.facebook.net
https://z.moatads.com
2) Remove the two preconnect hints you mentioned.
3) I strongly recommend reading the information about how each resource hint works on the “Information” tab- once you understand them better they will make more sense.
I hope this helps.
Hi Sam,
thank you very much for your help and the prompt reply.
I changed exactly what you suggested. Honestly it did not miracously improved a lot in Pagespeed, still fighting to get a better LCP on mobile, but at least now I know that’s the best I can do on this side and I need to improve other things.
There is just 1 more doubt left: as you can see in the screenshots I have 4 fonts on Preload but none of them (I guess) relates to Montserrat, which is the main and only normal font (i.e. not icons) used in the website.
Should I preload that too? Do you know where I can find its URL?
Thank you
Fabrizio
@fabriziomazzei
1) Using this plugin is only meant to improve one aspect of web performance. Many things are needed to improve site speed. Using this plugin can only resolve handling resource hints- which will improve your site’s performance, but obviously there’s many other factors at play.
2) Try preloading this link:
https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap, and you should remove the inline CSS right after your <head>.
See this page on Google Fonts for reference:
https://fonts.google.com/specimen/Montserrat?preview.text_type=custom#standard-styles
Thank you Sam,
I absolutely agree with you and that is what I meant in my previous reply.
As for your second point, it the inline CSS to remove the following?
<link rel='stylesheet' id='zn_all_g_fonts-css' href='//fonts.googleapis.com/css?family=Montserrat%3Aregular%2C500%2C700&ver=c3986fdf6d504c57c617b89152f4cef9' type='text/css' media='all' />
If I do, I will not see anymore the Montserrat font indeed.
Maybe I did not get it. Can you please tell me more?
Thank you
Fabrizio
@fabriziomazzei The value you provide in the preload needs to match the value in the href attribute in the link element you use to include that google font. So you would create the preload element, then later in your HTML you would include the link element to officially include that font.
The inline CSS you have at the top of your site complicates that:
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf) format('truetype');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_ZpC3gnD-w.ttf) format('truetype');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD-w.ttf) format('truetype');
}
It’s located at the very top of your sites’ source code (right after the opening head element).
If I were you, I would remove the inline CSS, add the preload URL I mentioned earlier, and replace the inline CSS with a link element which has your google font you need.
And always test out your changes responsibly before deploying.
I see what you mean now, thank you.
I would love you to be me, to make a brilliant job on the website, but unfortunately I am just myself, very bad at web developing (I normally work with marketing).
I somehow built this website and I am trying to improve is as much as I can.
Anyway, when you say this “and replace the inline CSS with a link element which has your google font you need” is there any good reference/blog article/guide to get my hands dirty and try to do it by myself? I have no idea how to do it 🙂
@fabriziomazzei Well you need to figure out what is generating the inline CSS first. Is it from a plugin or theme? Then add that new element, which should be easier. There’s really not much more information I can give you- the rest is based on your specific WP site.
Thank you Sam,
you have been really kind to reply to this.
Unfortunately that is too complicated for me, so I will just leave it as it is.
Thanks
Fabrizio
.
