README.md – nextjs-pageweight-analyser

`README.md`

1.9 kB
Markdown
View raw
1# nextjs-pageweight-analyser
2
3This is a simple script I wrote for analysing page weight of a site built using [Next.js], which I what I use [at work].
4
5When we use Next.js, we send data to the page using [getServerSideProps].
6These props get rendered as JSON and stuffed inside a `<script>` tag, like so:
7
8```html
9<!DOCTYPE html>
10<html lang="en" class="is-keyboard">
11  <body>
12    ...
13    <!--
14      This includes `getServerSideProps` in the `pageProps` key.
15    -->
16    <script id="__NEXT_DATA__" type="application/json">
17    {"props":{"pageProps":{"now":"2022-09-04T00:39:10.494Z"},"__N_SSP":true},"page":"/now","query":{},"buildId":"development","runtimeConfig":{"apmConfig":{"serviceName":"content-webapp","active":true,"centralConfig":true}},"isFallback":false,"gssp":true,"customServer":true,"appGip":true,"scriptLoader":[]}
18    </script>
19  </body>
20</html>
21```
22
23Sending unnecessary data in these props can bloat the size of the page.
24
25This script:
26
27*   fetches the page
28*   reports the size of the HTML and the `__NEXT_DATA__` specifically
29*   saves the `__NEXT_DATA__` to a pretty-printed JSON file for easy analysis
30
31I use this script to analyse the props, to identity ways we can reduce the size of the Next.js data, and to measure the impact of changes.
32
33[Next.js]: https://nextjs.org
34[at work]: https://github.com/wellcomecollection/wellcomecollection.org
35[getServerSideProps]: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
36
37## Usage
38
39You need Node installed.
40Download the `measure.js` from this repo.
41
42The script takes two arguments:
43
44* the URL to fetch (required)
45* a label for the downloaded files (optional)
46
47Example:
48
49```console
50$ node measure.js https://wellcomecollection.org/collections collections
51HTML       =  196.45 kB
52NEXT_DATA =   52.17 kB (26.6%)
53
54Saved HTML to out/collections.html
55Saved JSON to out/collections.json
56```