cheezBlog

JavaScriptとSEOを読んで

カエルと空 | JavaScriptとSEOという本を買ってよんだので、学んだことをまとめてみた。

0章 用語集

  • First Paint ページが表示され始めたとき。

  • First Contentful Paint コンテンツが表示され始めたとき。

  • Time to Interactive ユーザーの操作に応答できるようになったとき。

  • Time to First Byte 最初の1バイトが到着するまでの時間。

  • crawl budget Googleがサイトごとに割り当てている、クローラが回る「時間」と「ページ数」のこと。 その値はサイトの価値によって変動し、そのため、必然的にトップページなどの方からクロールされ、下層ページはクローラが回りづらい。

参考文献1: Web クライアントサイドのパフォーマンスメトリクス

参考文献2: https://www.roundup-consulting.jp/strategy/google-crawl-budget/

1章 JavaScriptとSEO

  • Evergreen Googlebotという最新のChromium（現在でいうとChrome74相当のレンダリング能力)を用いたbotが2019年5月31日に生まれた。
    • ES6以降のJavaScriptがそのまま使用可能
    • インデックス遅延も90%の確率で数分以内に収まる

ただし、javascriptを不適切に使用した場合、SEOに悪影響を与えるらしい。

2章 SEOを意識したレンダリング

クライアントサイドレンダリング(SPA)

直接ブラウザでページをレンダリングする手法。 サーバーとのコンテンツのやりとりが少なく、ページ全体のロードが初回のみで良いが、JavaScript量が多くなってくとレンダリングパフォーマンスが低下する可能性が高い。

静的レンダリング

ビルド時に各URLに対応する個別の静的なページを生成して、クエストされた際に事前に生成した HTMLページを返すレンダリング方法。 すべてのURLに対するHTMLファイルを事前にホストするため、First Paint / First Contentful Paint / Time to Interactive / Time to First Byteが最速になる。 このブログも本当はこの実装方法なはずなのだが、APIは叩いてる...笑

サーバーレンダリング(SR)

サーバーでリクエスト毎にHTML描画まで行い、それをレスポンスとしてブラウザに送信しページをレンダリングする方法。railsとかphpとか使ってたらだいたいこれかな。 ブラウザ上でのJavaScriptの実行を待たなくてよいため基本的に早いが、サーバーサイドの処理が重いとTime to First Byteが遅くなる。

ユニバーサルレンダリング(SSR)

いまいち仕組みわかってないので一旦割愛...

APIから状態を取得して、クライアント側でその状態を再注入するってことだとは思うが、メリットデメリットがよくわからない。

デハイドレーション - アプリの状態をオブジェクトに抽出すること リハイドレーション - 抽出されたオブジェクトを使用してアプリ ケーションに状態を再注入すること

ダイナミックレンダリング

もっとわかんないので、後日調査

3章 Googleは本当にJavaScriptを迅速にインデックスするのか

  • SPAでも、インデックス遅延がなくなったといえる。
  • ただし、ページスピードは期待できない。
  • SPAだと、ogpは動的に変更できない。

4章 アプリケーションのパフォーマンス改善

  • compression-webpack-pluginを用いてbuild した際に作成されるjsファイル等をgzipで圧縮すると、高速化可能らしいが、詳しくは調査が必要そう。

感想

いろんなレンダリング方法があって、それぞれメリット/デメリットがあることはわかったが、実際どれが一番SEOに良いのかがわからなかった。