gatsby-starter-blog-theme を使って PWA 対応のブログを作成したら確かに爆速なサイトになった

gatsby-starter-blog-theme の使用方法

基本的には以下のサイトに記載の方法だけで大丈夫。

https://www.gatsbyjs.org/tutorial/using-a-theme/

PWA 対応

基本的には以下のサイトに記載の方法でよいが、最後の SEO でタイトルや excerpt を設定するところはやらなくて良い。 gatsby-theme-blog がよしなにしてくれる。

https://www.gatsbyjs.org/tutorial/part-eight/

SEO のところは、各マークダウンの FrontMatter に記述するだけで良い。

以下に chrome dev tool の audits (Lighthouse) の結果を示す。

Performance のスコアだけ悪い（ネットワークの問題）。 PWA 対応は、ちゃんとできている。

2020-07-13 追記

久しぶりに見ると Lighthouse の評価が上がっていた！

ほぼ満点ではないか。

GatsbyJS すごい。

ちなみに Lighthouse とは

Lighthouse は Web アプリを監査するためのツールで、特に PWA（プログレッシブウェブアプリ）を中心としたサイトの評価を確認することができます。

Ref: Lighthouse とは？SEO に便利なチェックツールを紹介します | PINTO!

Google DevTools から利用できます。

Lighthouse は Chrome の拡張機能も別であるけど、Google DevTools に標準で統合されている。