For some reason, Insights shows the screenshot above in its analysis of the Desktop version of my blog https://www.fotov60.com, which is incorrect and the elements appear out of place, causing the Performance score to drop. As you can see in the screenshot below, the website loads correctly when loaded in the PC browser, so I don’t understand what leads Insights to display it in that incorrect way and score it so low. Could someone help me find the issue?
I loaded it up on my PC browser and I noticed that your second version shows for a split second and then switches to the first version. Do you have some kind of browser platform sniffing in the theme? It feels like it is trying to incorrect detect mobile/desktop of the user
No, it’s just CSS with Media Queries in it to adapt it to smaller screen sizes like those of mobile devices. You can see it in the CSS sheet https://www.fotov60.com/wp-content/themes/fotov60/style.css?ver=4.4 without optimization by the Litespeedcache plugin. Until a few days ago, it was detecting it correctly, but today I noticed the issue. I’m not sure if it’s some issue in the code of the sheet.
well I am seeing your lightspeed plugin with its own stylesheet and in it has things like the definition below…
.desktopSidebar {
display: none !important;
}
Which is obviously hiding your sidebar on desktop… soo turn off lightspeed for a minute. Does the problem correct itself?
I’m not sure where you found that rule, but Litespeedcache has an option to load the page without the optimization in the code it performs, by visiting the website through this modified link https://www.fotov60.com/?LSCWP_CTRL=before_optm I have also tried it in Insights and the problem persists.
I have tried disabling the plugin and it still doesn’t work.
Anyway, if there is the rule you mention, how is it that it loads normally in the browser?
Well it is right there in developer tools. Below is a screenshot…
The element circled on the left is your sidebar, the area circled on the right is the styles applied to the desktop sidebar. Notice that it comes from a CSS stylesheet that has a bunch of random letters and numbers. This stylesheet is one generated by lightspeed. Here is the full link…
https://www.fotov60.com/wp-content/litespeed/css/5dcb158dce52540584d3bae115f63f3c.css?ver=bf25a
So obviously your lightspeed plugin is doing things you are not fully aware of it doing.
Do you read this?
I have done several tests in the CSS configuration menu of the Litespeedcache plugin and it seems that with the settings in the screenshot, the problem disappears. https://pagespeed.web.dev/analysis/https-www-fotov60-com/4e005xtm1v?form_factor=mobile
The consequence of now having Insights detect it correctly and getting a score of 100 for all Desktop sections (except a mild warning about Preload the largest contentful paint image), is that in the mobile version, I get a red warning for accessibility ‘Background and foreground colors do not have an adequate contrast ratio’ and another one for best practices ‘Display images with low resolution’ that with the previous settings from this menu did not appear and have turned a score of 100 in both sections into two 96s. Interestingly, Minify CSS is disabled. Could these warnings be fixed or is it too much work for the benefit it would bring?
But only works with principal domain https://www.fotov60.com, when analyze a post like https://www.fotov60.com/2024/01/25/hasselblad-907x-cfv-100c/ the problem persists. Any idea?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
