-お勉強本と雑記と備忘録のブログ-

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

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

  • バージョン情報(公開時)
    • WordPress 5.1.1-ja
    • LIQUID PRESS LIGHT 1.1.4
    • Simple Custom CSS and JS 3.25

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

こんなやつ

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

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

というわけで、下記のサイトを頼りにさせていただきました。
(プラス 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つ入れてみました。

  1. EWWW Image Optimizer(画像を圧縮してくれる)
  2. Lazy Load Optimizer(画像の読み込みを遅らせる)
  3. Autoptimize(HTML・CSS・JSを圧縮する)
  4. WP Fastest Cache(キャッシュを削除する)

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

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

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

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

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

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

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

ボタンもできました。

0
コメント (2)
  1. KYO より:

    タイトルも変えるべきではwww

    1. ぞん より:

      タイトル変えましたw