Highly optimized and clean responsive design theme gets me 84 on Google PageSpeed mobile, but Speed Index (4.7s) and LCP (3.6s) is not good.
I can’t get find a way to reduce the unused (theme?) CSS/Javascript (1.2s) so I’m trying to optimize these:
1) Defer offscreen images 0.35s on <div class=”td-menu-background” style=”visibility:hidden”>
This is the background menu/search image on the mobile viewport:
Lazy Load settings/plugins for some reason won’t defer it.
How to defer it?
2) Efficiently encode images 0.25s on <div class=”tdb-featured-image-bg”>
The featured image is shows full desktop size on the mobile viewport:
On a desktop I show the 1920×0 version, retina quality for devices that support it.
The mobile viewport is showing the same big size, not a smaller version.
How to fix this? Maintaining separate mobile/stale AMP templates is not cost-effective/productive for most of us.
Hi,
For the mobile background color, what I can suggest is to clear the background color from the theme panel – https://i.imgur.com/tbHbRIu.png and try to use a background – image – https://i.imgur.com/DIKZcmT.png or an alternative will be to set the background image using a custom css that will be add in the body content to be used only after the content is loaded.
I understand, not really for the moment flex blocks do not allow selecting a different image size for the mobile version, this problem can be solved using a mobile page template for the single element and change only the essential elements, such as the thumbs – https://prnt.sc/hpBWwXASLeF9 – https://i.imgur.com/9qRH9JA.png convert header and footer too – https://prnt.sc/ASiv_cYqALhq – https://i.imgur.com/UXw4W7e.png
Thank you!
Thanks Calin.
On the hamburger menu background: Is there a way that we can add a class to that DIV that holds the background image on the mobile hamburger menu/search menu? I don’t think we can set a defer value using CSS and having to write JS to find it will likely incur even bigger penalties in PSI.
On the images on viewports such as mobile, being too big:
Do you mean loading the original template as a mobile template and swapping out those values in Flex Blocks? I’m try to avoid separate mobile templates, as it easily doubles my work and it becomes ever harder to maintain two versions.
Hopefully in the future a dropdown per viewport inside the theme will allow us to choose which size to load. đ
Kudos on the theme, btw. It’s stellar!
Hello Chris!
The only way to add a class to that div, which holds the menu background, is by modifying the plugin files.
Yes, the only way to achieve what you need is by adopting the solution you just described above. Regarding your query, I will add it to our improvement list.
Thank you!
