Today, If your website takes more than 3 seconds to load you are already losing more than 50% of your users even before they arrive on your site. That’s a lot of potential conversions you are missing out there because you don’t have a fast web page. Also, for the user that sticks around on a website that is slow and has poor performance 80% of the users would not return.
Why is my website slow?
While you’ve conducted a site speed test and figured that the load time for your web page is slow. It could be due to multiple reasons from server load time to large size images or because of the number of redirects. So, you will have to go through a bunch of steps to improve page speed and build a fast web page. That we will discuss this further in this blog.
With Search engine optimization now even google considers speed to be a ranking factor for fast web pages, your load also influences how you appear on the search engine with the mobile-first index. With mobile-first outranking desktop searches since 2015 google is likely to target mobile users and they don’t want to direct users to sites that won’t function properly.
So, to maintain your ranking and increase user visibility it's essential to know how to reduce your loading time and buil a fast web page but again the question remains - How fast is fast enough?
While there is always room for improvement with loading speed.
As per load time goes from -
1s to 3s the probability of bounce increases 23% 1s to 5s the probability of bounce increases 90% 1s to 6s the probability of bounce increases 106% 1s to 10s the probability of bounce increases 123%
Source - thinkwithgoogle.com
What are the benefits of fast web pages
1. Better user experience
Having fast loading web pages is always a better experience for your users. If you website has awesome features but loads slow, eventually the users will be frustrated with the performance.
2. Good for SEO
Google and other search engines rank website that load faster above the website that loads slow. Page speed is deciding ranking factor for the website. You can use Google Page Speed to see your page score and insights on ways to improve them.
For any business website, site speed is not an option it’s a necessity. The common thought of having a pretty design for your website as it looks pleasing to the eyes. No doubt design is important and great user experience for an interactive website is equally important but often some design elements can be a hurdle for the loading speed time, in some cases, it’s enough time for a user to change his mind and turn away.
How to make your web page load faster
Here we list some of the things you can do to improve the web page speed
1. Minified assets - HTML, CSS, JS
Always minify your HTML, CSS and JS code. Minified / Compressed files will have less size and hence load faster. You can find various tools within your website programming language or online tools like javascript-minifier.
2. Defer loading
Loading of all the CSS and JS files could take time and block the loading of HTML. Use defer loading to load CSS and JS files which are not critical after page load.
3. CSS defer load
```js
<!-- Put all the non critical CSS in noscript tag -->
<noscript id="deferred-styles">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600,700"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:700"
rel="stylesheet"
type="text/css"
/>
</noscript>
<!-- Use JS to load them after page load -->
<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>
```4. JS defer load
```js
<script src="./all.js" async></script>
```5. Service workers
Service worker is a script that your browser runs in the background in a separate thread. This gives Javascript ability to execute code in background like push notifications, background sync, load offline web pages. Eg. Switch off your internet and try reloading this page.
6. Enable browser caching
We can also leverage features of modern browsers like cache, indexedDB to store information / files in browser and serve them locally.
7. Use CDN to load assets
Using CDN like AWS cloudfront or Cloudflare will improve the caching of assets and load them faster.
8. Using lazy load images
Load images that are visible in the viewport, this prevents loading of images that are not visible to user. The image load triggers when the user scrolls up/down and the image is available in viewport. You can setup lazy loading for both img tag and background images. Examples - verlok-lazyload
Contact us to optimise your web pages.
More links - Google PWA
- Vivek
