Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #3688041
Issues with smooth scroll and header image
Open

Comments

  •  1
    SimsWorld started the conversation

    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.

  •  2,540
    PenciDesign replied

    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.



  •   SimsWorld replied privately
  •  2,540
    PenciDesign replied

    Hi,

    I can't be logged in because of the wrong password.

    Regards,
    PenciDesign.


  •   SimsWorld replied privately
  •  2,540
    PenciDesign replied

    Hi,

    I've fixed this issue by changing the smooth scroll JS library.

    Please clear all the browser caches and check again.

    Regards,
    PenciDesign.


  •  1
    SimsWorld replied

    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?

  •  2,540
    PenciDesign replied

    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.


  •  1
    SimsWorld replied

    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.

  •  2,540
    PenciDesign replied

    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.


  •  1
    SimsWorld replied

    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.

  •  2,540
    PenciDesign replied

    Hi,

    I've configured your site, here is the latest result:

    5049860694.png
    https://pagespeed.web.dev/analysis/https-www-simsworld-it/577h3188zy?form_factor=mobile

    Please clear all the browser caches and check again.


    Regards,
    PenciDesign.


  •  1
    SimsWorld replied

    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.

  •  2,540
    PenciDesign replied

    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.


  •  1
    SimsWorld replied

    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)

  •  2,540
    PenciDesign replied

    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.


  •  1
    SimsWorld replied

    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

  •  2,540
    PenciDesign replied

    Hi,

    I've completed disabling all the Google Fonts by going to dashboard → Elementor → Settings → Advanced → Google Fonts: select "Disable".

    Regards,
    PenciDesign.


  •  1
    SimsWorld replied

    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

  •  2,540
    PenciDesign replied

    Hi,

    Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    .container.penci-breadcrumb {
      overflow: hidden;
    }

    Regards,
    PenciDesign.



  •  1
    SimsWorld replied

    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

    Attached files:  Cattura.PNG

  •  2,540
    PenciDesign replied

    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.