I noticed that, as of recently, every time I scroll down/up a page on Desktop using the mouse roller (perfoming a smooth scroll) and then try to go back up/down, the page drags me back to the original point, thus interfering with navigation. What might cause this? I've cleared the cache but the problem persists.
I also wanted to know why lazy load seems to also affect the images included in the initial viewport (e.g. the header image). This is something you can especially notice on mobile navigation. They don't start loading until you scroll down.
Thank you for your assistance, but since the Desktop version now behaves as though smooth scroll is disabled, I just deactivated the whole thing as it just didn't make sense at this point.
What about the second issue I explained in the original post?
If you want to load the image immediately, please go to Appearance → Customize → Speed Optimization → General & Lazyload: turn off the "Delay all images loading in the first screen to optimize LCP value" option.
So my largest contenful paint is normally my website logo, so I thought lazy loading it could increase the LCP value. The issue is that turning off the option you indicated disables lazy loading for every image above the fold, resulting in a worse LCP score and my LCP becoming the thumbnail of my latest featured article.
Is there a way to disable lazy loading for a specific image (the logo?). I would like to test it to see if I get good LCP and FCP values. As of now, the best I can get on mobile is over 3 seconds for LCP and 2,5 for FCP which is too high.
Hi, thank you but I'm moving my website to a new hosting company so that's not the Wordpress installation I'm working on. What did you exactly do? I could replicate it in my new website.
Hi, I had already set up all the speed optimization options myself. The only thing I noticed you did was enabling the Google Fonts optimizations. The reason I disabled them is because I self host my fonts instead of retrieving them from Google, because of both privacy concerns and speed.
I noticed that keeping those options on added a link to Google Fonts in the head section even though I don't use it. That forces me to include it in the privacy policy unjustifiably. I wonder why it's so difficult to get rid of it and why it still affects the page speed score so much.
All fonts I use (except the FontAwesome icons, but they come from a different source) are definitely hosted and successfully retrieved locally (I used Soledad's "Custom fonts" section)
1. Go to Appearance → Customize → General → GDPR Policy, and enable the "Remove all default fonts loaded by the theme from local hosting" option.
2. Delaying all web fonts is crucial for achieving the maximum score and passing Google's Core Web Vitals. You should also delay all analytics JavaScript code and ads JavaScript in the JavaScripts Optimization panel.
that option too was already enabled, yet I can still see a couple requests to Google Fonts, some for Roboto (which happens to be my body font) and some others for Open Sans (which I haven't used in years). I don't know what they're used for, since the Roboto that's displayed on the website is locally retrieved (as you can see in the picture).
Hi, thank you for your help. The remaining calls to Google Fonts are from either Disqus or adv banners, which means we're done on that matter as I don't have any control over those.
I've got one last issue. I needed to place a billboard adv banner right under the header and before anything else underneath. Since the theme doesn't have a configurable spot in that exact place in Customize, I edited the php code of the header type I use (header5.php) by pasting the banner code in the last line. This worked, but there's a visual problem where something seems to shift the banner downward, causing it to overlap the breadcrumb section, as you can see in the attached picture.
Hi, I tried adding that but it didn't work. I noticed though it's the header's margin-bottom that pushes the banner down, so I thought reducing it could fix the issue (currently it's 60px). I can see through Inspect that the value is determined by a variable which I couldn't find among the options in Customize. I even tried using this custom CSS code but it didn't function either:
#header {
margin-bottom: 30px;
}
Not even trying to force it with !important works. How can I change that value? Thanks
Hello and good evening,
I noticed that, as of recently, every time I scroll down/up a page on Desktop using the mouse roller (perfoming a smooth scroll) and then try to go back up/down, the page drags me back to the original point, thus interfering with navigation. What might cause this? I've cleared the cache but the problem persists.
I also wanted to know why lazy load seems to also affect the images included in the initial viewport (e.g. the header image). This is something you can especially notice on mobile navigation. They don't start loading until you scroll down.
Could you help me? Thanks in advance.
Hi,
For this case, please send me your WordPress admin account in a PRIVATE reply.
I'll log in and try to help you check this problem.
Regards,
PenciDesign.
Hi,
I can't be logged in because of the wrong password.
Regards,
PenciDesign.
Hi,
I've fixed this issue by changing the smooth scroll JS library.
Please clear all the browser caches and check again.
Regards,
PenciDesign.
Thank you for your assistance, but since the Desktop version now behaves as though smooth scroll is disabled, I just deactivated the whole thing as it just didn't make sense at this point.
What about the second issue I explained in the original post?
Hi,
If you want to load the image immediately, please go to Appearance → Customize → Speed Optimization → General & Lazyload: turn off the "Delay all images loading in the first screen to optimize LCP value" option.
Regards,
PenciDesign.
So my largest contenful paint is normally my website logo, so I thought lazy loading it could increase the LCP value. The issue is that turning off the option you indicated disables lazy loading for every image above the fold, resulting in a worse LCP score and my LCP becoming the thumbnail of my latest featured article.
Is there a way to disable lazy loading for a specific image (the logo?). I would like to test it to see if I get good LCP and FCP values. As of now, the best I can get on mobile is over 3 seconds for LCP and 2,5 for FCP which is too high.
Hi,
Please go to Appearance → Customize → Logo & Header → Logo: enter the logo size to the following option fields:
- Set A Max Width for Logo,
- Set A Height for Logo Image
Regards,
PenciDesign.
Hi, I set the logo height for both Desktop and mobile versions (max-width was already set) but the LCP and FCP values stayed the same.
Hi,
I've configured your site, here is the latest result:
Hi, thank you but I'm moving my website to a new hosting company so that's not the Wordpress installation I'm working on. What did you exactly do? I could replicate it in my new website.
Hi,
I've just followed the documentation guide at this link to optimize your site: https://soledad.pencidesign.net/soledad-document/#speed-optimization
Regards,
PenciDesign.
Hi, I had already set up all the speed optimization options myself. The only thing I noticed you did was enabling the Google Fonts optimizations. The reason I disabled them is because I self host my fonts instead of retrieving them from Google, because of both privacy concerns and speed.
I noticed that keeping those options on added a link to Google Fonts in the head section even though I don't use it. That forces me to include it in the privacy policy unjustifiably. I wonder why it's so difficult to get rid of it and why it still affects the page speed score so much.
All fonts I use (except the FontAwesome icons, but they come from a different source) are definitely hosted and successfully retrieved locally (I used Soledad's "Custom fonts" section)
Hi,
1. Go to Appearance → Customize → General → GDPR Policy, and enable the "Remove all default fonts loaded by the theme from local hosting" option.
2. Delaying all web fonts is crucial for achieving the maximum score and passing Google's Core Web Vitals. You should also delay all analytics JavaScript code and ads JavaScript in the JavaScripts Optimization panel.
Regards,
PenciDesign.
Hi,
that option too was already enabled, yet I can still see a couple requests to Google Fonts, some for Roboto (which happens to be my body font) and some others for Open Sans (which I haven't used in years). I don't know what they're used for, since the Roboto that's displayed on the website is locally retrieved (as you can see in the picture).
Attached files: Cattura2.PNG
Cattura.PNG
Hi,
I've completed disabling all the Google Fonts by going to dashboard → Elementor → Settings → Advanced → Google Fonts: select "Disable".
Regards,
PenciDesign.
Hi, thank you for your help. The remaining calls to Google Fonts are from either Disqus or adv banners, which means we're done on that matter as I don't have any control over those.
I've got one last issue. I needed to place a billboard adv banner right under the header and before anything else underneath. Since the theme doesn't have a configurable spot in that exact place in Customize, I edited the php code of the header type I use (header5.php) by pasting the banner code in the last line. This worked, but there's a visual problem where something seems to shift the banner downward, causing it to overlap the breadcrumb section, as you can see in the attached picture.
How can I fix it?
Attached files: Cattura.PNG
Hi,
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
Regards,
PenciDesign.
Hi, I tried adding that but it didn't work. I noticed though it's the header's margin-bottom that pushes the banner down, so I thought reducing it could fix the issue (currently it's 60px). I can see through Inspect that the value is determined by a variable which I couldn't find among the options in Customize. I even tried using this custom CSS code but it didn't function either:
Not even trying to force it with !important works. How can I change that value? Thanks
Attached files: Cattura.PNG
Hi,
If the code I sent doesn't work, it means the CSS solution can't resolve this issue.
You need to exclude the Google Ads auto-insert from this area.
Regards,
PenciDesign.