Why does Script Evaluation take so long?

reactjs gatsby pagespeed google-pagespeed
Markus Müller picture Markus Müller · May 25, 2019 · Viewed 8.6k times · Source

I'm using gatsbyjs and tried to optimize my webpage (https://www.rün.run) as much as possible. Running PageSpeed gives me some decent results. What I'm wondering is, why Script Evaluation is taking so long? My js bundle size is only 257 kb (gzipped) large.

It looks like the react hydration is taking the time. So is it because of react? Or has my DOM tree to many elements?

Direct link to PageSpeed: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.xn--rn-xka.run%2FKalista%2Fadc&tab=mobile

My goal is also to get only mobile a value of 100. How can I improve any further?

Answer

Artem Matiushenko picture Artem Matiushenko · Jan 23, 2020

Yes, it seems that rehydrate takes this time. I have tried it with simple component which contains just a text, and still, there is some (quite long for that case) time for main-thread work & JavaScript execution time. And the same thing if you will test https://store.gatsbyjs.org/

But anyway, even due to this issue results with gatsby really great

Related questions

How do I add google fonts to a gatsby site

Getting started with Gatsby - when I add a link tag to public/index.html with the google font it works in development mode. When I build the site the index.html gets reset. So I guess there is another …

Read More
GatsbyJS getting data from Restful API

I am new in both React and GatsbyJS. I am confused and could not make figuring out in a simple way to load data from third-party Restful API. For example, I would like to fetch data from randomuser.me/API …

Read More
How to use Icons like Font Awesome in Gatsby

I want to use Font Awesome Icons in my Gatsby project. I would love to include font awesome with a CDN. Just including it in a script tag doesn't work. I think I need to import it with import ... from …

Read More