X : how to safely remove CSS from the head

X was released two years ago, and has been quite a success. Really easy to use and set up, the Cornerstone plugin is my favourite page builder today, and it’s a real pleasure to work with this awesome theme. But there is one major point that need to be fixed if you want tremendous results on search engine like Google : remove the inline CSS in the head. Discover why, and how you can do it in a few minutes…

Why is it important to have a clean and light source code ?

Crawler bots are like spiders : they use backlink to discover new pages. When the crawl a page, they have to read all the source code, and then analyse it to “understand” what your page is talking about. Some HTML tag are very important, like meta-title, or H1 (so choose your words carefully) : they will determine how you can get ranked among your competitors.

Those bots have limited “time credit” to crawl your website. So, in a nutshell, you want them to crawl as many page as possible during that time. And that’s why it’s important to have short loading and rendering time on your website. So you might want to strip all un-necessary code on your page every time you can, to make your WP install as fast as possible.

X’s customizer is great, it’s an awesome tool to create a design for your entire website, in a few minutes. But there is one major issue with it : it put a LOT of CSS code in the head of ALL YOUR PAGES. And that’s bad for SEO. You want all that code in a style.css file, in your child-theme. This is common best practice for any website, it’s not specific to X or wordpress.

Is it hard to clean the head ?

Hell, no it’s not ! The following video will show you how to do it, with two simple copy-past, on your style.css file and your functions.php file, in your child theme (be sure to set it, it takes only a few seconds). You can download your child theme by clicking here.

What do I need to clean up my theme ?

You need a FTP client, like Filezilla, and a note pad like notepad++. On the video, you can see I’m working on a local install of X, but I’m applying the fix to the very same file that you’ll find on your webhost. Before doing anything, just make sure that you have backups, in case something goes wrong (very unlikely, but better safe than sorry).

What results will I get ?

Before moving the CSS to a style.css file, the head was 13 964 character long. After, it’s only 4 581 character. So, yeah, much much lighter. It only remove a few kb from your page, so it doesn’t improve your loading time very much, but your text-to-code ratio will get better ! And that can be a significant boost to your ranking on search engine.

OK, here we go !

You can get all the code you need in the video, but you can also find detailed instructions (with code ready to paste), or download the ready-to-use functions.php file by unlocking section beneath.

Get all your CSS to a child theme style.css file

This is the hard one. Once your main design is done, just copy-paste all your X-generated-css to a style.css file (in your child-theme). To do that, use a web browser like chrome or Firefox. The firebug extension for Firefox makes it easier, so don’t hesitate to install that great plugin.

Make a right-click on your page, and select “inspect element” or “inspect” depending on the tool you’re using. Go in the head section of your source code and search for<styleid=”x-generated-css“type=”text/css“> line.

Click on the box to open the element, and copy all the inline-css. ALL OF IT, till the </style> tag (do not copy it btw). You’ll see that it’s a pretty long bit of code right here 🙂

Once you’ve copied all the code, just paste it in you style.css file, in your child theme folder 🙂

Okay, that was the hard part of the tutorial 🙂

Edit your functions.php file

Now let’s remove the function from the head : just open your functions.php file from your child-theme folder, and add the following code :

And that’s it ! Now if you refresh your page, you’ll see that the appearance is the same, but the head section of your source code is now really lighter 🙂 If you have to change your design in the customizer, you’ll have to comment (with //) every line of the function we created, otherwise the change will not be visible. And don’t forget to copy/paste again the css in your child theme style.css after that… If you have any trouble replicating the tutorial, just let a comment, and I’ll see what I can do 😉