Tattica.js
A tactic approach to asset loading
A tactic approach to asset loading
⬇⬇️⬇️ This is how you usually load images ⬇⬇️⬇️
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 the best method for loading the first 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 are not in those first 100vh
aren't real. He doesn't
know he
will need them.
So, if you take that 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 images requested are the first images to be downloaded completely.
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 you needs to served immediately and defer the loading of all the others when your browser is not too busy doing other important things.
load
event.window.requestIdleCallback
used to know when it's the right time for your browser
to spawn new requests.intersectionObservers
used to load anyway images that are in the viewport.callback
on every image load (now used to trigger the pulse animation).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.timeout
prop is set to false
, so all the following examples are
only for demo purpose.loadIntersections
prop is set to false
as well. Otherwise every
image would be downloaded immediately.Tattica.js loading images synchronously
1
2
3
4
5
6
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.
1
block
4
1
block
5
1
block
6
Tattica.js loading images with priority.
note: elements 5, 6 are loaded only after the last element with priority
badge is loaded
4
priority
5
3
priority
2
priority
6
1
priority
Predicting user behavior
In a case like a carousel (or a slideshow), starting at 1, you know that the majority of the users will look at the image on the right.
You can define the loading priority accordingly. Image on the right first (for the 90%), image on the left second (for the 10%), subsequent loading of other images in block.
4
block
3
priority
1
priority
2
priority
4
block
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.
1
2
3
4
5
6
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.
block 1
block 1
block 1
block 1
block 1
block 2
block 2
block 2
block 2
block 2
block 3
block 3
block 3
block 3
block 3
block 4
block 4
block 4
block 4
block 4