こんにちは！福岡でホームページ制作を行なうシンス株式会社の越水です。

先日WordPressで作られたWebサイトの高速化を行ったところ大幅な改善が出来ましたので、その時に行った対策をご紹介したいと思います。

まず先に結果を見てもらえればと思いますが、GoogleのPageSpeed Insightsで調べたところ対策前のスコアは次のとおりでした。

そして対策後のスコアがこちらです。

モバイルで+13のスコアアップ、パソコンで+19のスコアップと大幅な改善が出来ました。

とはいえ対策としてはそれほど大がかりなことをしたわけではなく、すぐに行えるものを3つほど対応しただけです。

実際に行った3つの対策

それでは早速、今回行った対策を１つずつ紹介していきます。

使用している画像を圧縮してファイルサイズを下げた

まずはPageSpeed Insightsの結果を見て、画像ファイルのサイズダウンから対策を行いました。

サイト内で使用されている画像ファイルが大きくなってしまうとページの読み込みに悪影響が出てしまいます。

外出時のスマートフォンなど回線状況の劣る環境では、大きな画像ファイルの読み込みに時間がかかってしまいユーザーの離脱にも繋がってしまいます。

ホームページ内で使用するイメージ画像はクオリティに支障がでない範囲でサイズダウンをしておきましょう。

pngファイルやjpgファイルならばこちらのサービスでサイズを最適化できます。

TinyPNG – Compress PNG images while preserving transparency

操作は簡単で、画像をドラッグ&ドロップするだけで最適化された画像をダウンロードできるようになります。

WordPressプラグイン「Autoptimize」を使用

画像ファイルを最適化させたらHTMLやCSSファイルの見直しをしましょう。
これは便利なWordPressのプラグインがあったので利用しました。

Autoptimizeは簡単な操作でホームページに使われているHTML、CSS、JavaScriptを圧縮してくれるWordPressプラグインです。

WordPress › Autoptimize « WordPress Plugins

プラグインをインストール後、有効化をすると管理画面からプラグインの設定が可能になります。

設定画面にHTML、CSS、JavaScriptそれぞれの設定項目があるので圧縮したいファイルにチェックを入れて設定を保存しましょう。

ソースコードを見ると、ファイルが最小化されていたり複数ファイルがひとつにまとめてあったりすることが確認できます。

.htaccessファイルにブラウザキャッシュを利用するための記述を追加

ブラウザはWebサイトを訪れるたびにファイルをサーバーから読み込んで表示させます。

キャッシュを利用すればそのようなファイル読み込み容量を抑えて、サイト表示を高速化することができます。

今回は.htaccessにApacheのmod_expiresを利用するための記述を追加して、ブラウザにキャッシュを設定する対策を行いました（この対策が有効かはサーバーの環境にもよります）。

今回はこちらのサイトを参考にして対応を行いました。

PageSpeed Insights で「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」と提案されたときの修正方法

WordPressサイト用の.htaccess例 | dogmap.jp

まとめ

最初に説明したとおり、これまで紹介した3つの対策を行うことで大幅なPageSpeed Insightsのスコア向上が達成出来ました。

もっとこだわれば90以上のスコアにも届きそうですが、突き詰めれば突き詰めるほど手間もかかってくるので、ある程度のスコアが達成された後は費用対効果と相談して対策を行いましょう。

今回紹介した3つの対策は手間もそれほどかからないものばかりなのでぜひ試してみてください。

楽天、Yahooショッピング、カラーミー、各種ネットショップ構築に対応いたします。