【最新版】WordPress高速化で本当に役立ったプラグイン!

どーも、ひまお(@himanarikei)です。

今回は、Wordpressでブログを運営していく際に重要となるサイトの高速化に関して本当に役に立ったプラグインを2つ紹介します。

僕は最近ブログを書いていて、「サイトが重くなってきたなぁ〜」と感じてきたので、サイトを高速化する為に様々なプラグインを導入したりしていました。

「Wordpress 高速化 プラグイン」と検索すると、大量にプラグインの紹介が出てきますが、いろんなパターンを試した結果、最終的に2つのプラグインを有効化するだけで大きな効果が得られました。

次の章から、実際にどれくらいの効果が現れたのか、使用した2つのプラグインの紹介と設定方法を述べていきたいと思います。 

実際にどれくらい高速化されたか

今回、使用したサイトのスピードチェックツールは、GTMetrixです。

GTmetrix | Website Speed and Performance Optimization
GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers actionable recommendations on how to fix them.

実際のサイトの高速化後の様子がこちらです。

ご覧の通りにPageSpeedScore、 YSlow Scoreが、A、Bと非常に高くなっている事がわかります。

また、サイトの表示速度も3.5秒とそこそこ速いスピードで表示できている事がわかります。

だいたい3秒以下だと速いと言われているのでまずまずの結果かなと思います。

プラグインなしで高速化できたこと

WordPressの環境

現在、Wordpressで自分が使っている環境を説明します。

サーバー:Xサーバー

テーマ:Simplicity

です。

XサーバーとSimplicityを使っている場合

まず、Xサーバーの利点として高速化に向いているというポイントがあります。

まずは、誰でもできる高速化として、mod-pagespeedをONにします

Xサーバーのサーバーパネルにログインすると、左下のホームページという枠の中に、mod-pagespeed設定というものがあるのでそれを開きます。

これをただONにするだけで簡単にサイトを高速化する事ができました。

次に、サイトの高速化に欠かせないキャッシュ用のプラグインですが、テーマでSimplicityを使っている場合では、キャッシュ用のプラグインを入れる必要がなくて、.htaccessを編集するだけで高速化する事ができます。

本来、.htaccessを編集する場合はFTPソフトが必要になるのですが、こちらもXサーバーを使っている場合は、サーバーパネル上から編集する事ができます。

先ほどのmod-pagespeed設定の下に.htaccess編集というものがありますのでそれを開いて編集します。

編集に関して、こちらのサイトが非常にわかりやすいのでこれを参考にすれば誰でもできます。

コピペ一発でSimplicityを結構高速化する方法
Simplicityを高速化し、さらなるパフォーマンスアップをする方法を解説します。高速化には、ブラウザキャッシュの設定と、リソースを圧縮の設定を行います。たったこれだけのことですが、かなりの高速化が図れます。例、Simplicityに今回

この2つの作業だけでもだいぶ高速化が図れますのでまだやっていない人がいたらぜひ、試してみてください。 

高速化に役立ったプラグイン2選

1.Autoptimize

Autoptimize
Autoptimize speeds up your website by optimizing JS, CSS and HTML, async-ing JavaScript, removing emoji cruft, optimizing Google Fonts and more.

このプラグインは、CSSやJavascriptを最適化するのに非常に役に立ちます。

この2つを最適化するだけでサイトの表示の高速化に繋がるのでどんな人でもお勧めできると思います。

Autoptimizeを開いたら、このように設定画面が出てくるので僕は上記のようにチェックを入れています。

HTMLコードの最適化に関しては、次に紹介するプラグインで最適化を行っているのであえてチェックを外しています。

これだけでも十分、高速化の恩恵を受けられました。

2.Above The Fold Optimization

Page Speed Optimization
WordPress optimization toolkit with a focus on SEO. This plugin enables to achieve a Google PageSpeed 100 Score. Supports most optimization, minificat …

これは、サイトの高速化をする際に必要な要素の全てが設定できる夢のようなプラグインです。

ぶっちゃけ、これを紹介している記事が少なかったのでもしかしたら自分以外はあまり効果が出ていないのかもしれませんが、少なくとも自分のスコアが上がった最も大きな要因はこのプラグインでした。

Above The Fold Optimizationを開くと、このような設定画面が出てくるのですが、Critical CSSの設定に関してはよくわからなかったのでやっていません。

なので、まず最初にHTMLのタブを開いて設定を行いました。

上記のようにチェックを入れるだけでHTMLが最適化されました。

次に隣のタブのCSSの設定に移ります。

僕の場合は、上記のようにチェックを入れています。

上のチェックを外している理由は、Critical CSSの設定をしていないのでチェックを入れると高速化されるのですが、ページの表示がおかしくなります。

なので、あえて外しています。

下のWebfontの最適化のチェックに関しては、Webfont.jsのロードに関して今まではGooglefontを普通に読み込んでいたのですが、GoogleのCDNから非同期で読み込むことで読み込み速度を上げる設定にしています。

これは実際どれくらい効果があるのかわからないですが、googlefontを使っている人は他にもインラインで読み込む設定だったり、通常の非同期に読み込む設定に変更できるのでそちらの方でも試しに設定してみると良いと思います。

次に隣のタブのJavascriptの設定に移ります。

僕の場合は上記のようにチェックを入れています。

主には、Javascriptの読み込みの最適化とスクリプトの遅延読み込みに関する設定です。

Javascriptの設定は、環境によっては動作がおかしくなる事がたまにありますので設定の際は注意が必要です。

僕の場合は、こちらのプラグインとAsync Javascriptというプラグインを両方オンにしていた時にモバイル時のメニューバーやトップへ戻るボタンが反応しなくなるという症状が出ました。(Async Javascriptを削除したら解決しました)

僕の設定は以上で、このように簡単にチェックを入れるだけでサイトがどんどん高速化されていくので、非常にお勧めできるプラグインだと思います。

まとめ

今回はサイトの高速化に役立ったプラグインを2つ紹介しました。

サイト高速化のプラグインは山ほどありますが、自分の環境で最終的に必要だと感じたのは「Autoptimize」「Above The Fold Optimization」の2つで、特に後者のプラグインに関しては、「Wordpress 高速化 プラグイン」で検索してもなかなか出てこなかったので出会えて本当に良かったです。

皆さんもこれを機会にサイトを高速化してみてはいかかでしょうか? 

あわせて読みたい

【祝75記事】ブログを始めて約5カ月のPV数の変化や今後の目標

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です