UX: How do you lazy-load triplat-route pages for performance?


In most cases, your UX application will consist of several pages that a user can navigate into and these pages may not necessarily be shown to the screen when the user initially accesses your application. If you are using the <link rel=”import”> tag to import your routing pages, the resources of these pages will be requested and loaded as the page containing these links is being accessed or loaded. If you have a complex application that consists of layers and layers of routing pages, it may not be good to load all your resources at once by using the <link> tag declaration.

In this article, we will show you how to lazy-load your pages to improve the performance of your application, if you are using a <triplat-route> component when handling their routing behavior. Here are the basic steps you need to do to lazy-load your pages:

  1. Do not use <link rel=”import”> when loading your routing page.
  2. Add the on-route-active event handler to your triplat-route declaration.
  3. Add the id attribute to your routing page declaration.
  4. Lazy-load your page using Polymer importHref API.

Let’s take a closer look at each step…

Continue reading

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s