僭越ながらうちのブログも「Lighthouse」で検証してみました

2018年6月29日

スマホで見ると変な色付いてますね、画像の余白w編集失敗しました。

自分のサイトの表示速度がどの程度最適であるか、検証するためのツールはたくさんありますよね?

僕自身(ブログ記事内でも)よく使うのは「ページスピードインサイト」と「GTmetrix」ですね。点数で表示されるので非常に参考になります。

そんな中で、最近になってさらに細かく色々なスコアが見れる「Lighthouse」を良く使われる方が多くなってきましたので僕も使ってみました。

Lighthouseとは?

現在使用中のテーマ「Luxeritas」のアップデートの際、開発者のるな様もLighthouseでの検証結果を掲載されていました。(そこから「これなんてツール?」って気になってたんですがw)

引用元:PWA(Progressive Web Apps)対応 Luxeritas 3.2.0より一部をスクショさせていただきました。さすが…めちゃくちゃすごいですw

この検証ツールについて色々お調べしてみたところ、Chromeの拡張機能であることが何とかわかりました。

こちらからインストールやら詳しい仕様説明やらが見れますので説明は割愛します。

要はデベロッパーツールってことですね。

使い方

インストールが完了するとアドレスバーの端にマークが出てきます。

検証を行いたいページでここをクリックして「Generate Report」というボタンを押せば検証が開始されます。

注意点として基本的に英語なので検証結果をしっかり把握したいって場合は右クリックで翻訳推奨ってことと、検証するサイト画面の他に、同サイトの管理画面を別タブで開いてる場合エラーが出ることがあります。(「タブID〇〇を閉じて」的なことが書いてあったような)

まぁ1回の検証に30秒~1分ぐらい掛かるのでお時間に余裕のある時に。

検証結果

当ブログでの検証結果が以下。

パフォーマンスが少し低めなのが気になりますが、まぁまぁしょうがないですね。これは広告貼ってある状態で測定しました。

SEOは(ちゃんと言われてる設定をしていること前提ですが)Luxeritasをお使いなら100点取れます。

広告の有無によって大きくスコアが変わるようなのでもしかしたらもっと高くなるかも知れません。(試してないです、めんどく(ry)

結構具体的な文句(?)を言われてますので修正箇所がわかりやすいっちゃわかりやすいですね。

視覚的にも面白いのでぜひともお試しあれ。

追記:上の検証結果の際の文言をよく見てみると、WordPressの管理者用ツールバーについても文句言われてるww

あと細かいことですが、PWAの項目についても最適で無かったので修正しました。(WPURLと表示URLが違うとうんぬんのやつ。記事更新時点では修正されてます。)

ちょこっと補足
例えば「WP」というディレクトリにWP関連のファイルを入れててもexample.comというURLで表示させることは出来ます。ただこの状態だとPWAを有効にするとエラーが出ちゃう状態にありました。
その修正アップデートの前に、「WP」というディレクトリからルートディレクトリに戻した、という感じです。

なので上の修正して、一回ログアウトして再度検証。

なかなかまともになりました。

というか、素人でもここまでのスコアを出せるLuxeritasはやばいぐらいやばいと思います。

Lighthouseを導入してからおもしろ半分で結構色々なサイト(使用されてるテーマを問わず)を勝手に検証してましたが割とヒドいですね。

ほとんどPerformance値が赤いww