2018/08/16

WordPress高速化のために出来ること [1]

ホームページの表示速度が早いと検索結果にも有効です

皆さんもホームページを見る時は、すぐにサイトが表示されないとイライラすると思います。統計によると、ほんの数秒でも真っ白な読み込み状態が続くとサイトの離脱率も高くなるそうです。このようにサイトが重いと、閲覧するユーザーにも避けられるので、当然Google等の検索エンジンでの評価も下げられる結果となるのです。

 

人気のCMSであるWordpressは更新が非常に手軽で、何かと重宝するのですが、裏で数多くのプログラムが働いているために、サイトは重くなりがち・・・。今回はそんなWordpressを少しでも早くする方法がテーマです。

 

キャッシュ系のプラグインを入れる

まず、最も手軽に出来るのがWordpressにキャッシュ系のプラグインをインストールする事です。

キャッシュとはデータを一時的に保存する仕組みの事で、一般的にはパソコン等の閲覧する端末に、ダウンロードした画像等のデータを保持しておいて再利用する事を指します。Wordpressの場合には、さらにデータベースを元に動的に作られるページをサーバー上に保存しておき、ページを生成する時間を短縮する事もキャッシュと言い、表示速度の改善に繋がります。

 

WordPressのキャッシュ系プラグインで一番有名なのが「WP Super Cache」と「Autoptimize」です。

 

個人的にオススメなのが後者の「Autoptimize」です。このプラグインは動的ページのキャッシュの作成のみならず、後述するソースの圧縮や画像のCDNサービス化まで何でもこなしてくれます。

詳細設定は「Autoptimize」をインストール後、有効化したら「設定」>「Autoptimize」を開きます。

 

基本的な使い方は「HTML コードを最適化」と「CSS コードを最適化」、そして「JavaScript コードの最適化(非推奨)」にチェックを付け「変更を保存してキャッシュを削除」をクリックするだけです。非常に簡単ですね。さらにCSS等をインラインとして埋め込むことも出来るので、ファイル読み込みに係るオーバーヘッドを軽減する効果もあります。

 

ちなみに「JavaScript コードの最適化」が非推奨なのは、エラーを起こしやすいためです。JSの読み込み位置の調整等は手動でも可能なので、ここで設定しなくても良いと思います。

CSSやJS等のソースを圧縮する

数十KB程度の圧縮ですが、読み込み速度の向上に有効なのがソースの圧縮です。

仕組みを簡単に説明すると、ホワイトスペース(改行、スペース)を除去したり、コードを最適化する事でソースのサイズを小さく圧縮します。

 

HTMLソースとCSSの圧縮は上に挙げた「Autoptimize」でも簡単に行う事ができますが、Minify(ファイル圧縮)と呼ばれる専用のデータ圧縮サイトで、さらにギリギリまで効率よく削減する事も可能です。

CSSの圧縮に便利なのが「cssminifier」というサイトです。左のテキストエリアに元のCSSコードを入力して、「Minify」ボタンを押すと右のテキストエリアに圧縮されたコードが出力されます。

CSSに関してはこちらのサービスが他のサービスよりも圧縮効率が良かったです。

Javascriptの場合はこちらの「JS Minifier」がオススメです。コードが長くなりがちなJavascriptでは数百KBほど圧縮できて便利なのですが、稀に圧縮するとコードが上手く動かない場合もあるので、その場合は諦めて元のソースのまま使いましょう。

 

この2つの最適化に加えてCSSを圧縮したHTMLの中に埋め込みできるプラグインの「Autoptimize」を併用する事で、かなりの高速化が可能となります。

画像を圧縮・最適化する

最後はファイル容量の削減に一番効果がある画像の再圧縮とCDNサービスについてですが、これを行うと結構画像が劣化してしまうので、どうしても気になる場合は手動で調整した方が良いでしょう。

 

 

まず最初はWordpressプラグインの「EWWW Image Optimizer」です。有料のプラグインですが、サイトの規模が小さいならばほぼ無料で使えます。

劣化しやすい画像の再圧縮しなくてもメタデータと呼ばれる画像に埋め込まれている余分なデータを除去したり、再圧縮の場合でも人間の目には判別できない程の再圧縮でファイルサイズを30%ほど削減してくれます。

個人的には、画像編集ソフトの段階で圧縮の調整を行うので、メタデータの除去くらいしか恩恵に与れませんが、画像編集に明るくない人が手軽にサイズを縮小するには良いプラグインだと思います。

次にご紹介するCDN(コンテンツデリバリーネットワーク)サービスとは、画像を最適な地域の高速なサーバーにキャッシュしておいて、そこから配信するサービスで、自前のサーバーやレンタルサーバーに置くよりも効率よく、ユーザーにダウンロードしてもらえる手段として用いられています。

Cloud Flare」等が無料で提供してくれていますので、こちらを利用してみるのも良いでしょう。Wordpress用のプラグインもあります。

 

他にも、上に挙げたキャッシュ系プラグインの「WP Super Cache」と「Autoptimize」や、画像最適化プラグインの「EWWW Image Optimizer」でも行う事が可能です。

 

あとは極力JPEGやPNGといった画像ファイルは使わずにSVGを使ったり、画像をインラインとしてHTMLソース中に埋め込んだり、遅延読み込みを活用する方法でも読み込みの高速化は可能です。

次回は今回の施策ほど効果は無いかもしれませんが、Wordpressを高速化できるその他の方法を載せたいと思います。

このサイトは Internet Explorer 10 以下には対応しておりません

あなたがお使いの Internet Explorer はセキュリティ問題と表示の不具合を多く抱える古いブラウザのため、開発元のMicrosoft社でも移行を勧めております。
WEB閲覧には安全上の問題や、快適性を考慮して、現在主流となっている Google ChromeFirefox または Opera 等の最新ブラウザをご利用ください。
Chromeのダウンロード