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?
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
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?
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
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.