How to Fix Render Blocking CSS without any Plugin

  • by
  • SEO

To fix render-blocking CSS for your website, Plugins are handy for WordPress and just seem like a blessing for a newbie blogger. It can save lots of time and quicken the development process. But it has a wrong side though. A plugin can slow down your website and fall a significant impact on website loading and visitor’s flow if it’s not optimized correctly. According to the new algorithm of Google, each site should be faster and easier to load for all devices. And it’s a crucial ranking factor too.

Fix Render Blocking CSS
How to fix render blocking CSS

So, what you will do when you get a critical score from Google Page Speed Insight. I was doing a lot of research and find out some secret weapons to pass this barrier without any Plugin. And my website also gets a super speed after applying them. Here, I am going to share my experience so that you can adopt these techniques for your site too.

How to fix render-blocking CSS:

The name of this rule seems awkward to hear, but before the experiment with the technical process, let’s know what render-blocking JavaScript and CSS are. The word “render” means loading or execute. So render-blocking JavaScript and CSS meaning is the piece of code that prolongs the website loading for their rules and design. So here we are going to discuss how can we fix this type of error.

CSS or Cascading Style Sheet is a render-blocking object by default because when we set CSS rule for the website, the browser first downloads this file to present the HTML. And then showing the HTML file. And in the meantime, it also stopped showing any HTML elements until the full CSS files are rendering. To avoid this, you can set lazy load parameters by JavaScript and even fix the critical CSS into the header section.

The solution for Render Blocking CSS:

You can solve the render-blocking problem for CSS using a lot of ways. But here I am going to share the method’s that I use for my website.

Method-1:

CSS is usually implementing in three ways, and they are Internal, External, and inline. If you have a small CSS file, you can easily use the internal method. To use this method you can minify your CSS File’s and place it before the </head> section. For example:

<html>
<head>
<style>
Your CSS Script will be pasted here…
</style>
<body>
Your content will go here…
</body>
</html>

If your CSS File is too big, then you can’t paste the whole document in the head section. You can only paste the critical parts of your CSS style here and then set the lazy load parameter for the rest styles. So let’s see how to find the critical part from a CSS file. The critical part of CSS is the basic design of a website that needs to load fast for rendering a website’s content. For example, when your web page rendered in a small device make sure which part of content needs to present first.

If your website is a content-based website or blog just find-out the basic style that can represent your website content, paragraph, and menu and set them in the header section without any other additional style and media queries. For example, if your website’s normal style is:

h1{margin:0 padding : 2 px;}
ol {color: green;}
li{color: pink; background: purple}
li:hover{color: purple}
li:first-child{color: green; background-color:yellow;}
@media (max-width: 512px){li:first-child{ color: pink; background-color: lime;}}
li:last-child{color:pink; background color: blue}

Then you need to figure out what is the critical CSS style. Let’s cut the hover and media styles and keep the rest once for every selector. So our critical CSS will be most like below:

h1{padding : 2 px;}
ol {color: green ;}
li{color: pink; background: purple}
li:first-child{color: (RGB velue) of pink; background-color: lime;}

The main thing you need to keep in mind is style and feel of the design while coding the critical path of CSS.

Don’t forget to set the media query for the different types of devices in your external style sheet and keep your hand off for the rest. Make sure that you don’t repeat the same style in the header and external stylesheet both. Now it is time to lazy loading the rest of the external CSS files.

Method-2:

For a mobile device, you can use a sub-domain and build a mobile website. Then you can redirect the primary domain to this subdomain. So, when someone visits your site from mobile devices, it will be automatically redirected to your sub-domain. This type of customization is recommended for big websites.

Method-3:

If you have a content-rich website or blog you can use the media rules for the critical part of your website to avoid JavaScript. For example, you can set the media rule for the header logo, menu, thumbnails, image, and articles, and even for your search bar. Keep in mind about every element which you want to present in a small device. If you want to hide any rule just set it on display: none. For example:

#main-menu: display none;

But the main menu is an essential element’s for a website. So, you can nest it with another div class sector under the div id for menu and define it by a media query. For example:

@media (max-width: 512px)
#main-menu{display: none}
#main-menu .mob-menu {the design for mobile menu will described here}

You can also make your website responsive by jQuery or meta tag, but in this case, CSS media rule is highly recommended to bypass the render-blocking issues. You can also use the standalone JavaScript if possible to make a responsive design.

But, whatever you implement for your website, always keep the primary objectives to make your site even faster than before,” I think, then you will be able to find out the best solution for your website.

Need to fix render-blocking CSS without any plugin? Contact us with full details of your project. We can make your website faster than any other website in your professional field.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.