Does WP complete the rendering of the page on server side before showing the page?

Question

The static html pages of my project has javascript dynamically modified content and that causes FOUC (Flicker of Unstyled Content). So I made the content invisible by default and toggle display to visible after DOM ready.

The static html pages rendered very fast on my local drive, so the time gap between invisible and visible states is not obvious.

However, after the project has been integrated with WordPress and put onto remote server, the page rendering becomes a bit slower, so the time gap becomes a bit more obvious.

When I click on a hyperlink to request viewing a page, I would like WordPress to complete the redering of the page on server side and then show me the page. Waiting 1 or 2 seconds is okay. Can WP do that?

Answer 1

I would guess that the issue is your CSS not loading instantly over the network, so that there's a moment where your HTML is rendered, but your CSS hasn't loaded.

(It could also be dynamic Javascript content -- I can't speak to that without knowing more about your Wordpress installation and configuration)

Preloading your CSS isn't something Wordpress can do itself, although you should notice that after the first page load, the browser is caching your CSS and it's quicker.

If you're really concerned about it, look up some optimization techniques, such as using a fast CDN for the static stuff such as your CSS. The Yahoo! performance tips are pretty good for all website performance questions, for instance.

Answer 2

DOM Ready fires after the entire HTML has been parsed by the browser. That is a lot more than just the base HTML file though, it needs to load, parse and execute all of the css and javascript it encounters as it goes through the HTML before it will fire the event (and in the case of WP that is usually quite a bit).

WP will tend to also be very slow to generate the HTML itself if it isn't on fast hosting (putting it on a shared hosting account is basically just begging for it to be slow). A page caching plugin like W3TC or supercache will help with the generating of the HTML but my bet is you have a lot more front-end activity gumming things up as well.

Grab a copy of "High Performance Websites" and then do some testing of the page on something like WebPagetest which will let you see the external resources (and capture video of the page loading). The book is pretty critical for any front-end engineer to understand and goes into detail on front-end performance issues.