Tattica.js

A tactic approach to asset loading

Star

Why

This is how images are usually loaded ⬇

It's completely fine. If you take a closer look at the network tab in the developer tools of your browser, you will see that the requests are made approximately at the same time.

This is a good method for loading the part of the website that should be served to your user as fast as possible.

However, let's admit that all the images that lives in your homepage are not contained in the viewport of the page. Very probable scenario, right?

For your user, all the images that doesn't fit in those first 100vh aren't real. He doesn't know he will need them.

So, if you are taking this approach you are increasing the total loading time of your website; because your page load will end after the last image is downloaded.

note: The requests start from the top of your page, but this doesn't mean that the first image requested are the first image to be downloaded completely.

How

Using Tattica.js you can choose exacly when your images will be loaded in a very straightforward manner.

So you will be able to decide which images needs to served immediately and defer the loading of all the others when your browser is not too busy doing other important things.

  • Starts only after load event.
  • Priority (index) to control the exact loading order of your images.
  • window.requestIdleCallback used to know when it's the right time for your browser to trigger new requests.
  • intersectionObservers used to load anyway images that are in the viewport.
  • A handy callback on every image load (now used to trigger the pulse animation).
  • Possibility to define blocks of loading images (decide which requests need to be sync and which async).
  • navigator.connection.effectivetype to check the type of connection of your users and load images accordingly.
  • setTimeout will take care that no image will stop forever your loading queue.
  • Possibility to define a fallback for images that returns errors.
  • Super simple to integrate in your workflow (you'll only need to write html attributes).
  • Friendly error messages (:

Demo

  • The timeout prop is set to false, so all the following examples are only for demo purpose.
  • The loadIntersections prop is set to false as well. Otherwise every image would be downloaded immediately.

Sync loading

Tattica.js loading images synchronously

block loading

Tattica.js loading images in blocks

note: The images 4, 5, 6 won't start laoding until every image with the block badge is loaded.

Priority loading

Tattica.js loading images with priority.

note: elements 5, 6 are loaded only after the last element with priority badge is loaded

Carousel

Predicting user behavior

e.g. In a case like a carousel (or a slideshow), starting at 1, you know from your analytics that the majority of your users will look at the image on the right.

You can then define the loading priority accordingly. Image on the right first (higher probability), image on the left second (lower probability), subsequent loading of other images in block.

Adaptive serving

WARNING: This feature is available only on Chrome.

Tattica.js loading images according to Navigator.connection.effectivetype

If you slow down your connection (or if you are on a medium to slow connection) in performance tab of dev tools you will see that smaller images are loaded.

Gallery

Loading subsequent blocks

In a large gallery probably only a portion of the total images fits within the viewport. So you could be load images in subsequent blocks to serve the first images faster.