- This topic has 12 replies, 3 voices, and was last updated 4 months ago by Tom.
September 23, 2020 at 2:01 am #1454976Kumar
Hi GP team,
I am hoping this is the right forum for addressing GP3 theme & GP Premium Beta testing issues.
1. ) CLS issues on Mobile– 0.351
<button class=”menu-toggle” aria-controls=”mobile-menu” aria-expanded=”false”> – 0.0019
Open Search Bar
Its was “0” before the update.
September 23, 2020 at 3:16 am #1455076DavidStaffCustomer Support
looking at the network waterfall report – your logo is loading later then the content. Which is causing the layout shift in the mobile header, causing the mobile toggle to move to a new line.
I can’t see any lazyloaded being applied to that – which is generally the issue – however it is being coverted to a webp image which may be the issue.
The rest of the CLS issues are to do with content in the post – if you check the site in the developer browser tools, set the Network to Slow 3g and reload you will see the elements that are restyled after load.
This all seems to be related to how the optimizations are configured.September 23, 2020 at 3:55 am #1455137Kumar
Thanks for the prompt reply, David.
I have the code enabled for the hamburger issue as per the below support topic. Could this be the issue?
All my images are already converted to webp by shortpixel, so why would it convert at the point of loading?
KumarSeptember 23, 2020 at 4:52 am #1455189DavidStaffCustomer Support
That lazy load filter is working as the logo isn’t being lazy loaded – there is just a delay in getting the image. I am not sure how ShortPixel works, but one thing it will do is check for webp browser support – as on unsupported browsers its loading the PNG
Can you exclude the logo from short pixel?September 23, 2020 at 5:47 am #1455238Kumar
Appreciate your time on this, David
Yes, they have this feature on shortpixel, which I have added. and cleared cache at serverlevel and cloudflare but no luck.
Am I missing something? Any other solution to resolve this issue?
KumarSeptember 23, 2020 at 6:27 am #1455280DavidStaffCustomer SupportSeptember 23, 2020 at 6:31 am #1455284Kumar
This is already enabled code snippet plugin:
https://snipboard.io/NkcAfV.jpgSeptember 23, 2020 at 7:45 am #1455364DavidStaffCustomer Support
That should be working.
Try clearing any server level Page Caching.
If thats no the issue then something is up with how WP Rocket behaves. Not sure if you can disable and re-enable the option.September 23, 2020 at 8:14 am #1455571Kumar
Thank you. I have disabled the plugin (link in private box) and also cleared all cache but no change. Could it be a size issue? what is the ideal logo size for GP mobile theme?
KumarSeptember 23, 2020 at 8:19 am #1455578KumarSeptember 23, 2020 at 3:25 pm #1456114TomLead DeveloperLead Developer
I just ran lighthouse on the link you supplied above and the CLS is
The screenshot issue is because there isn’t much room between the logo and other items.
a) Use a different logo (an icon vs the whole logo)
b) Remove the mobile menu label
c) Reduce the mobile menu item width
Let us know 🙂September 24, 2020 at 4:07 am #1456710Kumar
Thanks Tom, its a pleasure. Love the amazing work you guys are doing on GP. I was using Divi prior to this – moving to GP was one of the best thing we did for our website!
We used option 3 and it fixed the issue. Yes, you’re right CLS is also fixed.
KumarSeptember 24, 2020 at 9:33 am #1457300
- You must be logged in to reply to this topic.