Archived topic
Logo missing after installing jetppack boost & adding font-display:swap
45 replies · Started by Liis on July 17, 2022
Ok, so by disabling the critical CSS your CLS has now plummeted.
I kinda knew, as i have yet to see an automatic critical CSS generator that doesn't lead to CLS :)
Before we look at the LCP issue.
You may want to consider loading the Google fonts locally:
https://docs.generatepress.com/article/adding-local-fonts/
It can make a huge performance difference.
I was trying to do that now, I get error from media library for two of the files:
"sanchez-v13-latin-regular.ttf
Sorry, you are not allowed to upload this file type.
sanchez-v13-latin-italic.ttf
Sorry, you are not allowed to upload this file type."
I added the provided code with code snippets and the other files went up
It may be a server level permissions issue.
But you don't need them, just remove their URLs from the @font-face CSS. I only load the woff and woff2 now - as those will cover all modern browsers.
I probably have to do that through child theme right? and change the fonts there directly and not in customizer & additional CSS
I probably have to do that through child theme right? and change the fonts there directly and not in customizer & additional CSS
You don't have to use the child theme to do so, if you follow the instruction(there's an video as well), it should be pretty straightforward.
The last step I can't seem to figure out where hte fonts are selected in customizer
https://pasteboard.co/LcLMKzf6TcRb.jpg
compared to the screen in video
Ah you are still using the old typography system, you need to switch to the dynamic system:
https://docs.generatepress.com/article/switching-to-dynamic-typography/
I updated to dynamic topography.
Since I had sanchez already as a font choice, and now uploaded the files to media gallery, do I need to choose it again from "choose font"? Or should I just toggle of "google font" from the pre-existing font? And if I try to add Sanchez again i get an error saying: "Font already selected"
You need to un-toggle the Google font option so that the system uses the local font file instead of requesting the font from Google.
I have now uploaded and un-toggled both of my fonts
Fonts are looking good, I've re-run the test, and it turns out a good result:
https://www.webpagetest.org/vitals.php?test=220718_BiDcAQ_FFQ&run=1
Thank you! Im getting significant LCP in page speed insights and even in webpagetest.org
https://pasteboard.co/InLZOMjoICZx.jpg
https://www.webpagetest.org/result/220719_BiDc26_5BD/?view=webvitals
Hi Liis,
You can try using a CDN so that resources are delivered faster.
For CSS and JS, we’ve had one customer saying she used this and it helped: https://restorebin.com/free-cdn-css-js/
For images, one plugin recommended is Cloudinary.
You can try test other plugins as well.
Hope this helps!
Originally I came here because one of the things that page speed insights complains is deferring JS and inlining critical CSS, and the latter especially led to very high CSL. David recommended to toggle of jetpack CSS to see if the CSL was caused by that and it was, and a good recommendation to host the fonts.
I wonder if David had other ideas how to proceed without jetpack boost?
I can still see a Google Font request being made on the home page. Do you want the bad news .... its been added in the block editor to MANY ( around 63 to be precise ) individual blocks - mostly Container and Headline blocks.
Currently the only stable method to change that is to edit each and every block, and in its typography settings uncheck the Google font option.
.... alternatively rebuild the home page using the new GB Query Loop block ?
