[Resolved] Toolset style loads after the page html

[Author]

Posts

[Vito Peleg]

I am trying to: Design the product page

Link to a page where the issue can be seen: hidden link

I expected to see: First CSS loads and then HTML

Instead, I got: First HTML loads and then CSS

I have attached an image of the screen how it looks when the page is been loaded.

Once you load the page you will notice that page first loads with the skeleton, only then the CSS is applied to the page and which then brings the page to normal view. Page looks broken in the initial moments of loading due to this. Can you guys please help with this?

[Waqar]

Hi Vito,

Thank you for contacting us and I'll be happy to assist.

The way web browsers render a web page, the markup (HTML) is loaded first, whereas the connected resources like stylesheets, script files and images can take a little longer time to load. As those resources are being loaded, visitors can see a flash of unstyled markup.

Its duration can vary based on the factors like the overall size and order of those resources and also the speed of visitors device and the internet.

To keep this flash of unstyled content to a minimum, you can activate and set up a cache and code optimization plugin which minifies and then inlines the CSS and JS code in the header (so they're loaded as the part of the markup and not as separate files).

Following post reviews some of the popular performance plugins:
hidden link

Another option is to add some custom jQuery function that hides page content until it is fully loaded.
( ref: https://stackoverflow.com/questions/9734021/jquery-hide-content-until-loaded )

I hope this helps! Please let us know if you need any further assistance.

[Vito Peleg]

Hi Waqar,

Thanks for your response.

So based on our findings we can see that the CSS written on the template is appended to the page at the bottom (the one which starts with this comment /* Content Template: Template for Products - start */)

Is it possible to load this CSS at the start of the page or in the header of the page? do you have any hooks that can make it possible for developers to include this CSS at the beginning of the page?

Thanks

[Waqar]

Hi Vito,

Thanks for writing back.

I'm afraid, there is no builtin hook available to load the custom CSS code from a template into the header.

But as an alternative, you can load your custom CSS code using "wp_head" hook, which will load it in the head tag.

For examples and reference, you can visit:
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_head

Additionally, you can also include relevant WordPress conditional tag(s), to load that custom CSS code, only on the selected pages (and not across the entire website):
https://codex.wordpress.org/Conditional_Tags

Please let us know if there's anything else we can help you with.

regards,
Waqar