WordPressを高速化してSEOを上げる方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

なぜWordPress高速化が必要なのか

1.アクセシビリティが上がる

速度が高速化すればアクセシビリティが向上し、離脱率を抑えることにつながります。

2.SEOで不利にならない

Googleウェブマスター向け公式ブログには以下の様な記載があります。簡単に要約すると遅すぎると評価を落とすといものなのですが、現状速度的に問題なくとも、コンテンツや閲覧者の増加で低速化することもありえますので高速化しておくことに越したことはないでしょう。

そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

引用:ページの読み込み速度をモバイル検索のランキング要素に使用します

画像の圧縮

まずはサイトのサイズを小さくすれば高速化につながりますので一番のボトルネックである画像を圧縮していきます

プラグインの導入と設定

画像の圧縮ですがアプリ等を利用する方法もあるのですがプラグインを使用した方が楽なのでプラグインを使用します。

こちらをインストールします。Smush Image Compression and Optimization

次に有効化したらモーダルが開くので右上のSKIPをクリックします。以下の様な画面がでますので項目を一つ一つ説明していきます。

プラグイン画面

BULK SMUSH
WordPress管理画面からアップロードされた画像を圧縮します
Automatic Smush
WordPress管理画面からアップロードする際に同時に作成される画像等のどれを圧縮するか選択できます
EXIF data
EXIFを残すか選択できます(ONでEXIFが残ります)
Full size images
WordPress管理画面からアップロードされた画像のオリジナルサイズの画像を指定した値以下になるようにリサイズします
DIRECTORY SMUSH
ftp経由等でアップロードされた画像をここで圧縮できます

WordPress管理画面からアップロードされた画像の圧縮

設定の内容等は以上で下にあるものは有料機能となっています。では、圧縮していきます。
まず上のBULK SMUSHをクリックします。そうすると自動で圧縮が開始されます。タブ、若しくは画面を閉じると中断されますのでご注意ください、また無料版ですと一定間隔で停止しますので止まったら再度BULK SMUSHをクリックすれば途中から再開されます。

ftp経由等でアップロードされた画像の圧縮

先ほどの画面でCHOOSE DIRECTORYをクリックするとWordPressがアップロードされているフォルダが表示されますので圧縮したい画像が入っているフォルダを選択します。次にADD DIRECTORYをクリックしBULK SMUSHをクリックします。圧縮が開始されますが先ほどと同様の注意点があります。

CDNの導入

CDNとはコンテンツデリバリーネットワークの略称でサイト内で使用している画像やcss等を分散させてサーバーの負荷軽減、高速化するためのもので、中にはコンテンツの圧縮機能等がサービスとして提供されているものが存在しより高速化につながります

CDNの導入

様々なCDNがありますが今回は無料で利用可能で機能が豊富なCloudflareを使用していきます。

まずこちらからユーザー登録を行います。
メールアドレスとパスワードを入力し次にすすみます。
CDN導入のセットアップ画面にそのまま進みますのでCDNを導入したいサイトのドメインを入力してください、そのまま画面をすすめていき料金を選ぶ画面では今回は一番左の無料プランを選択します。
そうするとDNSレコードの検索が始まりますのでしばらく待って次へ進みます。
次の画面でネームサーバー情報がでますのでToと書かれている方にネームサーバーを変更します。使っているネームサーバーによってことなるのですが大体3時間程度でcloudflareから登録完了のメールがきますのでメールが来たら登録完了です。

CDNの設定等

Cloudflareに再度ログインすると、acount homeにいどうしますので、そこに先ほど登録したドメインがあると思うのでそれを開きます。
次に上のSpeedを開いきます。設定画面がでてきますので今回設定していくところだけ説明していきます。

CDN設定画面

Auto Minify
CDNでコンテンツキャッシュ時に圧縮して配信します今回はすべてONにします
Rocket Loader
サイト内のjavascriptを自動で非同期化して高速化します今回はONにしますがjavascriptのプラグイン等を使っていたりした際動かなくなる可能性もありますので個別に非同期化する方法は後ほど説明します

次にCachingを開きます。そうするとBrowser Cache Expirationとありますが、こちらを設定するとキャッシュ期間をサーバー側で設定しなくとも設定することができますので設定しておきましょう。

Javascriptの非同期読み込み

Javascriptの非同期読み込みとは簡単に言うとそのままscriptタグで読み込みを行うとそのjsファイルをダウンロード後実行完了までページの構築が完了しなくなるためそのjsファイルの実行を非同期で行わせるというものです。

非同期読み込みにする

非同期読み込みにする方法は下記の様にscriptの属性にasyncを追加するだけです。

ただし複数ファイルを読み込んでいる場合asyncとつけたものがすべて同時に非同期で呼び出しされてしまうので注意が必要です。対策としてはasyncのところをdeferとするとタグが記述されている順に非同期で実行されます。またjQuery等を非同期で呼び出してインラインでjqueryを使用したい場合インラインのjsが先に実行されjqueryが正しく使えなくなります。対策方法としてはdeferで呼び出されたjsも実行が完了してからインラインを呼び出すように下記の様な記述に変更すればライブラリに依存するjsも使用できます。

nginxを導入する

nginxはNginx Software Inc.が開発したwebサーバーでイベント駆動方式を採用していることからapachetと比べ高速だと言われています。ですのでレンタルサーバー等でしたら、nginxのプランに変えたりするなどして導入すれば高速化が期待できるはずです。

nginxの導入と設定

ubuntu 18.04 serverでセットアップしていきます、まず下記コマンドを実行しnginxをインストールします。他記事等ではaptでのインストールだとバージョンが古いと書かれているものもありますが2018/07/20現在1.14.0がインストールされるので問題ないでしょう。

実行した際にビルトインのapache2の影響で失敗することがありますので適宜設定、削除してください。

またそのままではWordPressのスラッグが使用できないのでwordpressのvirtualhostを設定したnginxのコンフィグファイルのlocationに下記の様な設定をいれます。これでスラッグが使用できるはずです。

hhvmを導入する

hhvmとはHipHop Virtual Machineの略称でFacebookが開発している、php実行環境で難しい仕組みはいろいろとあるのですが、簡単に説明すると通常のphp実行環境がphpのソースから中間コードを生成して実行するのに対しhhvmは中間コードを生成せず実行可能なコンパイル済みコードを生成するため高速になると言われています。

hhvmの導入と設定

ubuntu 18.04 serverでセットアップしていきます、まず下記コマンドを実行しhhvmをインストールします。

次にnginxの方でhhvmが使用できるように使用しているvirtual hostのserver内に下記記述を追記してnginxとhhvmを再起動してください。※fastcgi_paramsの部分は環境によってかわります

またこの際自分の環境ですとhhvmがmysqlのsocketに接続できずエラーがでましたのでもしwordpressがデータベースに接続できなくなった際は/etc/hhvm/php.iniに以下の通り追記して直接mysqlのsockファイルの場所を指定すると動く場合があります。

まとめ

行った最適化を簡単に纏めると以下の通りです。

  • 画像の圧縮
  • CDNの導入
  • キャッシュの設定
  • Javascript読み込みの非同期化
  • nginxの導入
  • hhvmの導入

以上の設定や最適化を行えば特殊な条件がない限り遅くなることはないでしょう。是非あなたのサイトも高速化してユーザービリティを向上させましょう。

その開発、弊社に外注しませんか?

WordPress専門の制作会社
「wp.make」

お見積もりのご依頼やご相談など、まずは下記フォームよりお問い合わせください。

WordPressでのサイト開発を専門に行う弊社が、どのような内容にもお答えさせて頂きます。