小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

CocoonでCLSが発生するのはスキンが原因かも?だったらゼロに改善できるかも!

Cocoon
この記事は約6分で読めます。

Cocoon最新アップデートで搭載されたスキン「イノセンス」。
「大人かわいい」がキャッチフレーズだそうですけど。

著者は、おっさんくさく見えるって言ってるよ

バカにしてるわけじゃありません。
それどころか、私がテーマをCocoonに変える決心をした大きな理由です。
その証拠に、この記事を書いている時点でのスキンはイノセンスをカスタマイズしたものです。

著者はおっさんですから
落ち着いていてしっくりくるそうです

ただ、困った問題が生じました。

スポンサーリンク
この記事を読む方へのオススメ

PageSpeed InsightsでCLSを指摘される

PageSpeed Insightsをやってみたところ。
Cumulative Layout Shift(CLS)が発生してしまっています。

PageSpeedinsightsでCLSが発生。ラボデータ0.032、フィールドデータ0.09

ラボデータの方が0.032。
フィールドデータもこの日を境にどんどん悪化し、ついに全ページが「改善が必要」へ突入。
SearchConsoleにおけるユーザーエクスペリエンス合格ページがゼロとなってしまいました。

やばすぎる!

対策しなくちゃね……

スポンサーリンク

Cumulative Layout Shift(CLS)とは?

Cumulative Layout Shift(CLS)はレイアウトのずれのこと
日本語では「累積レイアウトシフト変更」と言います

サイトを閲覧したときにガクガク!って感じで画像や広告割り込んできてイラついたことありませんか?
最近はだいぶ見なくなりましたけど、あれが発生しないほど良い評価をもらえるということです。

スポンサーリンク

CLSの原因を探る

ヘッダーモバイルボタン

CLSが発生していると指摘された要素は2つありました。

1つはヘッダーモバイルボタンのアイコン(FontAwesome)。
0.01とかでしたから無視してもいいんですけど、気持ち悪いのでゼロを目指します。

細かい対策をとるより、いっそなくしてしまった方が早い。
アイコンを減らしてフッターにまとめ、ヘッダーは解除します。
これでCLSはなくなりました。

アイキャッチ画像……?

問題はもう1つの方。
記事冒頭のアイキャッチ画像が指摘されました。

PageSpeedInsightsで記事冒頭のアイキャッチにCLS0.17が指摘されている。

記事本体はこちら。

「押忍!番長3」で一撃万枚突破! 絶頂対決10連勝と超番長ボーナスから1万3000枚事故った話
先日、「押忍!番長3」で大事故体験。 私のスロ人生通じて初の一撃13000枚達成しました。 画像は万枚突破したところで撮影したものです。 本記...

CLS修正前アイキャッチ、日付が画像の前

この走っている番長の画像がCLSの原因として指摘されていました。
PCの画面ですが、PCもモバイルもCLSが生じています。
もちろんこの記事だけでなく全記事においてです。

だけどこれ、わけわかんない!

原因の切り分け

過去にもCLSの対策をとったことがありますが。
考えられる原因は、

  • LazyLoad絡み
  • widthとheightの指定がない

しかし、

  • WordPress自体にCLSを生じさせないネイティブLazyLoadが実装されている。
  • 投稿添付の画像はWordPressがwidthとheightを自動挿入する。

WordPressの仕様上、CLSは発生しづらくなっています。

とりあえずアイキャッチのLazyLoadについては、Cocoonの機能は切っています。
原因からは外してよさそうです。

一方でwidthとheightは設定されています。

やっぱりわけわかんない!

こういうときは親テーマにするの
原因がカスタマイズなのかテーマの仕様なのか切り分けできるから

親テーマにして、スキンも親テーマのものにしてみます。
さらにWEXALを切ってキャッシュを全てクリア。
プラグインで表示関連は元々使っていない。
これでノーカスタマイズに近いはず。

……やっぱり同じだよ

アイキャッチのwidth、max-width、height、max-heightを変えてみたり。
marginなくしてみたり、paddingに変えてみたり。
ラップ要素の調整してみたり。
ダメ元で思いつくことを片っ端からやってみました。

しかしダメ元だけに、やっぱりダメ。
何が原因なのか……

CLS……

レイアウトが動く……

はっ! もしかして!

ついにつきとめました。
こちらはCLS修正後の画像。

CLS修正後アイキャッチ、日付が画像の後に変化

さっきと同じに見えますが、どこかが違います。
間違い探ししてみてください。

スポンサーリンク

特定したCLSの原因

間違い探し、わかったでしょうか?
CLS修正前は「投稿日・更新日」がアイキャッチの前。
修正後はdatetagがアイキャッチの後に来ています。

テーマデフォルトだと日付がアイキャッチの後に来ます
前に来ているのはイノセンススキン側の仕様です

スキンのJavaScript.jsを見てみましょう。

$(function () { $('.date-tags').insertAfter('.entry-title'); });

記事タイトル(.entry-title)の後にを日付を挿入する(.date-tags)というjQueryです。
これによってアイキャッチが本来表示される位置から日付分だけ下方にシフトしたわけです。

スポンサーリンク

CLSの具体的な修正方法

私は日付が前であることにこだわらないので、スキンのスクリプトを停止する方法を選びました。

子テーマのfunctions.phpに次の記述をします。

function cocoon_scripts() {
wp_dequeue_script( 'cocoon-skin-js' );
}
add_action( 'wp_enqueue_scripts', 'cocoon_scripts' );

これでCLSはゼロになりました。

PageSpeedInsightsでCLSの数値がゼロ

フィールドデータの方もその内戻るでしょう。

スポンサーリンク

左寄せになっているのをデフォルトの右寄せに戻したい場合

子テーマのstyle.cssに次の記述をします。

.date-tags {
text-align: right;
}

ただスキンを子テーマに移して、Cocoon設定でスキン設定を子テーマに指定し直し。
その上でスキンのstyle.cssから記述を削除する方が無駄はないです。

スポンサーリンク

まとめ

PSIの指摘がアイキャッチ画像だったから、なかなか気づけなかったよ
ちょっとした盲点だね

スキン自体はありがたく使わせていただいてます
おはようポテトさん、ありがとうございました

イノセンス作者「おはようポテト」さんのリンクはこちら。

【Cocoon】居心地の良いスキン「イノセンス」を作成しました
この度、Cocoonのスキン「イノセンス」を作成しました。 「イノセンス」をダウンロードする 本スキンは 知的さや大人っぽさを演出したい とはいえ可愛さも捨てがたいよね まあ要するに、居心地のいいスキンを探してるんです ...

吹き出しのアニメは必見かもです。

アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Cocoon
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました