WordPressで作ったサイトの表示スピードが劇的にアップした！僕の事例
初めにお断り
注）こちらIT勉強中の50代男によるログ的投稿です。
サイトのスピード化についても、それぞれのページによって伸びしろや遅延の原因が違います。本稿あくまで『僕のサイトに関してはこうだった』というログに過ぎませんので、広範において同様の効果が見られるとは限りません。
参考の１つ程度にお考えいただけましたら幸いです。
サイト構築時に選んだテーマ
僕はこのサイトの他にも、複数のWebサイトを構築しています。（コウチクとか言うほどのものでは無いですが） 、その一つに旅行系のサイト（下記）があります。
3カ国語の切り替えが出来るサイトにしたかったので、『WordPress国際化テーマ』の中からデザイン性の高いものを探していたところ、スライダーや拡大表示される画像がカッコいい 『Prevalent』 というテーマを見つけました。
『Travel Theme（トラベル・テーマ）』というサブタイトルも僕が探しているテーマにぴったりでしたし・・・。
廉価でPrevalent-Pro（有料）という上位版に移行できるとのことだったので、そちらも速攻で購入。
これで僕のように大したプログラミング知識がないオッサンでも、そこそこプロっぽいWebサイトが作れるぞ・・・フフフ。
と下心丸出しでサイトのコウチクに取りかかったのでした。
完成に近づいたとき、思わぬ落とし穴が・・・
サイトが完成に近づいた頃のことです。どうしても自慢したくなったので、一緒に飲んでいた友人のスマホにURLを打ち込み「こんなサイト作ってん、かっこええやろ～！」と見せようとしたところ、なかなかページが表示されず。
読み込み中の表示（丸いのがクルクル回っているやつね）が出て、なかなかトップページが開かなかったのです。
その時初めて気づきました。
このサイト、表示スピードが遅い！遅すぎる！
いつもパソコンでサイト作りをしていたから気づかなかったのでしょう。スマホで開いてみるとこんなに遅かったとは！
友人も僕に気を遣って「私のスマホの性能が悪いからかな…なかなかページ開かないね…」と言ってくれました。
友人にまで気を遣わせてしまうとは…。デザイナー失格です。
表示が遅い原因は!?
このサイトはトップ部分に大画面のスライダーがあり、その下にも数々の拡大表示画像やスクロールに併せて現れる画像等、様々なビジュアル・エフェクトが配置されています。
そのほとんどが有料版テーマにデフォルトで設定されていたものなのですが、Javascriptやphpすら満足に扱えないプログラミング素人の僕にとってはスゴく魅力的なものでした。
ですがその動的なイメージ効果こそが表示スピードを遅くしている最大の原因だったのです。
「これだけJavaScriptや拡大画像ちりばめていると、そら重くなるよな…」
ということは素人でもわかりました。
ビジュアル・エフェクト（画像効果設定）の少ない、元々表示スピードの早いテーマを選ぶ、変更するというのが最も効率的に手っ取り早く、表示スピードを速くする方法と言えます。ただ、今回は画像効果の多いテーマを早くする方法のひとつとして、僕が取った方法を紹介していきます。
ページの表示スピードを計測してくれる便利なツール『PageSpeed Insights』
さすがにこのまま世に出すわけにはいかず、ググってみると、PageSpeed Insightsなる、WEBページの表示スピードを検出してくれるものがあることを知りました。（「…って今知ったの？」とツッコまれそうですが）
サイトのURLを打ち込むだけでスピードを計測でき、ご丁寧に改善案まで出してくれるようです。しかも提供元はGoogle先生！これを使わない手はありません。
でPageSpeed Insightsで調べてみることに。
なんとモバイルで表示した場合のスピード評価、100点満点中、15 !
さすがにへこみました。仮にもプロでやっていこうとしている人間が、こんなカメ並のスピードのサイトを作って満足していたとは！
この総合評価ポイント『15』の表記の下に、色々と改善点と改善方法の提案が記載されていました。↓こんな感じ。
※上記画像は後日撮り直したものです。
で、PageSpeed Insightsの教え通り、改善案を1つずつ当たってみることにしました。特に大きな改善が期待できる順から。
- 次世代フォーマットでの画像の配信
- 適正なサイズの画像
- オフスクリーン画像の遅延読み込み
等が『改善できる項目』の上位に表示されていました。
それではいよいよここから、僕が半プロながら色々試した方法をお伝えしていきます。
・・・が、その前に。
今回・次回と色々僕が試したプライグインやコード編集などをご紹介しています。Webサイトやデータの編集をされる場合はご自身の責任の下、必ずバックアップを取ってから行ってください。読者様、閲覧者様が行う行為に関し、当サイトでは一切責任は負いかねます。
『次世代フォーマットでの画像の配信』項目を改善できるか
PageSpeed Insightsの提案には
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
さらには
アップロードした画像を最適なフォーマットに自動変換する プラグインまたはサービスの使用をご検討ください。
ｰWordPress管理画面より引用ｰ
とありました。
それに上記 ”プラグイン” の文字がリンクになっています。と、いうことはこのリンクを開くと
WordPress推奨の『JPEG 2000、JPEG XR、WebP』などに変換できるプラグインが出てくるのかも！
とクリック！
すると期待できそうなプラグインの数々が下記のように表示されました。
上記の中から、ネットでも特に評判のよかった『EWWW image Optimizer』と『imagify』を別々にインストールし（※）試してみることに。
※２つのプラグインは順番に試しています。これら互いに干渉するため同時に有効化すると警告が出ます。
しかしインストールしたものの、次世代フォーマットに変更する方法が判らない・・・！
「もしかするとこれらのプラグインは画像圧縮用で、次世代フォーマットへの変更は出来ないのかな・・・」と早々に諦め、まずは画像圧縮のみ行うことにしました。
【後日追記】
後に気づいたのですが、EWWWには次世代フォーマットへの変換機能がありました。（もしかするとimagifyにも）
『適正なサイズの画像 』項目を改善できるか
『EWWW image Optimizer』で画像圧縮してみた
まずは Web上でも評価が高く、多くの情報が得られた『EWWW Image Optimizer』を導入することに。
実行後には『縮小された画像データ一覧』などが表示され、プラグインがどのように頑張ってくれたのが視覚的に判る作りになっています。
しかるべき設定を施し、いざ『PageSpeed Insights』へ！
って・・・あれ？
あんまり変わってないやん。
『imagify』で画像圧縮してみた
気を取り直し、次は『imagify』を導入。
しかるべき設定を施し、いざPageSpeed Insightsへ！
って・・・あれ？
全然変わってないやん！
今回もスピード表示の下の改善が期待できる項目を見てみると
先ほどまで赤い▲が７s以上だった “時間短縮が期待できる” という3大項目の一つ『適切なサイズの画像』が、なんと0.15sにまで短縮されていました！明らかにこの項目では効果が出ていた（画像が大幅に圧縮された）と言うことになります。
それでも表示スピードはそれほど変わらないのか・・・
※『imagify』については『EWWW image Optimizer』で圧縮処理をした後だったからかもしれません。ただこちらのプラグイン、『NORMAL』『AGGRESSIVE』『ULTRA』と画像圧縮レベルが3段階あり、『NORMAL』だと『EWWW』とそれほど効果に違いが感じられず、『AGGRESSIVE』にすると画像の劣化が感じ取れました。なので、綺麗で大きな画像を使用したいサイトには向かないと感じ、使用を中止しました。
どうしよう・・・、あまりあれこれプラグインをインストールしたりするのもよくないし。
ファイル圧縮については一旦置いといて、別の項目を改善してみるか・・・。※後に同じ圧縮ファイル系プラグインの『Autoptimize』を試すことになるのですが、それについては後述および後編で紹介させて戴きます。
『オフスクリーン画像の遅延読み込み』の項目を改善できるか
『適正なサイズの画像』項目でスピードUPが出来なかったため、次に 『オフスクリーン画像の遅延読み込み』に着目。
項目の左横にある▼を開いたところにまたもやGoogle先生からのありがたいお言葉を戴くことが出来ました。
WordPress の遅延読み込みプラグインをインストールすると、画面外の画像の読み込みを遅らせたり、遅延読み込み機能のあるテーマに切り替えたりできます。AMP プラグインの使用もご検討ください。
ｰWordPress管理画面より引用ｰ
AMPってなんぞや!?
勢いだけでこの道のセミプロになった50歳オヤジには分かるすべも無く…
とりあえずネットでも評判いいし、WordPress様が推奨しているので問題はないだろう
という安易な判断で取り急ぎインストール。
しかしこのような安易な気持ちで導入したものが上手く作用するはずがありません。
『AMPは現在お使いの環境には対応していません（※）』というつれないメッセージの元、あえなく使用を断念しました。※正確な文言は忘れましたが、こんな感じでした。
「まー、そもそもAMPとかよくわからんし、なんかサイトの表示形式も変わるみたいやし、いらんわ！」と自分自身を納得させたのでした。
それならばと、WordPressの遅延読み込みプラグインなるものをインストールしてやろうと、リンクをクリック。
すると・・・いくつか先ほど『次世代フォーマットでの画像配信』の項目でも表示されていたプラグインがあることに気づいたのです。
諦めかけたとき試した『Autoptimize』で効果が見られた
ファイル圧縮プライイン一覧にも、オフスクリーン画像遅延読み込みプラグイン一覧にもあったプラグインとは・・・
そう『Autoptimize』です！
一体このプラグイン、次世代フォーマットに変換してくれるのか、画像圧縮しくれるのか、遅延読み込みのプラグインなのか、はたまたキャッシュ削除なのかよくわからなくなったものの、800人以上が使用し、★４つ以上。これはもうインストールしか無いでしょう！と藁（わら）にもすがる思いでインストール。下記のように設定してみたのでした。
注）今回・次回と『Autoptimize』というプラグインを絶賛お薦めしていますが、ネット上には「Autoptimizeを導入したらレイアウトが崩れた」などの情報もあります。ご注意ください。
【後日追記】
注２）親サイト『Hisshi.jp』でも同じく『Autoptimize』を使用していましたが、CSSを編集する際、『Autoptimize』の影響で、ファイルの保存場所がかなり複雑になってしまい（ものによっては通常『style.css』に保存されているコードがAutoptimizeのキャッシュファイルに移動されていたり）、結局CSSオプション（下記）については無効化しました。頻繁にHTMLやCSS編集を行うサイトについてはこの『Autoptimize』はお薦めしません。
Autoptimize設定方法概要
ここから少し（珍しく）設定方法の概要を紹介します。
WordPress管理画面にある『設定』→『Autoptimize』と進みましょう。
右上にある『高度な設定』をクリック→『JS, CSS & HTML』というタブを開きます。
以下、僕がネット上の情報を参考に見よう見まねで行った設定です。
↓キャッシュ情報の部分も基本デフォルトのままです。・・・が、フォルダのディレクトリについてはなんとなく公開しない方が良い気がしたので隠しました 笑
で、最後にページ下部にある『変更を保存してキャッシュを削除』をクリックして設定完了です。
Autoptimizeで明確な改善は見られたのか
ドキドキしながら再度PageSpeed InsightsにURLを打ち込み検証すると・・・
おおっ！15→35に！
初めて明確にUPした瞬間でした。感動・・・
とは言え、まだまだプロとして世間様にお見せできる代物ではありません。
次回（後編）では、ここから→40台→80前後まで上げた方法をご紹介します。
- Javascriptをhead内からbody内に移動
- PHPのバージョンアップ
- 画像の最適化
- サーバーのプラン変更（バージョンアップ）
等を行っています。
Eye-Cache Photo by Jean Gerber on Unsplash
コメント