PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

Faster web navigation with predictive prefetching

May 25, 2020
in Web Dev
274 18
Faster web navigation with predictive prefetching


Learn about predictive prefetching and how Guess.js implements it.

Jul 8, 2019


Minko Gechev

In my Faster Web Navigation with Predictive Prefetching session at Google I/O 2019, I began by talking about optimizing web apps with code splitting and the potential performance implications for subsequent page navigation. In the second part of the talk, I discussed how to improve navigation speed by using Guess.js to set up predictive prefetching:

Code splitting for faster web apps #

Web apps are slow, and JavaScript is among the most expensive resources that you ship. Waiting for a slow web app to load can frustrate your users and decrease conversions.

Slow web apps are stressful.

Lazy-loading is an efficient technique to reduce the bytes of JavaScript that you’re transferring over the wire. You can use several techniques to lazy-load JavaScript, including:

  • Component-level code splitting
  • Route-level code splitting

With component-level code splitting, you can move individual components into separate JavaScript chunks. On particular events, you can load the relevant scripts and render the components.

With route-level code splitting, however, you move entire routes into independent chunks. When users transition from one route to another, they have to download the associated JavaScript and bootstrap the requested page. These operations can lead to significant delays, especially on slow networks.

Prefetching JavaScript #

Prefetching allows the browser to download and cache resources that the user is likely to need soon. The usual method is to use <link rel="prefetch">, but there are two common pitfalls:

  • Prefetching too many resources (overfetching) consumes a lot of data.
  • Some resources the user needs may never be prefetched.

Predictive prefetching solves these problems by using a report of users’ navigational patterns to determine what assets to prefetch.

Prefetching example

Predictive prefetching with Guess.js #

Guess.js is a JavaScript library that provides predictive prefetching functionality. Guess.js consumes a report from Google Analytics or another analytics provider to build a predictive model that can be used to smartly prefetch only what the user is likely to need.

Guess.js has integrations with Angular, Next.js, Nuxt.js, and Gatsby. To use it in your application, add these lines to your webpack configuration to specify a Google Analytics view ID:

const { GuessPlugin } = require('guess-webpack');


plugins: [

new GuessPlugin({ GA: 'XXXXXX' })
]

If you’re not using Google Analytics, you can specify a reportProvider and download data from your favorite service.

Integration with frameworks #

To learn more about how to integrate Guess.js with your favorite framework check out these resources:

For a quick walkthrough on the integration with Angular, check out this video:

How does Guess.js work? #

Here’s how Guess.js implements predictive prefetching:

  1. It first extracts data for the user navigational patterns from your favorite analytics provider.
  2. It then maps the URLs from the report to the JavaScript chunks produced by webpack.
  3. Based on the extracted data, it creates a simple predictive model of which pages a user is likely to navigate to from any given page.
  4. It invokes the model for each JavaScript chunk, predicting the other chunks that are likely to be needed next.
  5. It adds prefetching instructions to each chunk.

When Guess.js is done, each chunk will contain prefetching instructions similar to:

__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)

This Guess.js-generated code is telling the browser to consider prefetching chunk a.js with probability 0.2 and chunk b.js with probability 0.8.

Once the browser executes the code, Guess.js will check the user’s connection speed. If it’s sufficient, Guess.js will insert two <link rel="prefetch"> tags in the header of the page, one for each chunk. If the user is on a high-speed network, Guess.js will prefetch both chunks. If the user has a poor network connection, Guess.js will only prefetch chunk b.js since it has a high probability of being needed.

Learn more #

To learn more about Guess.js, check out these resources:

Last updated: Jul 8, 2019



Improve article



Source link

Share219Tweet137Share55Pin49

Related Posts

Community Resources, Weekly Newsletter, And Boosting Skills Online — Smashing Magazine
Web Dev

Smashing Workshops & Audits — Smashing Magazine

About The AuthorJuggling between three languages on a daily basis, Iris is known for her love of linguistics, arts,...

January 15, 2021
4 Lessons Web App Designers Can Learn From Google — Smashing Magazine
Web Dev

The Report — Smashing Magazine

About The AuthorSuzanne Scacca is a former WordPress implementer, trainer and agency manager who now works as a freelance...

January 15, 2021
Proper Tabbing to Interactive Elements in Firefox on macOS
Web Dev

Proper Tabbing to Interactive Elements in Firefox on macOS

I just had to debug an issue with focusable elements in Firefox. Someone reported to me that when tabbing...

January 15, 2021
Building an Ethereum app using Redwood.js and Fauna
Web Dev

Building an Ethereum app using Redwood.js and Fauna

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s...

January 15, 2021
Next Post
In Free Software, the Community is the Most Important Ingredient: Jerry Bezencon of Linux Lite [Interview]

In Free Software, the Community is the Most Important Ingredient: Jerry Bezencon of Linux Lite [Interview]

Keeping things fresh with stale-while-revalidate

Keeping things fresh with stale-while-revalidate

Leave a Reply Cancel reply

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

Recommended

How To Use Styled-Components In React — Smashing Magazine

Comparing Styling Methods In Next.js — Smashing Magazine

September 17, 2020
Nailing the Perfect Contrast Between Light Text and a Background Image

Nailing the Perfect Contrast Between Light Text and a Background Image

August 7, 2020
Building an event-based application with Amazon Managed Blockchain : idk.dev

Building an event-based application with Amazon Managed Blockchain : idk.dev

June 2, 2020
SmashingConf Live! Is A Wrap — Smashing Magazine

Native CSS Masonry Layout In CSS Grid — Smashing Magazine

November 2, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In