対馬 俊彦
フォーラムへの返信
-
投稿
-
スライドが1枚だけのサイトであればスライドショーは不要なので
と書きましたが、スライドショーが必要なケースの方が多いと思いますので、
スライドショーを使ったトップページで Cumulative Layout Shift (CLS) スコアを
改善できるかどうかやってみました。■■■ 結論 ■■■
CLS スコアを大幅に改善することができました。
■■■ CLS スコアが悪くなる理由 ■■■
トップページが表示され始めたときにはスライドショーがまだ表示されていなくて、
その後にスライドショーが割り込んで表示されるような動きをするために、
最初に表示されたコンテンツが下方向にシフトしてしまう (Layout Shift が発生する)。添付画像をご覧ください。
■■■ Layout Shift が発生しないための対策 ■■■
img 要素の height 指定と同じように、
CSS でスライドショーの高さを指定(確保)すればよい。■■■ 具体的な対策手順 ■■■
スライドショーの高さは画面幅に応じて変動しますので、
固定数値による指定はできません。そこで、トップページの [カスタム CSS] に以下の行を追加しました。
@media (min-width: 768px) { .carousel { height: calc( ( 100vw - 20px ) * ( 600 / 1900 ) + 1px ); } } @media (max-width: 767px) { .carousel { height: calc( 100vw * ( 500 / 1000 ) + 1px ); } }- パソコン用の
20pxはスクロールバーの幅です。
ブラウザーによってこの幅は違いますので、余裕を持って 20px にしました。
このためスライドの下がわずかに欠けることがありますが、誰もそのことに気がつかないと思います。 600 / 1900はパソコン用のスライド画像のピクセルサイズです。
500 / 1000はモバイル用のスライド画像のピクセルサイズです。- 最後の
+ 1pxは border-bottom の分です。
■■■ 改善された CLS スコア ■■■
検証用サイト https://lightning-fort.hp1.work/ で上記の対策を行った結果、
CLS スコアを以下のように大幅に改善できました。【モバイル】0.367 ⇒ 0.026
【パソコン】0.255 ⇒ 0.054Lightning ページヘッダー設定で [背景に被せる色] を白に指定しているためと思われます。
添付画像をご参照いただき、この設定をクリアしてみてください。VK Blocks Pro 1.0.11 で改行されるようになったことを確認いたしました。
どうもありがとうございました。横からすみません。
私の作業用サイトで検証してみたところ、
CLS スコアの数値を上げている主な原因はスライドショーであることがわかりました。
(すでにお気づきだったかもしれませんが…)スライドが1枚だけのサイトであればスライドショーは不要なので、
スライドショーを Outer ブロックに置き換えてスコア測定してみたところ、
以下のような劇的な改善を図ることができました。サイト1. https://lightning-fort.hp1.work/
Lightning 標準のスライドショーでスライドを1枚表示しています。
CLS スコア 0.274サイト2. https://lightning-variety.hp1.work/
Lightning 標準のスライドショーを非表示にして、Outer ブロックを配置してあります。
CLS スコア 0所信浩様のサイトもスライドが1枚だけなので、お試しいただくとよいと思います。
VK Blocks Pro 1.0.7 のあたりでそうなってしまったみたいです。
VK Blocks Pro 1.0.10 にアップデートしたら、日本語表記に戻りました。
モバイル用のヘッダーロゴ画像
と書きましたが、
できましたら 1199px ⇔ 1200px のブレークポイントで切り替わるのがありがたいです。おそらく、今は需要が少なく
需要が少ないと私も思うのですが、
今でも官公庁や地方自治体のサイトは 大・中・小 ボタンが標準機能みたいになっていますよね。私は仕事でいろいろな方々にパソコンのサポートを行っていますが、
小さい字が見づらい方は常時ブラウザを拡大表示して見ていますので、
大・中・小 ボタンを使っているとは思えません。コードも公開されいるのですが、どこに入れればいいのかわからないのです。
その手順を説明させていただくにはかなり多くのことを書く必要があります。
ですので、手順を説明した回答は出てこないと思います。
それだけ多くの作業量が発生するということです。とりあえず、作業手順の参考になるサイトをピックアップしておきました。
【】内のコトバは提示していただいたサイトの見出しに対応しています。CSS のカスタマイズに関して 【CSS】
アクションフックによるカスタマイズに関して 【HTML】
https://www.vektor-inc.co.jp/post/wordpress-about-action-hook/JavaScript の読み込みに関して 【JavaScript・文字サイズ変更・色反転】
上記のサイトの説明を見ながらやってみて、
わからないところをピンポイントで質問されると回答が得られるかもしれません。費用面の制約もあると思いますが、けっこう難易度が高い作業ですので、
業者に相談(委託)することも検討されるとよいと思います。存在する分類をすべて表示するのはテーマ固有の仕様なので
なるほど…Polylang のときにテーマ側で対応した理由がわかりました。
だとすると、2番目を消せばいいと考えはリスクがありますね。.entry-footer .entry-meta-dataList:nth-of-type(2) { display: none; }2番目の分類項目を消せばいい…と安直に考えると、
たぶんこの CSS を追加すれば消せると思いますが、
WPML プラグインの仕様がわからないので、
常にこれで OK かどうか (常に2番目に配置されるか) はわかりません。WPML プラグインのフォーラムで質問した方が確実だと思います。
社内で検討しましたところ、現時点では、実装は見送らせていただくこととなりました。
承知いたしました。
ご検討いただき、ありがとうございました。 - パソコン用の
