Fix FOUC completely.


Well, I can see it is a restaurant but what am I doing here standing in the middle of this restaurant? Finally, the manager came and he took me to his room and told me about that bizarre issue which they were coping with. He showed me their WordPress website for that restaurant and he said, after installing a cache plugin, their website became really fast but it is creating a big issue on page load. I then looked at that website and I saw their website was suffering from FOUC (Flash of Unstyled Content), and very badly. How does it look like, I mean that FOUC? On page load, page breaks badly for a second and after that page is reconstructed again and each time you go to a new post or to a page or to anywhere, FOUC appears and goes. Not any nice feeling. I knew CSS was creating this. Actually, it is very possible to fix this issue completely and permanently with a few simple things. How did I fix it there? I will be reading these texts below, to know once again what I did there to fix it.

First of all, I deactivated their cache plugin and other plugins that they had for optimizations or compressions and it was the most important thing to do. After that, I visited this website, “https://www.sitelocity.com/critical-path-css-generator“, and there I typed the address of their website and clicked “GENERATE CRITICAL PATH CSS”. After a while, I got the CSS ready, and I then downloaded that “MINIFIED COMBINED CSS” file.  Right above that “MINIFIED COMBINED CSS” button, they suggested some java-scripts, and I simply avoided those scripts. So, now I will see those above steps first in these images below and after understanding it clearly, I will proceed.

Step-1

Here I typed the address of the website (this is the address of that website which you are going to fix) and I clicked “GENERATE CRITICAL PATH CSS”.

Final step

After CSS is ready, I clicked “MINIFIED COMBINED CSS FILE”. I downloaded it to the hard drive.

I understood the process above clearly. I found, that downloaded CSS file on the hard drive and I opened it and copied all the texts/CSS codes that were in that file, (select all-> copy). I opened his “header.php” and just below <head> I typed the following.


<style>

Here I pasted all the codes that I copied from that downloaded CSS file.

</style>

<link rel='preload' href='https://novicecamp.com/wp-content/themes/yourtheme/style.css' as='style' onload="this.onload=null;this.rel='stylesheet'">


<noscript><link rel="stylesheet" href="https://novicecamp.com/wp-content/themes/yourtheme/style.css"></noscript>

Note-1: This <style> must be right below <head> before any other texts/codes. It means, it must be the first line after the <head>.

 

Note-2: Please check in the theme folder (cPanel->File manager->public_html/wp-content/themes->[here you will see your theme folder] if this is “style.css” or if there is a “style.css” file or it has got a CSS file with a different name. It is the main stylesheet file. If it is found style1.css for example, then please add style1.css in those lines above, instead of style.css. 

 

Note-3: After </style> you are seeing somewhere it is written https://novicecamp.com, please add the name of your website there instead of https://novicecamp.com and you are also seeing (yourtheme), please add the name of your parent theme instead of (yourtheme) there. How to find it? cPanel->File manager->public_html/wp-content/themes->(here you will see your theme folder). If you are using a child theme, still you have to add the name of the parent theme.

I saved the “header.php” file after adding the lines above, activated those cache/optimization/compression plugins, cleared/deleted/purged all cache (I saw all cache/optimization plugins have options to clear all cache) and I then cleared the browser cache from all-time. 

I saw that FOUC didn’t exist anywhere. And their website became a lot faster and performance was surprisingly smooth.

Almost all WordPress users are the victims of this FOUC when they install a cache plugin and they are forced to remove that cache plugin and they mostly think, that is maybe a faulty plugin or it has bugs. But with those simple steps above, you could easily fix that issue permanently and instantly.

Note-4: Actually, this technique can be applied to any websites to fix FOUC completely, all you need is to change the path and add the name of your main stylesheet (CSS) file here (for example, I said, “path/main.css” below, please change this “main.css” to the one that you have),

<style>
COMBINED CSS codes which we downloaded from that website.
</style>
<link rel='preload' href='path/main.css' as='style' onload="this.onload=null;this.rel='stylesheet'">


<noscript><link rel="stylesheet" href="path/main.css"></noscript>

Now thinking, have I really understood all these that I talked about above?

My food has arrived and meanwhile, I want you to fix FOUC for your website. All the best.

Leave a Reply

Your email address will not be published. Required fields are marked *