サイトスピード(ページスピード)高速化対策まとめ – 画像&ファイル圧縮と高速サーバー導入編

  • このエントリーをはてなブックマークに追加
2300190277_360853ae0d_b (1)

サイトスピード(ページスピード)がSEO対策の必須項目ということをご存知でしょうか?SEO対策はブラックボックスなので本当のロジックを知ることはできませんが、googleは大まかな方向性を不定期に情報共有してくれたり、ツールを公開してくれることでヒントを与えてくれます。サイトスピード(ページスピード)が重要である理由は公開されているこちらのツールの存在です。

PageSpeed Insights

PageSpeed Insights

おそらく、googleはツールを先に公開して大事だよーとアナウンスした後のどこかのタイミングで、SEOのランキングロジックにそのツールで測定できる数値を使う、といった進め方をしていると考えられます。今回はワードプレスのサイトスピード(ページスピード)の向上に役立つ画像圧縮ツール・プラグインと、高速サーバーをご紹介します。

サイトスピード(ページスピード)に影響が大きい要素3つ

サイトスピード(ページスピード)に影響が大きい要素は大きく以下の3つがあります。

  1. 画像のファイルサイズ
  2. CSS、Javascriptファイルの読み込み
  3. サーバーの応答時間

画像と、CSS、Javascriptに関しては、単純に読み込む数が多いとサイトスピード(ページスピード)が落ちることになります。画像については、解像度が高く、ファイルサイズが大きいものになるとかなり影響が大きいため、必要最低限に抑える事が重要です。また、CSSやJSはheadタグ内にコーディングされていると、ページの表示前にCSSとJSを読み込むため、サイトスピード(ページスピード)に悪影響があります。これらの2点はワードプレスであればプラグインで解消することが可能です。

3点目のサーバーの応答時間はレンタルサーバーを借りてワードプレスでブログを運営している個人ではどうしようもないので、ワードプレスに特化した高速サーバーと契約することが重要になってきます。

画像ファイルサイズ対策

ワードプレスにおいて画像ファイルをなるべく小さくするためには以下の手順がおすすめです。

  1. 取り込む前にまず画像を圧縮
  2. ワードプレス内部で画像を圧縮
  3. モバイルとPCで表示を変える

取り込む前にまず画像を圧縮

tinypng
画像ファイルをドラッグアンドドロップするだけでpngとjpegを圧縮してくれます。上の画像も圧縮している画像ですが、元々228kbあったファイルサイズが72kbになりました。3分の1への圧縮はサイトスピード(ページスピード)への良い影響が大きいので、かなりおすすめのツールです。

https://tinypng.com/

ワードプレス内部で画像を圧縮

画像を取り込んだら内部で更に圧縮しましょう。内部での圧縮はプラグイン「EWWW Image Optimizer」を入れるだけでOKです。プラグインを有効化すると有効化した後に取り込んだ画像は自動的に圧縮して取り込まれます。プラグインをインストールする前に取り込んだ画像は「メディア > Bulk Optimize」というメニューが追加されるので、そこからまとめて圧縮することができます。

EWWW Image Optimizer

EWWW Image Optimizer

モバイルとPCで表示を変える

モバイルとPCで同じ画像を使っている場合、PageSpeed Insightsでサイトスピード(ページスピード)を測定すると、PCでは合格点が出るがモバイルでスコアが低い事があります。モバイルのブラウジングではよりファイルサイズが小さい画像を読み込ませる事がスピードアップにつながります。そこでプラグイン「Hammy」の出番です。詳細は以下のリンクに記載がありますが、アフィリエイトのバナーを記事個別に貼っている人は過去に遡って修正が必要となるので、現実的ではないかもしれません。モバイルの流入が多く、サイトスピード(ページスピード)にとにかくこだわりたい人向けのプラグインです。

【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy

CSS、Javascriptファイルの読み込み対策

CSS、Javascriptファイルがヘッダーにあると、サイトスピード(ページスピード)がその分遅くなってしまいます。そこで出番なのがプラグイン「Head Cleaner」です。以下に公式サイトからプラグインの機能一覧を記載します。

  • 先頭にxml宣言を付与
  • 重複タグや、不要なタグ、コメント、空白を削除。
  • meta name=”description”タグが複数ある場合、一つに統合
  • meta name=”keyword”タグが複数ある場合、一つに統合
  • link rel=”canonical”タグを追加
  • CSS,JavaScriptは、ブラウザが対応していればgzip圧縮転送
  • 複数あるCSSをmedia属性ごとに結合して一ファイルに統合
  • CSSを圧縮
  • CSSに含まれる画像URLを、データスキーマURLに変換する。
  • 複数JavaScriptをすべて結合して一ファイルに統合
  • JSMinで、JavaScript のソースコードを圧縮
  • JavaScriptをフッタ領域に移動
  • フッタ領域のJavaScriptも同様に結合して一ファイルに統合
  • Prototype.js, script.aculo.us, jQuery, mootools が複数読み込まれている場合、読み込みを1回に
  • Prototype.js, script.aculo.us, jQuery, mootools の読み込み順の修正
  • CSS @import を展開して結合
  • 管理画面よりJavaScriptを個別指定して、フッタに移動

参照:head cleaner公式サイト

設定方法については以下の記事を参考にしてください。
Head Cleaner の最も理想的な設定方法

サーバーの応答時間の対策

サイトスピード(ページスピード)対策において、ツールやプラグインでどうにもならない部分がサーバーの応答時間の対策です。これは単純に高速のレンタルサーバーを選ぶ事が重要になってきます。おすすめはエックスサーバーです。WP専用プランのwpXレンタルサーバーは、ワードプレスのインストールや初期設定がかなり簡単にできるため、初心者にも簡単にワードプレスが扱えて、サイトスピード(ページスピード)対策が万全のレンタルサーバーと言えるでしょう。他社サーバーとの比較記事でも評判が高く、著名なブロガーも多く使っています。デメリットを上げるとすれば、月額1000円〜と、500円程度からレンタル可能な他社と比較すると多少高い点がネックですが、長期的に考えると、SEO対策において間違いなく差分の500円以上の価値がある投資だと思います。

エックスサーバー

WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』

広告



広告
レクタングル大
  • このエントリーをはてなブックマークに追加
広告
レクタングル大