Playing with my own Polymer Appshell

So a little bit of a report using my new appshell using Polymer and Firebase:

All times reported are in order and is after an arbitrary starting point in the index.html

A. first time loading using dev version

1. App shell constructor called: 336.81 ms

2. Customized App Router constructor called: 349.01 ms

3. Pages initiated in the customized app router: 360.72 ms

4. Start fetching the page component: 361.69 ms

5. Home page loaded and constructor called: 521.075 ms

6. Started binding Firebase path to a property: 522.6 ms

7. Loaded data from localDB (pouchDB): 526.745 ms

8. Started fetching data via Firebase REST: 527.115 ms

9. Started fetching Firebase SDK: 527.675 ms

10. Page component viewed in customized app router: 534.44 ms

11. Firebase app initialized: 702.885 ms

12. Started listening for data via Firebase SDK: 707.545 ms

13. Service worker installed (development version — no caching)

14. Data fetched via Firebase REST: 1238.895 ms

15. Data fetched via Firebase SDK: 1945.170 ms

B. second time loading using dev version

1. App shell constructor called: 216.94 ms

2. Customized App Router constructor called: 224.31 ms

3. Pages initiated in the customized app router: 234.575 ms

4. Start fetching the page component: 235.65 ms

5. Home page loaded and constructor called: 406.625 ms

6. Started binding Firebase path to a property: 408.065 ms

7. Loaded data from localDB (pouchDB): 412.42 ms

8. Started fetching data via Firebase REST: 412.715 ms

9. Started fetching Firebase SDK: 413.155 ms

10. Page component viewed in customized app router: 417.095 ms

11. Firebase app initialized: 576.755 ms

12. Started listening for data via Firebase SDK: 581.665 ms

13. Service worker working (development version — no caching)

14. Data fetched via Firebase REST: 1246.11 ms

15. Data fetched via Firebase SDK: 1640.655 ms

C. first time loading using minified production version

1. App shell constructor called: 80.55 ms

2. Customized App Router constructor called: 85.965 ms

3. Pages initiated in the customized app router: 96.77 ms

4. Start fetching the page component: 97.435 ms

5. Home page loaded and constructor called: 197.77 ms

6. Started binding Firebase path to a property: 199.325 ms

7. Loaded data from localDB (pouchDB): 202.575 ms

8. Started fetching data via Firebase REST: 202.89 ms

9. Started fetching Firebase SDK: 203.385 ms

10. Page component viewed in customized app router: 224.64 ms

11. Firebase app initialized: 509.19 ms

12. Started listening for data via Firebase SDK: 513.705 ms

13. Service worker installed (production version — with caching)

14. Data fetched via Firebase REST: 1138.98 ms

15. Data fetched via Firebase SDK: 1477.385 ms

D. second time loading using minified production version

1. App shell constructor called: 48.735 ms

2. Customized App Router constructor called: 54.33 ms

3. Pages initiated in the customized app router: 64.915 ms

4. Start fetching the page component: 65.725 ms

5. Home page loaded and constructor called: 141.265 ms

6. Started binding Firebase path to a property: 143.535 ms

7. Loaded data from localDB (pouchDB): 146.94 ms

8. Started fetching data via Firebase REST: 147.205 ms

9. Started fetching Firebase SDK: 149.74 ms

10. Page component viewed in customized app router: 158.64 ms

11. Firebase app initialized: 377.365 ms

12. Started listening for data via Firebase SDK: 382.735 ms

13. Service worker working (production version — with caching)

14. Data fetched via Firebase REST: 405.12 ms

15. Data fetched via Firebase SDK: 1569.255 ms

E. third time loading using minified production version offline

1. App shell constructor called: 50.82 ms

2. Customized App Router constructor called: 57.29 ms

3. Pages initiated in the customized app router: 68.245 ms

4. Start fetching the page component: 69.855 ms

5. Home page loaded and constructor called: 145.345 ms

6. Started binding Firebase path to a property: 147.285 ms

7. Loaded data from localDB (pouchDB): 151.065 ms

8. Started fetching data via Firebase REST: 151.455 ms

9. Started fetching Firebase SDK: 152.185 ms

10. Page component viewed in customized app router: 175.09 ms

11. Data fetched via Firebase REST: 187.845 ms

12. Firebase app initialized: 261.72 ms

12. Started listening for data via Firebase SDK: 270.01 ms

Critical path to render with content on dev (1st time):

1.2–1.5s (using REST)

2–2.5 (Realtime DB)

Critical path to render with content on dev (after 1st time):

0.4–0.5s (using local cached data in DB)

1.2–1.5s (using REST)

2–2.5 (Realtime DB)

Critical path to render with content on prod (1st time)

1.2–1.5s (using REST)

2–2.5 (Realtime DB)

Critical path to render with content on prod (after 1st time):

0.1–0.3s (using local cached data in DB)

0.15–0.5s (using REST)

1.5–2 (Realtime DB)

Critical path to render with content on prod (offline):

0.15–0.3s (using local cached data in DB)

0.15–0.2s (using REST only on Service worker)

I am hoping to do little more changes before I put my appshell to the public for people to use and see for themselves. I used window.performance to get my initial timings but I am happy with the initial results. Hoping to get more benchmarks after I am done with this.

Show your support

Clapping shows how much you appreciated Toni-Jan Keith Monserrat’s story.