Archived topic
Layout shift on mobile devices (Marketer theme)
7 replies · Started by shoukugp on June 9, 2021
Hi,
I have customized my H1 font size (post title) from default to small size.
Also, I have changed the Mobile sticky menu bar color to blue color from the default black and also reduced the menu height from default to small size.
Once I visit my website from a mobile device first appearance is showing the theme default style and after a couple of seconds, it's changing to my customized font size and style. how to fix this CLS issue.
Hi there,
try disabling the Optimized CSS Delivery option in WP Rocket - unless you can manually configure the critical CSS it is one of the most common causes of CLS.
The issue has been gone by unchecking the option Optimized CSS Delivery. but the speed is the matter
Earlier i was using a free filemag theme for my website. I have bought generatepress theme for the faster and less coded theme as per the new Google website speed requirement. The earlier theme I was getting speed score of more than 56 on mobile devices, after I have switched to generatepress, my speed score for mobile is 35. I am using WP-rocket for my website. I have all my optimization on the wp-rocket side. I am using the fastest hosting also.
If you run a Page Speed Insight report it will detail the main loading issues.
One thing of note is the amount of 3rd party Javascript for adverts, fonts and facebook.
All of these things are not theme related.
Some optional advice:
Fonts
- remove the unused Variants:
https://docs.generatepress.com/article/google-font-variants/
- look to server the fonts locally
https://docs.generatepress.com/article/adding-local-fonts/
Adverts
- defer the loading of advert ( and other 3rd party scripts ) using a plugin like Flying Scripts.
Facebook
- determine what plugin is making the facebook connect - if its the social sharing plugin then i would suggest looking at a lighter plugin. Something like Shared Counts by Bill Erikson.
Those are the major negatives i can see.
Thank you,
I have added a new share plugin, worked
I have removed unused variation of fonts, getting good speed
Regarding the Adsense code, I can't do anything, if it defers the loading of advert cause the dropping the earnings
Still some font loading issue, Which option is best, copy the font to local server?
For fonts the most performant method is to set all the Fonts to Inherit - this won't load any google fonts, it will just use the local devices fonts. But if you need google fonts, then yes follow the local fonts documentation.
Defering the loading of scripts - simply means that the advert scripts aren't loaded until after the initial render of the page, they still get loaded ... so not sure how that would effect them.... but i am no expert here :)
Thank you
You're welcome
