Building fast web pages - 6 easy tips

Building fast web pages using some techniques which will improve your UX and SEO. We talk about 6 tips to achieve that.

Posted by Vivek on 15 Apr 2019

What are the benefits of fast web pages

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.

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.

How to make your web page load faster

Here we list some of the things you can do to improve the web page speed

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.

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.

CSS defer load

<!-- Put all the non critical CSS in noscript tag -->
<noscript id="deferred-styles">

<!-- Use JS to load them after page load -->
  var loadDeferredStyles = function () {
    var addStylesNode = document.getElementById("deferred-styles")
    var replacement = document.createElement("div")
    replacement.innerHTML = addStylesNode.textContent
  var raf =
    requestAnimationFrame ||
    mozRequestAnimationFrame ||
    webkitRequestAnimationFrame ||
  if (raf) {
    raf(function () {
      window.setTimeout(loadDeferredStyles, 0)
  } else {
    window.addEventListener("load", loadDeferredStyles)

JS defer load

<script src="./all.js" async></script>

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.

Enable browser caching

We can also leverage features of modern browsers like cache, indexedDB to store information / files in browser and serve them locally.

Use CDN to load assets

Using CDN like AWS cloudfront or Cloudflare will improve the caching of assets and load them faster.

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


Have a Project in mind?