search

3perf / website

The site of PerfPerfPerf, a web performance consulting agency
https://3perf.com
18 stars 4 forks source link

Move the Logo animation script to <head> #5

Closed iamakulov closed 4 years ago

iamakulov commented 4 years ago

Follow-up to #1.

In Chromium, on a slow connection, a script in the middle of the page blocks the rendering of the remaining page:

image

Even if it’s inline. Even if it’s type="module" and should be deferred.

This PR fixes that by moving the script to <head>. (We’d better move it to the end of <body>, but there’s no easy way to do that automatically.)

porfirioribeiro commented 4 years ago

I may be wrong, but using something like:

createPortal(<script .../>, document.body);

Works on SPA, but I don't know if it would work on SSR in Gatsby

iamakulov commented 4 years ago

Judging from quick googling, it wouldn’t :( createPortal requires a DOM node, and there’re no DOM nodes on the server.

porfirioribeiro commented 4 years ago

Yeah, createPortal would not work on SSR, too bad