think with Googleでサイトを診断してスコアを上げてみた。

シェアする

少し前にGoogleがサイトの健康診断ツールとして「think with Google」というサイトを公開しています。
スマホ最適化されているか、スマホでの表示速度・PCでの表示速度はどうか、を診断してくれるのですが、これでこのサイトを最適化してみます。

think with Googleでサイトを診断してスコアを上げてみる。

事実上唯一で最大の検索エンジンGoogle。この検索エンジンのお機嫌を損なう事はサイト運営としてはあってはならないこと。けど最近のGoogleさんの要求は日に日にハードルが上がっています。

スマホ最適化されていることや応答スピードが速いことなどなど・・・。全ては見る人のためとはいえ、作る側のコスト負担は上がっていますし、またそのために行った施策が正しいのかどうかも即座には分かりません。そんななかGoogleも分かりやすい形でサイトの状況を診断してくれるツールをリリースしています。

診断サイト「think with Google」

診断サイト「think with Google」はこちらです。
thinkwithgoogle
Mobile Website Speed Testing Tool – Google

このサイトで自サイトのURLを入力して「TEST NOW」を押すとグイーンとステータスバーが伸びて診断結果が表示されます。
thinkwithgoogle02
ぐいーん。

第1回めの結果

結果が出ました。お!思ったより点数がいい!
thinkwithgoogle03
結果は次の通り。

Mobile Friendness

モバイルフレンドネス、つまりモバイルフレンドリー度合いは99/100!
このサイトはWordpress+StingerPlus+Nginxなのですが、スマホ対応はこれでほぼOK!良かったw

Mobile Speed

この項目はスマホでの表示速度。
こちらが・・・68/100。68点ですね。FAIR、ということで、セーフ!という感じでしょうか。

Desktop Speed

同じくPCでの表示速度関連。
80/100で同じくFAIR。まぁまぁですね。

個別のチェックポイント

そのままページを下にスクロールすると個別のチェックポイントが表示されます。

モバイルフレンドリー

詳細項目はこんな感じです。ViewPort設定が適切か、インターフェイスは小さすぎないか、などスマホでの対応を見ています。
thinkwithgoogle04

スマホの速度最適化

こちらがスマホ速度のチェック項目。
thinkwithgoogle05
赤いバツになっている「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。点数はスマホより高いですが指摘箇所は同じですね。
thinkwithgoogle06

速度向上対策

問題点として指摘されているのはレンダリング周りと画像最適化、キャッシュ、ミニファイのあたり。
まずは一気に片付けられそうなミニファイからやってみましょう。

CSS/JS/HTMLのミニファイ

ミニファイとは可読性の高い改行やインデントなど余計な余白を全部削除することです。改行やインデントは人間の目では見やすいですが、CPUは関係ないのでその分無駄なデータになります。これを一発で片付けられるのは・・・Wordpressプラグインの「Autoptimize」でしょう。
このプラグインはCSS/JS/HTML3つ全部のminifyに対応しています。

インストールして有効化して・・・・

再度トライ!

2回めの結果

やってみると・・・お!ちょっと上がった!スマホ速度が+4、PC速度が+2上がりました!
thinkwithgoogle07

また最適化したら追記します。

この記事が気に入ったら
いいね!お願いします

コメント

  1. […] think with Googleでサイトを診断してスコアを上げてみた。 […]