27社レンタルサーバー徹底比較 →

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

test-my-site
ひーちゃん@ライター

14社のサーバー利用経験があるブロガー・ライター。WordPress開設1年2ヶ月で月50,000円達成。

ひーちゃん@ライターをフォローする

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

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

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

直帰率

直帰率は”直ぐに検索結果に帰る”こと。特定のキーワードで検索しブログ記事をクリックしたものの、同じブログの他記事を読まずに検索結果へ戻ってしまう。ブログが表示されない、記事がおもしろくない、など様々な要因が関係する。

ひーちゃん
ひーちゃん

速度改善以外も提案されるため、モバイルアクセスが多いブログ運営者はぜひチェックしてください。

この記事では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エラー
ひーちゃん
ひーちゃん

Yahoo! JAPANや楽天市場は非常に速い結果となりました。

ブログ運営者は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に置き換えるプラグインがあります。

ひーちゃん
ひーちゃん

2020年にiOS14も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数にするかは各自で決めます。

ひーちゃん
ひーちゃん

縦方向はスクロールすれば見えるため、横幅の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 がおすすめです。

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

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

ブラウザキャッシュ機能

ブラウザキャッシュ機能とは、一度表示したwebページの情報を保存し、次の表示で読み込むデータ量を減らす機能。読み込む量を減らすことで表示が速くなる。

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

ひーちゃん
ひーちゃん

htaccessへの書き込みが正しくない場合、ブログがきちんと表示されない場合があります。知識がないなら書き込みはおすすめしません。

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

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

DOM

DOMとはウェブサイトのHTML要素の集合体。集合数が多いとウェブページの読み込みに時間がかかる。webページを開き、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テーマも利用できるか確認してください。

ひーちゃん
ひーちゃん

ただし、Lazy LoadはSEOに不向きという意見もあります。スクロールしないと表示されない画像を、スクロールしないGoogleのクローラは認識しないからです。当サイトもLazy Loadは利用していません。

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

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

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

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

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

表示速度の速いサーバーTOP3
  1. エックスサーバー:ページ読み込み1.0秒
  2. ConoHa WING:ページ読み込み1.1秒
  3. ロリポップ!:ページ読み込み1.2秒

ページ読み込み時間はGTmetrixで計測しました。 GTmetrixの使い方はこちら を参照してください。

ひーちゃん
ひーちゃん

当サイトは エックスサーバー を使っています。

まとめ

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

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

コメント

タイトルとURLをコピーしました