Internet connection is not reliable. In the web industry we are used to having a fiber optic throughput. But this is not the case for your users. Do not forget that in a mobility situation the access can quickly become complicated with 3G / edge, poor quality wifi or even a telephone package almost Internet.

In this article I will introduce you simple techniques to set up to improve the loading of your pages. If the offline web interests you I also share at the end of the article resources on the workers services.

Never forget that speed is one of the most important things to take into account as your users are increasingly impatient.

Each -0.1s, + 1% revenue

– Walmart

Simple page

Generally the architecture of your web page looks like this:

  <!DOCTYPE html>
  <html>
  <head>
    <link rel="stylesheet" href="application.css">
    <script src="application.js"></script>
  </head>
  <body>

  </body>
  </html>

This solution is technically correct but the user experience will not be optimal because we can improve the loading of JavaScript and CSS.

Improved JavaScript

  <!DOCTYPE html>
  <html>
  <head>
    <link rel="stylesheet" href="application.css">
    <script src="application.js" async></script>
  </head>
  <body>
    <div class="toolbar">Wikipedia Demo</div>
  </body>
  </html>

Non-blocking javascript improves the page loading time. asyncDownloads the JavaScript file while browsing HTML, and pauses the HTML parser as soon as it is downloaded.

Loading CSS

  <!DOCTYPE html>
  <html>
  <head>
    <style>/* Basic interface styles */</style>
    <script src="application.js" async></script>
  </head>
  <body>
    <div class="toolbar">Wikipedia Demo</div>
  </body>
  </html>

To avoid making an HTTP request to a style sheet, you can replace the call <link rel="stylesheet" href="application.css">with an inline style. This works for ultra basic pages, but this solution will quickly show its limits as soon as you have thousands of CSS declarations.

How to load CSS asynchronously like JavaScript?

The filamentgroup has published a project to improve the loading speed of the css. Here is an example of how

  <script>
    function loadCSS() { ... }
    function onloadCSS() { ... }
  </script>
  <main class="m-article" style="display:none">
    <script>
      onloadCSS(loadCSS('application.css'), function() {
        document.querySelector('.m-article')
          .style.display = '';
      });
    </script>
    <noscript>
      <link rel="stylesheet" href="application.css">
    </noscript>
  </main>

For further

Data streaming with JavaScript allows you to display data progressively. Here is a simple example of Node.js application that displays text content.

  app.get('/', function(req, res) {
    res.stattus(200);
    res.type('html');
    res.write('<p>Hello</p>');

    setTimeout(function() {
      res.write('<p>World</p>');

      request(url)
        .pipe(transformStream)
        .pipe(res);
    }, 1000);
  });

As illustrated by the gif below, the first call to the server is responsible for building the interface, and the data is loaded on demand.

Streaming of JavaScript data

To understand how this system works I invite you to watch the video of Jake Archibald, Supercharging page load.

In summaryGraphical solutions for web performance

 

  1. Add tag asyncto your scripts
  2. Load CSS non-blocking
  3. Streaming data with JavaScript
  4. Set up a worker service
  5. Think your content offline-first
Author

Am a tech geek.. Do you wanna know more about me..? My contents will do tell you.

Pin It