While optimizing my website for faster load speeds, I decided to Inline above-the-fold CSS to reduce render blocking and I have seen tremendous speed improvements.
However this has caused an issue with the dock panel. Usually the dock panel is transparent and the icons in the dock panel appear to float above the content on the page. Now the dock panel has a white background and acts as a block on it’s own. In other words the content rows stop at the beginning of the dock panel and do not go all the way to the edge of the screen.
I didn’t alter any theme files at all, I simply inlined some of the essential css files using a plugin (the actual style.css theme files were not altered at all. I selected some essential lines of code and copied and pasted them from the style.css and inlined them directly into the head section to reduce render blocking)
Please note: The moment you adjust the browser window (make it small then large again), the dock panel becomes transparent and the content shows behind it as it should. I think this means the CSS to make the dock panel show correctly is not actually missing.
Also this is not a problem with small view ports or small devices. Page loads on small browser windows, mobile devices, or tablets show a proper dock panel. And lastly, the white dock panel area shows on pages with the dock panel disabled too.
I have tried to specify the follwoing in my custom CSS:
background-color: transparent !important;
But it doesn’t seem to work.
I am contacting support because this has been a bit difficult to trouble shoot. When I try to use the Chrome browser to inspect the dock panel area, the screen size changes and the dock panel acts normal. Additionally, this problem doesn’t occur all the time. It sometimes does and other times doesn’t.
For other Acoda forum members interested in improving website speed. I have implemented some great caching settings on my website using W3 total cache but the speed bump when inlining some essential css in the header instead of letting all of it be loaded from linked files is fantastic. I used Auto optimize plugin to do this. In order to find out which CSS is the essential CSS, use this website: https://jonassebastianohlsson.com/criticalpathcssgenerator/
My apologies for the delay.
Are you still experiencing the issues? I tried to check the site and the header/page seems to be loading without any issues just like the screenshot you sent.
If the issue still persists, please elaborate further so we can look into it.
I have come to conclude the problem might be with the plugin or my implementation of the plugin. Because I am now only inlining my custom css and it is still causing the dock panel to misbehave every now and then. It is a bit of a pity because as a long standing You theme user, I can definitely say this plugin when used correctly has one of the most impressive improvements I have ever seen on load speed.
It requires some work from the user in order to implement it properly on a website but it is very good. If anyone is not ready to go to great lengths to implement the plugin, you can simply start by removing the custom css that applies to most pages from the You theme folder or WordPress folder and putting it in the plugin and you will immediately see speed improvements if you had a good amount of custom css.
Perhaps someone from the Acoda team or anyone would be interested in this short explanation of how inlining css works: https://jonassebastianohlsson.com/criticalpathcssgenerator/#what-is
Interresting video about optimizing with Autoptimize.
We’ve actually seen Autoptimze used by some of our customers and we’ve also used it on our test site before without any issues.
Have you tried to disable your plugins aside from Autoptimize just to check if any of them is triggering the issue?
Also, have you coordinated with your hosting provider if they have a recommended setting for W3TC? You have Minification enabled on W3TC while Autoptimize also does the same thing, which may also trigger such issues.
I use hostgator for hosting and yes they do have recommended w3tc settings which I use. I have never had a problem with w3tc before.
If you have any advice or instructions for me, I would kindly appreciate it since I haven’t been able to get very far on my own regarding this.
I will get back to you on this as I don’t particularly have it on my own test site but I saw it used on the old demo for the theme which the developer set up.
You must be logged in to reply to this topic.