CODEWITHSUNDEEP
web-component
AlexStack
AlexStack

Reputation: 17421

Lazy loading a web component

We have a huge web component (2MB) that is currently loading in the <head> element but this dramatically reduces our page load time.

I was thinking if we can somehow lazy load our web component?

Upvotes: 5

Views: 5642

Answers (2)

StefanN
StefanN

Reputation: 911

Take a look at Jake Archibald's great article about ECMA Script modules in browsers. He elaborates on loading strategies and reveals some best practices. The article is found here: https://jakearchibald.com/2017/es-modules-in-browsers/

An elaborated deep-dive article on JS modules is found here: https://developers.google.com/web/fundamentals/primers/modules

I hope this'll help you find a way of lazy loading Web Components in your application.

Upvotes: 0

Jeff Sisson
Jeff Sisson

Reputation: 1636

Presuming your web component is contained in an HTML import, currently stored in the <head>, you could lazyload that imported file whenever you'd like with javascript:

var import = document.createElement('link');
import.rel = 'import';
import.href = 'path/to/your/import.html';
document.head.appendChild(import);

Alternatively, you could try just moving your HTML import out of the head and into the body (near the bottom), which may reduce load time because it would no longer block parsing of the body.

Upvotes: 1

Related Questions