Building fast web pages - 6 easy tips


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 https://javascript-minifier.com/.

  • 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">
        <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>
      
    • 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 - https://github.com/verlok/lazyload

Contact us to optimise your web pages.

More links -
Google PWA

Vivek



What do we do?


We work on website development using Ruby on Rails, NodeJS, ReactJS, AngularJS. View all the services we provide here.


Contact us See our work