ハカセノオト

moon indicating dark mode
sun indicating light mode

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

April 06, 2020

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) の結果を示す。

audit

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

2020-07-13 追記

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

audit-20200713

ほぼ満点ではないか。

GatsbyJS すごい。

ちなみに Lighthouse とは

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

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

Google DevTools から利用できます。

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


hnishi のブログ


技術系の記事など。
綺麗に書こうとすると続かない気がするので、割と雑に、備忘録的に書いていく方針。
内容に誤りがあった場合などのご連絡は、Twitter の DM などで頂けると幸いです。