Cocoonの高速化機能を実行してみて、いくつか修正しなければならない点がありました。
ひとつは、スタイル記述時のコメントアウトの削除
HTML圧縮機能をオンにすると、コメントアウトが全て削除されるようです。
そのため、bodyタグ内にあるsytleタグが全て無効になってしまいました。
※スタイルタグの中にコメントアウト <!-- --> が入っていたため、スタイルが全て削除されてしまった。
<style>
<!--
スタイルの記述
-->
</style>
これは、伝統的に、スタイルタグ <style> ～ </style> を入れるという仕様？に従って記述していたからなのですが、
今どき、スタイルタグに対応していないブラウザはないだろう、ということで、スタイルタグ内のコメントアウトは全て削除することにしました。
（もう、スタイルタグの中をコメントアウトするという記述の仕方は不要になったのですかね？）
WordPressの高速化プラグイン「 Autoptimize 」ではコメントを残す事が可能なようですが、Cocoonの高速化機能ではコメントを残すことはできないようですね。
もう一点、lazyload機能（※画像の遅延読み込み）をオンにすると、どうやら「 overflow:hidden; 」が指定されている領域内にある、"領域からはみ出している画像"が一部表示されなくなってしまう事が判明。
色々試してみた結果、「 overflow:hidden; 」が指定されていて、かつ、TOPやLEFTなどを使用して画像の位置を移動した場合に発生するようです。
移動量はわずかにはみ出している程度なら大丈夫なのですが、一定量を超えると表示されなくなってしまうようです。
FirefoxとChromeで確認しました。Edgeでは起きませんでした。
これは、画像の遅延読み込みのJavaScriptで問題が発生するようです。
この当たりの問題と同根ではないかと教えて頂きました。
⇒ lazyload.jsとoverflow-xを使うと挙動がおかしくなるので解決方法
⇒ position: stickyの面白い使い方と使用時の注意点
これは、Cocoonのlazyloadの除外設定をすることで解決しました。（lazyloadのせいで表示されない画像があった場合に、除外リストに「nolazy」のような文字を登録しておいて、その画像のクラスにそれを指定しておく。
※他の局面（JavaScriptで画像差し替え）でも画像が表示されないことがあるので、その場合も除外指定することで解決できました。
それから、これは初歩的なミスというか、テーマを変えたために起きた事なのですが、テーマで使用しているクラス名と同じものを別の場所で使用してしまっていた、と言う事がありました。
「 header 」など、ありがちな名前をつけてしまうと、テーマでスタイルが指定されているクラス名は使わないほうがよいですね。。。
コメント