技術スポンサードリンク前回、Google公式の監査アドオン、SEO対策はlighthouseを使おう!Performance編の記事でlighthouse、そしてパフォーマンス改善について解説をした。Accessibility編ではユーザーのアクセスのしやすさについて解説をした。Practicesについて解説と改善方法を記載していく。まとめlighthouseとは?使い方は?詳細は、前回の記事Google公式の監査アドオン、SEO対策はlighthouseを使おう!Performance編で書かせてもらったので割愛しますが、ざっくり説明すると、Googleが想定している「ユーザーにとって使いやすいサイト」かどうか自動で判定してスコアを出してくれるツールです。Practices編について解説していきます。Practices」だと考えて良いと思います。Wikipediaの項目を参考にすると、ある結果を得るのに最も効率のよい技法、手法、プロセス、活動などのこと。適切なプロセスを確立し、チェックと検証を行えば、問題の発生や予期しない複雑さを低減させて、望ましい結果が得られるとのこと。いうと、「サイトを一番良い方法で作っているか」という感じ?監査項目も、HTTPS対応をしているか、等になっており、まさに問題の発生リスクを低減させること等をチェックしているようです。改善項目とそれぞれの改善方法いくつかの改善項目と、その改善方法に章だてて解説していきます。HTTPSSSL対応していないサイトの表記。アクセスは出来るが、ユーザーが見たらどう思うだろうか・・・。サイトがHTTPS対応しているかどうかです。古いjsライブラリなどを使用する際は気を付けましょう。こちらの改善方法は至って単純。独自のリソースを使う際はSSL対応しているサーバー上にアップロードして利用する外部のリソースを使う際はhttps対応しているか確認するこの二つだけです。いえ、SSL対応は結構面倒でお金もかかるので大変かもしれません。resourcesこれはHTTP/2を使えということなのですが、そもそもHTTP/2ってなんだ、という話ですよね。長くなりますが解説していきます。Protocol」の略で、クライアント(ブラウザ)とサーバーとの間で、どのようにデータをやり取りするかを定めた仕様のことです。HTTP/1では、実はこのデータのやり取りを1:1で行ってきました。いうことかというと、ブラウザ側からサーバー側に、「アクセスしましたよ」という信号を送ると、サーバー側からは「じゃあこういうデータ送りますよ」と言って、そのあとブラウザ側からまたサーバー側に「リソース受け取りましたよ」という信号を受け取ったらまたサーバー側から次のデータを送信して・・・ということの繰り返しだったのです。(余談ですが、そういう事情があり昔は画像の送信を一つずつではなく全部まとめて送ったりと色々工夫をしていました。)それが、HTTP/2になってからは、ストリームという概念が現れ、同時並行でリクエストとレスポンスを行えるようになりました。同時並行で行えることになったことで、ページの読み込み速度が劇的に向上したというわけです。ページの表示を高速で行うことを推奨するGoogleさんとしてはこれは導入して欲しい、ということでしょう。割愛しますが、そのほかにも様々な利点があります。改善するにはどうするの?(HTTP/2導入ってどうやんの)という話ですが、これはサーバー側の設定の話になってくるので、中々難しいと思います。Apatchを使っているのであれば、「mod_http2」というモジュールを導入することで利用できるようになります。Apatchを使っていない場合もあると思うので、そうなるとそのソフトウェアにあわせた設定が必要になってくると思います。そこはもうぐぐって頑張るしかないです。指定が無いaタグを使って外部リンクを開いた場合、リンク元のページとリンク先のページは同じプロセスで動作します。何が問題かというと、リンク先のページで負荷の高いjsが実行されていると、リンク元のページのパフォーマンスが低下します。戻ってくると、自分のサイトのコンテンツの動きが遅くなる、というイメージです。これの改善方法は非常に簡単で、aタグに、「rel=”noopener”」を付けるだけでOKです。Practicesをまとめてみました。ここは比較的簡単に修正できる項目と、そうでもない項目が入り混じっているので、修正できそうな修正する、駄目そうなら一旦おいておくで良いと思います。Webの基礎部分の勉強にもなるので、Accessibilityの項目が終わったらこちらに取り組んでも良いかもしれません。次回はSEOについて解説していきます。某配送システム白猫プロジェクトのアイシャが大好きなエンジニアの卵。Java/Shell/C++/HTML/Sass/rustかgoやりたい。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。WordPress.。