【情報弱者格差拡大奮闘記】初心者のワイがWordPressサイトの表示速度アップ（モバイル）にチャレンジしてみた！2019 [ノーカット版] 【第2話にして完結編】

初心者の私がサイト表示高速化計画にチャレンジしてみた内容をノーカット版で送る、引き続きの【第2話】です。第一話では、悪戦苦闘の末「①リビジョンを削除する」ことしかできませんでした。

結果はあまり改善しません。（PageSpeed Insightsスコア：22点）

※好きすぎて１万字オーバーした、この記事（「鉄男」をちゃんと見よう／トラウマ映画）を基準に計測しています。

でも得たものはプライスレス！

でも大幅にタイムロス！

。・゜・(/Д`)・゜・。

1. 高速化手段②：画像軽くするぜ
2. 高速化手段③：YouTubeの埋め込みをサムネに
3. 高速化手段④：プラグイン減らす
4. 高速化手段⑤：ウィジェットを調整
5. 高速化手段⑤：キャッシュってやつ
6. 高速化手段⑥：広告を調整してみる
7. 高速化手段⑦：Head Cleaner失敗！
8. まとめ
9. もうちっとだけ続くんじゃ（3/29追記）

高速化手段②：画像軽くするぜ

ちょっとアプローチを変えてみます。

診断結果の画面の「改善できるポイント」を見てみます。

「何言ってるかよく分かんない」状態ですが、どうやら画像に関連する話が多いようですね。

１番上の「次世代～」を開くと、何か画像の一覧が出てきます。

よく見ると、サイドメニュー（スマホだと記事の下）「人気の記事」の画像が出てきます。まあ、広告の画像はしょうがないとして、このへんに出てくる画像をもう一回サイズ小さくして、あげなおしてみます。

Windowsのペイントで、目標をセンターに入れてサイズ変更！目標をセンターに入れてサイズ変更！目標をセンターに入れてサイズ変更！目標をセンターに入れてサイズ変更！目標をセンターに入れてサイズ変更！目標をセンターに入れてサイズ変更！………

また、PING形式のものもあったので、多少粗くても全部JPEGにします。

どうだ？

22点！変わんない！

やっぱ、画像サイズじゃなくて次世代なんとかっつー形式の問題？

検索、検索……いろいろ分かった！

・WebP（ウェッピー）なる形式がいいらしい

・でもiPhoneは非対応らしい

・プラグイン「EWWW Image Optimizer」で一括変換できるらしい

・何か１回設定したら次回以降は自動で変換されるらしい

・非対応ブラウザにはJPEGとかで出るらしい

何かよさそう、やってみよう！

「EWWW～」も入ってるしね。

こちらの記事（EWWW Image OptimizerでWebPを利用してWordPressを高速化）を参考にさせていただきます。サーバーごとのやり方も書いてあって分かりやすい！

「.htaccessファイル」を触るのだけ注意だそうです。

※バグる可能性あり……怖い…

ダメだ！

できない！

手順どうりの作業して、.htaccessもｶﾞｸﾌﾞﾙしながら更新したのに、EWWWの設定画面の右下が「赤PING」のまま。「変更を保存」の下に「Your site appears to be missing mod_rewrite, please contact your webhost or system administrator to enable this Apache module.」というメッセージが出ていて、いろいろ調べたけど、よくわかんない！！

これはお手上げです……もっと修行してから再戦だ！

もう寝る！

(_ *˘ω˘)_ｽﾔｧ…

（寝つきは秒）

高速化手段③：YouTubeの埋め込みをサムネに

おはようございます。

いろいろ見て回った情報の中に、TouTube動画の埋め込みをサムネ画像にするとちょっと早くなるらしい…との情報が。やってみよう！

いろいろ調べてみると

Video Thumbnails

というプラグインがいいらしい。

でも、ワードプレス管理画面で検索しても出てこない！そのプラグインのサイト見てみたら「3年更新されてない」とのこと。大丈夫ですかこの人？　他の似たようなプラグインでやってみようかな……

で、

Embed Video Thumbnail

というプラグイン入れてみた！

動画埋め込みはサムネイルに置き換わったが、以降のページ表示がガタガタに！（cssが効いてないってやつ？）速攻無効＆削除に。

やっぱり

Video Thumbnails

を入れてみる。

ダメです。

サムネイル画像は取得できましたが、記事の埋め込みは何ら変わりません。

次はこれだ！

YouTube SpeedLoad

できた！埋め込みが画像になった！

でも過去の記事を一括で差し替えはできないっぽいので、手で差し替えじゃああああ！

とりあえず「鉄男」の記事内の３つの動画を差し替えて計測してみる…

変わらずの22点！

…う…う～ん、これは、い…いじめ…かな？

…次いってみよう…

※ちなみに有効化して時間がたったら、過去記事も自動でサムネ画像に変わってました！便利！

※ちなみに、プラグイン名どうりYouTube動画にしか効かないようです。

高速化手段④：プラグイン減らす

プラグインっていろいろ便利ですが、多く使うとサーバーが重たくなるとかなんとか…みたいなアドバイスを見ました。でも、画面表示に関係ありそうなプラグインって以下の２点くらいなんですよね。

Dynamic To Top（ページトップに戻るボタン）

Easy FancyBox（画像がふわっと出る）

ま、でも一応停止にしてみて、計測してみよう。

！！

25点！

ちょい早くなった！（＋３）

でもダメだ。Easy FancyBoxで作ったギャラリーについて、プラグイン停止した場合、「画像を別ウインドウで開く」ができないので、1個画像開いたら「戻る」で戻らないといけない。そうすると再度ページ読み込みになってイライラ…。（できるかもしれないけどよくわかんない）

3点くらいなら…この２つのプラグインOFFはもとにもどします。（25→22点）

(;´Д｀)ﾌｰ

高速化手段⑤：ウィジェットを調整

今気づいたんですが、速度検査で出た「次世代～」なんとかの部分ですが、記事本文ではなく、サイドメニュー（スマホの場合はページの下の方）の画像でした。ライオンブログの「ウィジェット」でいろいろなメニューを管理できますが、それを減らしたりしてみましょう。

まったくなくしちゃうわけにはいかないので、あんまり使ってない

・おすすめ動画

・メタ情報

を削除、

「人気の記事」を５つまで（-1）、「最近の投稿」を4つまで（-1）にしてみる。

どうだ？

２点アップ！

これはこれでいきましょう。

高速化手段⑤：キャッシュってやつ

いよいよ難易度高そうなやつをやってみよう。

こちらの記事（WordPress高速化｜１秒前半で表示する誰でもできる簡単な方法）を参考にさせていただきました。

これが上手くいったら、上記記事内の「ソース最適化」にもチャレンジしてみよう！

いろいろあって、こちらの記事（W3 Total Cacheの設定方法）を見ながら作業。

サイトのバックアップを取ってから、

W3 Total Cache

というプラグインを入れて、言われるがままに設定してみました。見た目の変化が起きていないので、実感が湧きません。でもこれで「キャッシュさん」とかいう人が、何か上手いことやってくれるんでしょう！期待してますよ！

(*´▽｀*)

でもね、キャッシュって効果が出るのに時間がかかるんじゃない？

とりあえず測ってみるけどね。

22点！

何か下がった？？？？

一晩明けて、もう一回測ってみた。

25点！

３点上がった！？

けっこうファジーなんかな？

また同日の夜測ってみたら22点でした。けっこうブレが出るモノなのですね。

で、いろいろ情報見ていたら重大な事実が判明！

この「W3 Total Cache」、モバイルのキャッシュ処理は【有料版】とのこと！無料版を有効にしていてもモバイルの速度には影響なし…なんてこった！！

ちなみに有料版は￥4,000くらいとのこと。

くそう！！（ジャック・バウアー風）

こ…これが格差社会ってやつなのか…

(;´Д｀)

他に無料でキャッシュ系プラグインがないか探していたら、よさそうなのがありました。

WP Fastest Cache

こちらの記事（初心者にも扱いやすいWordPressキャシュプラグイン「WP Fastest Cache」の使い方）がとてもわかりやすいです。ほぼ日本語対応されているのも◎。ただしこのプラグインもモバイル対応は有料版とのこと！残念！

で、この記事を読んでいくと、

個人的には、ちゃんとしたサーバを使っている限り、最低限10万PV/月以上（30万PV以上からでも十分なくらい）、PVが無い限りは、キャッシュプラグインは不要と考えています。

引用：寝ログ／初心者にも扱いやすいWordPressキャシュプラグイン「WP Fastest Cache」の使い方

……そ…そうなんですか……

でも、このWP Fastest Cacheは、キャッシュ以外にもいろいろリソースを圧縮？してくれるなどいろいろやってくれるそうなので、入れてみたい！

入れてみたい！

イレ※1テミ※2タイ※3！

※1.イレ：マーケット用語。損失が出ることを承知で買い戻すこと。

※2.テミ：手箕。農業や園芸で使う大きいちりとりみたいなもの。

※3.タイ：国名の方のタイだヨ。あのタイじゃないよ。

セフティー3 取っテミ STT-1(1コ入)

posted with カエレバ

楽天市場で探す

Amazonで探す

Yahooショッピングで探す

W3 Total Cacheに別れを告げ、WP Fastest Cacheに乗り換えてみます。

設定成功！

測ってみます。

25点！

3点プラス！　またちょっと時間置いてから再度測ってみます。

一晩明けました。

27点！

ちょっとは上がったけど、こんなものですかね？

高速化手段⑥：広告を調整してみる

広告の設定をいろいろ調整してみます。

最適化

アドセンスの管理画面を見てみると「最適化」のメニューが！

その中の

・「自動テスト」→自動最適化

・「広告サイズ」→モバイルのページビューの 100% を最適化

にしてみる！

自動広告ヤメ

自動広告にしていましたが、すごいワサワサ出るんですね。けっこうスマホだと「多いな」って感じなので、自動広告はやめて、絞りました。

・ヘッダー（モバイルだと出ない）

・記事上

・記事中（長い記事の場合の真ん中あたり）

・記事下ダブル（モバイルの場合１つ）

・固定サイドバー

にしてみました。

39点！

何か嬉しい！初めて成果っぽい成果が出た感じ！

( *´艸｀)

高速化手段⑦：Head Cleaner失敗！

「ソースの最適化」という目的で、Head Cleanerというプラグインが良いらしく、入れてみました。ところが有効化したら何か管理画面で赤い文字でアラートが出て「何かエラーですよ！ごにょごにょ！」とか言われたので、もう怖くて速攻停止してから削除しました。

…で、次何してみようかなぁ、と途方に暮れていた今気づいた！

このPageSpeed Insightsという測定ツール、自分のサイトのページだけでなく、他のサイトも測れるんじゃね？

測れる！　

自分が良く見るゲームサイトとか、今までこの記事で検索した様な「高速化」の手法を紹介していただいているブログさんとかを、こっそりいろいろ調べてみました。

けっこう20点代とか30点代とか多いな！

ε-(´∀｀*)ﾎｯ 安心した～

すごい良いスコアのサイトもありましたが、けっこう20～30点代も多くて、少し安心しました。自分だけ「遅い」と思っていたので……。

まあ、いろいろやってみて知識不足を痛感しましたし、また中途半端な知識で大事故になっても怖いので、いったんここでスマホ表示速度高速化プロジェクトは凍結し、まとめます。

ε=(￣｡￣;)ﾌｩ 疲れた～

まとめ

いろいろやってみましたが、【成功】とは言い難い状況です。何かが根本的に違っていたりするかもしれません。もうちょっといろいろ勉強してから再チャレンジしてみたいと思います。

第1話　実施成果まとめ

目的	対応	点数	スコア増減
画像最適化	プラグイン「EWWW Image Optimizer」	未計測	未計測
画像後出し	プラグイン「Unveil Lazy Load」	未計測	未計測
基準状態	親テーマ（ライオンブログ）	20点	ー
基準状態	子テーマ（ライオンブログ）	18点	ー
リビジョン削除	プラグイン「WP-Optimize」	18点	±0
デザイン編集	見出しとか修正　でも詳細は謎	22点	＋2

第2話　実施成果まとめ

目的	対応	点数	スコア増減
画像軽量化	診断で出た重いやつを手動で小さく	22点	±0
画像軽量化	次世代形式に変換	失敗	±0
動画埋込軽量化	プラグイン「Embed Video Thumbnail」	失敗	±0
動画埋込軽量化	プラグイン「Video Thumbnails」	失敗	±0
動画埋込軽量化	プラグイン「YouTube SpeedLoad」	22点	±0
プラグイン減	「Dynamic To Top」と「Easy FancyBox」を停止。	25点	＋3
プラグイン減	諸事情により戻す	22点	-3
ウィジェット減	「動画」「メタ情報」「人気・最近の投稿」表示数減。	24点	＋2
キャッシュ	プラグイン「W3 Total Cache」	25点	＋1
キャッシュ	プラグイン「W3 Total Cache」停止削除	24点	-1
キャッシュ	プラグイン「WP Fastest Cache」	27点	＋3
広告調整	最適化と自動広告ヤメ	39点	＋12
ソース最適化	プラグイン「Head Cleaner」	失敗	±0