Issue with HTTP2 Push and Polymer- Dom Content Ready Time Much Longer Even Though Time On Files Shorter

Darin Hensley

unread,

Feb 5, 2016, 9:40:01 PM2/5/16

to Polymer

I noticed with HTTP2 push(using nginx and nghttp2 on linux) that my Polymer 1.* website renders significant slower.

After investigation, the HTTP2 push is working beautifully. The individual time on the files requested are much shorter, which is great. But, the DOMContentLoaded and Load times are much slower.

This makes no sense to me since the times of the requested files are shorter. I am guessing this is a issue with Polymer specific because HTTP2 push is doing what it is supposed to do, and also it is DOMContentLoaded that is slower.

Anyone know why? I would really like to resolve this so I can continue to use http2 push. Otherwise, it's to slow for user experience.

Please see the graphs:

Here is http non-push. You can see the time on the files are longer. For instance, krunch.png is 150ms. The DOMContentLoaded is 584 ms and Load is 745 ms

Here is http2 push. The time on the individual files are much shorter. For instance, krunch.png is 9ms. However, the DOMContentLoaded is 2.74s and Load is 2.75s. The DOMContentLoaded and load is much longer than the normal http(non http2 push).

These graphs can also be seen on imagur:

http://imgur.com/u3TdzDG

http://imgur.com/d24hSTh

ric...@gmail.com

unread,

Feb 7, 2016, 8:25:02 PM2/7/16

to Polymer

Huh, that's unexpected, and I haven't seen that in our tests. Do you have a demo deployed anywhere that we can test with?

Darin Hensley

unread,

Feb 14, 2016, 8:11:13 PM2/14/16

to Polymer, ric...@gmail.com

Not at the moment....but curious, ya'll did your http2 push testing with Google App engine, correct? I don't have a google cloud(using the Amazon free for a year cloud) and so I use nginx with nghttpx. I asked the author and he mentioned it could be that html files get the lowest prioritization in http2 push.

Here is the thread for more information:

https://github.com/tatsuhiro-t/nghttp2/issues/501

Can I please get your opinion/input on it? I'm basically resorting back to vulcanize and not pushing the html files.

Eric Bidelman

unread,

Feb 15, 2016, 1:08:07 PM2/15/16

to Darin Hensley, Polymer, ric...@gmail.com

AFAIK, App engine's h2 push doesn't push based on priority. It pushes all resources at high priority. I'm not sure Chrome even supports resource prioritization (yet) for h2 push. But this could definite be a source of your issue if your sure env is pushing html files at a lower priority.

One thing you could do is still vulcanize, and vulcanize with crisper. Then h2 push the .js file separately from the rest of the .html.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/3ce650e5-52f7-4ee7-8e18-67925ea41bd0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Justin Fagnani

unread,

Feb 16, 2016, 1:57:47 PM2/16/16

to Eric Bidelman, Darin Hensley, Polymer, ric...@gmail.com

I'm trying to follow along here, but I'm having some trouble seeing what's happening. The timeline images you have don't show the .html files, so I can't see when they're downloaded. When you say "The individual time on the files requested are much shorter" do you only mean that the time per file is shorter, or do you also mean that the timeline is showing that they're downloaded earlier?

I'm particularly interested in the case where the files are downloaded earlier with http2 push, but DOMContentLoaded is still firing later. That would indicate that something is going wrong in the browser that delays the ready/load events. The other case, where the files download quicker, but later in the timeline, would line up with the diagnosis that this is a server-related issue, or priority+push support in the browser.

Cheers,

Justin

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCCcsoTUC-TE%3DtoHVMod13uFbOSj67T-MGD7%2BDH8nU9DAQ%40mail.gmail.com.

Darin Hensley

unread,

Feb 16, 2016, 9:18:02 PM2/16/16

to Polymer, ebi...@gmail.com, darin....@gmail.com, ric...@gmail.com

Yes, I mean the time per a individual file is much shorter with http2 push. I had this both on an Amazon and Rackspace server...one Ubuntu and one Gentoo.... and had the same user experience. The set up is pretty simple, so I don't think I was doing anything wrong...nothing pointed out in the github issue I filed for nghttpx. Not sure where the problem would be. I liked be able to brag I was using http2 push and not having to worry about concatenation, but happy enough without it.

Justin Fagnani

unread,

Feb 16, 2016, 9:23:08 PM2/16/16

to Darin Hensley, Peter Burns, Eric Bidelman, Polymer

Can you post the ordering of the files? The timeline screenshot didn't give much info. Again, to clarify, the html files are actually arriving later?

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/e849778d-3e94-4f53-97ed-5149236b15f4%40googlegroups.com.

Darin Hensley

unread,

Feb 16, 2016, 9:36:50 PM2/16/16

to Justin Fagnani, Peter Burns, Eric Bidelman, Polymer

It may be specific to nghttpx or http2 push...not sure. The author of nghttpx stated from https://github.com/tatsuhiro-t/nghttp2/issues/501#issuecomment-182903713

Currently, we only consider js and css to interleave them to the parent resource. It looks like polymer uses HTML files to do some styling. If pushing HTML is common usecase in plymer, then we'd like to consider to interleave HTML as well as js and css.

This is not a cause of this issue, but it would be better not to set Link preload header to pushed resources. Possibly, consider to set them in main (landing) html or something.

Please let me know if I can be of any more help.

Thanks,

-Darin

----------------------------------------------------------------------------

Here is my imports.html:

Here is my nginx config for headers:

#######################

# custom style sheets #

#######################

add_header Link '</css/splash.css>; rel=preload; as=stylesheet';

add_header Link '</css/main.css>; rel=preload; as=stylesheet';

add_header Link '</css/fade-title-animation.css>; rel=preload; as=stylesheet';

add_header Link '</css/paper-ripple.css>; rel=preload; as=stylesheet';

add_header Link '</css/slider-animation.css>; rel=preload; as=stylesheet';

add_header Link '</css/chrome-shadow.html>; rel=preload; as=stylesheet';

add_header Link '</css/non-chrome-shadow.html>; rel=preload; as=stylesheet';

add_header Link '</bower_components/components-font-awesome/css/font-awesome.min.css>; rel=preload; as=stylesheet';

#########

# fonts #

#########

add_header Link '</fonts/RobotoMono-Regular.ttf>; rel=preload; as=font';

add_header Link '</fonts/Roboto-Regular.ttf>; rel=preload; as=font';

##########

# images #

##########

add_header Link '</favicon.ico>; rel=preload; as=image';

add_header Link '</img/cloud-share-image.png>; rel=preload; as=image';

add_header Link '</img/cloud-monitoring.png>; rel=preload; as=image';

add_header Link '</img/legacy-resume-min.jpg>; rel=preload; as=image';

add_header Link '</img/dad-min.jpg>; rel=preload; as=image';

add_header Link '</img/gulp-newy.jpg>; rel=preload; as=image';

add_header Link '</img/polymer-icon.png>; rel=preload; as=image';

add_header Link '</img/krunch.png>; rel=preload; as=image';

#add_header Link '<>; rel=preload; as=image';

#################################

# bower components dependencies #

#################################

add_header Link '</bower_components/paper-behaviors/paper-button-behavior.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-menu-behavior/iron-menu-behavior.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-styles/paper-styles.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-menu/paper-menu-shared.css>; rel=preload; as=import';

add_header Link '</bower_components/iron-behaviors/iron-control-state.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-behaviors/iron-button-state.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-item/paper-item-shared-styles.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-selector/iron-selector.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-resizable-behavior/iron-resizable-behavior.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-meta/iron-meta.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-iconset-svg/iron-iconset-svg.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-styles/shadow.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-flex-layout/classes/iron-flex-layout.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-styles/default-theme.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-styles/color.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-behaviors/paper-button-behavior.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-behaviors/paper-inky-focus-behavior.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-menu-behavior/iron-menubar-behavior.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-tabs/paper-tabs-icons.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-tabs/paper-tab.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-selector/iron-multi-selectable.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-styles/typography.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-behaviors/paper-ripple-behavior.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-flex-layout/classes/iron-shadow-flex-layout.html>; rel=preload; as=import';

add_header Link '</bower_components/font-roboto/roboto.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-selector/iron-selectable.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-selector/iron-selection.html>; rel=preload; as=import';

add_header Link '</bower_components/components-font-awesome/fonts/fontawesome-webfont.woff2?v=4.5.0>; rel=preload; as=import';

add_header Link '</bower_components/polymer/polymer-mini.html>; rel=preload; as=import';

add_header Link '</bower_components/polymer/polymer-micro.html>; rel=preload; as=import';

#add_header Link '<>; rel=preload; as=import';

####################

# bower components #

####################

add_header Link '</bower_components/polymer/polymer.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-menu/paper-menu.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-item/paper-item.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-drawer-panel/paper-drawer-panel.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-flex-layout/iron-flex-layout.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-header-panel/paper-header-panel.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-collapse/iron-collapse.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-icon/iron-icon.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-icons/editor-icons.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-ripple/paper-ripple.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-icons/iron-icons.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-icons/image-icons.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-toolbar/paper-toolbar.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-material/paper-material.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-card/paper-card.html>; rel=preload; as=import';

add_header Link '</bower_components/iron-media-query/iron-media-query.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-fab/paper-fab.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-button/paper-button.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-icon-button/paper-icon-button.html>; rel=preload; as=import';

add_header Link '</bower_components/paper-tabs/paper-tabs.html>; rel=preload; as=import';

###################

# custom elements #

###################

add_header Link '</elements/portfolio/cards/card-behavior.html>; rel=preload; as=import';

add_header Link '</elements/page-behavior.html>; rel=preload; as=import';

add_header Link '</elements/page-styles.html>; rel=preload; as=import';

add_header Link '</elements/footer-custom.html>; rel=preload; as=import';

add_header Link '</elements/toolbar-menus/paper-menu-custom.html>; rel=preload; as=import';

add_header Link '</elements/toolbar-menus/paper-tabs-custom.html>; rel=preload; as=import';

add_header Link '</elements/portfolio/cards/portfolio-card-styles.html>; rel=preload; as=import';

add_header Link '</elements/portfolio/portfolio-display.html>; rel=preload; as=import';

add_header Link '</elements/portfolio/portfolio-page.html>; rel=preload; as=import';

add_header Link '</elements/portfolio/cards/cloud-share-image-card.html>; rel=preload; as=import';

add_header Link '</elements/portfolio/cards/cloud-monitor-card.html>; rel=preload; as=import';

add_header Link '</elements/portfolio/cards/legacy-darin-card.html>; rel=preload; as=import';

add_header Link '</elements/portfolio/cards/dad-site-card.html>; rel=preload; as=import';

add_header Link '</elements/portfolio/cards/gulp-newy-card.html>; rel=preload; as=import';

add_header Link '</elements/portfolio/cards/darin-hensley-card.html>; rel=preload; as=import';

add_header Link '</elements/portfolio/cards/krunch-uploader-card.html>; rel=preload; as=import';

add_header Link '</elements/resume/resume-page.html>; rel=preload; as=import';

add_header Link '</elements/resume/resume-display.html>; rel=preload; as=import';

add_header Link '</elements/contact-display.html>; rel=preload; as=import';

add_header Link '</imports.html>; rel=preload; as=import';

######

# js #

######

add_header Link '</js/polyfill.js>; rel=preload; as=script';

add_header Link '</js/misc.js>; rel=preload; as=script';

add_header Link '</bower_components/page/page.js>; rel=preload; as=script';

add_header Link '</js/router.js>; rel=preload; as=script';

add_header Link '</js/resume.js>; rel=preload; as=script';

add_header Link '</js/pdf.js>; rel=preload; as=script';

add_header Link '</js/pdf.worker.js>; rel=preload; as=script';

add_header Link '</js/initialize.js>; rel=preload; as=script';

#####

#pdf#

#####

add_header Link '</img/darin_hensley_resume.pdf>; rel=preload; as=pdf';

Reply all

Reply to author

Forward