It’s painful when you see your website loading slow, though you have optimized your front-end and the server-side components using the relevant tools and practices. I know how that feels.
What could possibly be the reason, then?
Have you ever given any thought about fixing the render-blocking? Well, this blog will help you with certain useful tips to fix it.
Before jumping in, you need to understand it. Don’t you?.
In easy terms, (Eliminate–remove, Render–layout, design-display webpage, Blocking–stopping) i.e., Render blocking removal.
Every time the browser is loading your web page, the CSS and JS resources also wants to be loaded at first priority before the HTML does. It is default that, CSS is considered as render-blocking resource. Nothing will load until the CSS and JS file loads or parsed. Do you wish to see your page like that?. Heck NO.
Every single CSS and JS files will affect the load time of your page in a huge amount.
But, have you noticed the results in deep, when you put your website’s URL in the pagespeed insights?.
You will find a result section showing the score out of 100 and the exact following statements: (i) Possible Optimizations and (ii) Optimizations Found.
Also, your WordPress websites will be having themes and plugin that adds js and css files to the front-end of your websites. These scripts slows the site load time and also render block of the web page.
Here, Now fix the render blocking CSS
The bigger and the larger CSS files will delay the page load much effectively.
But, at the same time, would you like to see a content that hasn’t been styled? Heck NO.
So, you need some CSS files on the page to display an elegant look Above The Fold (ATF), keeping in mind that, this CSS shouldn’t impede the load time of the page.
Know what ATF is?. In a page, when loaded, the content which you are able to see without scrolling is said as Above The Fold (ATF). The content when you scroll and see, is said to be below the fold.
To discover the exact files that are presently blocking the rendering of your webpage, use the tool “Page Speed insight” developed by Google. This tool will list you the entire files that are blocking a specific page.
Are you aware, what your browser does at the time when your webpage is rendered?
Firstly, the HTML is analyzed and constructs the DOM – Document Object Model. Secondly, the CSS is analyzed and constructs the CSSOM – CSS Object Model. Both DOM and CSSOM are structural representations of HTML and CSS for the better understanding of the browser.
Then comes the render-tree construction, which is nothing but uniting DOM and CSSOM, that suggests and explains the browser about the part to be rendered and how it needs to be appeared and then lastly comes your website display.
Info: when you make an attempt to render a web page without fixing the render-blocking CSS files, the browser downloads all the CSS resources and displays it.
The Critical Rendering Path is nothing but displaying the files in a line, according to the priority it allocates. This happens before the actual display of the webpage by the browser.
Optimizing critical rendering path is very much recommended for the fastest delivery of the first render.
Every single file eliminated makes an impact in the web page speed.
When you consider eliminating render-blocking CSS, you might think as well think of certain parameters relating to the usage of lesser CSS files, (i) By Combining CSS files, (ii) By Inlining the CSS files
(i) By Combining CSS files
Before getting into this, you need to label your CSS, because once you do the labeling efficiently, you are helping to choose only the chosen CSS files and displays without any delay in rendering.
Info: There may be many little CSS files (due to the plugins and widgets), but there will be a main CSS file which is big. If you are into Adsense, then this blog will be a great deal for you.
How do I combine the CSS files?
All you got to do is a simple copy and a paste work.
If you have many CSS files being called, converge it into one CSS file by just copy pasting it in a new CSS file.Let’s assume that you have four CSS files,
You have to open the “CSS2” and copy all the contents in it and paste it into “CSS1”. In a similar fashion do the same for the rest of the CSS files. You will have one main CSS file which is “CSS1” having all the content of the rest of the three CSS files.
After that, make sure you remove the call for “CSS2”, “CSS3”, “CSS4” from your HTML. Now, you will have only one CSS file instead of four. Think the fast your webpage loads when four files got compressed into one.
Statement given by Ilya Grigorik,
“CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render”.
(ii) By Inlining the CSS files
Inline itself means inside-lining.
Put your CSS files in an HTML file.
When you do this, you are helping the browser by reducing the number of files to be downloaded before your webpage is displayed. Also, your browser downloads only the HTML file.
How do I Inline CSS files?
You need to do two things:
Copy the entire contents of the external CSS files and paste it in the Head section of your HTML file between the style tags. Make sure you use the right HTML style tags.
Lesser render blocking and quicker loading of your page takes place in this case, as you are not requesting your browser for an individual external file to load to view your CSS file and it saves many trips from the browser to the server.
Again, refer to the discussions we had in the render blocking CSS as well.
The browser has to build the DOM by analyzing the HTML files every time before it renders a webpage. In doing this, if it comes across any scripts, it stops and checks it and then proceeds with analyzing the HTML. This time duration relates directly to the page drag. You need to fix this.
You can identify your page loading issues by using PageSpeedInsight related to render block JS files.
How do I remove Render blocking JS?
There are three ways.
(i) By the use of Inline JS
(ii) Making JS Asynchronous
(iii) Defer loading of JS
If you are using jQuery before the initial render and below the fold, then there won’t be any necessity for it to load unless there is a cause.
But if you are using it above the fold, then it goes without saying that you aren’t going by the rules of the regulations and guidelines of what the pagespeed says. In this case, you will have to look in for the HTML file and change where the jQuery’s call is made.
(i) By the use of Inline JS
You should have a lean JS file. Render blocking scripts pushes the browser to halt until they are being downloaded and many round trips for rendering the same.
In the case you having a lean JS file, then you can inline the contents of the JS file in the HTML file and prevent the delay in the page display and quickens the initial render.
By doing this, you need to take care of the HTML file size too.
(ii) Making JS Asynchronous
Why do this? You might have known that, the JS by default stops building DOM and ends up by delaying the time duration for the initial render.
Try using the below script in your HTML,
<script async src=”my.js”>
The following takes place when you use it,
The Asynchronoused scripts are downloaded by the browser
During this process, the browser does not stop for analyzing and or any building of the DOM in the middle. Also, any other scripts needed by the site is not prevented by this process. Until this script is done downloading, the browser not rests for any other actions.
(iii) Defer loading of JS
In simple terms, you can separate the scripts which does not have any impact on your above your fold content, for the initial render and they may be deferred until after the first render or all the important part of the webpage is loaded. This way, resource contention can be reduced and for the performance enhancement.
Always have a concern about the WordPress themes and plugins you are installing, as they use CSS and JS which might be a challenge when it comes to render blocking removal.
Remember, if your webpage calls anything, then it seems to drag your load time.
jQuery forms a pretty good example in this case.
Based on the discussions, reducing the files and inlining them makes the file shrink and does the same work in a faster way which is what is needed for rendering.
Almost all the websites are facing the problem of rendering block. But the question is how to remove them. By following all the useful tips given above, you can easily boost up your load speed of your webpage, though you have done front-end optimization through ideal tools like pagespeed insights and SpeedBoost.
So, I believe you will find this blog useful.
I have suggested you from my experience and knowledge. In a similar fashion you might have come across several experiences which is worth.
Share your ideas and the tips you feel which we missed in the comment section.
When it comes to the ranking, the links earned by the website plays a major role. Back links can hurt or improve the website rank. There are lots of online resources for backlink building. But unfortunately, there are no proper guidelines for the backlink removal process. So I decided to prepare my own. I’ve spliced the guidelines into two sections. The first section talks about how to identify the backlinks which is really hurting you and the next section talks about what is the best way to kick the backlinks.
How to find Dark Links or Unnatural links or Toxic Links
We all desire to improvise the rank. However, the most important thing is, our effect towards improvising shouldn’t hurt the current rank at all. So deciding which links must be removed is the major challenge. The page rank, domain authority, relevancy, IP, Link title, traffic from the link, these factors can decide the links if it is a dark link.
Basically the site which got penalized by Google has PR of 0 or “N/A”. However, this factor alone shouldn’t be taken alone for removal. Please refer the exception section.
PR checker – http://www.prchecker.info/
The newly launched site of PR will start with “0”. So, please refer the relevancy section to decide.
2. Blacklisted IP Or Domain
Without any doubt if the backlink site is one of the blacklisted or the IP of domain blacklisted. We can straight away go ahead and remove this backlink.
- Google Banned blacklist checker
- IP Black list – http://whatismyipaddress.com/blacklist-check
- Domain black list check – https://www.ultratools.com/tools/spamDBLookupResult
Relevancy is one most important factor in deciding the dark links.
- Industry: If you serve IT industry and one of your backlinks from the article “How to make Hot Dog”. Then it should be removed immediately. However, attributes words like “Developed By”, “Designed By” Or “Powered By” are exceptional.
- Link title or “ALT” text: Any website can like your website with the attribute of “title” or “ALT” text. The text inside the attribute should be relevant to the linked page. For example, let us take this page http://www.askantech.com/ this page shouldn’t have the backlink with the non-relevant title or ALT like “wordpress development”. However, if you think the backlink is very genuine then you can talk to the webmaster to correct the ALT or title text.
- Traffic: How much traffic you get from the particular backlink is also matters even if it under your PR. You can leave this link on the other hand if the backlink exist quite long and doesn’t not providing nay traffic to your site. This can be removed to keep your backlinks clean.
- Domain Age and Number of Google Indexed pages: The older the domain age is good. The backlink can be removed if the particular site doesn’t indexed by Google.
Domain Age Checker – http://smallseotools.com/domain-age-checker/
Google Index Checker – Simple open google.com and search site: http:www.domainname.com. If you zero results the backlink can be removed immediately.
Example: Askan Technologies website has a backlink from this website http://1freelancers.com. However when i try to find the indexed pages on Google by searching site:http://1freelancers.com. I found zero results, so without doubt we can remove.
- Domain Authority: According to the official SEOmoz glossary, “Domain Authority represents SEOmoz’s best prediction about how a website will perform in search engine rankings” and it is calculated by “combining all of our other link metrics (linking root domains, number of total links, mozRank, mozTrust, etc.) into one single score.” In other words, domain authority is a measurement of a website’s backlinks.
DA Checker – https://moz.com/researchtools/ose/
You can check the DA of backlink and if it is under 20, it can be removed.
Examples of low DA links that could be natural:
- A link from a relevant, high quality website that is new and hasn’t yet built much authority.
- A link from a small niche website that’s tightly targeted to a specific geographic area or topic that is relevant to your website.
- A link from the personal website of an expert in your industry.
- A link from a small local website in your industry.
How to remove the backlinks without affecting your current rank
After finding the bad backlinks, submitting the links straightway to disavow tools is bad idea. Google strongly suggests that one must take manual action before submitting to disavow tool.
- Create a Google sheet with the below headlines
- Link From URL: URL where the link resides.
- Link to URL: The page (URL) on your website the link points to.
- Email contact: For the “Link From” website.
- First Link Removal Request: Insert date of removal request.
- Second Link Removal Request: Insert date of removal request (One week after first request).
- Third Link Removal Request: Insert date of removal request (One week after second request).
- Link Status: Live or removed.
- Start link removal request
Gather email ids of all the domain owners. You can use who.is for getting the contact details of domain owner.
Please refer the email template below or you can come with your own template.
- Update all your request detail in the google sheet as per the template referred in the point 1.
Don’t use your own domain to send emails. Though it provides more authentications, the webmaster can mark your emails as spam. In return, it hurts your domain name more.
Record the date of every link removal request sent. In some cases you will need to submit a web form in lieu of an email – remember to also record these form submission dates on the spreadsheet.
Record every link removal and remember to stop emailing webmasters after links are removed. After five days have passed, send a “second notice”, to those who failed to respond the first time.
Once again, record every link removed and stop emailing those webmasters. After five more days, send a “final” notice to any holdouts.
The last step is to wait five more days to allow responses to the third round of emails. Any links still remaining, after three removal requests, will be added to the “Disavow Links tool.”
Yes, this is a lot of work. Each minute is worth spending and if it is not done properly, this will ruin. I’ve tried my level best to put the things here. All said, this alone cannot be used for the process. I believe, we need to put lot of common sense in the process of removing the back links.