2018/01/04

WordPress高速化 プラグイン導入時の軽微な不具合を紹介

 
mathew-schwartz

この記事を書いている人 - WRITER -

自転車の魅力に目覚め、ロードバイク、ミニベロは私の体力維持装置。またフィルムカメラ(Canon A-1, F-1)を使って、デジタルな毎日にアナログの感覚を注入。デジカメはGR2を愛用。【super.corsa.2017@gmail.com】

Super Corsa

この記事を書いている人 - WRITER -
(ELEPHANTでは必須ではない)

はじめに

WordPressを使って3つのサイトを立ち上げています。サイト当たり7~13記事を投稿した後、スマホ(LTE環境)でサイトの表示を確認してみました。

WiFi環境のパソコンでは確認済なんだけど、LTE環境のスマホならどうかな?

うーん…もうちょっと速い方がうれしい

相方

その時の回線速度を調べると「下り 5.39Mbps」 。

speedtest

アクセスが集中している時間帯とか、電波が弱い場所ならありえる数字ですよね。こんな時にもスパッとサイトを表示したい。そこで、WordPressの高速化に着手しました。一番気になるのは、キャッシュ系プラグインの不具合で、ネット上にいろんな情報があります。結局は個々の環境に依存するので、高速化を実現するには試してみるしかありません。

結果、大きな不具合はありませんが軽微な不具合はありました。それは、一部の画像がスマホで表示されない。(パソコンなら表示されている)でした。

 

スマホ画面

この不具合は、表示されなくなった画像を「再アップロード&記事に再貼り付け」 することで解決しました。また、改善の余地は残しつつも高速化できました。

私のWordPress環境とインストールしたプラグイン

私のWordPress環境は以下の通りです。

サーバー エックスサーバー(X10)
MySQL 5.7
PHP 7.0.18 「FastCGI」と「OPcache」が標準で有効
mod_pagespeed オン
WordPress 4.8.2
WPテーマ elephant-single 1.5.6

上記環境で立ち上げたサイト(3サイト)に7~13記事を投稿した後、下記プラグインをインストールしました。インストールしたた順番に記載しています。

  1. Optimize Database after Deleting Revisions 4.4.2
  2. EWWW Image Optimizer 4.0.6
  3. a3 Lazy Load 1.8.2
  4. WP Fastest Cache 0.8.7.5 (無料版)

もちろん、インストール前にバックアップを実施しました。結局、バックアップを使わずに済みましたが、記事に使った一部の画像(別ファイルで保存していた)を再アップロードする必要がありました

Optimize Database after Deleting Revisions

WordPressのリビジョン削除と保存数の削減だけでなく、データベースの最適化を行うプラグインです。記事が増えると二度と使わないリビジョンが蓄積され、表示速度が落ちます。今後の運用を鑑みてリビジョンの定期的な削除が必要と考えました。

設定(例)

DB optimize 1

チェックは上記の通りです。「Delete revisions older than」と「Maximum number of -most recent- revisions to keep per post/page」の数値設定は、どれだけ記事のリビジョンを残しておきたいかで決めて下さい。

「Schedular」では様々な頻度を設定できます。これも、どれだけ記事のリビジョンを残しておきたいかで決めて下さい。

 

DB optimize 2a

データベースの最適化を行わないテーブルを指定します。基本は何もチェックをいれなくてOKです。

 

データベースの最適化を手動で実行

WordPressの管理画面から「ツール」⇒「Optimize  Database」を選ぶと下記画面が表示されます。

DB optimize manual

「Start Optimization」をクリックするとデータベースの最適化が開始されます。結果は以下の通りでした。

DB optimize 3

 

EWWW Image Optimizer

投稿記事が増えてくるにつれて、扱う画像も増えていきます。画像ファイルが大きいと、サイトの表示速度を低下させる要因になります。よって画像サイズの最適化は重要です。このプラグインを導入することによって下記の機能が得られます。

  • 画像ファイルのアップ時に、自動でファイルサイズを圧縮
  • 過去にアップした画像を検出し、ファイルサイズの一括圧縮

設定(例)

「基本設定」では、「メタデータを削除」にチェックを入れます。

EWWW_1

 

「変換設定」では、「コンバージョンリンクを非表示」にチェックを入れます。

EWWW_2

その他の項目に関しては、インストール時の設定のままでOKです。

アップロード済みの画像ファイルのサイズ最適化

WordPress管理画面の「メディア」→「一括最適化」から、アップロード済みの画像ファイルのサイズ最適化ができます。

 

a3 Lazy Load

サイトを表示する際に画像や動画を遅らせて読み込むようにして、サイト表示を高速化するプラグインです。他にも似た機能のプラグインが多くあるのですが、

  •  画像ファイルだけでなく Youtube動画も遅延読み込みできる
  • 更新が定期的に行われている
  • 設定が簡単

の理由で「a3 Lazy Load」 を選択しました。

 

設定(例)

「Image Load Threshold」の値を「400」にします。スマホで画面をスクロールした感じで判断しました。

a3 Lazy Load

 

WP Fastest Cache

キャッシュ系プラグインの情報はネットに多くあります。2017年12月現在では「WP Fastest Cache」の 不具合情報が最も少ないようです。また設定も分かりやすいので、WP Fastest Cacheを選択しました。また定期的なキャッシュ更新の他、新規投稿時にも自動でキャッシュが更新されます。 なお、無料版ではモバイルのキャッシュに対応しておらず、有料版での対応になります。

設定(例)

設定画面のチェックは下記の通りでOKです。

WP FASTERST Cache

「Preload:」にチェックを入れる際には、下記のサブウィンドウが開きます。下記の通りにチェックを入れて下さい。

WP FASTERST Cache 03

「新しい投稿:」にチェックを入れる際には、下記のサブウィンドウが開きます。下記の通りにチェックを入れて下さい。

WP FASTERST Cache 02

「Update Post:にチェックを入れる際には、下記のサブウィンドウが開きます。下記の通りにチェックを入れて下さい。

WP FASTERST Cache 01

 

軽微な不具合事例

本来は各プラグインのインストール毎に確認すべきだったのですが、すべて導入した後に軽微な不具合があることに気付きました。

一部の画像がスマホで表示されない。
(パソコンなら表示されている)

確認はすべてパソコンで実施していたので…(言い訳)。調査の結果、 下記の対策で解決できました。

WordPressの管理画面の「メディアライブラリ」と「投稿(の記事)」から、一旦画像ファイルを削除します。再度、画像ファイルをメディアライブラリにアップロードして、記事に挿入します。

これにより 「スマホで一部の画像が表示されていない」という不具合を解決できます。

サイトの表示速度を確認

前述のWordPress環境で立ち上げた3サイトに対して、4つのプラグインを導入した後の表示速度は下記の通りです。改善はしましたが、まだ改善の余地があります。

PageSpeed Insights

Googleが提供しているサービスで、ウェブページのコンテンツを解析してページの読み込み速度を測定し、速度の改善策を提案してくれます。(リンクはこちら

結果

ps_keysol
ps_bicycle
ps_kinosaki

GTmetrix

サイトの中でパフォーマンス的にボトルネックになっている要素を調査するツールです。例えば、HTML、javascript、画像ファイル、cssなどフロント側の悪化要因を確認できます。(リンクはこちら

結果

GTm_keysol
GTm_bicycle
GTm_miyoshi

まとめ

参考になれば幸いですが、プラグインの導入は自己責任でお願いします。WordPress、WPテーマ、各種プラグインのバージョンアップで何も起こらない保証はありません。しかし、サイトの表示速度が遅いと、記事を見てくれない確率が高くなるのも事実です。私の場合、サイト当たりの記事数が7~13だったので、不具合対策は楽でした。試してみるなら小規模の方が被害が小さいとも言えます。

この記事を書いている人 - WRITER -
(ELEPHANTでは必須ではない)

Googleアドセンス

スポンサーリンク

Copyright© もろもろ備忘録ブログ , 2017 All Rights Reserved.