ページ読み込み時に一瞬表示が崩れるのを防ぐには?

0
いいねをした人: 居ません
  • このトピックには7件の返信、4人の参加者があり、最後にY Mにより3年、 4ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #62386
    Y M
    閲覧者
    5

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】11.7.6
    【お使いのブラウザ】Google Chrome
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===

    いつもお世話になっております。

    現在、ページ読み込み時に一瞬表示が崩れてしまいます。何か解決する良いアイディアがあれば教えてください。

    トップの1枚画像の読み込みに時間がかかり、下のコンテンツが先に上部に表示されてしまいます。できれば順番に表示したいのですが、少なくとも下のコンテンツが上に上がってこないようにしたいと思っています。

     

    現状、以下のような動きになっており、下のコンテンツが上に一瞬上がってきてしまいます。

    0
    いいねをした人: 居ません
    #62389
    アクツ
    参加者
    167

    Mashima さんこんにちは!
    トップ画像が表示される前とされるあとでガタってくるの気になりますよね(^^;

    私の場合は、

    • そもそもそんなものだと諦める
    • トップ画像をもっと軽くできるかもしれないと画像の容量削減頑張ってみる
    • トップ画像領域をCSSで調整をかけていく(高度な設定でブロックにclassを設定し、追加CSSで設定したclassに対してwidthとheightを入れてきます)

    のどれか(複数対応もある)をとることが多いです。

    2
    いいねをした人: 居ません
    #62390
    キタジマ タカシ
    参加者
    2247

    ページの URL を教えてもらうことはできますか?

    Snow Monkey Blocks やコアの画像ブロックはだいたい width と height が指定されていると思うので、崩れる場合は追加した CSS やプラグインの影響の可能性もあると思います。それは見てみないとわからないので、可能だったら URL を教えてください!

    1
    いいねをした人: 居ません
    #62391
    Y M
    閲覧者
    5

    回答ありがとうございます!

    テストサイトのURLはコチラです。

    (URL は管理者により削除

    0
    いいねをした人: 居ません
    #62394
    アクツ
    参加者
    167

    (まったくスレに関係ない内容ですみません)

    シェアいただいたサイト、Snow Monkeyで作ってる!って思えないぐらいのオリジナリティですごいですね!!

    0
    いいねをした人: 居ません
    #62436
    キタジマ タカシ
    参加者
    2247

    ページ拝見しました。
    非推奨のスライダーウィジェットを使用されているようでして、このウィジェットは画像に CSS の absolute を使っているので、画像が読み込まれるまで高さが確定しないのです…。一応下記の CSS を足すことで、それっぽい感じにはすることができます。

    .wpaw-slider__canvas:not(.slick-initialized) {
        height: 700px; // 画像が読み込まれていないときに強制的に高さをつける
    }
    1
    いいねをした人: 居ません
    #62546
    山崎 大祐
    参加者
    112

    はじめまして!

    私もGoogleのpagespeed-insightsにてCumulative Layout Shift(CLS)のスコアが悪く悩まされておりました。

    私は、以下の記事に助けられました。今は画像については、自動で高さを調整しています。

    アクツさん、キタジマさんの対策と共に、役にたつと情報だと思います。

    1
    いいねをした人: 居ません
    #62670
    Y M
    閲覧者
    5

    皆様ありがとうございます。無事に、求められる形にまとめることができました。

     

    キタジマ様

    無事に解決しましたので、2020年12月6日 11:41 AM#62391のコメントのサイトのURLを削除いただけますと幸いです。

    1
    いいねをした人: 居ません
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「ページ読み込み時に一瞬表示が崩れるのを防ぐには?」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。