• Resolved rnmsfus

    (@rnmsfus)


    Hello,
    After selecting this option [Combine and link in head (fonts load fast but are render-blocking), includes display:swap.] in the “Google Fonts” option, I am still bringing in this file [/css?family=…(fonts.googleapis.com)], which is loading pages and pages full of this extra font-face and CSS text type (Note I only use the “Montserrat” font in my site.):

    /* latin-ext */
    @font-face {
      font-family: 'Abril Fatface';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/abrilfatface/v12/zOL64pLDlL1D99S8g8PtiKchq-lmjdLh.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    QUESTION: is there a better option or further fine-tuning to not bring all the extra above font-face and CSS text that I don’t believe we need to bring in?

    Thank you.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    Autoptimize only acts on Google Font stylesheets that are linked in the HTML rnmsfus, this is likely part of a CSS file of your theme or a plugin and is not explicitly “seen” by AO.

    If you can share your site’s URL I can (a) confirm the above assumption is correct and (b) tell you where that code is being added, based on that we can see what the next step should be?

    frank

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    any news rnmsfus ?

    Thread Starter rnmsfus

    (@rnmsfus)

    My apologies, I thought I had responded directly to the email that the link came in. It appears that I may only be able to reply here within WordPress. My site URL is: standfastus.com. As you stated in your earlier reply, please try to see if you can confirm the issue (in the top post) and to see what possible solutions we may be able to implement.
    Thank you.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, they’re added by the coblocks plugin, which actually adds a whole bunch of fonts, maybe check if the plugin has options you can tweak to load less fonts?

    Thread Starter rnmsfus

    (@rnmsfus)

    Hello, I checked with WordPress Support after your above reply. The “CoBlocks” plugin (they stated) “is a third-party plugin but one that we install automatically to provide some extra blocks in the Gutenberg/block editor.” “Gutenberg is the standard WordPress Editor and is what is built-in to WordPress. The Gutenberg standalone plugin just adds the latest features and options to what’s already built-in to WordPress. Activating that plugin has its benefits but it’s okay to leave it deactivated.” “…it adds extra font, color, and animation controls in addition to extra blocks.” — based on these replies, I deactivated “Coblocks”, check my site pages (all were okay), and left deactivated. I did see some increase in the Mobile score optimization using PageSpeed Insights (from original 44, then 56 after installing Autoptimization, then to 66 after deactivating Coblocks). The Desktop score was originally 88, saw 89, and after today’s Coblocks deactivation it is at 86. Not sure what other specific changes to either Mobile or Desktop I can effectively make using the Page Builder Framework Theme in a WordPress.com environment. Please share any other options or guidance you may have to further improve the Mobile and Desktop scores.

    Thank you very much for your time and assistance.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    well, according to pagespeed insights your main issue is render-blocking resources (CSS & JS-files). For the CSS ones have a look at the “eliminate render-blocking CSS” option (while making sure there is “above the fold CSS” supplied, see the FAQ on how/ where to generate that).

    For the JS ones you’ll have to play around with the JS optimization settings (switching to “don’t aggregate but defer” + “also defer inline JS” + removing all exclusions -except if things break- might do the trick.

    hope this helps,
    frank

    Thread Starter rnmsfus

    (@rnmsfus)

    Hello,
    Thank you for your further research and updated refinements to try. Here are my updates and observations seen based on your refinements to try:

    For the “CSS ones have a look at the “eliminate render-blocking CSS” option (while making sure there is “above the fold CSS” supplied, see the FAQ on how/ where to generate that)” >> When I tried this: it caused random page flashes and the Testimonial page boxes not to show up [so I turned off and did not move further forward with adding the “above the fold CSS”]. Wasn’t sure the benefit was worth the risk of other above the fold additions/impacts. Your thoughts and further guidance?

    For the “JS optimization settings (switching to “don’t aggregate but defer” + “also defer inline JS” + removing all exclusions” >> When I tried this, I did not see any site impacts, but right after the changes (and please note when I saved the initial JS changes in Autoptimize I used the “Save and Clear Cache” option not just the “Save” option), but then ran the PageSpeed Insights and saw my Mobile score go to “25” — Note: my original score was 44, then 56 after installing Autoptimization, then to 66 after deactivating Coblocks), so when I saw the “25” I removed the check marks from this JS recommendation and saw the scored go back almost to the prior score. Not sure for your JS recommendations if something further should be refined or should I not implement them due to the negative impact to the PageSpeed Insights score.Your thoughts and further guidance?

    Thank you for your time and assistance.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    re. “eliminate render-blocking CSS”; if you don’t have “above the fold CSS” you indeed will see page flashes, it is the “above the fold CSS” that should ensure the page is rendered correctly before the full CSS is loaded.

    re. JS: if you clear cache your site will be slower as all caches will need to be rebuilt, so you might need to give it some time to rebuild. if after that scores remain lower, you should compare the different KPI’s and recommendations to see what exactly caused the overall score (which in itself does not really mean anything) go down.

    Thread Starter rnmsfus

    (@rnmsfus)

    Hello.
    Thank you for your additional insight

    On 9/16/2021 morning:
    I did not turn back on the “eliminate render-blocking CSS” — the PageSpeed Insights really was not flagging CSS as a significant issue any longer. Note: Earlier I had entered the above the fold CSS based on identification of this code using another tool. Entering the above the fold just caused too much erratic/randomized behavior that is was not worth the additional time and money spent to further investigate and refine. Using just the basic Autoptimize “Optimize CSS Code” and deactivating the “Coblocks” (non used plugin) made improvements in the CSS area.

    Based on your above latest reply and understanding, For JS: I turned back on the “don’t aggregate but defer” + “also defer inline JS” + removing all exclusions” and this time Saved (WITHOUT clearing the Cache). After confirming no impacts to the site and then running PageSpeed Insights after turning back on your recommended JS improvements, my Mobile score went to 12 from 66/65 and my Desktop score went to 80 from 87/88. Based on turning the JS back on and evaluating the sizable decrease in score, I turned it back off again, retested in PageSpeed Insights and Mobile went back to 61 and Desktop to 88. When reading the PageSpeed Insights for the 12 Mobile score, it brings back many Autoptimize statements with numerical values which appears that Autoptimize may be negatively impacting the JS score (once I turned it back on to test).

    I am going to stop any further adjustments since I believe we have exhausted our efforts and tests with the current Autoptimize plugin. In Summary we have seen a nice increase in Mobile (lowest 44 > highest 65) and Desktop (lowest 86 > highest 90). Not near the closest to 100 as possible I had been seeking, but an improvement.

    Hopefully my replies will help you in your internal efforts to continue to improve and optimize the Autoptimize plugin. I will mark this ticket as resolved for now.

    Thank you again for all your time, research, and recommendations.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    thank you for the extensive feedback, always interesting!

    feel free to leave a review of the plugin and support here! 🙂

    frank

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Extra: /css?family=…(fonts.googleapis.com)’ is closed to new replies.