How to fix -Touch Target Sizes and Spacing

Hi urishtaujjain, testing with https://pagespeed.web.dev/ and lighthouse have some small differences but shouldn’t be that big, now seems to be better and everything is on green – https://we.tl/t-Dlw8jD2OzA

Ok, I checked on homepage, post, author and category and the menu elements seems to be moving on posts when the sticky sidebar is used. I think this is what you referred. Now this can be a result from css optimizations, what I will recommend is to check if this is happening when you are logged in, if is happening then there is a different problem, and not related to css optimizations.
Also, just for a test you can try to disable the sticky header -https://i.imgur.com/leWpFEG.png, clear cache and create a new one an see if the score is better.

File – https://we.tl/t-sUejsK1mFn

I think that you checked when the cache was clear and was not fully create a new one – https://we.tl/t-Kh5eW4rldM I made some tests and now the results are better, but can not be constant will increase and decrease base on cache lever at that moment on website.

Hi urishtaujjain,
I the cache plugin you are using set to create a different cache for mobile version?
For the elements that are changing the dimension it is possible to be first display a dimension and after that to load the new one (this can be also a custom css set in theme panel in css for mobile and it should be load faster in head of using the media tags, so if you have)

@media only screen and (max-width: 600px) {

}

Thank you!

Hi,
Ok, so FlyingPress provide separate cache for mobile is you are using this cache, this is recommended by the FlyingPress if you are not using the responsive version- https://docs.flyingpress.com/en/article/generate-separate-cache-for-mobile-p7a3vn/

Now in case that the problem is still persisting, please try this custom css (and remove ethe one prom previous reply)

@media (max-width: 767px) {
    .header-search-wrap .td-icon-search {
        font-size: 27px;
        padding-top: 8px;
    }
    #td-top-mobile-toggle i {
        font-size: 26px;
        line-height: 55px;
        padding-left: 13px;
        display: inline-table;
        vertical-align: middle;                                              
        color: #efefef;
    }
    .td-main-menu-logo img {
        width: auto;
    }  
}

The code needs to be set between style /style tags – https://we.tl/t-IxgVEt38Tr

• This reply was modified 1 year by Calin.

Hi,
I’m glad for your desktop results 😀
For mobile remove only this code = https://we.tl/t-g2OAbfKBuH
I forgot, do you use CDN (Cloudflare)? this will help you.
For mobile on Largest Contentful Paint element it’s on first image but this is loading with a fetchpriority=”low” and it should be high and most of the situation seems to be related to this first image that is loading on mobile.
Thanks

Thant code should be set in the Newsmag > theme panel > Analytics between style tags as in this image – https://we.tl/t-IxgVEt38Tr

Hello,
I checked the images, now my question is when you set the step 2 and step 3 the score is good, the fact that the images are not loading in google pagespeed should not be a problem as long those are loading when the user is interacting with the website ?(or this is the problem that the images are no longer loading even if the user is interacting with the website).
Also, did you tried to exclude all except tagdiv-theme.min.js ?
Thank you!