CODEWITHSUNDEEP
performancepolymer3g-network
MGR Programming
MGR Programming

Reputation: 655

Is inital Polymer load time inherently slow

I created a minimal polymer-2-application using the cli tool. Without any changes, just running polymer serve, the initial load time for the first visit is 4s on Fast3G. It remains 4s also after polymer build.

On top are loading times for any html import for shell, polymer elements, firebase, ...

Do I just have to accept the load time of 4s+ and use a loader in index.html, server-side rendering & amp or some other workarounds or am I missing something?

I know that I can speed up the load of the second visit with service-worker but the first-time visitor will always have to be patient?

Here the code (no changes from polymer-cli)

index.html:

<!DOCTYPE html><html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

        <title>polymer_min.</title>
        <meta name="description" content="testing minimal loading time for Polymer app">

        <link rel="manifest" href="/manifest.json">

        <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>

        <link rel="import" href="/src/polymer_min-app/polymer_min-app.html
    </head>
    <body>
        <polymer_min-app></polymer_min-app>
    </body>
</html>

Polymer_min-app

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="polymer_min-app">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <h2>Hello [[prop1]]!</h2>
    </template>

    <script>
        class Polymer_minApp extends Polymer.Element {
            static get is() { return 'polymer_min-app'; }
            static get properties() {
                return {
                    prop1: {
                        type: String,
                        value: 'polymer_min-app'
                    }
                };
            }
        }

        window.customElements.define(Polymer_minApp.is, Polymer_minApp);
    </script>
</dom-module>

Upvotes: 0

Views: 698

Answers (1)

OneBitAhead
OneBitAhead

Reputation: 81

By default Polymer loads its dependencies arbitrarily as seperate files which results in couple of seconds load time - notice the "waterfall" in the network tab of your Dev Tools. For example, one of our tools makes 100+ requests at startup to load dependencies like elements.

Not using a service worker, server side rendering, client side caching, or alike will result in comparable load times on subsequential page loads.

Bundling your app will not effect that unless you load the index file from the build-directory. Dependencies (e.g. from bower_comonents) will be baked into your app elements in the src subfolder of your build, which leads to less requests with uglified code - which mean you send less bytes over the wire. Out tool mentioned above looses about 50% of its weight by bundling, making only 15 requests on load.

Sample image https://i.sstatic.net/OYVlS.jpg

Independently of bundling you should at least take care of caching by configuring your server, or maybe use a service worker. When running NodeJS you might have a look at https://github.com/Polymer/prpl-server-node.

Upvotes: 0

Related Questions