【三つ巴】ワードプレス高速化とプラグインと私の5日間戦争




こんばんは。松本です。

いわきでワードプレスの人を名乗っています。

 

 

今日お送りするのは…私が経験したあまりにも恐ろしい話。

を若干大げさにお送りします。あ、嘘は書かないよ。

 

【プロローグ】きっかけはいつも些細なことである

そう。

たまたま、本当にたまたま読んだ1つの記事がきっかけだったのだ。

 

 

その記事の概要はこうである。

「ワードプレスの高速化は、SEOにも効果があるからした方がいいよ」

SEOに効果があるっていうのは、検索エンジン(GoogleとかYahooとか)で検索した人にサイトを見つけてもらいやすいってことだ。

 

 

 

【The 1st day】表示が遅い…遅すぎる…!

ブログの読み込みが遅い

本当は、前から感じていたのだ。

気づかないフリをしていた。

でも、もう限界だ。

 

 

私のブログは、表示に時間がかかりすぎる。

 

 

 

1記事クリックして、読み込むまでに数秒かかるのだ。感覚で3秒くらい

 

 

これは、動画だってサクッと表示される現代においてどうなのか。

 

 

 

どだい、私はせっかちである。

興味を持ってタップした記事でも、表示に時間がかかった瞬間に閉じるくらいにはせっかちである。

あと画面いっぱい覆う広告(バツがちっちゃいやつ)が出てきたときも閉じる。

 

 

同じように、私の記事の表示に時間がかかることで、閉じる人が存在しても何らおかしくはない。

 

機会損失である。

 

驚くべきスコア

実は、サイトの表示速度を診断するツールがある。

現代のインターネット界の法律そのものと言っても過言ではない、泣く子も黙るGoogle。

そのGoogleが無償で提供する、PageSpeed Insightsというツールである。

 

 

これで、サイトの表示速度の判定と、改善すべき点をはっきりさせることができるのだ。

 

…え??

100点中の22点。ちなみにパソコン表示は26点

 

 

 

赤点である。

補習と追試が必要な赤点である。

 

 

 

赤点なんて高校以来だ。

あれは多分高2の1学期、世界史の期末テストである。

世界史は古代ギリシャで受験科目としての全てが終わった。

人名が「ス」で終わりすぎて区別がつかないからだ。

 

ソクラテ、アリストテレ、ヘロドト、アイスキュロ、アルキメデ……!!合ってるかも分からん

 

 

 

あ、そんなことはどうでもいいんだった。

 

 

 

とにかくブログの表示に時間がかかりすぎていることは間違いない。

 

対策と方針の決定

目的は定まった。

「ブログの表示速度を上げる」その1点である。

 

その1点について、対策を調べる。

 

 

あれこれ調べた結果、対策と方針が固まった。

以下の通りである。

 

・効果があるとされる方法は、リスクを恐れずとりあえず導入してみる。

・効果が無い場合その方法はすぐやめる。余計なプラグインは入れたくない派

・悪影響が出た場合も同様すぐやめる。

・自サイトで試す以上自己責任。

 

 

この方針で行くと決めた私を、どんな運命が待ち受けているか…

その時の私は露ほども知らない。

 

 

【The 2nd day】高速化

高速化に向けた対策7つとその効果

前日に決めた方針のもと、7つの対策を次々と試しては、スピードをチェックするの繰り返し作業が始まった。

メリットデメリットを調べ、デメリットの起こす損失を自分なりに理解した上での自己責任である。

 

 

導入や設定にあたって参考にした他サイト様も一緒に紹介していくけど、導入は自己責任でね!!!

 

試す前に、必ずバックアップを取るのです…!!!

 

その1 ewww image optimizer

ewww image optimizerという、画像を圧縮してくれるプラグインがある。

これは、完全に入れた気になっていた。

 

設定を見直そうとプラグイン一覧を見たら…

 

 

入ってないやん!!!(‘Д’;)

入れて終了。

 

その2 画像の削除

先ほどのPageSpeed Insightsでは、表示の遅さを解決するための方法も示してくれる。

画像を最適化うんぬん書いてあるので、クリック。

どうも、この画像を圧縮すれば、データサイズを61%も削減できるらしい。

 

 

この主犯みたいな画像、一体どれよ。

誰がアップしたんじゃ!←私

 

 

 

該当の画像を特定。

 

 

 

特定!

 

 

 

お前か!!!!←トップページのヘッダー

 

 

 

これ、トリミングして保存し直したのを使ってたはず。

つまり、この容量ばかりドでかい画像は、あるだけで使ってない。

 

 

削除。さよーならー

 

その3 プラグインJetpackのphoton

ワードプレスの高速化について語られる時に、割と耳にするphotonっていうのがある。

入れてない人を探すのが難しいプラグイン、Jetpackの機能の一つで、これも画像を圧縮することで、表示速度に貢献する機能だ。

 

 

ただ難点があって、当ブログでも使っている、OPENCAGEさんのテーマとの相性がイマイチと言われている。

 

 

 

 

ま、イマイチだったら外せばいいや。

 

 

とりあえず導入。

今まで「Photon」のオンオフで表示されていたため、見つけられずに右往左往する。

あちこち彷徨った結果、上記の画像の赤枠が従来の「Photon」だと判断。

スイッチをオンにする。

 

 

 

 

別に問題ないかも!とりあえず採用。

 

その4 プラグインLazy Load

これは、画像の読み込みを後回しにするプラグイン。

インストールして有効化。

 

 

 

表示速度、若干遅くなる。

遅くなってどうするんじゃ!!!!

 

ということでプラグイン削除。

 

その5 プラグインHead Clearner

小難しいんだけど、表示速度を最速にするために、コード(コンピュータとやり取りする言語)を調整するプラグイン。

インストール、有効化してブログを表示。

 

 

 

ドン!!!

 

 

 

ゴーーーーーン………

致命的なエラー。

 

 

 

 

プラグイン削除。

OpenCageさんのテーマと、プラグインHeadClearnerは相性に問題ありのようです。リサーチ不足。

 

その6 プラグインWP-optimize

余計なリビジョン(更新や編集履歴)なんかを消してくれるプラグイン。

特に早くなったわけでもないけど、悪さもせず。

 

 

 

うーーん。

 

ごめん削除。

今となってはあってもいい気もするな…考えよ。

 

その7 余計なプラグインの削除

テーマの機能と、プラグインの機能が重複していたり、もう使っていないプラグインがあったり。

それをコツコツと削除。

 

これもよく見ると、「人気記事を表示する」機能が2つある。

片方を削除。

 

ここまでやった結果

そこまでやって、再度表示速度のチェック。

 

今思えば、26が60になったのは大幅アップだったのだ。

そこで結果良しとすべきだった。

 

 

 

だが私は、いまだ赤い60点の表示に踊らされてしまったのである。

 

80点くらいいきたいなーと、突然妙な向上心を発揮したのである。

 

【The 3rd day】人生最悪の日

禁断の果実

ここまで試した方法は、比較的ローリスクなものに留めていた。

リスクを負わずに結果が出れば、それが最良だと思ったからである。

 

 

でもなー、60点だしなー…

 

 

スッキリしない私は、禁断の果実に手を出す。

 

禁断の果実1「キャッシュ系プラグイン」

ワードプレスのユーザーの間で、「キャッシュ系プラグイン」といえば、「割と悪さをしがちなもの」として共通認識されている。

 

「キャッシュ」というのは、1度見たサイトを再度訪れた時に、前よりぴゃぴゃっと見ることが出来る、あの仕組みを支える機能である。

ざっくり言うと、一度訪れたサイトの情報を記憶しておいて、再度訪れたい時にゼロから読み込まず、前回の記憶を使ってサクッと表示させる仕組みだ。

 

 

その仕組みを、プラグインを使って作ることで、サイトの表示速度を確実に早くすることができる。

 

 

 

ただ、何かと不具合を起こしやすい。

 

うーーーーーーん。

 

 

入れてみて、不具合起きたら外せばいいんじゃない!?←安易

 

ということで、プラグイン「W3 Total Cache」を導入&設定。

 

なかなかサクサクいい感じである。

 

禁断の果実2「クラウドフレア」

クラウドフレア。CloudFlareという、表示速度を速くする何かがあるらしい。

 

「キャッシュ系プラグインは勧めない」と書いているブログ記事内で、「表示速度を上げるならクラウドフレアの方がいい」って書いてあったりする。

なんだこりゃ?

 

 

調べてみたら、どうも表示スピードがサクサク快適になるらしい!

しかも無料。

 

いっちょ、試してみるか!!!←ますます安易

 

 

その後、DNSレコードを言われるがままに追加し、サーバーのネームサーバーを書き換えて終了。

 

 

 

この後、このDNSに泣かされることを本人はまだ知らない。

 

 

結果、ますますサクサクである。

 

なんと!!86点!!!モバイルは69点。

 

 

 

 

 

勝った。←何に

 

HAHAHA~!!!

 

 

高速化成功!!!とニヤニヤホクホクしながら、高速化とは関係ないCTA(コールトゥアクション)部分をいじる私。

 

 

 

 

…悲劇はここから起きる。

クラウドフレアは、サーバーの負荷を分散させて表示速度を上げる代わりに、アクセスが全てクラウドフレア経由になる仕組みのようです。うまくいくケースもあると同様に、トラブルも多々あるようなので、どうか冷静な判断を!というか勧めません。

 

高速化の代償

私はその後、記事の終わりに埋め込むLine@の設定をしていた。

だが、何度繰り返しても、気を付けて埋め込んでも、文字が勝手に変わってしまう。

なんじゃこりゃ。

試しにこの青文字のリンクをクリックしてみる。

 

 

???

 

 

クラウドフレアのせい…?

 

うわー、やってしまったかも。

 

クラウドフレアから、撤退しよ!!!

 

 

焦りのもたらした物

 

この表示のおかしさの原因は、クラウドフレアで間違いなかった。

 

 

 

あー、多分やってしまった。

 

 

 

 

クラウドフレアから、いつもの設定に戻さなくちゃ。

 

 

 

いそいそと設定を戻す私の頭の中は、「あと数十分でバスが来る=子ども達が帰ってくる!!ということでいっぱいで、ネームサーバーを変更する時の前提が頭からすっぽりと抜けていたのである。

 

 

惨事

気がつくと、ブログにアクセス出来ない事態が起きていた。

 

 

 

 

 

あれ…?なんで…?

 

まさか消えてないよね…?

 

 

冷静に考えて、ネームサーバーの書き換えには最大24時間かかることに気が付く。←落ち着けよ

 

 

 

 

ネームサーバーの書き換えが終わる前に、クラウドフレアのDNSを削除(?)したのが原因かも。

 

「あ、やっちゃったけど、明日の今頃には、ブログも表示されるはずから、とりあえず待とう…」

寝よ。( ˘ω˘)スヤァ

 

【The 4th day】悲劇は続く

翌日。

起きて真っ先に試すも、依然表示が変わらない。

おかしいかもと思い始めたのがこの辺りである。

 

 

やらかした。かもしれない。

 

というより、クラウドフレアに足を踏み入れなければきっとこんなことには…

 

 

 

わからーーーーーん。

 

 

ネームサーバーの切り替えに必要な、最大の24時間を過ぎても表示されず、完全に何かがおかしいことが確定。

 

はい、やってしまいました。

 

 

思い当たる原因 W3 Total Cache

 

入れたばかりのこのプラグインが、悪さをしている可能性を考える。

 

削除である。

 

 

ブログは表示されないので、サーバーにログインして直接ファイルを削除。

表示されず。

 

???

 

Twitterであれこれ相談に乗って頂いていた、がみたかさんこと、石上さんがこんな記事を見つけてくれた…!

 

なんじゃこりゃ!!

プラグインの削除がめんどくさすぎる!

 

「何でこんなところにまで勝手に書き込みしてるんじゃ!!」と全力でひっぱたきたくなりながら(プラグインを)、どうにかこうにかきれいに削除。

表示されず。

 

 

石上さん「あれ。ブログ読めましたよ?」

 

 

 

?????

 

原因を探せ

整理して試してみる。

 

石上さんのパソコン→見られる

昼休憩中の夫のスマホ→見られる

出先で試した私のスマホ→見られる

で試した私のスマホ→見られない

のパソコン→見られない

のパソコンでブラウザを変える→見られない

のパソコンでキャッシュを削除する→見られない

 

 

 

??

 

家でスマホのWiFiを切って、4Gで試す→見られた!

 

Wi-Fiか!!!

 

復旧せよ

もう一度確認する。

アクセスできない原因は、「DNSアドレスが見つからない」ことである。

 

 

乏しい知識で考えてみる。

 

DNS(ドメインネームシステム)は、ちゃんと設定できている。見れるんだから

家のWi-Fiでアクセスしようとした時だけ、クラウドフレアの時のDNSアドレスを読みにいってしまっている気がする。

 

対応その1 ルーターの電源を抜く

ルーターのコンセントを抜いて15分ほど放置し、電源を入れ直す。

 

対応その2 DNSキャッシュの削除

どうやら、ブラウザのキャッシュとは別に、パソコンにDNSキャッシュというのがあるらしい。

これを削除すればいけるかも。

この記事を参考にさせて頂き、コマンドプロンプトで削除。再起動。

 

対応その3 ふて寝

もう疲れた。

寝る!!!

 

【The last day】

幼稚園の給食参観だ、PTA総会だ、役員だ、係決めだ…とてんやわんやして帰宅。

 

 

!!!

 

表示された。

 

表示された…よかった……疲れた………

 

【エピローグ】

結論として言えるのは、今回の原因は、本人にも結局よく分からないということだ。←オイ

見当をつけた辺りで合ってると思うんだけど…

 

 

ちなみに、悪者扱いしたW3 Total Cacheは全く悪さをしていなかった。

 

 

 

というわけで、ワードプレスの高速化は慎重にやった方がいいよ!!!!

そんなこのブログの今のスコアは…

61点!!

上出来上出来。

 

 

でももうちょっと速くしたいなぁ…

懲りない私の戦いは続く。

シェアして頂けると嬉しすぎて子どもと踊ります!

LINE@始めました!

ブログの更新情報、ブログに書けないあれこれ…?、LINE@お友達限定の先行情報などなど配信します。

お気軽にお友達登録して下さいね!

友だち追加

【ID:@igy7763r からでもお友達登録できます】

1 個のコメント