3 ms·
First contentful paint (FCP) is basically the same (+-10ms) from React down to a raw HTMLElement. I guess at some point appending elements to the DOM is the bo
by mshenfield 6y ago
First contentful paint (FCP) is basically the same (+-10ms) from React down to a raw HTMLElement. I guess at some point appending elements to the DOM is the bottleneck, rather than the overhead of parsing JS and the efficiency of said JS.
To get a faster FCP, statically rendering the component to HTML and re-hydrating it in the client (using Gatsby, for example) seems like it will have a bigger impact than the WebComponent library used. Unless the client is bandwidth constrained of course.
- georges_gomes 6y agoCo-author of the blog post here. My mistake is to call it FCP. This local benchmark only shows the performance of: - parsing the javascript code - creating the DOM node That was the only goal. We should have network simulation for the next update of the blog post to show some additional color. Good idea :thumbsup: Static + re-hydrating is actually built in Web Components (technically). "Only" tooling like Gatsby or Next.js is missing to make it more developer friendly.
- mshenfield 6y agoThanks for clarifying! That's a fair point about web components having the capacity to be statically rendered and re-hydrated.
- hoten 6y agoWould you consider comparing the results of a Lighthouse report?
- georges_gomes 6y agoSounds good. Like have some sort of generic page with components and look for lighthouse score. I'm adding to the list!
- hoten 6y agoSweet, thanks! Feel free to DM me if you need any help. twitter is in bio.