URL検査：新しいgoogle search console

これまでさんざんお世話になったgoogle search consoleの「Fetch as Google」が 2019/03/28で終了となります。
ホームページを新しく作ったり、変更した際に、検索エンジンがページをきちんと認識しているか確認したり、index登録したりと大変お世話になりました。

これまで「Fetch as Google」が便利すぎて、代替えツールとなる「url検査」の使用を先送りにしてきたわけですが、とうとう新しい「url検査」を使ってみることにしました。

URL検査の使い方

1. google search consoleの左側のメニューの「URL検索」をクリック
2. ページ上部に表示される虫眼鏡「~内の全てのURLを検査」の所に、URLを入力
3. 「公開URLをテスト」をクリック
   
4. すぐに「INDEX登録をリクエスト」をする事も可能ですが、検索エンジンにどのように見えているかチェックしてから登録する方が良いです。
   ここでは「テスト済みのページを表示」をクリック
   

URL検査の表示結果

CSSや画像がほとんど読み込まれていません。
記述ミスなどでエラーがあっても、リソースエラーで埋もれてしまい確認できない状態です。

Fetch as Googleでの結果

ちなみに、同じURLをFetch as Googleでレンダリングしてみると、こんな感じです。
特にリソースエラーもなくちゃんと読み込まれています。
左がgooglebotが見たページ。右がWEB上で表示されるページです。
同じように表示されており、エラーも出ていません。

URL検査とFetch as Googleの違いは何なのか？

どちらのgooglebotも「スマートフォン用googlebot」です。
私の中では、どちらも「スマートフォン用googlebot」でクロールしているので結果は同じだと思っていましたが、どうやら違うようです。

Googleのページ検証ツール Page Speed Insights（ページスピードインサイト）が11月初旬より、モバイルでの評価が3G回線時の通信速度ベースとなり、以前よりも厳格な基準となったという記事があり、このあたりが関係してきているかと思われます。

しかし困りました、これでは本当のエラーが確認できません。。。
それに、googlebotがちゃんとクロールできないとなると、検索順位も下がるのではないかと心配になります。

とりあえず、自分のサイトの表示スピードを確認してみました。

表示速度確認ツール：PageSpeed Insightsで速度確認

PageSpeed Insightsで確認できます。
googleのツールですので安心してお使いいただけます。
チェックしたいサイトのURLを入力し、分析をクリック。

結果は、パソコン版は「８９」でした。平均が50～89なので、まぁ合格ラインかと思います。
では問題のモバイル版です。。。。

「５６」！
ギリギリ平均値内だけど、パソコン版とくらべて随分、遅いですね。
これが原因なのか？
これからお世話になるだろう「URL検査」ですから、ちゃんと確認しておきたいですね。
もし表示速度が改善されて、URL検査でリソースエラーがなくなれば「表示速度が遅いとリソースエラーになる」と立証できると思うので、実験してみます。

URL検査のリソースエラーは表示速度に影響されるのか？

表示速度改善

次世代フォーマットでの画像の配信

PageSpeed Insightsでの改善策では、画像を次世代フォーマットにすることを推奨しています。
次世代フォーマットとはJPEG 2000、JPEG XR、WebPの３種類です。
PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができるそうです。
しかし調べてみると、対応ブラウザが限られています。
一番、普及しているのはWebPですが、IE11が対応していないのは痛い。。。

ということで、ひとまず次世代フォーマット対応は保留にし、PNG、JPEGファイルを軽量化することにしました。

Optimizilla
Optimizillaは画質を保ったまま、JPEGやPNGイメージを最小サイズに最大限圧縮するツールです。
実際にOptimizillaを使って、３５ファイルを圧縮してみました。
圧縮前画像サイズ：1.99MB
圧縮後画像サイズ：1.01MB
だいたい半分くらいに圧縮できました。

ついで透過ファイル以外のPNGファイルをJPGファイルに変換してみました。
結果はこちら８ファイルをPNGからJPGファイルに変換結果
画像サイズ：934KB

レンダリングを妨げるリソースの除外

ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。

CSSやJSなどのリソースがレンダリングを妨げていると、googleからのメッセージです。
レンダリングとは、htmlやCSS、など機械向けのソースを解析し実際にWEB上で見る形に整えることを言います。私たちがネット上でみているサイトはレンダリングされたものですね。

ここではJavaScriptについて、対応してみることにします。
JavaScripの改善策として以下の３つになります。

1. JavaScripのインライン化
   JavaScripのソース記述をhtmlファイル内に直に記述する方法
2. JavaScripの非同期にする
   JavaScripの読み込みを画面の読み込みとは別で行わせることで、レンダリングを妨げない
3. JavaScripの読み込みを遅らせる
   画面を読み込んだ後でJavaScripを読み込ませる

今回は一番簡単にできるJavaScripの非同期で対応することにします。

JavaScripを非同期するには
async もしくは defer を使います。
asyncはJavaScripの実行順序を考慮してくれないので、deferを使うことにします。

表示速度改善結果

対応前はパソコン版は「８９」、モバイル版は「５６」でした。
対応後はパソコン版は「９４」、モバイル版は「６１」！

モバイル版はもう少し、何とかしたいところですが、今回はすぐ手をつけられるところ重点にやってみました。

URL検査の表示結果は改善したか

さて表示スピードは少し改善しましたが、URL検査のレンダリング結果はどうなったか実験してみました。


スクリーンショットでは、CSSが少し適用されているようです。
リソースエラーも少し減りました。
でも、何度か試すと元に戻ったりするので、効果があったとは言えないようです。
URL検査と表示スピードは関係なかったかも。。。。

でも、表示スピードは速い方が良いので、無駄ではなかったはず！！