Site Load is too slow

[skamansam]

Description

When running the PSK with no code modifications against Lighthouse, it gives very low performance score across all builds due to the poor times for First Meaningful Paint, First Interactive, and Consistently Interactive.

Expected outcome

All load times are less than 3 seconds, and pass the Lighthouse performance rating with a 100.

Actual outcome

Tested Build	First Meaningful Paint	First Interactive	Consistently Interactive	Perceptual Speed Index	Performance Score
es6-unbundled	11,480ms	11,480ms	11,480ms	12,440ms	32
es6-bundled	3,760ms	3,760ms	3,760ms	4,251ms	78
es5-bundled	3,850ms	3,850ms	3,850ms	4,331ms	78

Steps to reproduce

1. clone git repo
2. build app with polymer build
3. open in Chrome and run the Lighthouse audit tool in DevTools

[touseefbsb]

I can totally agree with @skamansam because I tried exactly the same and result is very poor here is result of my lighthouse audit. in my case I did not do the build process, I just used polymer serve and then audited the app in chrome with lighthouse.

[skamansam]

@touseefbsb I ran the bundled version because it generates the service worker and caching info, which improves the scores all around.

[arthurevans]

@skamansam To clarify, are you running this against a real server with HTTP 2 support? Or against polymer serve?

[abdonrd]

Polymer Starter Kit v3.2.0 hosted in Firebase. Preset: es5-bundled.

The performance section is not very good. 😕

Lighthouse Report

Results for: https://psk-demo-6e320.firebaseapp.com Report: https://builder-dot-lighthouse-ci.appspot.com/report.1507893961779.html

Category	Score
Progressive Web App	100
Performance	65
Accessibility	100
Best Practices	85

Tested with Lighthouse version: 2.3.0

Updated at https://github.com/PolymerElements/polymer-starter-kit/issues/1071#issuecomment-336513305

[arthurevans]

@abdonrd something looks wrong there... From the results, that looks like an unbundled build. There's definitely a penalty for unbundled in 2.0 because the library is so much more granular. Can you check your build and see if it's getting bundled properly? Could be a CLI issue...

[abdonrd]

Oops! I don't understand what happened.

Updated Polymer Starter Kit v3.2.0 hosted in Firebase. Preset: es5-bundled.

https://github.com/PolymerElements/polymer-starter-kit/compare/v3.2.0...firebase-deploy

Lighthouse Report

Results for: https://psk-demo-6e320.firebaseapp.com Report: https://builder-dot-lighthouse-ci.appspot.com/report.1507914790239.html

Category	Score
Progressive Web App	100
Performance	95
Accessibility	100
Best Practices	92

Tested with Lighthouse version: 2.3.0

[abdonrd]

We can improve the best practices with Polymer.setPassiveTouchGestures(true), right?

Reference: https://github.com/Polymer/polymer/releases/tag/v2.1.0

[robdodson]

@abdonrd that seems like a good change to me

[abdonrd]

@robdodson & @keanulee: we only need to add this, right?

Polymer.setPassiveTouchGestures(true);

And the right place should be in the index.html, after line 75, right?

https://github.com/PolymerElements/polymer-starter-kit/blob/cd15ff7c4d564dab17aeeea68f7cc4c5fae04e83/index.html#L74-L78

Or in the src/my-app.html before line 119?

https://github.com/PolymerElements/polymer-starter-kit/blob/cd15ff7c4d564dab17aeeea68f7cc4c5fae04e83/src/my-app.html#L118-L122

[keanulee]

It would need to be after Polymer.setPassiveTouchGestures is defined, so my-app.html.

[abdonrd]

Now, with the last PR merged, we have better results: https://github.com/PolymerElements/polymer-starter-kit/pull/1075#issue-266963265. 👏

---

@robdodson @keanulee and I guess we could improve the performance section a bit more, what do you think?