[ 解決済 ] グリッドカラムカードを使用している固定ページの編集画面が重い
[ 解決済 ] グリッドカラムカードを使用している固定ページの編集画面が重い
- このトピックには6件の返信、3人の参加者があり、最後に
により1ヶ月、 2週前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.6.2■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.26.4■ Pro Unit のバージョン
0.27.1■ スキンの種類
プレーン■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。■ プラグインの種類・バージョン
・VK Blocks Pro：バージョン 1.86.1.0
・VK All in One Expansion Unit：バージョン 9.99.6.0■ 期待する動作
グリッドカラムカードブロックを使用して、動画サムネイルの一覧カラムのようなものを作成しています。
カードアイテム内にサムネ代わりの画像やテキスト、ボタン等を設置し、カードアイテム全体には外部サイト（Youtube）へのリンクを貼った形です。
※見た目は添付画像をご参照ください。
※Youtube動画の埋め込みではありません。画像の容量は１つにつき200〜300kbです。
上記のようなグリッドカラムカードアイテムが全部で45個ほどあります。現在、このグリッドカラムカードブロックを載せた固定ページの編集画面を開くと、真っ白な画面になったまま読み込みに30秒以上かかってしまう状態です。
この固定ページの編集画面を開くスピードが速くなるような工夫などはないでしょうか…。■ 自分で試した事
グリッドカラムカードアイテムに挿入している画像容量が大きすぎなのかと考え、全ての画像を20~30kbに縮小して差し替えてみましたが、編集画面の読み込み速度は変わらずでした。■ 症状が発生するブラウザ
Google Chrome、Safari■ 実際の症状
上記の「期待する動作」に書いたようなグリッドカラムカードアイテムが45個ほどある固定ページの編集画面を開こうとすると、真っ白な画面になったまま、編集画面が表示されるまでに長い時間がかかってしまうのです。
30〜40秒待てば、大体は編集画面が表示されるのですが、その後もグリッドカラムカードアイテムをコピーしたり、新規で挿入したりする動作が少し遅くなることもあります。これは不具合というよりも、40個以上もグリッドカラムカードアイテムがある固定ページなんて重くなって当然なのかもしれないのですが…。
「当然そうなるよ」ということであれば、すみません…。それが分かるだけでもありがたいです。
また、もし編集画面を開く速度を改善するような方法などあれば、ご教示願えればと思いますが…。お手数おかけしてすみません。何かお知恵があればお貸しいただければと思います。
■ その他特記事項
・サイト訪問者が見る表のページの方は特に読み込みが遅いということもなく問題なく表示されています。
・また、当該ページの編集画面も、一度開ければ、多少動作が遅くなることはあっても、編集や保存は問題なくできております。お世話になっております。ベクトルスタッフの松田です。
もしかしたら以下をお試しいただけたら改善が見込めるかもしれません。1. 画像サイズ
画像のサイズが1つあたり200〜300KBであれば、もう少し軽量化することで、編集画面やページ全体の読み込み速度が改善するかもしれません。以下にWordPressの画像圧縮プラグインをあげてみましたのでお好きなものをお試しください。
– Smush
– ShortPixel
– Imagify
– TinyPng
– EWWW Image Optimizer2. カスタムCSSの使用箇所
おそらくカスタムCSSがグリッドカラムカードのアイテムごとに書かれているところがあるのですが、もう少し省略できるかもしれません。
もしアイテム内に書かれているCSSが全て同じ内容であれば、リストビューから親のグリッドカラムカードにCSSを移してselector .vk_gridcolcard_itemのように書いてCSSの量を減らせば軽くなるのかもしれません。
リストビューについては以下をご参照くださいませ。他にも確認できることは多岐に渡るかと思いますが、ひとまずすぐに試せるのはこちらかと思われます。
グリッドカラムカードアイテムを少なくしたものを固定ページで複数作って、
その複数の固定ページを VK 固定ページ本文 ブロックで読み込むようにしたら
この問題が解決するかもしれません。松田様、対馬様、早速のご回答、大変ありがとうございます！
どれも大変勉強になりました。なのですが、すみません、、いただいた解決法を試してみましたところ、以下のように完全には解決できず、もう一声という状態でした。（１）画像サイズの圧縮
→ご提示いただいたプラグインを使用して、画像サイズを20~30KB 程度まで圧縮してみました。
ですが、これだと編集画面の表示にかかる時間にはあまり変化が見られませんでした。（２）カードアイテムごとに指定していたカスタムCSSをグリッドカラムカードの親要素にまとめて、CSSの記述を減らす
→こちらを試してみましたら、１〜２秒程度は短縮されたのですが、やはり大きな変化はありませんでした…。（３）グリッドカラムカードアイテムを少なくしたものを固定ページで複数作って、その複数の固定ページを VK 固定ページ本文 ブロックで読み込む
→こちらを試してみたところ、編集画面の表示速度は大幅に短縮され、2~3秒程度になりました！なのですが、もともとグリッドカラムアイテムが全てひと続きで表示され、レスポンシブにも対応して自動でレイアウトされるようにできればと考えておりまして。この方法ですと、添付しました画像のように分けた固定ページごとにグリッドカラムカードアイテムがまとまってしまい、画面幅が変わった時などにひと続きで表示されない形になってしまいまして…。
わがままな想定ですみません…。もともと無理のある使い方でこれ以上の解決法は難しいのかもしれないと思いつつ、もう少しだけ解決法の募集をさせていただければと思います。私も自分でもご教示いただいた方法をアレンジしてなんとかできないか探ってみます。
大変恐縮ですが、、何かさらなるお知恵がありましたら、引き続きもう少しだけよろしくお願いいたします。
グリッドカラムカードアイテムを12個ずつ固定ページに持たせればよさそうです。
対馬さま、再びのご回答ありがとうございます！
なるほど！確かにそうですね。
グリッドカラムカードアイテムを12個ずつの固定ページ作成して、検証してみます！遅くなりましてすみません。いくつか実験をしまして、最終的に
「グリッドカラムカードアイテムを少なくしたものを固定ページで複数作り、その複数の固定ページを VK 固定ページ本文 ブロックで読み込む」
（＋「その際、各固定ページのグリッドカラムカードアイテムは12個ずつにする」）で、編集画面が重くなる問題はなんとか改善できるようになりました！
改めて、松田さま、対馬さま、ありがとうございました！
- このトピックに返信するにはログインが必要です。
