Check on my settings

  • Resolved fabriziomazzei

    (@fabriziomazzei)


    3 years, 9 months ago

    Hi there,

    First of all thank you for this amazing plugin which makes this optimization much simpler without need to code. I am here humbly asking to double check the configuration I have after reading many online guides.

    The problem is that I do not know when using preload, prefetch, preconnect, etc, I swear it is chinese to me.
    Moreover, I do not know whether I put here something wrong and/or I need to add something else to make the website better.

    In Pagespeed, I get an average score of 40 on mobile and 80-85 on desktop. The mobile one is so bad and the best LCP i get is 7,4. 2 interesting metrics:

    – Reduce the impact of third-party code – Third-party code blocked the main thread for 240-320s
    – Preconnect to required origins
    Warnings:
    A <link rel=preconnect> was found for “https://fonts.googleapis.com&#8221; but was not used by the browser. Only use preconnect for important origins that the page will certainly request.
    A <link rel=preconnect> was found for “https://www.google.it&#8221; but was not used by the browser. Only use preconnect for important origins that the page will certainly request.
    More than 2 <link rel=preconnect> connections were found. These should be used sparingly and only to the most important origins.

    The website is on Siteground and I have SG optimizer with basically all the options enabled.

    Lastly, the screenshots of my configuration:
    Page 1
    https://i.ibb.co/CPfSbsV/2021-02-28-23-37-giulianoaddestratore-it.png
    Page 2
    https://i.ibb.co/VLmVFVt/2021-02-28-23-37-giulianoaddestratore-it-2.png

    And the settings page:
    https://i.ibb.co/gtNzT6g/2021-02-28-23-38-giulianoaddestratore-it.png

    Should you need anything else, please let me know!

    Thank you very much!
    Fabrizio

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Sam Perrow

    (@samperrow)

    @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.

    Thread Starter fabriziomazzei

    (@fabriziomazzei)

    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

    Plugin Author Sam Perrow

    (@samperrow)

    @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

    Thread Starter fabriziomazzei

    (@fabriziomazzei)

    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

    Plugin Author Sam Perrow

    (@samperrow)

    @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.

    Thread Starter fabriziomazzei

    (@fabriziomazzei)

    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 ??

    Plugin Author Sam Perrow

    (@samperrow)

    @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.

    Thread Starter fabriziomazzei

    (@fabriziomazzei)

    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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Check on my settings’ is closed to new replies.