少し前にGoogleがサイトの健康診断ツールとして「think with Google」というサイトを公開しています。
スマホ最適化されているか、スマホでの表示速度・PCでの表示速度はどうか、を診断してくれるのですが、これでこのサイトを最適化してみます。
目次
think with Googleでサイトを診断してスコアを上げてみる。
事実上唯一で最大の検索エンジンGoogle。この検索エンジンのお機嫌を損なう事はサイト運営としてはあってはならないこと。けど最近のGoogleさんの要求は日に日にハードルが上がっています。
スマホ最適化されていることや応答スピードが速いことなどなど・・・。全ては見る人のためとはいえ、作る側のコスト負担は上がっていますし、またそのために行った施策が正しいのかどうかも即座には分かりません。そんななかGoogleも分かりやすい形でサイトの状況を診断してくれるツールをリリースしています。
診断サイト「think with Google」
診断サイト「think with Google」はこちらです。
Mobile Website Speed Testing Tool – Google
このサイトで自サイトのURLを入力して「TEST NOW」を押すとグイーンとステータスバーが伸びて診断結果が表示されます。
ぐいーん。
第1回めの結果
結果が出ました。お！思ったより点数がいい！
結果は次の通り。
Mobile Friendness
モバイルフレンドネス、つまりモバイルフレンドリー度合いは99/100！
このサイトはWordpress＋StingerPlus＋Nginxなのですが、スマホ対応はこれでほぼOK！良かったｗ
Mobile Speed
この項目はスマホでの表示速度。
こちらが・・・68/100。68点ですね。FAIR、ということで、セーフ！という感じでしょうか。
Desktop Speed
同じくPCでの表示速度関連。
80/100で同じくFAIR。まぁまぁですね。
個別のチェックポイント
そのままページを下にスクロールすると個別のチェックポイントが表示されます。
モバイルフレンドリー
詳細項目はこんな感じです。ViewPort設定が適切か、インターフェイスは小さすぎないか、などスマホでの対応を見ています。
スマホの速度最適化
こちらがスマホ速度のチェック項目。
赤いバツになっている「Eliminate render-blocking Javascript and CSS in above-the-fold content」というのは表示を止めてしまうようなJavaScriptやCSSがある、ということのようです。
ヘルプページもありました。
レンダリングを妨げる JavaScript を削除する | PageSpeed Insights | Google Developers
それ以外は「ブラウザキャッシュ利用」「画像の最適化」「CSSのミニファイ（最小化）」「JavaScriptのミニファイ」「HTMLのミニファイ」で引っかかっています。
うーん、スマホはCSS/JS/HTMLを全てminifyしないとダメなのか・・・。
PCの速度最適化
こちらがPC。点数はスマホより高いですが指摘箇所は同じですね。
速度向上対策
問題点として指摘されているのはレンダリング周りと画像最適化、キャッシュ、ミニファイのあたり。
まずは一気に片付けられそうなミニファイからやってみましょう。
CSS/JS/HTMLのミニファイ
ミニファイとは可読性の高い改行やインデントなど余計な余白を全部削除することです。改行やインデントは人間の目では見やすいですが、CPUは関係ないのでその分無駄なデータになります。これを一発で片付けられるのは・・・Wordpressプラグインの「Autoptimize」でしょう。
このプラグインはCSS/JS/HTML3つ全部のminifyに対応しています。
インストールして有効化して・・・・
再度トライ！
2回めの結果
やってみると・・・お！ちょっと上がった！スマホ速度が＋４、PC速度が＋２上がりました！
また最適化したら追記します。