Slow website connectivity can deter users, and up to 40% of them may choose not to revisit your site unless there are no alternatives. Several factors contribute to slow website loading, including the possibility that certain CSS and JavaScript elements are hindering HTML page rendering.
A slow website not only dampens the user experience but also affects search engines like Google. Over time, your website may vanish from Google’s search results due to poor user experience and connectivity issues. Google provides a Speed Test Tool called Google Speed PageInsights for websites. This tool helps you identify issues with your website and assesses the quality of user experience. Google evaluates your website based on server response, device compatibility, caching, and numerous other factors.
To improve your website’s performance, consider optimizing Async CSS and removing blocking CSS resources from your website.
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 using the async attribute with JavaScript, and while this isn’t applicable to CSS in the same way, there are techniques to load CSS asynchronously. In this article, we provide a detailed explanation of how you can make your CSS files load asynchronously for improved website performance.
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