Webサイトやブログ(WordPress)の画面表示速度高速化方法

Webサイト表示速度を向上させる手順の画像_11ブログ運用
スポンサーリンク

WordPressでのブログ立ち上げの続きとして、Webサイトやブログの画面表示速度高速化手順をまとめました。

画像付きの手順書のため、誰でも設定できます!

【Webサイトやブログ(WordPress)の画面表示速度高速化方法手順書について】

  • Webサイト表示速度向上の目的:Webサイトやブログ閲覧者に対するストレスを軽減させること。
  • 本手順の対象者:WordPressでのWebサイトやブログ表示速度を高速化させたい人
  • レンタルサーバ:XSERVER
  • 設定時間目安:5分
  • 手順書作成日:2018年9月11日

【Webサイトやブログ(WordPress)の画面表示速度高速化方法手順書】

mod_pagespeed設定手順

mod_pagespeedとは

Google社により開発された拡張モジュールで、Webサイトの表示速度を向上させる機能です。

XSERVERのmod_pagespeed機能詳細

  1. CSSファイル、JavaScriptファイルなどの圧縮
  2. 最適な画像タイプへの変換、軽量化
  3. 同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、
    サーバーとクライアント間の無駄な通信(リクエスト)を削減
  4. CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
  5. 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む
    ※XSERVERのHPに記載している内容を転記しています。

XSERVERのmod_pagespeed機能の注意事項

  1. メモリ使用量やCPU負荷が若干上昇したり、一部画像ファイルの画質が低下する場合があります。
  2. ブラウザやサーバーコンテンツの内容によっては、本機能を有効とした際にWebサイトの表示が崩れるなど、 異なる動作となる場合が稀にあります。
    ※XSERVERのHPに記載している内容を転記しています。

XSERVERのmod_pagespeed機能について筆者の見解

XSERVERのmod_pagespeed設定のON、OFFボタン設定のみで機能の有効、無効を切り替えることができます。

従って、基本的にはmod_pagespeed設定をONとしておき、不具合が生じた場合、OFFで機能を無効化すれば良いと考えます。

XSERVERのサーバーパネルにログインし、mod_pagespeed設定リンクを押下します。

Webサイト表示速度を向上させる手順の画像_1

Webサイトの表示速度を向上させたいドメインの選択するリンクを押下します。

Webサイト表示速度を向上させる手順の画像_2

ONにするボタンを押下します。

Webサイト表示速度を向上させる手順の画像_3

戻るボタンを押下します。

Webサイト表示速度を向上させる手順の画像_4

mod_pagespeed設定がONになっていることを確認します。

Webサイト表示速度を向上させる手順の画像_5

ブラウザキャッシュ設定手順

ブラウザキャッシュとは

ブラウザ側でのキャッシュ利用を指示するレスポンスヘッダ(Expires, Cache-Controlヘッダ)の出力を付加します。同一ファイルへの再アクセス時にはブラウザ側のキャッシュファイルが利用され表示速度の向上や転送量の軽減を行うことが可能です。

XSERVERのブラウザキャッシュ機能詳細

  1. Expiresヘッダ
  2. Cache-Controlヘッダ(max-age)
    ※各項目について最大7日間保持するように値が指定されます。
    ※XSERVERのHPに記載している内容を転記しています。

XSERVERのブラウザキャッシュ機能の注意事項

  1. キャッシュしたデータを読み込むため、CSSファイル、JavaScriptファイル、画像ファイルなど対象データの更新がすぐに反映されない可能性があります。その場合は、ブラウザ上のキャッシュデータを削除してご確認ください。
  2. ブラウザ上のキャッシュデータを利用する性質上、サーバーへのアクセス回数が減るため、アクセス解析などにおいてヒット数が減少する可能性があります。
  3. ブラウザやサーバーコンテンツの内容によっては、Webサイトの表示が崩れるなど、 異なる動作となる場合が稀にあります。
  4. 設定の変更からサーバーに設定が反映されるまで最大15分程度かかります。
    ※XSERVERのHPに記載している内容を転記しています。

XSERVERのブラウザキャッシュ機能について筆者の見解

XSERVERのmod_pagespeed設定と同様にブラウザキャッシュ設定もON、OFFボタン設定のみで機能の有効、無効を切り替えることができます。

従って、基本的にはブラウザキャッシュ設定もONとしておき、不具合が生じた場合、OFFで機能を無効化すれば良いと考えます。

ブラウザキャッシュ設定メニューを押下します。

Webサイト表示速度を向上させる手順の画像_6

ブラウザキャッシュ設定対象のドメインの選択するリンクを押下します。

Webサイト表示速度を向上させる手順の画像_7

ON[全ての静的ファイル]※推奨設定を選択し、設定変更ボタンを押下します。

Webサイト表示速度を向上させる手順の画像_8

戻るボタンを押下します。

Webサイト表示速度を向上させる手順の画像_9

ブラウザキャッシュ設定の現在の設定を確認します。
※反映まで5分程度時間を要します。下記画像は反映待ちの状態です。

Webサイト表示速度を向上させる手順の画像_10

数分待ち、再度、ブラウザキャッシュ設定を確認します。

Webサイト表示速度を向上させる手順の画像_11

Xアクセラレータ設定手順

アクセラレータとは

「加速するもの」という意味です。
コンピュータ等の特定の機能や処理能力や性能を向上させるために追加で利用するハードウェアやソフトウェアの総称です。

Xアクセラレータとは

XSERVERが提供している機能であり、Webサイトの表示速度を向上させるとともに、同時アクセス数を大幅に拡張することが可能で、最大で10倍以上(※)のサイトパフォーマンスを実現します。

※XSERVER内の同一構成サーバーにおける、1秒あたりのCPU使用量の比較によるものです。

注意事項

  1. 訪問者ごとに表示内容が異なるようなページ(会員制サイトやショッピングサイト)等では、当機能による高速化や負荷軽減の効果が出づらい場合があります。
  2. ウェブサーバー上に、特定のユーザーや特定の環境のみに公開を制限しているコンテンツデータ等がある場合、本来広く公開されていないはずのデータがリバースプロキシ上にキャッシュされ、意図しないユーザーがそれらのデータへアクセス可能となってしまうことがありますので、ご注意ください。

    例:.htaccessを用いて、特定のIPアドレスからのアクセスを拒否する
    .htaccessを用いて、ブラウザごとに表示するコンテンツの振り分けを行う 等。

    ※XSERVERのHPに記載している内容を転記しています。

Xアクセラレータメニューを押下します。

Webサイト表示速度を向上させる手順の画像_12

Xアクセラレータ設定対象のドメインの選択するリンクを押下します。

Webサイト表示速度を向上させる手順の画像_13

ON[静的ファイル](推奨)を選択し、設定変更(確認)ボタンを押下します。

Webサイト表示速度を向上させる手順の画像_14

設定変更(確定)ボタンを押下します。

Webサイト表示速度を向上させる手順の画像_15

戻るボタンを押下します。

Webサイト表示速度を向上させる手順の画像_16

XアクセラレータがONに設定されていることを確認します。

Webサイト表示速度を向上させる手順の画像_17

コメント

dosankokazu

北海道札幌市在住の生粋道産子です。
パパ歴2年目。
子育て、北海道、グルメ、体験談、日常生活で役立つ情報等を発信します。
娘の笑顔を糧に日々奮闘。

dosankokazuをフォローする