Typolino – Prefetching Assets

Caching has a big effect. But a first time visitor might still have to wait for certain resources to download.

To improve the experience for the users we can try to prefetch resources that we most probably will need later (e.g. after the login). In our example application Typolino the candidates are found easily:

  • the alphabet.mp3 audio file
  • the placeholder image
  • the card image (which besides making the UI look a bit fancier is totally useless)

For this we can add the prefetch instructions directly to our index.html

<link rel="prefetch" href="assets/alphabet.mp3" as="fetch">
<link rel="prefetch" href="assets/img_placeholder.jpg" as="image">
<link rel="prefetch" href="assets/lesson_1.jpg" as="image">

If we clear the cache and just navigate to our login page we will see that the browser is fetching the files as soon as it finds some time for it:

…and later when we actually need the files…

Find the full source code below in case something is a bit out of context.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Typolino</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css2?family=Baloo+Paaji+2&family=Roboto:wght@300&display=swap" rel="stylesheet">
  <link rel="prefetch" href="assets/alphabet.mp3" as="fetch">
  <link rel="prefetch" href="assets/img_placeholder.jpg" as="image">
  <link rel="prefetch" href="assets/lesson_1.jpg" as="image">
</head>

<body>
  <app-root></app-root>
</body>

</html>

Conclusion

pre-fetching resources can improve the overall UX of your application. It’s worth having a look at this capability. For Typolino it may look rather simple and I’m not so sure we can easily extend this to some Firebase queries as well (I don’t really want to construct the URL myself) but I’m sure you will find a chunk, image, script or any other resource that may be required in just a moment.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.