Increase Your Conversions by 7%
If your website is taking more then three seconds to load, your visiter has already moved on!
Can the speed of your website really have that much of an effect on your conversions and sales? Even if your site isn’t loading too slowly, can it still be improved? answer is: Yes.
Page Load Time VS Perceived Speed
To understand page speed measurement, when Google talks about page speed, they do not care about overall time it takes to download a webpage. They care about is how quickly does a user start seeing content on that page (initial view). This is known as perceived speed. The reason Google has started using page speed as a ranking factor is based upon the satisfaction of their users. It is not a good experience for someone searching Google for something when they are sent to a page that takes forever to load.
Our main concern when we talk about webpage speed is to get content to the user as soon as possible in the initial view.
This is my third article in this series about why it is important to improve your website loading speed with step by step guide on how to do it. In my first article I covered Gzip compressions & minification and the second article was about image compression, css sprites, browser caching and keep alive.
If you have followed through those steps, Congratulations!, you have improved your website speed up to 50%, if not more. So what is next?
Prioritize above-the-fold content
We can improve user experience and page load speed by having your above-the-fold (top of the page also called initial view) load faster — even if the rest of the page takes a few seconds to load.
What is the critical rendering path?
The series of events that must take place to render (display) the initial view of a webpage. For example: get html > get resources > parse > display webpage. Optimizing these events result in significantly faster webpages.
Before the browser can render content it must process all the style and layout information for the current page. As a result, the browser will block rendering until external stylesheets are downloaded and processed, which may require multiple roundtrips and delay the time to first render. Same is the case with Javascript files. If you have multiple stylesheets and Javascript files it make it even worse. So first step off-course is to combine all CSS files and Javascript files and then use following.
Remove Render-Blocking JavaScript
To prevent JavaScript from blocking the parser Google recommends using the HTML async attribute on external scripts. For example:
<script async src="my.js">Note that asynchronous scripts are not guaranteed to execute in specified order and should not use document.write. Scripts that depend on execution order or need to access or modify the DOM or CSSOM of the page may need to be rewritten to account for these constraints.
Optimize CSS Delivery
As per Google’s recommendation, identify and separate the styles for above the fold content (critical CSS) and put those styles directly into head section of the page. Then load the rest the CSS files on page load event as following
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="small.css"/>
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
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>
</body>
</html>How to defer images
If your page contains 100 images, there are probably only one of two images that are critical (above-the-fold), so we only need to worry about those to load right away with the initial load. The rest can be deferred or lazy loaded.
By default, browser will attempt to download all the images it can find on the page. We need to trick the browser into thinking those images are not there.
In the above image, only the content above the dotted line is critical, but all the content is competing to load at the same time. To get the best page speed on initial load it should load something like the following
To do this we need to markup our images and add a small and extremely simple javascript.
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">Javascript:
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>So all you img tags that are not critical will change to above markup. The script however can be placed inside your main Javascript file or footer of every page.
Lazy loading is another option and there are a number of plugins available. I prefer the deferred method as it is a better user experience where user can move to folded section (scroll) and don’t have to wait for images to load.
If you have been testing your website through tools like GTmetrix, Google’s PageSpeed Tools and PingDom, you will notice a spike in your page speed score with above two steps.
In future article I will talk about some of the more advanced topics. Stay tuned!
