Hi Calin,
Environment:
1. “Lazy Video on Mobile” in theme panel is enabled, as required for speed.
2. “Also aggregate inline CSS?” in Autoptimize settings is enabled, as required for speed, per your guide.
Result/Issue: The video thumbnail is not properly loaded. It is loaded in a full image width – much wide than the view port. Screenshot
When “Also aggregate inline CSS” is disabled, it loads fine. However, disabling this option causes other speed issues, including large dom size.
– How to use “Lazy Video on Mobile” and “Also aggregate inline CSS?” both enabled, so it works for speed as advertised?
Thanks.
Hello @Alex!
Maybe you can find a plugin for that, for example: https://wordpress.org/plugins/rocket-lazy-load/ and Autoptimize for the second issue.
Please note that page speed or optimization is not covered by the support team: https://forum.tagdiv.com/newspaper-theme-support/
Thank you!
Hi,
No.
Did you even try to replicate the issue?
It looks like another issue/bug with the theme that I discovered. It has nothing to do with the pagespeed support.
Forget Autoptimize. It is the standard features that come with the theme are not working.
It also happens when AGGREGATE INLINE CSS is enabled in Theme panel.
Theme panel >> Block settings >> Inline Css >> AGGREGATE INLINE CSS enabled .
Hi,
Are you able to replicate the issue?
Hello @alex!
Our developers will investigate this issue and provide a fix if it is something that we need to change in the theme, then the fixes will appear in the changelog. https://tagdiv.com/newspaper/
Optional: Try to change the theme and see if this problem is still there or not.
Thank you!
Hi Bettina,
Try to change the theme?
The issue seems to be with the newspaper theme’s features: Aggregate inline css and lazy video on mobile.
You didn’t try to replicate the issue, did you?
Can you please get Calin to review this thread? It was addressed to him.
From experience: Generally after a few messages with other members from your team with zero result, he finally takes a look and provides a fairly comprehensive answer and acknowledges whether there is in fact issue with the theme or not.
Thanks.
Hi Alex, I made some tests with the mentioned settings and for me seems to be ok, but I think that there can be some different settings that you have.
I tested with those plugins – https://i.imgur.com/lMX0Lrt.png and those options – https://i.imgur.com/pQmKhQE.png – https://i.imgur.com/6VXxdHl.png – https://i.imgur.com/RGilxjQ.png – https://i.imgur.com/KoeFLAI.png the results – https://i.imgur.com/fn279sG.png – https://i.imgur.com/2tAHXsf.png do you have the same settings? If yes, and you agree I will love to take a look at your website and see what caused the mentioned problem, just let me know!
Thank you!
Hi @Calin,
Thank you for checking.
Part 1:
Yes, that’s the plugins and settings we use, except for optimise HTML code, as it is not included in your guide.
But it looks like you missed to enable Theme panel > Post Settings > Enable Video on Mobile? That is where the issue is happening.
Looks like you confused it with Block Settings > Use loading animation image. This can be disabled when Ewww is used.
Part 2:
I think I figured out what is wrong with the theme:
When “Aggregate inline css” is enabled either via theme panel or via Autoptimise settings – the element “img” losses its styling, which is:
img
position: absolute;
width: 100%;
top: 0;
margin: auto;
This img is applied here: img src=” http://img.youtube.com/vi/video-id/maxresdefault.jpg ” alt=”VIDEO TITLE”
As a result, when “width: 100%” is missing, the video thumbnail is displayed full width of an image file (1280 px wide for example) instead of 100% of a view port width.
To solve this for lazy video on mobile to work properly, “img” needs to be excluded by being placed in the filed “Exclude CSS from Autoptimize:”
Can you replicate all this?
Part 3:
– Now, the task to solve, is how to exclude “img” only for lazy video on mobile, such as youtube, while keeping it aggregated for every other img element on the page?
Thank you.
Hi Alex, indeed I confused the options. I just made some tests using your latest indications and indeed it’s like you mentioned.
I checked the code and I saw that the problem is that the css that is making “AGGREGATE INLINE CSS” is from inside an iframe and this will no longer apply on it because the css can’t apply on elements inside an iframe.
For the theme situation what can be done is to try to inject the css in iframe using a javascript or jquery but this is not easy. I will make some research and try to come back with a solution.
Thank you!
Hi Calin,
Thank you for checking.
1. So placing img as an exclusion in “Exclude CSS from Autoptimize” is not the right way to fix it?
2. So I was right, there was in fact an issue.
Since it is not the first one (there were so many), how can we make it that you will be the first one to look at my reports (when the thread is addressed to you), without others jumping in and wasting my time with bla bla just to put “some” response to be the last one to comment, so the thread can be deemed as “resolved”?
As previously mentioned, there have been many instances like this, and then you come in, figure it and confirm the reported issue.
3. Will be waiting for solution.
Thank you.
Hello,
1. I added some exceptions in the “Exclude CSS from Autoptimize” but until now the problem is the same, so for the moment if you are using featured video the option for aggregate inline CSS should not be used.
2. I am sorry for this situation, I and my colleagues are trying to do our best to help, but unforeseen situations also occur.
When a specific support colleague is mentioned (you did the same @Calin) he will try to answer, other colleagues will answer if he is busy with other tasks at the time.
3. I identified some file that needs to be checked by the developer wp-content/plugins/td-composer/legacy/common/wp_booster/td_resources_optimize.php but I do not know for the moment how to fix it, in my option I think that the code should check if is a video post type and if is to skip minify that part. I tried to add back the css using some JavaScript, but is seems that is not working correctly.
Have a nice day!
Hi @Calin,
1. Thank you for spotting that file. I will check, maybe I’ll figure something as well. Otherwise I will wait for your/developer’s solution.
2. From now on, every new issue with the theme that I find, I will be staring in a new thread “Only for Calin”. So they shouldn’t respond.
Otherwise, it is a waste of my time, repeating the same thing to those who don’t seem to care and just try to get rid of “another annoying customer”. It is a very common thing in many businesses these days, unfortunately.
I obviously don’t get paid by tagDiv despite evidently helping this company testing and getting its product better.
– Or, we can communicate by email.
3. Additionally, I think there is another issue with lazy video on mobile. Any YouTube video url has the same alt, which reads “Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition”. Here is a screenshot of html. It is hardcoded in this file: td-composer/legacy/common/wp_booster/td_video_support.php
Thank you.
Hi,
1. I also asked the developer that was assigned that he had time to take a look over that task, but until now I didn’t got an answer, but since is assigned it should be done for the next update.
2. Thank you for continuing to helping us to improve the theme!
Yes, you can start a report topic as you mentioned, also you can contact us via email at contact@tagdiv.com
3. Indeed, the alt is html hardcoded in the theme files – https://i.imgur.com/MzSRT5C.png normally this should take the video title and add it to the image alt, but the only think that I have in mine is that maybe the developer made it like this to have only a few requests. I added this one on our list and the developer assigned for checking the lazy video option will check this task.
Thank you for your time!
