上に戻るボタンを作るはずが、スピード向上に入れあげた件

Last Updated on 2019年6月28日 by ぞん

「上に戻る」ボタンが欲しかっただけなんです

こんなやつ

「自分と友人と米領サモアからしかアクセスがないのに、そんなボタンいるのか？」

という問いが頭の中を駆け巡りましたが、 ボタンが欲しくなったのだから仕方ありません。

というわけで、下記のサイトを頼りにさせていただきました。
（プラス wordpressで動かない場合は、$をjQueryに置き換える by 他のサイト）

参考：スクロールでページトップへ戻るボタンを表示させる方法まとめ！

プラグイン「Simple Custom CSS ans JS」で、HTMLとCSSとJSの記述をしました。
「なぜここにコードを記述したら反映されるんだろう～」とか思いながら。
“素人はワードプレスにしとけ“と言われる理由がよくわかりますね（笑）

途中で方向が変わり、しかも失敗に終わる

ところで、ボタンを作りながら検索をかけていると、”レンダリングブロック“という言葉がひっかかりました。おそらく、ボタンの動きにJSが使われているので、その絡みで検索にひっかかってくるのかなと。

「すぐに気が散ってしまうタイプ」である私は、そっちに心を奪われ、それらの記事を読んだところ…

全然わかりませんでした（きっぱり）

が、どうやら、サイトの表示スピードに関係あるのだということだけわかりました。もはや、ボタンのことなどすっかり忘れ、「PageSpeed Insights」とやらで、チェックをしたところ…

「モバイル43、パソコン68」でした。

パソコン68はなんとか平均的ですが、モバイル43は余裕で不合格です。
体感的には、スマホで見ても「そんなに表示遅いか？」って感じだったのですが、

ちょうど読んでいた記事にコードがあったので、functions.phpに貼ってみました。

「モバイル79、パソコン91」に上がりました。

「すっげ～」と喜んだものの…

トップページのスライダーが動かなくなっていました。
一部のページで写真が見えなくなっていました。
グローバルメニューのドロップダウンができなくなっていました。

とりあえず、編集画面で見てみようか～と思ったら、

固定ページも投稿ページも、真っ白になって開かなくなっていました（げっ！）

すぐに元に戻しました。

怖い思いをしましたが、「戻せた」ことに気を良くした私は、違うサイトにあったコードを、懲りずにfunctions.phpに貼りつけてみました。

先のコードは、JSの読み込みを遅らせるもので、次のはJSの読み込み位置を移動するもののようです。方法が違うのなら、うまくいくのかもしれないと思い、試してみました。

「モバイル62、パソコン70」になりました。

特に不具合も起きませんでした。「スマホの点数が改善されたので、これでいいのでは？」という気分に。

プラグインを入れる

もうすっかり、検索キーワードが、「上に戻るボタン」ではなく「サイト読み込み速度」になっていました。
そのため、検索結果が「サイトの表示を速くするプラグイン」になりました。

4つ入れてみました。

結果、「モバイル84、パソコン98」となりました。

何回か測定してみたのですが、10～20ぐらいは点数が前後しました。
特にモバイルは変動が大きかったです。とはいえ、50を切るようなことはなさそうです。プラグインって素敵。

以下、私個人の感想となりますが、

プラグイン③④は、即効性がすごいです。
プラグイン①②は、塵も積もればで威力を発揮しそうです。

もしや、合格点（80点らしい）を出すだけなら、これらのプラグインだけでよかったのでは？
編集画面が真っ白になる恐怖を味わう必要はなかったのでは…という気がしています。

ようやく元の目的を思い出す

私がやりたかったのは、「上に戻るボタン」を表示することだったのです。。。

ボタンもできました。