Home / Forums / You Theme Support / Dock Panel Section

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts

  • awesome
    Participant

    Hey there,

    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:
    .dock-panels {
    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.


    awesome
    Participant
    This reply has been marked as private.

    awesome
    Participant

    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/


    awesome
    Participant
    This reply has been marked as private.

    Hi @norsam

    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.

    Regards,


    awesome
    Participant

    Try navigating the website a little using the chrome browser. I noticed the problem doesn’t seem to occur in windows explorer.


    awesome
    Participant

    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.
    https://youtu.be/k56E_7SFQoE

    Hi @norsam

    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.

    Regards,


    awesome
    Participant

    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.

    I have disabled minify and the dock panel problem still persists. But I am very interested in knowing how exactly you implemented autoptimize on your website. Did you remove some css from the css files and place it in autoptimize? Or did you copy some css from the files and then paste in autoptimize? The javascript settings with autoptimize was a complete disaster so I just gave up on that.

    And what about javascript? I have tried to defer and combine You theme javascript before but I had really bad results. I did it the proper way ie: Find all javascript links by inspecting page source code > copy contents of those files > paste in one file > specify the combined file and so on… but that made things reaaally slow. But on other websites that I did it on (they did not use You theme) it made them faster.

    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.

    Hi @norsam

    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.

    Regards,


    awesome
    Participant

    I really appreciate this. Thank you very much.


    awesome
    Participant

    Hey guys!

    Just kindly reminding you about the autoptimize settings issue. Especially how to use the javascript settings with the You theme. And also how you implemented it on your own site before.

    Thanks!

    Hi @norsam

    My apologies for the delay. I will make another followup on this to the developer.

    Regards,


    awesome
    Participant

    Hey Edcel,

    Do you have any updates from the developer about how to properly set autoptimize javascript settings?

    Hi @norsam

    Unfortunately, there’s been no update yet. The developer is heads down on finishing the major update on Dynamix. I will try to ask for an update on this. Again, my apologies for the delay.

    Regards,

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.