Slow loading time for PolymerTemplate

i have a rater complex site constructed of many small components based on PolymerTemplate, because the elements are repetitive. The problem now is, that even the smallest components take seconds to load, in sum the page takes >30 seconds to load. For example the element below:

package XXX.XX.XXXXX.client.components;

import com.vaadin.flow.component.HasSize;
import com.vaadin.flow.component.HasStyle;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.polymertemplate.Id;
import com.vaadin.flow.component.polymertemplate.PolymerTemplate;
import com.vaadin.flow.templatemodel.TemplateModel;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.H1;

public class MicroItemComponent extends PolymerTemplate<MicroItemComponent.MacroItemComponentModel> implements HasStyle, HasSize {

	public interface MacroItemComponentModel extends TemplateModel {

	private H1 property;
	private H3 title;

	public MicroItemComponent() {
	public void setContent(String title1, String prop1)
	public void setTitle(String title)
	public void setProperty(String prop)
	public void setPropertyColor(String color)
	{"color", color);

	public void setPropertyColorDefault()

and the microitem-component.js file (i am by no means any web dev, so the css styles and html may be redundant or plain wrong…):

import '@polymer/polymer/polymer-legacy.js';
import '@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js';
import '@vaadin/vaadin-ordered-layout/src/vaadin-horizontal-layout.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
class MicroitemComponent extends PolymerElement {
  static get template() {
    return html`
   <style include="shared-styles">
            :host {
                display: block;
                padding: 0;
                background: var(--lumo-base-color);
			    border: 1px solid var(--lumo-contrast-20pct);
            h1, h3
            	text-align: center;
            	display: block;
			    margin-left: auto;
			    margin-right: auto;
			    font-family: var(--lumo-font-family);
			    color: var(--lumo-body-text-color);
            	color: var(--lumo-primary-text-color);
   <vaadin-horizontal-layout class="outerItem"> 
    <vaadin-vertical-layout class="innerItem" id="vaadinVerticalLayout"> 
     <h3 class="title" id="title">Heading 3</h3> 
     <h1 id="property">Heading 1</h1> 

  static get is() {
      return 'microitem-component';

  static get properties() {
      return {
          // Declare your properties here.
customElements.define(, MicroitemComponent);

Is taking up to 4 seconds to load (see the image in attachment) (it is loading 4 of this components, so it my take ~1 second for one).
I am using Vaadin 14 LTS and Tomcat 9.0 as server.

I have replaced the upper PolymerTemplate by a Composite component and the loading time is negligible, so i do not think it is a problem on my side loading the data, or measuring wrong. I do not like to replace this with a Composite component, because it introduces other problems (see other post).
This project was ported from vaadin 13 with the help of the maven plugin. If i remember correctly i saw the same behaviour on vaadin 13…

Any help and hint would be appreciated!
Thank you!


Do you also experience this in the latest minor release 14.0.7? There are some potentially related issues that have been fixed since 14.0.0. Also, if this is the same root cause, the slowness should only happen on the first load after the server restart.

I put your code in a plain Java starter here

It takes about 400ms to start and render the full app with 10 instances of MicroItemComponent, see

Thank you for your tests. Updating Vaddin helped a lot. I also tested it on other machines and there it was quite fast, so it has to be on my machine…

Thank you again!

Artur Signell:
I put your code in a plain Java starter here

It takes about 400ms to start and render the full app with 10 instances of MicroItemComponent, see

Hi Artur Signell,
I have a large number of data and need to build a tree with this dataset. I have developed custom component which is very slow to rendering and scripting in Chrome browser but bit faster Firefox.
I have run your github project and tested with generating 500 row with your loop
I have tested with your github code like that:

for (int i = 0; i < 500; i++)

Which is very very slow in chorme. So how I can fixed this code with latest vaadin version. Which component generate by backend code.

My tree component demo project posted in github ( Can you bit look or suggest me how I can solve this stuff, if I have large data set around of 1500 items. which have tree hierarchy.
It would be great help for me.