ホームページにも「○○診断」が必要です

blog-hero-img結果を出し続けているホームページは、定期的に「健康診断」をしてコンディションをチェックしています

pen-icon2020.01.20rewrite-icon2021.03.05

Profile Pic

この記事の筆者:三好アキ(エンジニア)


ウェブデザイナーから『エンジニア』『プログラマー』へ成長したい人、独学で進んでいきたい人を応援しています。 HTMLとCSSの知識だけでアプリ開発を始められる入門書を多数執筆中📕📗👇


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて配信中。登録はこちらから → 無料メルマガ登録

なぜホームページの診断が必要?

前回の記事では、ウェブサイトのスピードを下げる最大の原因であるフォントと画像の改善方法を紹介しましたが、その時にLighthouseとPageSpeed Insightsというサイトの状態を診断するツールにも少し触れました。

今回は、この2つのツールをくわしく紹介していきます。

LighthouseとPageSpeed Insights

どちらもGoogleによって開発されているツールですが、LighthouseはGoogleクロームに組み込まれているため、クローム以外のブラウザ、例えばFirefoxやEdgeを使っているユーザーは使用できません。

他方で、PageSpeed Insightsはウェブ上にあるツールなので、どのブラウザからもアクセスして使用できます。

機能面では、Lighthouseの方が診断項目が多く、ウェブサイトのパフォーマンス以外にも、SEOやアクセシビリティの診断結果を得られる一方、PageSpeed Insightsの方はパフォーマンス1項目のみの診断となります。

Lighthouseは英語表示のみ、一方でPageSpeed Insightsは日本語対応しているので、日本語で結果を知りたい方はPageSpeed Insightsを使いましょう。

PageSpeed InsightsとLighthouseの使い方

PageSpeed Insightsは下のリンクからアクセスして、診断したいURLを入力してください。

PageSpeed Insights


Lighthouseを使う場合、まず診断したいウェブサイトをGoogleクロームで開きます。

ウェブサイト上で右クリックし、表示されたタブの中から「検証」を選択します。

そうすると画面右(もしくは画面下)に検証ツールが開きます。

Lighthouse pic

検証ツール上部で、最初は「Elements」というものが選択されていると思いますが、その並びにある「Console」「Sources」「Network」などの中から「Audits(もしくはLighthouse)」を選ぶとLighthouseが起動するので、表示された「Generate report(もしくはRun audits)」という青いボタンをクリックして診断を始めます。

Lighthouseを使う時の注意

Lighthouseでは診断する項目を選べます。

検証ツールの「Audits」のタブでLighthouseを起動すると、「Categories」とあるので、そこで選択をしてください。

デフォルトではすべての項目にチェックが入っています。

なお、Lighthouseを使うときはGoogleクロームに入っているエクステンション(拡張機能)はすべてオフにしましょう。

ウェブサイトとの通信を読みとって動く拡張機能が入っている場合、通信速度に影響することがあるため、スコアが正しく測定されなくなります。

また、「Generate report(もしくは Run audits)」を押して、Lighthouseがスコアを判定している間は、他のタブでウェブサイトを開いたり、動画を再生したりするのは一時的に止めましょう。これも測定結果に影響します。

その他、診断を行うパソコンのCPUや、WiFiの通信スピードからも影響を受ける事があります。

Lighthouseの診断結果の見方

Lighthouseでは「Performance」「Accessibility」「Best Practices」「SEO」「Progressive Web App」の5項目のスコアを算出してくれます。

各項目が何を表しているかを解説していきます。

Performance

多くの人が一番注目するのがこの「Performance」です。

ウェブサイトの表示スピードを測定するので、このスコアが高いほど、スピードが早く、ユーザーに快適な使い心地を提供できていることになります。

他の項目と比べて、高いスコアを取るのが一番難しい項目です。

Mishima Score

Accessibility

ウェブサイトが、すべての人にとって使いやすい構造になっているかが診断されます。

一旦ウェブサイトを公開をすれば、世界中の人がアクセスできるようになりますが、すべての人が同じ環境でインターネットを使っているわけではないので、例えば通信速度が遅い環境からアクセスしている場合、「画像が表示されない」といった問題の発生するケースが考えられます。

そのような時のために、例えば<img>タグにalt属性がついているか、<html>タグに言語の設定をしているか、<title>タグがあるかなど、ウェブサイトがHTMLの作法に乗っ取って正しく構築されているかが、この項目ではチェックされます。

Best Practices

ウェブサイトが、ウェブのスタンダードに則った手法によって構築されているかを確認します。

サーバーとの通信形式(安全なHTTPSかなど)、非推奨のAPIリクエストの有無などがチェックされています。

SEO

ウェブサイトがGoogleの検索に表示されるためには、まずはGoogleのクローラーというものに読み取られる必要があります。

このSEOでは、ウェブサイトの構造がクローラーにとって読み取りやすい構造になっているか、つまりウェブサイトがどれくらい最適化(オプティマイズ)されているかを診断しています。

具体的には、コンテンツの見出しに<h1>や<h2>のタグを使われていること、文章であれば<div>タグではなく<p>タグが使われていることなど、クローラーにとって読み取りやすいウェブサイトと評価されることが高スコアにつながります。

なお、この項目の「高スコア = 検索順位が高い」というわけでは無いことに注意しましょう。

検索ランキングで上位を取るためには、Googleの検索アルゴリズムに「このサイトはユーザーにとって有益なコンテンツを提供している」と評価されることが重要です。

このSEOの項目は、その評価を受ける前段階の「コンテンツが正しい作法に則って作ってあるか」という、いわば基礎部分を診断しているので、ここが疎かになっているとランキングの上位を取るのは難しくなります。

Progressive Web App

プログレッシブ・ウェブアプリ(PWA)とはアプリのような振る舞いをするウェブサイトのことです。

ウェブサイトとアプリの違いや、プログレッシブ・ウェブアプリについては次の記事を参考にしてください。

プログレッシブ・ウェブアプリに対応するよりも前にすべきことはたくさんあるので、今は無視していいでしょう。

使いやすいホームページのためにできること

診断をすると、どのように改善をすればよいのかアドバイスも一緒に表示されます。

しかし、それに沿って改善をしていくのは、専門的な用語が使われていたり、英語表記であったりして、ウェブにあまりなじみのない方にはなかなか難しい場合もあると思います。

そのような時は、下記の記事を参考にしてみてください。


誰でもできるウェブサイトのスピードUP術

15分で完了するWebのスピードUP方法

ウェブサイトの『もう一つのスピード』をUPさせる方法 ― 体感速度について

サイトの表示スピードを4倍にする方法


大切なことは、定期的にウェブサイトの状態をチェックすることです。

ウェブサイトのスピードに最も関係する「Performance」の項目を上げていくのは難しいですが、定期的にスコアを診断して一歩一歩着実に改善を実施していく、もしくはJamstackの最新テクノロジーを使って超高速サイトに作り変えるなどハイスコアを取る方法はいくつもありますのでぜひご検討ください。