WordPressのWebサイト高速化のために行えるお手軽な3つの対策

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

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

wp-performanceup01

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

wp-performanceup02

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

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

実際に行った3つの対策

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

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

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

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

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

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

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

TinyPNG – Compress PNG images while preserving transparency

wp-performanceup03

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

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

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

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

WordPress › Autoptimize « WordPress Plugins

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

wp-performanceup04

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »