インターネットに関して時代はモバイルファースト。スマホでのウェブページを見る人がPCに比べて圧倒的に多い時代です。なので、ブログもスマホでのユーザビリティを一番に考えなければいけません。
ぱるログのWordpressテーマは「Simplicity」を使わせて頂いています。SEOの対策が良い感じにされているらしいので僕の様なSEO弱者には大変ありがたいテーマです。
最近はカスタマイズに挑戦していて、デザインを変えたり、ページ表示速度を気にしてみたりと色々とやってました。
そしてある日、久々にスマホでページ表示の確認をしたらモバイルメニューが表示されなくなっていました。
原因はまたあのプラグインでした。
症状
ぱるログのモバイルメニューは「アコーディオンツリー」を使っています。タップすると下にメニューが伸びていくやつです。
これが表示されなくなりました。正確には、表示が不安定になりました。記事のページにいくとあったり、トップページに戻ると無かったり・・・。消えているときは、スペースが空いているとかでは無く跡形も無く消えている状態です。
この画像が不具合真っ最中の画像です。
Simplicityにはいくつかメニュータイプが用意されているのですが、どれを試しても正常な動作になってくれませんでした。ボタンは常に表示されるがタップしてもメニューが出てこないなど・・・。
Simplicityの不具合じゃない事は寝ログを確認して一発で分かったので、どうやら自分の環境の問題です。
解決方法
こういった不具合でまず怪しいのはプラグインですよね。一つ一つプラグインを無効にしていったら簡単に犯人が見つかりました。
またしてもAutoptimizeさんがやらかしてました。
JAVAscriptやCSSファイルを圧縮してくれる王道プラグインです。このプラグイン、前回はCSSの圧縮時にTable of Contents Plusの目次表示をぶっ壊すと言う事をやってくれました。
今回も１つずつ圧縮を無効にしていったところ、JAVAscriptファイルの圧縮が原因と言う事が分かりました。なので、JAVAscriptファイルの圧縮は無効にしてしまいます。下画像の矢印部分のチェックを外します。これで完了。
ちなみに、特定のファイルの圧縮を除外する事も出来るのですが、どのファイルを除外したら良いのか僕にはわかりませんでした。jquery.slicknav.min.js、animatedModal.jsのファイルを除外すると動作は安定する気がしたのですが、はっきりしたことは分かりません。
PageSpeed Insightsのスコア変化
Autoptimizeのプラグインをインストールしている理由は「ページ表示速度の向上」が目的のはずです。JAVAscriptファイルの圧縮を無効化した時にPageSpeed Insightsのスコアにどの程度の影響があるのか見てみたいと思います。
JAVAscript圧縮時のスコア
モバイル：66 パソコン：77
JAVAscript非圧縮時のスコア
モバイル：69 パソコン：78
って、上がるんかいっ！
前回も一部のCSSファイルを圧縮対象から外したらスコア上がったんですよ。
(つーか、前回測定した時よりもスコアが下がっている・・・。)
一体圧縮って何なんでしょうか？ファイルの容量が大きいからって、単純に圧縮すればページ表示スピードが上がると言う訳でも無いのですね。読み込むファイルの順番とか色々と関係してくるんでしょうね。深いです。理解不能です。
まとめ
Autoptimizeにおいては2例目の不具合修正でした。
このプラグインを導入したのは2～3ヶ月前だったと思うので、その間ずーっとモバイルメニューが変な表示になっていたのかと思うと悔しいです。
プラグインを新規で導入した際にはPC表示だけでは無く、モバイル表示の確認も必須ですね！以後気を付けます！
コメント