Lightweight templates are focused on decreasing the rendering time of offer templates such as article locks, landing pages, newsletter widgets, and others. It depends on many factors, but as a rule of thumb, Lightweight templates decrease their rendering time roughly by 50% when compared to Classic templates, meaning a Lightweight template renders 6-7x faster than a Classic template.
The Classic templates (also known as Templates 2.0) were introduced a couple of years ago and in an environment with swiftly evolving technologies, we had to update the underlying technology.
In Classic templates, we use AngularJS, which allows to create templates quickly and flexibly. However, as AngularJS uses multiple libraries under the hood, which changed and became outdated over time. This results in a large AnglularJS + libraries bundle size which has to be loaded with every template. Additionally, after the end of the official support for AngularJS the time for identifying and fixing vulnerabilities became longer.
In the new Lightweight templates the bundle size is reduced to ~30 kilobytes, which is more than 10 times smaller than using AngularJS. Also, we can load only the parts of the code that are currently being used, further reducing the loading time and bundle size. Lightweight templates are also supporting preloading of the required resources. For example, in an Offer template, we request the Term list from Subscription Management + Billing (the terms which have to be shown in the template). In Classic templates, the request is made after the code is loaded and initialized, while in the Lightweight templates, the request is made simultaneously with the template code, which speeds up the template rendering further. Additionally, Lightweight templates uses active caching for further speed up of their rendering. With Lightweight, you can integrate your created template in three different ways: Shadow Dom , Iframe, and Dom, which provides flexibility in using and interacting with the template content.
Simultaneous support for both template types
Both template types, Classic and Lightweight, are supported to run in live production experiences at the same time. You can set any combination of template types within your experiences and branches. This gives you the freedom and flexibility to decide and prioritize template migration according to your needs and priorities.
Compatibility
Due to technological differences, such as code syntax, the Classic and Lightweight templates are not compatible with each other. To migrate from Classic to Lightweight, the code needs to be rewritten in the new syntax as described in the separate Migration section. Soon after the launch, we will introduce an automated converter from Classic to Lightweight.
Supported template use cases
At the time of the initial release, the following Offer template use cases are supported:
-
Purchase Offer
-
Newsletter
-
Adblocker
-
Site Licensing
-
Metering
-
Push Enrollment
-
Upgrade Offer
-
Affiliate
-
Registration
-
Churn Prevention
Important:
If your offer templates are loading slowly, it’s very important to understand where exactly the “slowness” happens.
In the time period between when a visitor opens a page and the template is rendered, the following steps are performed: the Piano script initializes, then Piano Composer scans all experiences and executes those with a match; then user segments, offers, and terms are fetched, and afterwards the offer template is rendered.
All these steps must be fast. A frequent cause of slow templates is that the Piano script initializes late. If that happens, fast template rendering will not help you, because it starts rendering late. How fast the Piano script initializes is completely in your hands; Piano has no influence on it.
You can read more about the load times of these steps and how to measure their speed in the Telemetry section.