ZEIT Nowで静的サイトの速度を15倍改善した話

# はじめに

[公開されているコンテナの脆弱性をまとめるサイト](https://qiita.com/tomoyamachi/items/e0e69da521505e73237b)を運用しています。
![image](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F14275%2Facf70181-514b-2029-ce01-63fc845edb5b.gif?ixlib=rb-1.2.2&auto=compress%2Cformat&gif-q=60&w=1400&fit=max&s=cd892187693fab5fbacd777a36c8f4c4)
https://containers.goodwith.tech/

サイトのホストには、当初Netlifyを利用していて、ファイルサイズの大きいデータがある場合、データのダウンロードにとても時間がかかっていたのですが、ためしにZEIT Nowを利用したところ、劇的に速度が改善しました。

その後、それぞれのサービスの違いなどをまとめたものを記事にします。

# 結論
- 大きなファイルを扱う場合はZEIT Nowが圧倒的に速い
    - ZEIT NowはBroti圧縮なので多少ファイルサイズが小さくなる
    - ZEIT NowのWTTFが長いので何かしら最適化処理を行っているのかも
- 最終的には、どちらも利用して比較してみるのがいいと思う
    - 以下のブログだとNetlifyのほうが良かったという結論
        - https://medium.com/liferaydesign/netlify-vs-zeit-vs-github-pages-5f609dd6912b
    - サイトの作りによって向き不向きがある可能性もあつ

# HTTP responseで見た比較表

ざっくりした違いをまとめました。

|                                            | ZEIT Now                              | netlify                                      |
| ------------------------------------------ | ----------------------------------- | -------------------------------------------- |
| URL                                        | https://vulnimage-4wgya6bpg.now.sh/ | https://containers-goodwithtech.netlify.com/ |
| protocol                                   | HTTP/2                              | HTTP/2                                       |
| 圧縮形式                                       | Broti                               | gzip                                         |
| 証明書                                        | Let's Encrypt Authority X3          | DigiCert SHA2 Secure Server CA               |
| WTTF (10MBダウンロード時)                         | 1.2~2.0sec                          | 100~500msec                                  |
| Download (10MBダウンロード時)                     | 100~500msec                         | 20~30sec                                     |
| MAX_CONCURRENT_STREAMS<br>(並列ダウンロード/ストリーム) | 128                                 | 150                                          |

雑な見解を言うと、ZEIT Nowの方が新しい技術を採用しています。

`MAX_CONCURRENT_STREAMS`に関しては [Google Developerの記事](https://developers.google.com/web/fundamentals/performance/http2)が参考になります。複数のファイルを読み込む場合、基本的には数が大きい方が有利です。



# 詳細
##  Netlify

curl

```shell
    $ curl -I https://containers-goodwithtech.netlify.com/jsons/vaikas:nodejsservice/trivy.json 
    HTTP/2 200
    accept-ranges: bytes
    cache-control: public, max-age=0, must-revalidate
    content-length: 10456206
    content-type: application/json
    date: Sat, 02 Nov 2019 18:47:03 GMT
    etag: "9a7a82ab949f5eca3a33a545963f047f-ssl"
    age: 1
    server: Netlify
    x-nf-request-id: aa867750-0a7d-46af-a13f-4b6f09248853-28026257
```

Lighthouse
![](https://paper-attachments.dropbox.com/s_950D65C77234D53888E1E805DBA90B06AEED1FFC0250964BEBF575A834D07C43_1572721569067_image.png)

10MBのデータをダウンロード時のタイムライン
![10MBのデータをダウンロード時](https://paper-attachments.dropbox.com/s_950D65C77234D53888E1E805DBA90B06AEED1FFC0250964BEBF575A834D07C43_1572714520962_image.png)



## now.sh

curl

```shell
    $ curl -I https://vulnimage.tomoyamachi.now.sh/jsons/vaikas:nodejsservice/trivy.json 
    HTTP/2 200
    date: Sat, 02 Nov 2019 18:35:59 GMT
    content-type: application/json; charset=utf-8
    cache-control: public, max-age=0, must-revalidate
    content-length: 10456206
    content-disposition: inline; filename="trivy.json"
    access-control-allow-origin: *
    accept-ranges: bytes
    etag: W/"73c2159a3893c7ec49a81685696797519f7d0e4342cf77c51eed18905a1b28f1"
    x-now-cache: MISS
    x-now-trace: hnd1
    server: now
    x-now-id: hnd1:mzb2v-1572719759100-c8367fe1ed25
    strict-transport-security: max-age=63072000
```

Lighthouse
![](https://paper-attachments.dropbox.com/s_950D65C77234D53888E1E805DBA90B06AEED1FFC0250964BEBF575A834D07C43_1572721597630_image.png)

10MBのデータをダウンロード時のタイムライン
![10MBのデータをダウンロード時](https://paper-attachments.dropbox.com/s_950D65C77234D53888E1E805DBA90B06AEED1FFC0250964BEBF575A834D07C43_1572714937748_image.png)


# まとめ
両方、めちゃくちゃよくできたサービスで、基本無料で利用できるのに選択肢があるとか、めちゃくちゃ贅沢ですね。
今後もまだ使っていないサービスがあったら積極的に試してみて、他サービスと比べてみようと思いました。