Lighthouseを使ってモバイルファーストなブログに最適化しよう

PAK85 lalamushimegane20140321 TP V

僕らブロガーはどうしてもGoogle先生を無視することは出来ませんよね。

芸能人みたいに固定ファン層が大量にいれば日記みたいなクソ記事であってもかなり多くの人に記事を届けることが出来ますが、僕らはそういうわけにもいきません。

SNS経由に加えて、GoogleもしくはYahoo!からの検索経由で記事を読んでもらうことになります。※スマニュー砲とかイケハヤ砲とかそのへんはまた別の話。

さて、そんなGoogle先生ですが、数年前からですがモバイルを重要視してます。

本日、それを象徴するかのように以下の記事が出ていました。

Google検索がモバイルファーストへ――準備が整ったサイトから順次MFIを適用 | TechCrunch Japan

今朝(米国時間3/26)、GoogleはMFI(モバイル・ファースト・インデクシング)を正式に開始したことを自身のブログで発表した。この新方式は2016年からテストが開始されていたもので、インデクシングをどのように変更するかこちらで詳しく解説している。簡単にいえば検索のベースをモバイル向けサイトのコンテンツとするアルゴリズムだ。検索内容もこれに応じて表示されることになる。MFIはモバイル向けコンテンツを準備したサイトから順次適用される。

詳しくは神(Google)のみぞ知るってやつですが、とりあえずモバイルは重要だよねってことは雰囲気掴めたかと。

Lighthouseを使ってみる

昨今のWEBサイト/WEBアプリのパフォーマンスを見る手段の1つとして、Googleが提供しているLighthouseというものがあります。

Lighthouse によるウェブアプリの監査  |  Tools for Web Developers  |  Google Developers

Lighthouse によるウェブアプリの監査 Lighthouse はオープンソースの自動化されたツールでウェブアプリの品質向上に役立ちます。 このツールは Chrome 拡張機能として実行するか、コマンドラインから実行できます。 Lighthouse に監査したい URL を指定して実行すると、ページに対する集中的なテストを実行してパフォーマンスに関するレポートを生成できます。 今後は弱点を検出するテストを利用して、アプリの品質改善の指針を得られるようになります。

注: Lighthouse は現在、ホーム画面への追加やオフライン サポートをはじめとする Progressive Web App 機能に重点をおいています。また一方で、このプロジェクトの包括的な目標は、ウェブアプリ品質のあらゆる側面を網羅した、エンドツーエンドの監査を提供することです。

簡単に言えば、このツールで得点が低いサイトはモバイルでの閲覧には適してないよね、というやつです。

早速、当ブログも測ってみたんですが、目も当てられぬ結果に…。

このブログデザイン自体は気に入っているので、Lighthouseで高得点を狙えるように改修入れていかなきゃですね…。

ブログサービスだと高得点は厳しい…?

改修入れていかなきゃと思った矢先、Lighthouseの項目をよーく見てみると、これPWA(Progressive Web Apps)の項目が結構あるんですよね。

PWAってのは、WEBだけどネイティブみたいなUXを提供できるアレなんですが、これをブログサービスでやろうと思うと、基本は無理ゲーです。

PWAって、HTML外で設定するやつとかあるんですよ。別ファイルを作ってそれを呼び出すんですね。

でも、ブログサービスだと好きにファイル配置ができません。

僕はBloggerを使っているので、そのうちBloggerが公式でPWA用に機能追加してくれることを密かに期待しています。

とりあえずは対応できるところだけやっていく感じでいくしかないですね。

余談

みんな大好きイケハヤ先生のまだ仮想通貨持ってないの?も計測してみたんですが、似たり寄ったりの低スコアでした、ということをここにご報告しておきます!

ちょっと安心ですね。

まぁ所詮ブログは静的コンテンツだし、そこまでゴリゴリUXを追求するよりは、1文字でも多く記事書けよっていうお告げなんでしょうね、これは。