Google公式の監査アドオン、SEO対策はlighthouseを使おう！Best Practices編

前回、Google公式の監査アドオン、SEO対策はlighthouseを使おう！Performance編の記事でlighthouse、そしてパフォーマンス改善について解説をした。
さらにAccessibility編ではユーザーのアクセスのしやすさについて解説をした。
今回はその次の項目である、Best Practicesについて解説と改善方法を記載していく。

lighthouseとは？使い方は？

詳細は、前回の記事
Google公式の監査アドオン、SEO対策はlighthouseを使おう！Performance編
で書かせてもらったので割愛しますが、
ざっくり説明すると、Googleが想定している「ユーザーにとって使いやすいサイト」かどうか自動で判定してスコアを出してくれるツールです。

前回、前々回はこのサイトのページでスコアを出して、
それを基にパフォーマンス(ページの速度)とアクセスのしやすさについて解説しましたが、
今回はその続きで、Best Practices編について解説していきます。

Best Practicesはどういう項目で、どう改善していくのか

この言葉は、SEO用語ではなく、一般名詞としての「Best Practices」だと考えて良いと思います。
なので、Wikipediaの項目を参考にすると、

とのこと。
ザックリいうと、「サイトを一番良い方法で作っているか」という感じ？
監査項目も、HTTPS対応をしているか、等になっており、まさに問題の発生リスクを低減させること等をチェックしているようです。

改善項目とそれぞれの改善方法

いくつかの改善項目と、その改善方法に章だてて解説していきます。(全部は膨大過ぎてまとめられなかった・・・)

Does not use HTTPS

サイトがHTTPS対応しているかどうかです。
これはサイトのドメインそのものだけでなく、サイト内で読み込んでいる画像やcss、jQueryにも影響しているようなので、
古いjsライブラリなどを使用する際は気を付けましょう。

こちらの改善方法は至って単純。

• 独自のリソースを使う際はSSL対応しているサーバー上にアップロードして利用する
• 外部のリソースを使う際はhttps対応しているか確認する

この二つだけです。
とはいえ、SSL対応は結構面倒でお金もかかるので大変かもしれません。

Does not use HTTP/2 for all of its resources

これはHTTP/2を使えということなのですが、
そもそもHTTP/2ってなんだ、という話ですよね。
少し長くなりますが解説していきます。

そもそもHTTPとは、「Hyper Text Transfer Protocol」の略で、
クライアント（ブラウザ）とサーバーとの間で、どのようにデータをやり取りするかを定めた仕様のことです。
HTTP/1では、実はこのデータのやり取りを1:1で行ってきました。

どういうことかというと、
ブラウザ側からサーバー側に、「アクセスしましたよ」という信号を送ると、サーバー側からは「じゃあこういうデータ送りますよ」と言って、
そのあとブラウザ側からまたサーバー側に「リソース受け取りましたよ」という信号を受け取ったらまたサーバー側から次のデータを送信して・・・
ということの繰り返しだったのです。
（余談ですが、そういう事情があり昔は画像の送信を一つずつではなく全部まとめて送ったりと色々工夫をしていました。）

それが、HTTP/2になってからは、ストリームという概念が現れ、同時並行でリクエストとレスポンスを行えるようになりました。
同時並行で行えることになったことで、ページの読み込み速度が劇的に向上したというわけです。
ページの表示を高速で行うことを推奨するGoogleさんとしてはこれは導入して欲しい、ということでしょう。
割愛しますが、そのほかにも様々な利点があります。

で、改善するにはどうするの？（HTTP/2導入ってどうやんの）という話ですが、
これはサーバー側の設定の話になってくるので、中々難しいと思います。
例えばApatchを使っているのであれば、「mod_http2」というモジュールを導入することで利用できるようになります。
ただ、Apatchを使っていない場合もあると思うので、そうなるとそのソフトウェアにあわせた設定が必要になってくると思います。
そこはもうぐぐって頑張るしかないです。

Links to cross-origin destinations are unsafe

これは外部リンクにを付ける際に注意した方がよいことで、
特に指定が無いaタグを使って外部リンクを開いた場合、リンク元のページとリンク先のページは同じプロセスで動作します。
何が問題かというと、リンク先のページで負荷の高いjsが実行されていると、
リンク元のページのパフォーマンスが低下します。
例えばゲームのポータルサイトのような凝ったサイトはjsの処理も凄まじいのですが、
自分のサイトでもjsで動くコンテンツがある状態で外部リンクにゲームのポータルサイトを入れて開いた状態にし、
戻ってくると、自分のサイトのコンテンツの動きが遅くなる、というイメージです。

これの改善方法は非常に簡単で、
aタグに、「rel=”noopener”」を付けるだけでOKです。

まとめ

というわけで、今回は「最良のメソッド」の項目であるBest Practicesをまとめてみました。
ここは比較的簡単に修正できる項目と、そうでもない項目が入り混じっているので、修正できそうな修正する、駄目そうなら一旦おいておくで良いと思います。
ただ、結構Webの基礎部分の勉強にもなるので、Accessibilityの項目が終わったらこちらに取り組んでも良いかもしれません。

次回はSEOについて解説していきます。