<>

PageSpeed Insights ページの読み込み速度の改善【SEO】

Webサイトの表示速度をチェックする PageSpeed Insights モバイル端末や パソコン向けの
パフォーマンスがどれくらいなのかをチェックできるGoogleのツールです。

無料で 速度スコア・最適化スコアと改善点を確認することができ SEO対策としても 必ず取り入れておきたい項目です。

PageSpeed Insight 使いかた

まずは スコアチェックのしかたと スコアの見方について ご説明。

チェックのしかた

チェック方法は簡単! PageSpeed Insight ページ画面に移動、
ウェブページのURLの入力をし 分析をクリックするだけです。

速度スコア

PageSpeed InsightsChorme User Experience Report のデータ
( 公開されているウェブ全体の 主要なユーザーエクスペリエンス指標の
実際のユーザー測定に基づいて集計されたデータ )を組み入れて パフォーマンスデータを表示します。

表示は 緑( 早い )・赤( 遅い )・黄( 平均 )と色別に分けられ表示されています。

最適化スコア

データとして使用される測定基準は 次の2つです。

  1. ユーザーが新しいページをリクエストした瞬間から、
    スクロールせずに見える範囲のコンテンツが ブラウザで表示されるまでの経過時間。
  2. ユーザーが新しいページをリクエストした瞬間から、
    ブラウザでページが完全に表示されるまでの経過時間。

ページのパフォーマンス改善の余地を推定したスコアは 3パターンに分類され 0~100 の値で算出されます。

Good  80%以上  最適化の余地はほとんどない状態です。
Medium  60~79%  ある程度の最適化の余地があります。
Low  0~59%  最適化がほとんどされていない状態。

デスクトップでの結果。これは めちゃくちゃいいスコアです!(ちょっと嬉しい…(^^))

モバイルだとこんな感じです。パソコンに比べて かなり低い値ですが 何とか平均に入っているといった感じです。

読み込み速度が遅くなる原因

赤の表示が もっとも改善が必要な項目、最適化されていないと診断された項目です。

このパフォーマンスの改善についてみていきますが 最適化されていない項目は 主に画像に関する項目になります。

情報量の多いページ、例えば 画像や動画なんかは もっと重くなってしまうので
リクエストしてから表示されるまでがすごく長くなりますよね。

今回のマイナス評価の大半を占めているのが 画像を表示させるために使用されるツールなどです。

JavaScript・レンダリング・第三者コードによるブロック
どれも プラグインアドセンス・アナリティクスなど サイトに取り入れたコードなど
必要なものだけれど このような表示速度の妨げとなる マイナスの要因もあるということになります。

使用していないJavaScript

JavaScript は プログラミング言語のひとつで サイトの様々なところで使われていますが
使用していない JavaScriptは ページの読み込み速度を低下させてしまう可能性があります。

インストールしたまま 使用していない WordPress のプラグインの削除 または ほかのプラグインに切り替える

同じ機能を持つプラグインでも 多くのスクリプトを使用しているものは 動きが遅くなってしまうということがあります。

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

レンダリングは フォントに関する項目です。

こちらは アイコンのフォント(Font Awesome )などが速度の低下の原因でした。

第三者コードによってブロック

第三者コードは アドセンスやアナリティクスなどの 分析に使用するためのコード
Font Awesome のキットコードなども対象に入ってしまいます。


難しいコードの編集は プログラミングを分かっている方以外は触らない方が賢明です。

まず、コードが重複していないか、不要なものがないかなどをチェックして 削除・削減から始めてみましょう。

プラグインや設定方法で改善できる項目

画像に関して 改善できる方法がいくつかあり この改善をするだけでも
かなり違ってきますので まだ利用されていない方はぜひ試してみてください。

画像の最適化に関する記事はこちらにまとめてあります。
【データベース最適化】メディア画像のサイズ設定と不要な画像を削除

メディア画像の最適化|EWWW Image Optimizerで画像圧縮する方法

グリッドレイアウト

グリッドレイアウトは 記事一覧などで ブロック表示される 記事の表示のスタイルを設定する項目になります。

ここでの画像設定も 表示スピードにも影響が出てしまう項目です。

基本的に スマホ画面は パソコン画面に比べてかなり小さく
一度に表示できる量に制限があるため スマホに向いているのは 小さなサイズの画像です。

アフィリエイトなどでも 人気のある画像は小さなサイズの画像で
現在、スマホで使用される方が多いということでしょう。

パソコンよりも モバイル端末を重視していくのであれば グリッドレイアウトも
画像サイズを小さめの設定に変更することで ある程度の改善が見込めます。

まとめ

今回、これらのコード編集などを使用しない範囲での改善を行いました。

  1. 重複した アナリティクスのコード
  2. 使用していなかった アドセンスのコード
  3. 使用していなかった プラグインの削除
  4. 重複している CSSコード
  5. データベースの使用しない 画像の削除
  6. グリッドレイアウトの 画像サイズ変更

気を付けるポイントはたくさんありますね。

結果、スコアがどうなったのか…?

すごい変化があったわけではありませんが、細かな値は少しずつ改善されているのが分かります。

分析結果は サイトに何の変更を加えなくても 時間帯・テストのスタイルなど 常に値が変動しています。

なので この基準をもとに測定された改善項目 すべてを改善できるわけではないので
表示速度はSEOにとって重要な項目ではありますが、こればかりに囚われてしまっては
意味がありませんので これはあくまでも改善の参考にして頂く、という位置づけで利用されるといいのではないでしょうか。

GoogleGoogle,SEO対策

Posted by 45