Slow website connectivity can turn-off the mood of the user and 40% of them may never wish to re-open your website until they have no alternatives. There are many factors responsible for the slow website loading. It maybe the possible that some of yours CSS and JavaScript are causing problem in rendering the HTML page.
Slow website not only turn off the user’s mood, but also of the Search Engines as Google. With time your website may disappear from the Google if it has poor user experience and slow connectivity issue. Google offers Speed Test Tool for the websites named Google Speed Insight. The Google Speed Insight helps you to determine the problems with your website and also the quality of user-experience. Google rates your website on the basis of server-response, types of devices supported by your website, cache, and a lot more factors.
The common reasons behind the slow loading of your website are:
- Extensive use of JavaScript and CSS
- Using multiple external CSS and JavaScript
- Size of the page and the numbers of images used
- Type of server-side scripting language
- Extensive use of server-side scripting languages etc.
Google recommends that you should use async with JavaScript and CSS where without the use of JavaScript async is not possible with CSS. In this article we have detailed on how you can make your CSS files load as async.
Step 1- Include CSS in “NoScript” tag
Include all those CSS files under the <noscript> tag which you want to async and are blocking the CSS resources. With the use of following source code you will be able to increase the rating of your website in Google Speed Insight:
Your page has 1 blocking script resources and 10 blocking CSS resources. This causes a delay in rendering your page.
<noscript id="async-css"> <link rel="stylesheet" type="text/css" href="example.css"/> <link rel="stylesheet" type="text/css" href="example_style.css"/> <link rel="stylesheet" type="text/css" href="//thirdparty.tl/example.css"/> </noscript>
Step 2- Handling CSS blocking – Using CSS as Async
Add following JavaScript code at the bottom of your HTML file before </body> tag. This JavaScript source code fires when the HTML file completely loads on the user’s web browser. This code basically calls i.e. imports all the CSS files including the parent domain and third party websites included under <noscript> tag in the Step 1.
<script>// <![CDATA[ var loadDeferredStyles = function() { var addStylesNode = document.getElementById("async-css"); var replacement = document.createElement("div"); replacement.innerHTML = addStylesNode.textContent; document.body.appendChild(replacement) addStylesNode.parentElement.removeChild(addStylesNode); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); else window.addEventListener('load', loadDeferredStyles); // ]]></script>An Example of CSS and JavaScript Async
Here is an example of async load of CSS with the help of JavaScript with the complete HTML tags.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IsrgRajan.com</title>
<noscript id="async-css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</noscript>
</head>
<body>
Content of the document......
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("async-css");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</body>
</html>Hope you will find it useful in not only increasing the Google Speed Insight rating, but also loading your website without blocking the resources.
AdChoices Opt-out