MENU

CentOS7,PHP7,MySQL5.6のWordPressサイトを運用する その2(画像の最適化・圧縮の有効化・ブラウザキャッシュの活用・CSS/JavaScriptの縮小でサイトの読み込み速度を向上させる)

「CentOS7,PHP7,MySQL5.6でWordPressサイトを構築」シリーズでは、セキュリティに配慮しつつ、ミドルウェア(Apache/MySQL)とアプリケーション(PHP/WordPress)をインストールしました。ですがサーバーは構築だけをすれば良いというものではなく、その後の運用が大切です。

目次

PageSpeed Insightsの活用

今回はGoogle developersが提供する、PageSpeed Insightsを意識したサイトの読み込み速度を向上させる方法をご紹介します。ページの読み込み速度は、Googleの検索順位にも大きく影響します。PageSpeed Insightsによる評価を上げることは、サイトのSEO対策にもなります。

その1の記事では、PageSpeed Insightsが最適化のために提案する項目のうち、サーバーの応答時間を速くするための方法をご紹介しました。今回の記事では、サイトの読み込み速度を上げるために、サーバーの応答時間を速くする以外の方法についてご紹介します。

画像を最適化する

あわせて読みたい
PageSpeed Insights の最適化提案 「画像を最適化する」について解決する https://e-yota.com/webservice/reduce_server_response_time_pagespeed_insights_3 サーバーのスケールアップ(「さくらのVPS 512MB」 → 「さくらのVPS 2GB」)をする...

WordPressのプラグインである、EWWW Image Optimizerを活用します。EWWW Image Optimizerを使うことによって、各ページで使われている画像を最適化しページのロード速度を向上させます。ロード速度を向上させることで、ページの読み込み速度を速くすることが可能となります。

圧縮を有効にする

あわせて読みたい
PageSpeed Insights の最適化提案 「圧縮を有効にする」について解決する https://e-yota.com/webservice/optimize_images_pagespeed_insights/ PageSpeed Insightsで表示された「画像を最適化する」という提案に対して、WordPressのプラグイン...

Apacheのmod_deflate機能を使ってサーバーから出力されるファイルについて、ネットワークを通してクライアント側で出力する前に圧縮します。ただし、画像ファイル(jpg/gif/png)はEWWW Image Optimizerで最適化済みですので、画像ファイル以外のファイルについて圧縮を有効にします。

ブラウザキャッシュを活用する

あわせて読みたい
PageSpeed Insights の最適化提案 「ブラウザキャッシュを活用する」について解決する https://e-yota.com/webservice/deflate_enable_pagespeed_insights/ PageSpeed Insightsで表示された提案で「圧縮を有効にする」について解決をすると、モバイルの評価...

まずApacheのexpires_module機能は、元のファイルが作成された時刻またはクライアントのアクセス時刻のどちらかに基づいて期限切れ日を設定することができます。このexpires_module機能を使ってWordPressの中で使用される、CSS/JavaScript/gif/jpeg/pngファイルなどに有効期限を設定します。

CSS/JavaScriptを縮小する

あわせて読みたい
PageSpeed Insights の最適化提案 「CSSを縮小する」・「JavaScriptを縮小する」について解決する~WordP... https://e-yota.com/webservice/browser_cashe_pagespeed_insights PageSpeed Insights の最適化提案 「ブラウザキャッシュを活用する」について解決すると、モバイルの...

WordPressのプラグインであるAutoptimizeを使って、CSS・JavaScriptのファイルを集約します。上記のページではCSS/JavaScriptファイルの集約について言及していますが、AutoptimizeはHTMLファイルの集約にも効果があります。

asdora-taiga

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次