全17ページの最適化案をGET!Test My Siteの使い方

2021年8月19日

運営者情報

webライターの「ひー」です。2017年にWordPressを始め、1年2ヶ月でブログ月収5万円達成。これまで14社のサーバーを使いました。

Test My Siteテストマイサイトを使いモバイルサイトの表示速度改善の効果を把握しましょう。Test My Siteは3Gや4Gなどの通信回線に応じた結果を測定できます。速度改善方法に加えユーザー体験の最適化案も教示されます。

実際に全17ページの最適化案を受け取れました。

最適化案を実行し表示速度が改善されれば直帰率を下げられるかもしれません。

bounce-rate

直帰率とは、ブログ読者が検索ページからブログを訪問後、すぐに検索ページに帰ること。直帰率が高くなる要因は様々だが、サイトの表示速度が遅いために検索ページに戻ることはサーバーやテーマ・プラグインの選定で改善できることが多い。

この記事ではTest My Siteの使い方、さらに分析や最適化案の具体例を紹介しました。

Test My Siteによる当サイトの計測結果

Test My Siteによる当サイトの計測結果を公開します。

test-my-site_result

速度は1.9秒で、高速の評価をもらえました。

当サイトがどれだけ速いか、他サイトと比較しました。Test My Siteの使い方 を解説するので、あなたのサイトと他サイトの数値も比較してみてください。

サバサバサーバー1.9秒
Yahoo! JAPAN1.2秒
楽天市場1.4秒
ユニクロ4.6秒
TOYOTAエラー

ブログ運営者は2秒以内に読み込むことを目標としましょう。

Test My Site はモバイルサイトのみチェックされるため、パソコンサイトの最適化を知りたい人はPageSpeeds insightsページスピード インサイトの利用がおすすめです。

Test My Siteの使い方

Test My Siteの使い方を解説します。

Test My Siteの計測方法
  • STEP.1
    Test My Siteにアクセス
    test-my-site

    まず Test My Site にアクセスしてください。

  • STEP.2
    分析したいドメインをコピー&ペースト
    test-my-site_url

    「ドメインを入力してください」の枠内に、分析したいドメインをコピー&ペーストします。

  • STEP.3
    矢印をクリックし分析開始

    ドメインを入力したら→をクリックしン分析を始めましょう。

    test-my-site_analytics

    15秒ほど待ちます。

    test-my-site_analytics_skip

    「スキップして開始する」をクリックし、さらに進めてください。

  • STEP.4
    分析結果をチェックする
    test-my-site_result

    表示される分析結果をチェックしましょう。

    何も設定しなくても、国と接続タイプは適切な状態になっています。日本ではまだまだ4G通信が一般的です。

Test My Siteの詳細レポートの受取方法

Test My Siteの詳細レポートの受取方法
  • STEP.1
    詳細なレポートを作成をクリックする
    test-my-site_report

    分析結果が表示されると、画面右上に「詳細なレポートを作成」があります。これをクリックてください。

    分析結果の各所にある「すべての修正案を確認」をクリックしても同様にレポートを取得できます。

  • STEP.2
    メールアドレスと会社名を入力
    test-my-site_report2

    「レポートをすぐに入手する」が表示されました。決められた枠内にメールアドレスと会社名を入力してください。

    個人で使いたいなら名前の入力で問題ないでしょう。

  • STEP.3
    詳細なレポートを作成を再度クリック
    test-my-site_report3

    メールアドレスと会社名を入力し、Think with Googleからのメールを受け取るにチェックしたら、「詳細なレポートを作成」を再度クリックしましょう。レポートが入力したメールアドレスに送信されます。

  • STEP.4
    レポートメールを受信する
    test-my-site_report5

    詳細なレポートがメール受信箱に届きます。送信後10秒もせずに届いていました。

    メールを開いたら「レポート全文を見る」をクリックします。

  • STEP.5
    詳細なレポート(PDF)を確認する
    test-my-site_report6

    PDF版の詳細なレポートを受け取れました。今回は全17ページのレポートです。14ページ目に当サイトの改善案が提案されていました。

    提案された7項目はリンクになっています。クリックすると具体的な改善案を web.dev のサイトでチェックできます。

    ひーちゃん
    ひーちゃん

    ただし、英語なので難しいです。

Test My Siteでモバイルサイトを改善する方法

Test My Site でモバイルサイトを改善する方法を6つ紹介します。

次世代フォーマットで画像を配信する

「次世代フォーマットで画像を配信する」改善案は、現時点で実践しないほうが良いです。ここで言う次世代フォーマットとは、webpウェッピーを指します。

webp

webpとはGoogleが開発した画像フォーマット。圧縮率が高く、ファイルサイズを軽量化しやすい。対応ブラウザが限られている。

webpの画像フォーマットに対応するブラウザでないと、このフォーマットを使った画像のブログは表示されません。

webpの目的はファイルサイズの軽量化により画像の読み込みを速くすることです。つまり、次世代フォーマットで画像を配信する改善案は、画像サイズを小さくすることにあります。圧縮できるプラグインを活用しましょう。

おすすめの画像圧縮ツール

SafariやChromeなど対応するブラウザが増えてきたので、2021年は導入を検討できます。導入はプラグインの利用が簡単です。すでにブログで使っている画像をwebpに置き換えるプラグインがあります。

Showing results for:convert webp|WordPress.org から探せます。

JavaScriptの実行時間を短縮する

「JavaScriptジャバスクリプトの実行時間を短縮する」改善案は、WordPressテーマの高速化設定で実行できます。

JavaScript

JavaScriptとはブラウザ上でウェブページを動かすプログラミング言語。例えば、マウスカーソルを当てるとヘッダーやメニューを動かすときに使われる場合がある。

例えば、Cocoonコクーンの高速化設定ではJavaScriptの縮小化を利用できます。チェックを入れることでJavaScriptの実行時間を短縮できるのでおすすめです。

test-my-site_javascript

Cocoon はこちら。

同様の高速化設定は、表示速度に定評のあるWordPressテーマに含まれる場合があります。あなたの使っているWordPressテーマでも利用できるかチェックしましょう。

適切なサイズの画像を用意する

「適切なサイズの画像を用意する」には、スマホに最適化されたpxピクセル数に加工しなければなりません。

もちろん、それぞれのスマホによってpx数はマチマチ。ですから、どのpx数にするかは各自で決めます。

参考にしたいのはiPhoneのpx数です。

iPhone 12 Pro
iPhone 12
1,170
iPhone 11
iPhone XR
828
iPhone SE2
iPhone 8
iPhone 7
750

iPhoneに最適化された横幅のpx数は750~1,170が目安となりました。これらの範囲内の画像を用意しましょう。Windowsにプリインストールされたペイントツールやその他画像ソフトで調整してからWordPressにアップロードしましょう。

すでにアップロードしている画像を一括リサイズしたいならプラグイン Regenerate Thumbnails がおすすめです。

合理的なキャッシュ ポリシーで静的アセットを配信する

「合理的なキャッシュ ポリシーで静的アセットを配信する」には、キャッシュの有効期間を長くしましょう。

browser-cache

ブラウザキャッシュ機能とは、一度表示したwebページの情報をブラウザに保存し、次の表示はサーバーにアクセスせず表示させる機能。読み込み量を減らすことで表示速度が速くなる。同機能はサーバーで設定したり、テーマやプラグインで設定したりできる。

合理的なキャッシュ ポリシーで静的アセットを配信すると表示される場合、キャッシュ機能は使っているもののキャッシュの有効期間が短いことが多いです。キャッシュの有効期間を長くするにはhtaccessエイチティーアクセスに書き込まねばなりません。

DOMサイズを過度に大きくしない

「DOMサイズを課題に大きくしない」と出た場合、不要な動画サイトやSNSタイムラインの埋め込みを減らせるかもしれません。

DOMとは、ウェブサイトのHTML要素の集合体。集合数が多いとウェブページの読み込みに時間がかかる。ウェブページを開き、F12キーを押し「Elements」からDOMの複雑さを確認できる。

DOMサイズが複雑で大きくなるのは、動画サイトやSNSタイムラインなど外部の読み込みを含む場合です。不要な動画やタイムラインを消せるかもしれません。

オフスクリーン画像の読み込みを保留する

「オフスクリーン画像の読み込みを保留する」には、Lazy Loadレイジーロード機能を活用しましょう。

Lazy Load

Lazy Loadは画像読み込み遅延のこと。まだ画面に映っていない画像を先に読み込むことを防ぐことで、ページの読み込みを早く感じさせられる。

Lazy Loadは、WordPressテーマで設定したりプラグインを利用したりすることで、比較的簡単い実行できます。例えば、CocoonはチェックするだけでLazy Loadが有効化されます。

test-my-site_lasy-load

Cocoon はこちら。

表示速度の速いWordPressテーマの多くがLazy Loadを使えます。あなたのWordPressテーマも利用できるか確認してください。

Test My Siteの結果が悪いならサーバー移転しよう

Test My Site の結果が悪いならサーバー移転しましょう。Test My Siteの結果は様々な要素に左右されます。

  • 利用するWordPressテーマとプラグイン
  • 画像フォーマットや画像サイズ
  • レンタルサーバー

このうち、レンタルサーバーは自分で最適化できないため、改善したいならサーバーを乗り換えるしかありません。そして、高速サーバーへの移転は効果絶大です。

サーバー移転は難しく思えるかもしれませんが、今は簡単な入力とクリック操作で行えます。特に以下3社は表示速度の速さと移転しやすさに秀でたサーバーです。

まとめ

Test My Siteを使い方を知ることでモバイルサイトを最適化できました。Test My Siteで表示されるさまざなま改善案のうち6つを解説しました。

実際に Test My Site を使いあなたのサイトもチェックしてみてください。改善の必要を感じたら高速サーバーを検討しましょう。おすすめのサーバーと選び方は関連記事をお読みください。