Polymer Hybrid Rendering

Question

I'm interested in improving the initial page load of an app that is currently rendering entirely clientside. Right now the app loads an initial app frame and then, once the initial page is loaded, fires a request to the server to fetch the data. While the request is processing, the user effectively sees a partially rendered page. Once the data comes back from the server, the page finishes rendering on the client.

What is the best way to remove the delay caused by fetching the initial page and data separately? Should I just bootstrap the data into the initial page load, or should I leverage some sort of server side templating engine (Jade, Handlebars, etc)? It seems like doing the latter means not being able to leverage features like dom-repeat as easily, thus losing the ability to have Polymer handle some of the more complex re-rendering scenarios.

Answer 1

I had the same problem, the page took 4.5 sec to load cause it has to receive data from the client, And I look for ways to make polymer faster, I think that I found out, now I load the page in 1.2 sec (with no cache) and the request to the server take 0.4 sec.

Steps To Make Polymer Faster

1. Dont show things that you dont need. Use dom-if to not render, like if you have pages that show only if the user click on button, DO NOT RENDER THEM.

2. You can make request to the server before the body. so you will receive the response faster.

3. If you want that the user fill that the site load faster you can remove the unresolved property from the body Thus the user will see the components in the loading process (But the user will see something and not a blank screen).

4. use this script (before import polymer)

   window.Polymer=window.Polymer ||{dom:'shadow'};

this make the browser use the shadow dom (if supported) and not the shady dom.

it faster to use shadow dom but not all the browser support it yet.

5. Use vulcanize https://github.com/polymer/vulcanize to merge all the import files and also minimize the file.

6. For long list you can use the iron-list, it render only what that is on the screen.

7. If you use script import, you can use the async parameter and dont block the process of the rendering.

Edit

8. if you dont want to use iron-list their is new option in dom-repeat

     <template is="dom-repeat" items="{{items}}" initial-count="20">
   
     </template>
   

   this is not block the thread for a long time but render the list in parts.