Page Speed Scores of 896 Websites Built using GatsbyJS [Downloadable Table]

written by hiveminds_dev

on April 21, 2020

What is Gatsbyjs:

Gatsby is react based, graphQL powered, static site generator. It’s a free and open-source framework that helps in building amazingly fast websites and apps.

When you work on Gatsby you will experience that Gatsby is more than a static site generator. It’s truly a PWA framework that can be used to build static sites that follow the latest web standards for incredibly fast page loading, intelligent image loading, code splitting, server-side rendering, service workers, asset optimization, and data prefetching.  It makes use of the popular and latest technologies including ReactJS, GraphQL, Webpack, JavaScript, modern ES6+ and CSS.

 

Why is Website Page speed an important factor when building a website?

Website page speed is one of the important factors that every web developer and SEO specialist must look for. A website with low speed will make users feel fed up and force them to use a competitor website instead. 

For better user experience, Google also considered it as a key factor before ranking up the website in SERPs.

Page -peed-image

Here are some drawbacks that a website with low page speed would face:

  1. Approximately 40% of Internet users will close your website if your website load speed is more than 3 Seconds.
  2. Google gives preference to fast page speed websites compared to a website with low page speed while ranking in SERPs.
  3. Approximately 45% of users will share the information if they experience something bad using your website 

The low page speed of a website will force a customer to shift to a competitor website which will ultimately reduce revenue and market share in the long run.

 

How Gatsby is beneficial in increasing your website speed.

As we already discussed, Gatsby is a react based, graphQL powered, static site generator that pulls the data from the sources provided by you & generates a website/app for you. Here are some features of Gatsby which help in increasing your website speed. 

A. Code splitting: By setting up dynamic imports while creating a page, Gatsby can understand which are the components that page needs and let webpack do code spitting automatically. 

By Doing this, browsers now don’t have to request the whole website. It will request only those files that are required for the page. Ultimately speeding up the time to interact with the page.

B. Link Prefetching: Gatsby pre-download the content/code from the link which makes websites work faster then they would compare to other Tools.

C. Image Optimization: Optimizing images is one of the best practices to improve the website page speed. Reducing the size of the images reduces the bandwidth which helps browser to download and render content faster. Optimizing images may take a lot of effort & a time-consuming process. But it can be automated by using The Gatsbyjs-image plugin. This plugin helps create some thumbnails & apply compression & it also sets-up the image with different resolutions for download at the time of building step.

D. Gatsby Doesn’t Require Page Reloads: Gatsby doesn’t require a separate page reloads each time you shift to a different one. The pre-downloaded or pre-cached pages are instantaneously rendered whenever required.

E. Lower time to interactivity: Time to interactive means how long does it take for a page to be fully interactive. So, the best way to keep people on your website is to give them something with which they can interact faster so they can be tied up till your page is completely loaded. The interactive time offered by Gatsby is 1.73 seconds.

 

Gatsby Website Page Speed Analysis:

Here we have analysed 896 themes of different websites that are listed in the Gatsby website showcase section. It can be a tedious task to extract data manually for every website. But it’s an interesting part when you automate the process and extract all the required information. 

Below is the summary of the study we have done. Here we have showcased the first 50 websites. To get the details of all the 896 websites, you can refer to this google sheet where we have added all the data. The page speed scores are from developers.google.com which will showcase the speed of the websites that are built using Gatsby.

 

#

Address

Mobile Score 

Desktop Score

1

https://www.markets.com/

0

0.07

2

https://wtlstudio.com/

0.01

0.24

3

https://madvoid.com/

0.19

0.26

4

https://www.cinch.co.uk/

0.28

0.27

5

https://cpbgroup.com/

0.16

0.28

6

https://becreatives.com/

0.06

0.28

7

http://oira.ua.edu/

0.33

0.39

8

https://weihnachtsmarkt.ms/

0.28

0.4

9

https://www.frame.io/

0.13

0.4

10

https://dashbouquet.com/

0.31

0.44

11

https://themes.lekoarts.de/

0.66

0.46

12

https://www.escaladesports.com/

0.21

0.46

13

https://www.wearebrew.co.uk/

0.58

0.48

14

https://sindhuka.org/

0.3

0.48

15

https://www.prima.co/

0.22

0.48

16

https://impossiblefoods.com/

0.31

0.49

17

https://wagwalking.com/

0.13

0.5

18

https://webman.pro/

0.53

0.5

19

https://justdoit.nike.com/

0.11

0.5

20

https://kyma-project.io/

0.32

0.51

21

https://www.bitcoin.com/

0.22

0.51

22

https://madecomfy.com.au/

0.19

0.51

23

https://afexnigeria.com/

0.26

0.52

24

https://www.swapcard.com/

0.1

0.52

25

https://www.wk.com/

0.32

0.52

26

https://federico.giac.one/

0.64

0.54

27

https://premium.telegraph.co.uk/

0.1

0.54

28

https://www.ibm.com/design/

0.29

0.56

29

http://www.bench.co/

0.32

0.57

30

https://beararchery.com/

0.18

0.57

31

http://www.birranapoli.it/

0.13

0.57

32

https://ritual.com/

0.18

0.59

33

https://hanarecafe.com/

0.27

0.61

34

https://www.unow.fr/

0.12

0.61

35

https://www.codechampionship.com/

0.3

0.61

36

https://kobit.in/

0.33

0.62

37

https://www.yuuniworks.com/

0.14

0.63

38

https://tenalphas.com.au/

0.31

0.63

39

https://www.clearme.com/

0.37

0.63

40

https://kosmosplatform.com/

0.4

0.63

41

https://testingjavascript.com/

0.41

0.64

42

https://oasome.blog/

0.17

0.64

43

https://www.piratestudios.co/

0.25

0.65

44

https://dev.mailjet.com/

0.25

0.65

45

https://studenten-bilden-schueler.de/

0.76

0.65

46

https://fcfcu.com/

0.45

0.65

47

https://adam.ai/

0.24

0.65

48

https://haacht.com/en/

0.15

0.65

49

https://mux.com/

0.34

0.66

50

https://developer.bitcoin.com/

0.39

0.66

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 To Download Table: Click Here

When you are looking for functionality & speed, give more preference to the speed of the website. To help further, here we have also added six such important metrics (known as “lab data” on page speed insights) in a Google sheet. The metrics are as follows. 

First Contentful Paint (FCP): FCP measures how long it takes any part of the page’s content to be rendered on the screen. A good FCP value is less than 1 seconds.

The average FCP value for of Gatsby website is:

Mobile:    1.96 Seconds > 1 Seconds

Desktop: 0.57 Seconds < 1 Seconds

First Meaningful Paint (FMP): FMP measures how much time it takes for a page’s primary content to appear on the screen. A good value for this metric is less than 2 seconds.

The average FMP value for Gatsby website is:

Mobile:    2.43 Seconds > 2 Seconds 

Desktop: 0.69 Seconds < 2 Seconds

Speed Index Measures: Speed Index measures how quickly the page contents are visually populated. A good value is less than 4.3 Seconds.

The Average Speed Index measure for Gatsby website is:

Mobile:     4.68 Seconds > 4.3 Seconds.

Desktop:  1.52 Seconds < 4.3 Seconds.

First CPU Idle: It defines the first point of time at which the page could accommodate input. A good value for this metric is under 4.7 seconds.

The Average First CPU Idle time for Gatsby website is:

Mobile:     6.06 Seconds > 4.7 Seconds.

Desktop:  1.48 Seconds < 4.7 Seconds.

Time to Interactive: Time to interactive measures how long does it take for a page to fully interactive. Sometimes, a page is fully visible but not ready to take input from the user. A good value for this metric is under 5.2 second.

The Average Time to interactive for Gatsby website is:

Mobile:   7.74 Seconds > 5.2 Seconds

Desktop: 1.73 Seconds <  5.2 Seconds

 

The Process:

  • We went to the Gatsby website in the showcase section.
  • We removed all the filters from the category. 
  • We manually then scroll down the whole page till the last website is shown to me, 
  • Then we run the “SEO Quake” extension on the page. With the help of SEO Quake, we downloaded all the external links of that showcase page which were pointing to all those websites. 
  • SEO-Quake

  • After downloading all the external links, filter and remove all the irrelevant links.
  • After getting all the links, we filtered all the URLs and kept just domain names.     

List-of-Domains

  • For scaling up the bulk page insights check, we added “https://developers.google.com/speed/pagespeed/insights/?url=” in front of every selected domain with the help of concatenate formula i.e. =CONCATENATE(A1, B1) 

Converted-urls

  • Now, go to Screaming frog & adjust some of your settings. 

After sorting all your URLs make sure that Google doesn’t realise that you are running a bot or else it will put a captcha hammer on you straightway.

Google-captcha

    

So here are some adjustments we need to make.

  • Switch the tool to list mode(on the top menu >mode> list)  
  • Now move to rendering section (configuration > Spider > Rendering) – Turn on Javascript & increase the AJAX timeout from 5 seconds to 15-20 for safe measure.
  • Now move to the speed panel (Configuration > Speed) turn the max threads to 1 and the Max URL/s to somewhere between 0.1 & 0.5 a second. 

Screaming-frog-sections-to-edit
Screaming-frog-rendering-section

  • Data Extraction:

Now we have to instruct the tool which data we actually want to get extracted i.e page speed scores.

Move on to the custom extraction panel (Configuration > custom > extraction) and enter the following XPath variables depending on metrics you require to pull.

Screaming-Frog-custom-extraction

 

Mobile Score

(//div[@class="lh-gauge__percentage"])[2]

Desktop Score

(//div[@class="lh-gauge__percentage"])[3]

 

Field Data

Mobile  First Contentful Paint (FCP)

(//div[@class="metric-value lh-metric__value"]//text())[1]

 

Desktop First Contentful Paint (FCP)

(//div[@class="metric-value lh-metric__value"]//text())[5]

 

Mobile First Input Delay (FID)

(//div[@class="metric-value lh-metric__value"]//text())[2]

 

Desktop First Input Delay (FID)

(//div[@class="metric-value lh-metric__value"]//text())[6]

 

Lab Data

Mobile First Contentful Paint

(//div[@class="lh-metric__value"]//text())[1]

 

Desktop First Contentful Paint

(//div[@class="lh-metric__value"]//text())[7]

 

Mobile First Meaningful Paint

(//div[@class="lh-metric__value"]//text())[4]

 

Desktop First Meaningful Paint

(//div[@class="lh-metric__value"]//text())[10]

 

Mobile Speed Index

(//div[@class="lh-metric__value"]//text())[2]

 

Desktop Speed Index

(//div[@class="lh-metric__value"]//text())[8]

 

Mobile First CPU Idle

(//div[@class="lh-metric__value"]//text())[5]

 

Desktop First CPU Idle

(//div[@class="lh-metric__value"]//text())[11]

 

Mobile Time to Interactive

(//div[@class="lh-metric__value"]//text())[3]

 

Desktop Time to Interactive

(//div[@class="lh-metric__value"]//text())[9]

 

Mobile Estimated Input Latency

(//div[@class="lh-metric__value"]//text())[6]

 

Desktop Estimated Input Latency

(//div[@class="lh-metric__value"]//text())[12]  

(Make sure that you are adding a custom label to every metric you are extracting. It will help to differentiate among different metrics later on and setting the type to XPath & change the far right drop down to “Extract Text”) 

Screaming-frog-Custom-extraction-dashboard

Once all the above things are done copy the list of selected URLs and paste it in the upload section. 

Screaming-frog-upload-section

That’s it, you’re done. Now, sit and relax, and let the tool do the job.

How to export the data?

After the crawl is 100% complete, click on custom extraction and put the filter to “All” & then click to extract to export the whole data.

Screaming-frog-Data-Extraction

Types of Errors in crawl

There are chances that you might face some issues in the process of crawling.

Sometimes a screaming frog is not able to extract the data for every URL:

After crawling, you may find that metrics are not available for the same URLs. select all those URLs for which you didn’t get the data and submit them for respider.

Sometimes google can put anti-bot captcha.

To solve this issue, pause the crawl, open those URLs in the browser & solve the captcha & Just select the URLs for which you didn’t get the data and submit them for respider.  

If still, you are facing issues in crawling then make the screaming frog configuration settings to default by going to (file > configuration > clear to default >.

We Hope this post serves as a reference in quickly identifying pagespeed scores of websites built using Gatsby, and helps you in keeping a check when building your own websites using Gatsby.