Search code examples
performancewordpressrenderingfouc

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


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?


Solution

  • 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.