Home Tutorial Wordpress tuts X : how to safely remove CSS from the head
X : how to safely remove CSS from the head

X : how to safely remove CSS from the head

2

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.

wp-speed

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.

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 😉

GDM-Pixel / Charles Annoni

Les commentaires peuvent donner lieu à un lien dofollow si thématique similaire et ancre clean :)

Comment(2)

  1. Bonjour Charles,
    Cette vidéo correspond exactement à ma requête. Cacher le script CSS dans la section head.
    Où puis-je avoir une copie des fonctions du fichier functions.php du child theme?
    Merci d’avance,

    PS: Je suis freelance web développeur sur Tokyo. Je suis fan de wordpress.

LEAVE YOUR COMMENT

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