あるショップ(タイで広く健康、寝具の販売をしている会社)の依頼で、カスタマイズすることになりました。その際の経緯、手順をメモします。
経緯
ショップの表示が非常に遅く、GoogleのSEO効果が下がってしまった。あまりの表示の遅さに、直帰率も増えてしまった。レンタルサーバーを変更するなどの前に、可能な限りのことを行うこととなった。
速度を改善するために、
- JetPackのインストール : JetPackのパフォーマンス向上で画像をWordPress.org の CDNを使うように修正(これで5秒ぐらい速度アップ)
- Loading Animationのオフ : ページが完全に読み込まれるまで、ローディングイメージが現れるので、それを止める
この2つに取り組みました。JetPackは、すんなり行ったのですが、Loading Animationをとめるオプションがテーマの設定にありませんでした。
そこで、ソースコードをチェックして、修正をすることにしました。
調査の方法メモ
使っていたテーマは、Opstore というものです。

ローディングアニメーションを要素の検証
ローディングアニメーションが行われている間に、要素の検証を実行します。すると、以下のようになりました。

これは、ブラウザが解析した結果なので、実際のHTMLソースで箇所を確認します。リソースタブを表示して、チェックします。気持ち悪いことに、head と body の間に無理やり、挿入されています。

テーマファイルのチェック
上記のを行なっているソースコードをテーマファイルでチェックします。扱いやすいようにテーマファイルを丸ごと、ローカルPCにダウンロードします。body タグの前ということで、header.php あたりが怪しいと思ってチェックします。

opstore_before_body_output
フィルター(テーマ開発者が用意したもの)を実行するようになっています。このキーワードでソースコードを検索すれば、止める方法などを見つけられそうです。
Codaなどのエディターで全文検索をします。そうしたら、opstore-hooks.php と、なんとも怪しい(怪しくはない)ファイルを見つけました。ソースコードを開いてチェックしてみます。

なんと、get_theme_mod メソッドを使っています。つまり、カスタマイザーで設定した値を取り出していることになっています。ということは、カスタマイザーで設定できる!ということです。
名前が、opstore_preloader_option
となっているので、Preloader という感じの設定項目っぽいです。
解決
外観 > カスタマイズ > General Settings > Additional Settings > PRELOAD SETTING を開いて、DISABLE にします。

学んだこと
- Loading Animation は、PRELOADER と呼ぶこともある
- その線で、探せば見つかったかもしれない
- ソースコードを解析することで、body と head の間に無理やり入れるというハックを知った
🚩お知らせ

toieeLabでは、知識・経験ゼロから、「単なる製作代行ではなく」、WordPressの仕組み、デザイン、コピー、SEO対策、ビジネスモデル、ビジネスシステム構築技術を身につけ、仕事を受注できるようになるためのオンラインコースを準備しています。
ただのオンラインコースではなく、オンラインコース、サポートサイト、学習コミュニティ(非公開)、個別サポート、オンラインワークショップを通して、一人ひとりの学習をサポートするサポート型のオンラインコースです。
現在、オンラインコースの一部を無料公開しています。ご興味のある方は、ぜひ、ご覧ください。