WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【Autoptimize】プラグインとスライダー系プラグインを併用すると表示に不具合が出る時の対処いろいろ(検証)

公開日:2018(平成30)年10月3日/最終更新日:

WordPressのトラブルシューティング



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

スペースがあるようでないようなサイトのサイドバー。特に広告などはべたべた貼っていくと本文よりも長くなってしまって残念な感じになってしまうこともあります。複数の広告をスライド表示にして一定間隔で切り替わるようにすれば少ないスペースを有効活用できると思います。

そこで広告のスライド表示をさせるのに便利なのが

というプラグイン。詳しくはリンク先の紹介ページをご覧いただくとして、このプラグインはHTMLでも画像でも文字列でも・・・なんでもスライド表示できてしまうので本当に便利なんです。

画像をスライド表示させる機能を持つプラグインや広告表示を管理するプラグインの多くは

  1. サイト内に保存している画像はスライド表示できるものの外部の画像はダメ
  2. 広告をローテーション表示するプラグインはページ表示の度に切り替えるものがほとんど
  3. 広告の表示数やクリック数などあまり必要のない機能があることで動作が重いものが多い

など表示中に広告をくるくる切り替えて表示できるようなものを結構探すのは結構大変なんです。

そんなときこのプラグインは本当に重宝します。

スライダーなどコンテンツを追加するとどうしても避けられないのが表示速度の低下。外部の情報を収集して表示する広告となると猶更です。とはいえサイトの表示速度は速く保っておきたい、そんなときによく使われるのが【Autoptimize】プラグインですね。

でもこの【Autoptimize】、ちょっと癖があって、動きのあるコンテンツとの相性が抜群に悪いんです(笑)。上で紹介しているスライダープラグインともやはり相性が悪く、スライドが動かない、途中で止まってしまうといった現象が出てしまいました。

だったら単純にどちらかを止めれば??と言いたいところですが、できればどちらも有効に使いたい!!ということで、スライダーとサイトの高速化、相性の悪いこの2つの機能を併用する方法(厳密には妥協して使用する方法)をこのサイトで実装した際の検証なども含めて紹介したいと思います。

「Autoptimize からスクリプトを除外」はあまり効果がない

この設定に対する記事が全然ないのは何で??と思われる方も多いと思います。書いてあってもさらっと・・・で「あんたほんとに設定してみたことあるの?」と思える程度のものばかり。

で、今回スライダーが機能しないということで、プラグイン内のjsファイルをどんどん追加して様子を見るも何も変化なし。そしてフルパスで書いたらいいなんて記事があったのでそれも試したけどやっぱりだめ。

結論としてはテーマやWordPress本体のスクリプトで問題があった場合にはこの設定が機能するらしいです。

※さんざん悪口書いといてこの程度ですみません。ただ、【Autoptimize】の公式フォーラムや説明でもこの設定に対して細かく書かれているものはなかったので、ひょっとしたらあまり重視していない、されていない設定なのかもしれません。

スライダー系のプラグインとの干渉はこれで解決できた

やっぱり巷の話通りこのプラグインを停止するか、スクリプトの最適化をオフにするかしかないんですかねぇ・・・、とあきらめかけたその時、公式フォーラムに注目すべきやり取りが!!

Optimising JS breaks a slider

この方は今回使ったプラグインとは違うものを使用していて同様の不具合が発生したようですが、設定を見直したら解消できたようです。きちんとプラグイン作者の方が回答されているのがよかったですね。

これで万全!!と思った矢先に新たな問題が発生。それは次の項で。

Amazonアソシエイトや楽天アフィリエイトなどのウィジェットがおかしい

前項でスライダー表示がうまくいった!!と思ったら今度はこちらが表示されない、または表示がおかしくなりました。デベロッパーツールで見てもAmazonのウィジェットはエラーが出ているので表示されるはずがない。

やっぱりだめか・・・とあきらめかけましたが、そういえば最近プラグイン更新したなぁ・・・と思いだしました。

現在の最新バージョンは2.4.0。ここには以前なかった機能が追加されています。

それは設定項目の「Aggregate JS-files?」という項目。

説明(英語)は

「Aggregate all linked JS-files to have them loaded non-render blocking? If this option is off, the individual JS-files will remain in place but will be minified.」

・・・なんのこっちゃ?ということでGoogle様の力をお借りして翻訳すると

「リンクされたすべてのJSファイルを非レンダリングのブロックをロードするように集約しますか? このオプションがオフの場合、個々のJSファイルはそのまま残りますが、ファイルは縮小されます。」

・・・うーーーん翻訳しても何とも・・・って感じですね。最後の「ファイルは縮小されます」つまり最適化という機能は残るってこと?

えーーーいこうなったらやってみるしかない!!ということでチェックを外すとその下の項目はすべて選択不可になりました。

恐る恐る更新して見ると・・・やったーーーー!!問題解決です!!

ローテーションバナー(スライダー)もAmazonや楽天のウィジェットもすべて完動しました!!

めでたしめでたしと言いたいところですが、気になるのが表示速度とスピードテスト。表示速度に関してはスライダーを追加しているのでちょっとは影響がありますが問題ないレベル。そしてGoogle PageSpeed Insightsの結果は多少影響はありますが問題なさそうです。確かにjsファイルの圧縮は解除されているので改善提案には表示されるようになりますね。

今までパソコン表示で82点だったのが77点ですから及第点だと思います。

まあ何かを追加するわけですし、今回のように外部の広告を表示するわけですから影響がないわけがないわけで(わけわからん)、これは仕方ないですね。スピード重視なら広告なんか貼らなきゃいいわけですから(本当に爆速になります)。

【Autoptimize】プラグインとスライダーや外部の広告ウィジェットなどで表示されない、表示がおかしいなどの不具合が出た方は試してみてください。解決したら幸いです。

おまけ スライダーが途中で空白になるときは

またまた問題発生!!よーく確認しないと分からないと思いますけど、ゆっくりスクロールして普通の閲覧者のように読んでいくと、スライダー表示された場所でたまたま?画面を止めたときにスライダーが3つ位で空白になってしまう現象が発生しました。

あくまでも私の環境の場合ですが、この不具合はAutoptimizeの問題ではなく画像を遅延読み込みさせるLazy Load機能の仕業です。

つまり、画像が読み込まれたときにLazy Loadでどこまでの画像を読み込んだかによって何枚のスライドが表示されるかが決まり、それ以降は表示されなくなる(つまり空白になる)ということです。

単純に上下に少しスクロールすればすべての画像が読み込まれる可能性が高いためスライド表示されるようになるので気になる方はLazy Load機能を停止(テーマで実装されている場合とプラグインで追加されている場合があるので要チェック)すれば改善されます。

ただし、Lazy Loadを停止することでページ表示時に読み込むファイルの数と大きさが各段に大きくなるため表示速度への影響は否めないですから、あとはサイトの特徴によって使い分けるといいでしょう。

また、Lazy Loadの設定に遅延読み込みを開始する位置(手前どの位の場所まで来たら読み込むか?)の設定があるものもありますから設定画面を確認して調整するのも手だと思います。

2018年10月8日 追記

自動広告にリンクユニットがないようですので上下に挿入していたリンクユニットのみ元に戻しました。

自動広告オンリーにしてから丸1日、インフィード広告がすごく増えた気がします。今までは手動で記事の中に1か所挿入していただけなのですが結構挿入されるようになりました。

ひょっとするとテキスト広告やディスプレイ広告よりもこのタイプの方が主流なんじゃないか・・・なんて思います。