【孤軍奮闘血尿噴出精神崩壊奮闘記】初心者のワイがWordPressサイトの表示速度アップ(モバイル)にチャレンジしてみた!2019 [ノーカット版] 【第一話】

【孤軍奮闘血尿噴出精神崩壊奮闘記】初心者のワイがWordPressサイトの表示速度アップ(モバイル)にチャレンジしてみた!2019 [ノーカット版] 【第一話】

 

記事も増えてきたので、「いっちょ広告でも貼ってみるか!」ということで、いろいろ調べて、「グーグルアドセンス」を申請しました。

アドセンスは審査が厳しいらしいので、サイトの内容的に「たぶんダメだろうな~」と思いながら申請しました。もう申請する前から他の広告メニューを調べていたくらいです。

 

ところが、2019年3月18日、

見事一発ツモで合格!

マジかっ!

・記事数は投稿29記事、固定ページ5ページ

・日曜の夜に申請して、翌日月曜の夜、つまり1日で合格通知が来た 思ってた以上に早い!

 

で、広告も出せるようになったので、いろいろサイトを見直したいと思いました。

まずは表示速度ですね。スマホの時だいぶ遅いので、噂の「表示高速化」に着手してみようと思います!ここからは、記録もかねて、作業したことをノーカットで書いていきます。

 

事前にやっていたこと(3/9ごろ)

 

ちょっと前にいろいろ調べていて、「記事の画像を最適にした方がイイよ」「文字を先に表示させて画像は後から出る感じがイイよ」という対策方法があり、2つのプラグインを入れました。

 

EWWW Image Optimizer

画像の大きさを最適化してページ表示を早くする。一括で最適化できる。一括最適化済み。

Unveil Lazy Load

テキストを先に表示させ、画像は、ページをスクロールしたときに表示させる。

 

ただ、入れてはみたけど、そんなに早くなった感じはなかったんですよね。

 

蒙昧の1日目

 

表示速度を調べてみる

「ワードプレス 高速化」で検索すると、いろんな情報がたくさん出てきます。皆様ありがとうございマッスル。で、何かページの表示速度を採点?してくれるサービスがあるらしいので、やってみたいと思います。

 

PageSpeed Insights

グーグルさんが提供しているサービスらしく、ここにアクセスしてURLを入力するだけとのこと。

 

好きすぎて1万字オーバーした、この記事(「鉄男」をちゃんと見よう/トラウマ映画)でやってみますよ。

10数秒くらいで分析中………出た!!

20点!
速度テスト結果01

これは…100点中20点なので、(遅い)という評価ですね。

これはよろしくないですね、見直して行きましょう!

採点の下にいろいろアドバイスが書かれていますが、なんだかよく分かりません。

いったん忘れることにする。

人間は忘れる生き物!!

 

ちなみに、情報量の少ないページはどうなんでしょうかね?

そういうページで診断してみようと、このサイトの情報量少ないページにアクセスすると……

(゚ロ゚;)エッ!?

あれっ!?

広告が出てない!?(汗)

 

グーグルの人が

「一回許可したけどぉ~よく見たら内容ヒドイからBANするわ~」

ってこと?

((((;゚Д゚))))ガクガクブルブル

 

…でも他のページ見たら……

広告出てる!

?謎?

「記事として情報量少ないと出さない」とかってルールありましたっけ? ちなみに広告は自動と手動の組み合わせですが、出てないページは、ヘッダも記事上もサイドメニューも一切出ていません。(何か広告が出るであろうスペースは表示されている)

 

「アドセンス 自動広告 表示されないページ」とかで検索検索…

こんな記事見つけました。

フムフム……アクセスが少ないと出ないことがある?

いや、そんなこと言ったらこのサイトなんて……

 

もやもやしながらもう1回ページ見たら、

広告出てる!

何だよおおおお!焦ったよう!

 

え~と何してたんだっけ。

そうだ、採点採点。

情報量少なそうなこの記事(Wide Open ft. Bec/きまぐれ動画)でやってみる。

おっふ!

19点!!

速度テスト結果02

…まあ、これでページの情報量の問題じゃないことがわかりましたよ。

文章を簡潔にするって、けっこうムズイですからね。

ε-(´∀`*)ホッ

ちなみに「パソコン」で分析すると57点(平均)という評価ですが、

モバイルの(遅い)をなんとか

(平均)にもって行きたい!

という目標にします。

で、基準ページは最初の「鉄男」で行きます。

 

ありすぎて何がいいかわからない!

 

というわけで、

ワードプレス 表示早く

ワードプレス 高速化

とかで検索。すっごい情報出てくる! 検索キーワードを「ワードプレス 高速化 初心者」に変えましたが、なお大量に情報が出てきます。むううぅ……よし、簡単にできそうなやつを、はじからやってみるかっ!

だが今日はここまで!寝る!

(_ *˘ω˘)_スヤァ…

 

煉獄の2日目(休日)

 

おっしゃ!やったらあああああ!(謎の気合)

なんかいろいろあるけど、簡単そうなやつからやってみよう。

 

高速化手段①:リビジョンを削除する

フッ、知ってますよ「リビジョン」

記事書きながら「下書き保存」押すとバシバシ増えてくあいつだな!

確かに、記事書いている途中で変な風になった時少し前に戻してくれる便利な機能ですが、記事を公開してしまえば不要ですよね。よし消そう!

捨てる勇気!

 

検索検索……ま、いろいろやりかたがあるそうですが、「プラグインで消せる」とのこと。プラグインって何でもできるんですね。何か、全力で探したら「人見知りを治すプラグイン」とか「時給がアップするプラグイン」とかもありそうで怖い。

で、いろいろ読んでみて、

キミに決めた!

 

プラグイン「WP-Optimize」

こちらの記事(【wordpress】リビジョンを1クリックで削除する方法【30秒で解決】)

を参考にしてみようと思います。

 

記事を読み進めると…

!!

>【wordpress】記事を書く時に自動保存が有効だとヤバイ【無効にする】

というリンクが!

ヤバイと言われればチェックせねばっ!

リンク先の記事読みました。

ほう、自動保存を無効にすると…

何かいいらしいのう!

やってみますかっ!

 

フムフム……

プラグインでもできるけど、そうじゃない方がいいらしい…アッ!

「子テーマを編集」

 

ついに来たか…!

いや、子テーマ……(汗)…噂だけは聞いている。

なにやら「テーマのデザインをカスタマイズできる」だとか、「親テーマをカスタマイズするとバージョンが変わった時にそのカスタマイズが消える」だとか、「7つ集めると何でも願いがかなう」だとか…。しかし、初期の頃いろいろ読んでみてもよくわからなかったので、避けてきました。

そのツケがついに回ってきたのだ!!

いつかは必ず通る道。

よし、今やろう!すぐやろう!

子テーマ構築プロジェクトの立ち上げじゃあああああああ!!

(目的を大きく見失う)

 

フムフム、「子テーマ」で検索すると出るわ出るわ、親切野郎どもめっ!!礼を言おう!

だがしかし!

「初心者でも簡単!子テーマの作り方~」的な記事で一番初めの「フォルダを作ります」がまずわかりません! どこにどうやって作るの?ワードプレス使っててフォルダとか見たことないんですけどーー!

 

絶望した!「初心者でもよく分かる」の1ステップ目で盛大につまづいた自分に絶望した!

オリャ(ノ-o-)ノ ┫;:・

 

れ…冷静になって検索検索……あった!

この記事(ワードプレスの「子テーマ」とは?【誰でもできる作り方まとめたよ!!!】)

で判明!

Xサーバ側の操作で、ごにょごにょするっぽい!

 

手がかりを一つゲットしたところで、おなかすいてきたのでご飯食べます。

 

Advertisement

 

事件は食後に

 

ごはん食べながらYouTubeでシソンヌさんのコント見た。

何回見ても面白い!

(;゜0゜)ハッ!

うわああああああ1時間以上経ってるうううう!

(集中力なし)

 

って書き書きしながら、「下書きとして保存」押すつもりが、「公開」を押してまった! わああああああ、まだ完成してないのにいいいいっ!!

(もうバカ)

飲食店で食べ終わって帰ろうとしたら「さ…財布がない!」みたいな感じ。し…心拍数が上がる!

もちつけ…もちつけ…焦…焦…検索検索…天下のワードプレスさんなら公開した記事を戻すくらいできるでしょう!たぶん!

あった!これか!

 

こちらの記事(記事を非公開に設定する)を参考にさせていただきました。

「公開」のブロックの中の目のマークのところ、「公開状態」の「編集」で「非公開」を選択!ほんで「更新」を押して完了! ログイン状態だと、記事見れますが、タイトルの頭に「非公開」とついています。

焦ったーーーーーーー!!

いやあ~、一事はどうなることかと思いましたが、ミシリー岡田二等兵! このトラブルをバネに一回り大きくなって帰ってまいりました!!

(≧д≦)ゝビシッ

 

『ミシリーおかだは ひこうかいのじゅつ をおぼえた』

(いっこうに本題が進まない)

 

何だっけ、子テーマだよ!子テーマ!

Xサーバで何かやるんでしょ?

もう一回この記事を読む……フムフム…「サーバのバックアップを取れ!」となっ!?

新たなミッション発生!

もうここまで来たらとことん付き合いまつよっ!!(キレ気味)

 

…検索検索……今日ほど検索した日はねぇなぁ…

これかっ?これやがっ!?

はい、こちらの記事(WordPressのバックアップをエックスサーバーで簡単に取る方法)を参考にバックアップるぜ!!

Xサーバのサーバパネルにログインして、「アカウント」→「バックアップ」→「手動バックアップ」の中の「ホームディレクトリ」をダウンロード。あともう一つは「データベース」→「MySQLバックアップ」→「手動バックアップ」の全てを「gz形式」にして「エクスポート実行」!!

できた!!

ダウンロードしたデータを、好きな場所に保管……んん~ミッションコンプリート!!

 

ではあらためてこの記事に戻って、子テーマ作るぜ!!

!!

な…なんか一瞬気になるワードが見えた…

 

~子テーマがあるなら最初からそちらを使うべし。~

(-_-;)

……け…検索……

ああああああああああ!

あるう!ライオンブログ(このサイトのベースになっている無料テーマ)の子テーマあるって! なんか無料でダウンロードできるんだって!

マジかああああ!

(ノД`)・゜・。

 

いや泣いている場合ではない、プロジェクトには逆境がつきものである! むしろ変なもの作って組み込んで大失敗するより、この事実に気づけたことはラッキーじゃね?

そう、ラッキー!ラッキー!

(心折れないための強制言い聞かせ)

 

こちらの記事(LION BLOG・LION MEDIAで子テーマをインストールする方法)を参考にさせていただきました。

ライオンブログの公式サイトに行ってログイン、子テーマDLして、インストールして、有効化する。

できた!簡単!

 

サイト見てみる。

!!

何かデザインが変わっとる!

子テーマでデザイン変わった

はっ!そういうことか!

今まで親テーマの方のカスタマイズ機能で色とか触ってきたから、子テーマにするとまっさらな状態に戻っちゃうんだ!

うむむむむむむむ……受け入れよう!

(一応記事は読めるしね)

これは仕方がない、これは罰だ!

困難なものから逃げてきた罰なのだっ!

これからだ!これからだ!

汚れてからが始まりだ!(by眩暈SIREN

 

ちなみに親テーマを再度「有効化」するとデザインは戻りました。しかし、もう親離れをして子テーマで生きる!って決めたので、子テーマ有効で行きます。

 

 

ちなみにこの状態で表示速度どうなんでしょう?

デザインがさっぱりしてるから早くなってるかも。

速度テスト結果04

18点!!

親より子の方が悪なっとる……

いいよ、何でも受け入れたるよ!なるたるよ!

汚れてからが始まりなんだよ!(by眩暈SIREN)(しつこい)

 

で、子テーマの設定は完了して、何だっけ?何しようとしてたんだっけ?

……記事読み込み中……

そうだ、「子テーマを編集して自動保存を無効」にしようとしてたんだ!

この記事書きながら作業進めてて良かった!

これ書いてなかったら絶対やりたいこと忘れてるわ!

 

あらためてこの記事で、フムフム、「子テーマのfunctions.phpに指定のコードをコピペ」する?

こ…これ難易度高くね? 子テーマの「functions.php」様がどこの誰かもわかんないんですもん。ワタシ極度の人見知りなんで、いきなり知らない人に「す…すいません、突然申し訳ありませんが、このコードをあなたへペーストさせてもらってもいいですか?」なんて言えません。

 

……困ったら検索だ!

この記事(WordPressでfunctions.phpファイルを編集する方法)で解決しました!あざーーーす!

ワードプレスの管理画面で、「外観」→「テーマエディター」→右側に「テーマファイル」というのがあり、そこで「テーマのための関数(functions.php)」を選択。それで、下の方に指定のコードをペースト。

できた!

確認したら自動保存されなくなりました。スゲェ!

 

よしよし、ようやく本題に戻って(マジ長かった…)「リビジョンを消すためにプラグインを入れる」だっ!「WP-Optimize」というプラグインです。

これはインストールも簡単、1クリックでリビジョン野郎を駆逐してやったぜ! 勢い余って「データベーステーブルの最適化」もやっちゃったよ!

くわしくはこちらの記事(【wordpress】リビジョンを1クリックで削除する方法【30秒で解決】)を参考に。

 

よっしゃ!

<高速化手段①:リビジョンを削除する>ミッションコンプリートゥ!!

 

どれどれ、どのくらい改善したかな?

分析、分析…ワクワク

ファッ!?……2度見……

(つд⊂)ゴシゴシ

(;゚д゚) ・・・

変わってねええええ!!

速度テスト結果05

 

……疲れた…

パトラッシュ、僕はもう疲れたよ……(死)

 

かわいい猫の画像でも見ながら眠るとするよ…

おやすみ ZZZ…

(_ *˘ω˘)_スヤァ…

かわいい猫
かわいい猫

 

 

幽遠の3日目

 

子テーマでの見た目をいろいろ修復する。

これを機に見出しデザインを変えて、全記事設定しなおす!

疲れたーっ!

 

で、何かタグを追加したりしていたら、途中またサイトが真っ白になる事件発生!(生涯2回目) 1回目は成功したXサーバの「復元」では治らず、ヤバイ!となる。

ところが奇跡的に修復できた!

Xサーバのインフォパネルにログインして、直接ソースを修正できることが判明!エラーになる直前に足した記述を削除することで復帰した!スゴイ!奇跡!

 

これってFFFTPみたいなソフトいらないってこと?

過去にFFFTPソフトをインストールしてみたけどうまくつながらなくて放置中でしたが…一つ賢くなったぜ!(やり方として間違っているかもしれませんが…)

 

 

鷹揚の4日目

 

はっ!

そう言えば、表示の高速化をしていたんだった……

 

「リビジョンを消す」しかまだできてない…。で、その後いろいろ見出しデザインとか触ったから、もう一回速度計ってみよう。

速度テスト結果06

22点!

ちょっと良くなった! 何の影響かよくわかりませんが。

(*´▽`*)

 

 

まとめ

 

内容長くなったので、いったんここで記事を【第一話】として公開します。

「リビジョンを消す」という一つの対策で、これだけのドラマが生まれようとは……いやあ、WEBの世界は恐ろしス……

 

ここ4日間の流れ…

 

①アドセンスの審査が通る

②表示速度を調べてみる

③広告が消えたと思ったら出た

④リビジョンを削除しようとする

⑤自動保存を無効にしようとする

⑥子テーマを構築しようとする

⑦この記事を途中で公開してしまう

⑧非公開の方法を調べて非公開完了

⑨サーバのバックアップをとる

⑩ライオンブログに子テーマがあることに気づく

⑪子テーマに切り替えたらデザイン変わった

⑫子テーマのfunctions.phpを触って自動保存無効化に成功

⑬プラグイン入れてリビジョン削除に成功

⑭表示速度ほぼ変わらず!

⑮子テーマでデザインと見出しを修正

⑯サイトがぶっ飛ぶ

⑰奇跡的に復帰

 

まだ一つしか対策やってないので、引き続き高速化をチャレンジしていきたいと思います。

次の記事できたらリンク貼ります。