Remove unused CSS

Antonio Dimitrovski — Sat, 19 Oct 2019 11:41:28 +0000

Did you know that when you load a website you load less than 2% of the whole CSS for that view?

In the time where speed is ranking factor and every website has some sort of SEO services knowing how to make critical CSS is a must. A way to be in-front of your competition is by removing unused CSS and speed up your website a lot.

Majority of web today is driven by WordPress.

The easiest way to remove unused CSS for WordPress is by using plugins, the best are:

WPRocket
Autoptimize

With WPRocket is easier to create critical CSS with few clicks and it's the best by far.

Autoptimize don't have an automatic mode for creating "inline and defer CSS" as they call it. There is paid add-on that should do that but isn't working as they are planning right now.

Both of this plugins are explained and configured (with pictures) in this great tutorial how to remove unused CSS WordPress.

The hard work you need to do for removing unused CSS for WordPress isn't cost efficient because you will lose a lot of time creating critical CSS for each page.

Great website that will help us creating critical CSS Sitelocity for manual insertion.
If you go manual way however this is an short example how to make changes only for 'about' page:

<?php
if ( is_page('about')) { ?>

"Style HTML TAG HERE"
/* Critical CSS Facebook as example /
._3_s0._3_s0{border:0;display:-moz-box;height:44px;min-width:600px;position:relative;text-align:left;top:0;z-index:301}._3_s0._1toe{height:0;overflow:hidden}._3_s0 ._608m{margin:0 auto;max-width:981px;min-width:100px;padding:0 12px;width:100%}._3_s0 ._tb6{-moz-box-align:center;height:44px}._3_s0 ._608n{display:-moz-box}._3_s0 ._3bcp{overflow:visible}._3bcs{-moz-box-flex:1}._3bct{position:relative}._3bct::before{content:'';display:block;height:18px;left:-1px;position:absolute;top:4px;width:1px}._3_s0 ._3bcv{font:Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;line-height:24px}._3_s0 ._3bcy{line-height:24px}._3_s0 ._3bcz{border-radius:4px;padding:1px 4px}._3_s1._3_s0{background-color:#29487d;color:#fff}._3_s1 ._3bct::before{background:rgba(0,0,0,.3)}._3_s1 ._3_s2{background:#29487d;border-color:#29487d}._3_s1 ._3bcz{background:#fff;color:#000}@media screen and (max-width:980px){._3bct{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}._3bct::before{display:none}}form{margin:0;padding:0}label{color:#606770;font-weight:600;vertical-align:middle}label input{font-weight:400}.inputtext{border:1px solid #ccd0d5;border-radius:0;margin:0;padding:3px}select{border:1px solid #ccd0d5;padding:2px}input,select{background-color:#fff;color:#1c1e21}.inputtext{padding-bottom:4px}html{touch-action:manipulation}body{background:#fff;color:#1c1e21;direction:ltr;line-height:1.34;margin:0;padding:0;unicode-bidi:embed}body,button,input,label,select,td{font-family:Helvetica,Arial,sans-serif;font-size:12px}h1,h2{color:#1c1e21;font-size:13px;font-weight:600;margin:0;padding:0}h1{font-size:14px}p{margin:1em 0}a{color:#385898;text-decoration:none}button{margin:0}img{border:0}td{text-align:left}ul{list-style-type:none;margin:0;padding:0}.clearfix:after{clear:both;content:'.';display:block;font-size:0;height:0;line-height:0;visibility:hidden}.clearfix{zoom:1}#facebook .hidden_elem{display:none!important}#facebook .accessible_elem{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}::-moz-placeholder,*:-moz-placeholder{color:#606770}.no_js *::-moz-placeholder,.no_js *:-moz-placeholder{color:#000}body{overflow-y:scroll}#content{margin:0;outline:none;padding:0;width:auto}.inlineBlock{display:-moz-inline-box;display:inline-block;zoom:1}#facebook .-kb div{font-family:inherit}#facebook .-kb span{font-family:inherit}#facebook .-kb a{font-family:inherit}#facebook .-kb h1,#facebook .-kb h2,#facebook .-kb p{font-family:inherit}#facebook .-kb button,#facebook .-kb input,#facebook .-kb label,#facebook .-kb select,#facebook .-kb td{font-family:inherit}._6j{border:1px solid;border-radius:5px;color:#fff;display:inline-block;letter-spacing:1px;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.5)}._6wk{padding:20px 30px}._6wl{background:linear-gradient(#67ae55,#578843);background-color:#69a74e;box-shadow:inset 0 1px 1px #a4e388;border-color:#3b6e22 #3b6e22 #2c5115}._58mq select{font-size:13px;height:30px;padding:5px}._5k_4{display:inline-block}._5k_5{position:relative}._58ms{display:inline-block;max-width:140px;vertical-align:middle}._58ms{font-size:11px;max-width:150px}._58mq ._5k_5 ._5k_6,._58mq ._5k_5 ._5k_7{top:4px}._58mw{line-height:16px;padding-top:10px}._58mw h2{padding-bottom:3px}._58mw .captcha_input{margin:5px 0}._58mx{margin-right:50px}._58my{float:left;font-size:12px;font-weight:700;line-height:14px;margin-top:6px}._58mz{background-image:url(/rsrc.php/v3/yl/r/O6NksE4uoLC.png);background-repeat:no-repeat;background-size:auto;background-position:0 -61px;float:left;height:17px;margin-top:5px;width:12px}#captcha_response{padding:3px}._1ixn ._1pc{display:none;margin-top:-10px}.5dbb{position:relative}._5dbb ._5dbc,._5dbb ._5dbd{display:none;position:absolute;right:9px;top:9px}._5dbb ._1pc{display:none}.58mf{margin:0 auto 0 auto;padding-bottom:30px}._58mf ._6o{font-size:19px}._2_68{color:#1d2129;font-size:18px;font-weight:400}._2_68._7-1r{color:#90949c;font-size:16px;font-weight:700}._58mi{min-width:194px;padding:7px 20px;text-align:center}._58mk{border-top:1px solid #dddfe2;color:#666;font-size:13px;font-weight:700;margin-top:10px;padding-top:15px}._58ml{margin-left:10px;position:relative;top:3px}._58mm{float:left}._58mn{background:#ffebe8;border:1px solid #dd3c10;line-height:15px;margin:12px 0 12px 0;overflow:hidden;text-align:center}._58mo{padding:7px 3px}._a4y{display:inline-block;position:relative}._5k_2{border-radius:4px;border-width:1px;display:inline-block;padding:5px 0 5px 4px}._5k_2:first-child{margin-right:4px}._5k_3{display:inline-block}._7-1q{margin:8px 0}._7-16{height:30px;margin:4px 0;width:100%}._83kf{color:#606770}._17ie{position:relative}._58mt{color:#1d2129;font-size:18px;font-weight:400;line-height:18px;padding:0 10px 0 3px}._58mf ._58mg{border-color:#bdc7d8;border-radius:5px;margin:0;width:377px}._58mf ._58mg{font-size:18px;padding:8px 10px}._58mh{width:399px}._58mh ._58mg{width:172px}._58mu{width:399px}._58mu ._58mv{color:#777;font-size:11px;width:316px}._6{display:inline-block;vertical-align:top}._74{width:399px}._76{width:565px}._7d{margin-right:15.999px!important}._6n{font-size:23px;line-height:120%}._6o{font-size:19px;line-height:126%}._6p{font-size:17px;line-height:22px}._6q{font-size:15px;line-height:20px}._6s{color:#333}._6t{color:#666}._6v{font-weight:700}._mf{font-weight:400}.sp_DsFT2tc46le{background-image:url(/rsrc.php/v3/yl/r/O6NksE4uoLC.png);background-size:auto;background-repeat:no-repeat;display:inline-block;height:21px;width:21px}.sp_DsFT2tc46le.sx_00ef12{width:16px;height:16px;background-position:0 -44px}.sp_DsFT2tc46le.sx_31382b{background-position:0 0}.sp_DsFT2tc46le.sx_39e5c3{background-position:0 -22px}#globalContainer{margin:0 auto;position:relative;zoom:1}.fb_content{min-height:640px;padding-bottom:20px}._li._li._li{overflow:initial}._2agf{word-wrap:normal}._2agf._4o_4{display:-moz-inline-box}._55pe{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}.uiBoxGray{background-color:#f2f2f2;border:1px solid #ccc}.uiBoxYellow{background-color:#fff9d7;border:1px solid #e2c822}.noborder{border:none}i.img{-ms-high-contrast-adjust:none}i.img u{clip:rect(1px,1px,1px,1px);height:1px;left:auto;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.lfloat{float:left}.rfloat{float:right}.pam{padding:10px}.pts{padding-top:5px}.pbm{padding-bottom:10px}.pll{padding-left:20px}.pvl{padding-top:20px;padding-bottom:20px}.mtm{margin-top:10px}.mtl{margin-top:20px}.mrm{margin-right:10px}.mrl{margin-right:20px}.mbs{margin-bottom:5px}.mbm{margin-bottom:10px}.mbl{margin-bottom:20px}.mlm{margin-left:10px}.mvm{margin-top:10px;margin-bottom:10px}.mvl{margin-top:20px;margin-bottom:20px}.fsl{font-size:14px}.fwb{font-weight:600}.uiContextualLayerParent{position:relative}a._p{display:block}._4jy0{border:1px solid;border-radius:2px;-moz-box-sizing:content-box;font-size:12px;-moz-osx-font-smoothing:grayscale;font-weight:700;-moz-box-pack:center;padding:0 8px;position:relative;text-align:center;text-shadow:none;vertical-align:middle}._4jy0:before{content:'';display:inline-block;height:20px;vertical-align:middle}._4jy0 .img{bottom:1px;position:relative;vertical-align:middle}._517h{background-color:#f5f6f7;border-color:#ccd0d5;color:#4b4f56}._4jy1{color:#fff}._4jy1{background-color:#4267b2;border-color:#4267b2}._517i{height:18px;line-height:18px}._4jy3{line-height:22px}._6a{display:inline-block}._6b{vertical-align:middle}._5aj7{display:-moz-box}._5aj7 ._4bl7{float:none}._5aj7 ._4bl9{-moz-box-flex:1}._4bl7,._4bl9{word-wrap:break-word}._4bl9{overflow:hidden}._ohe{float:left}._ohf{float:right}._4ki>li{border-width:0 0 0 1px;display:inline-block}._509->li{vertical-align:top}.uiList>li:first-child{border-width:0}._4ki._703>li{padding-left:20px;padding-right:20px}._4ki._6-j>li{padding-left:10px;padding-right:10px}._4ki._6-i>li{padding-right:0}._4ki._6-h>li:first-child{padding-left:0}._4ki._6-h>li:last-child{padding-right:0}._42ft{display:inline-block;text-decoration:none;white-space:nowrap}._42ft::-moz-focus-inner{border:0;padding:0}._50f3{font-size:12px;line-height:16px}._3-8x{margin-top:8px}._3-90{margin-right:8px}._3-95{margin-bottom:8px}._3-99{margin-left:4px}._2ph-{padding:8px}._2pid{padding-top:8px}.sp_5No1PPPUBd0{background-image:url(/rsrc.php/v3/yY/r/dBf6ZkcDizi.png);background-size:auto;background-repeat:no-repeat;display:inline-block;height:20px;width:20px}.sp_5No1PPPUBd0.sx_64f0f3{width:9px;height:8px;background-position:-28px -900px}.selected .sp_5No1PPPUBd0.sx_64f0f3{background-position:-19px -900px}.sp_5No1PPPUBd0.sx_48e200{width:9px;height:8px;background-position:-38px -899px}.sp_lFwffOkkE26{background-image:url(/rsrc.php/v3/yY/r/HnbebxRXcYe.png);background-size:auto;background-repeat:no-repeat;display:inline-block;height:16px;width:16px}.sp_lFwffOkkE26.sx_dba3da{background-position:-238px -280px}.sp_lFwffOkkE26.sx_edd594{background-position:-255px -280px}.sp_lFwffOkkE26.sx_46e267{width:170px;height:34px;background-position:0 -245px}.sp_tyDKrVS4a5J{background-image:url(/rsrc.php/v3/yZ/r/Foyn-E9is6E.png);background-size:auto;background-repeat:no-repeat;display:inline-block;height:12px;width:12px}.sp_tyDKrVS4a5J.sx_409b10{background-position:0 -376px}.fbPageBanner{position:relative;z-index:301}@media (min-width:480px){.fbPageBannerInner{margin:auto;max-width:950px;min-width:920px}}._50dz{min-width:980px}#pageFooter{color:#737373;margin:0 auto;width:980px}#pageFooter a{text-decoration:none;white-space:nowrap}#pageFooter a:last-child{margin-right:0}#pageFooter .copyright{font-size:11px}#pageFooter .pageFooterLinkList{line-height:1.6;margin-left:-20px}#contentCurve{border-bottom:1px solid #dddfe2;font-size:1px;height:8px;margin-bottom:8px}.localeSelectorList{-moz-box-align:center;display:-moz-box}.menu_login_container table tr{vertical-align:top}.menu_login_container table tr td{padding:0 0 0 14px}.menu_login_container .html7magic{padding-bottom:4px}.menu_login_container .inputtext{border-color:#1d2a5b;margin:0;width:142px}.menu_login_container .login_form_label_field a{color:#9cb4d8;font-weight:400}.menu_login_container .login_form_label_field{padding-top:4px}.menu_login_container .html7magic label{color:#fff;font-weight:400;padding-left:1px}.menu_login_container #email{direction:ltr}.loggedout_menubar_container{height:82px;min-width:980px}.loggedout_menubar{margin:0 auto;padding-top:13px;width:980px}.loggedout_menubar .fb_logo{margin-top:17px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.loggedout_menubar i.fb_logo{background-image:url(/rsrc.php/v3/y4/r/gf6iHxsw8zm.png);background-position:0 0;background-size:100% 100%}}._53jh{background-color:#3b5998;background-image:linear-gradient(#4e69a2,#3b5998 50%);border-bottom:1px solid #133783;min-height:42px;position:relative;z-index:1}.uiButton{border-radius:2px;display:inline-block;font-size:12px;-moz-osx-font-smoothing:grayscale;font-weight:700;line-height:18px;padding:2px 6px;text-align:center;text-decoration:none;text-shadow:none;vertical-align:top;white-space:nowrap}.uiButton{background-color:#f5f6f7;border:1px solid #ccd0d5}.uiButton input{background:none;border:0;color:#4b4f56;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;line-height:18px;margin:0;padding:0;white-space:nowrap}.uiButton input::-moz-focus-inner{border:0;padding:0}.uiButtonConfirm{background-color:#4267b2;border-color:#29487d}.uiButtonConfirm input{color:#fff}._41ug{display:inline-block;padding-right:14px;position:relative}._41ug .img{position:absolute;top:1px;vertical-align:middle}"Closing style HTML TAG HERE"

<?php } ?>

This is the only CSS that Facebook need to load to "draw" their view.
Go to Facebook.com logged out right click view page source and take a look at the CSS files and you will see the difference.

Now as we created created critical CSS we need to load the whole CSS as non-render blocking after the full page load.
You can do that with JavaScript with the following code.

var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'PATH_TO_COMBINED_CSS_FILE';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);

Check the link above to see how to find the combined CSS fil.

DEV Community: Antonio Dimitrovski

Remove unused CSS