Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
SWELLブログのページ エクスペリエ...
 
通知
すべてクリア

[解決済] SWELLブログのページ エクスペリエンス(モバイル)、CLS の0.25 超の不良URL問題

4 投稿
3 ユーザー
4 Likes
1,175 表示
swell3791
(@swell3791)
投稿: 4
メンバー
Topic starter
 

こんにちは。

swellテーマでサーチコンソールので確認した時に「モバイルでページ エクスペリエンスが良好な URL は 0.5%」,

「CLS に関する問題で 0.25 超(モバイル)に達する不良URLは191」と表示がが出ました。

しかも、PageSpeed InsightsでもCumulative Layout Shift (CLS)で赤色の0.26、First Contentful Paintで2.4秒、Speed Indexは4.5秒、Largest Contentful Paintは6.5秒という苦しい結果です。

調査の結果分かった問題は以下の通り。

使用していない CSS の削減

テキスト圧縮の有効化

ウェブフォント読み込み中のテキストの表示

(内容が似た解決トピックがあるため参考にするand親テーマへの追記で解決できる可能性 URL: https://users.swell-theme.com/forum/swell-bugs/lighthouse%e3%81%a7%e7%a2%ba%e8%aa%8d%e6%99%82%e3%81%aeicomoon-woff22c57uas/#post-5522)

document.write() を使用しない

静的なアセットと効率的なキャッシュ ポリシーの配信

First Contentful Paint (3G) 

メインスレッド処理の最小化

画像の幅と高さの固定に関しては表示が出ませんでした。

CLSとはページを開いたときに起きる画像のずれのことを言いますが、今回はそのずれが起きなかったので、原因は別にあるのではないかなと思い、このトピックを作成しました。

Cumulative Layout Shiftでも0で良好と表示されています。

心当たりのある点は以下の通りです。

・遅延読み込み機能で「記事下コンテンツを遅延読み込みさせる」、「フッターを遅延読み込みさせる」、「画像等のLazyloadは使用しないを選択している」、「スクリプトの遅延読み込みをonさせている」、「遅延読み込み対象にはGoogleアドセンス等の広告やSNSボタンも含む」など設定している。

・アドセンスは全てレスポンジブで高さや幅は固定していない

対策としてアドセンスの高さをcssで設定などをしました。(全部だめだったので、元通りにしました。)

今はスマホの時代で我がブログもモバイルファーストを優先させる以上、この問題は至上命題レベルで解決しなければいけない問題です。

しかし、親テーマを編集しないといけないため、自身のブログが真っ白になることを恐れ、24時間かけても解決できませんでした。

サポート外だと思いますが、これもSwellテンプレートで起きた巨大な問題であることは紛れもない事実。

一刻も早くモバイルでページ エクスペリエンスが良好なURLを100%にしたいので、なにとぞご助力をお願いします。

(問題の解決次第非公開にする可能性も)

スクリーンショット (4)
スクリーンショット (5)
スクリーンショット (6)
スクリーンショット (7)
スクリーンショット (11)
スクリーンショット (8)
スクリーンショット (9)
スクリーンショット (10)
スクリーンショット (12)
スクリーンショット (13)
スクリーンショット (15)
スクリーンショット (14)
確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました, 自分で追加したコードに問題がないかチェック済みです, サポート範囲外だということを理解しているが助けが欲しい(有料サポートしてくれる方を探したい)
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.7.3.2
利用中のPHPバージョン
8.1.12
OS
Windows10,iPhoneSE
利用中のWordPressバージョン
6.1.1
利用中のサーバー会社
Conoha
ブラウザ
Chorme
利用中のプラグイン一覧

Akismet Anti-Spam (アンチスパム)
BackWPup
Broken Link Checker
Converter for Media
EWWW Image Optimizer
Instant Indexing
P3 (Plugin Performance Profiler)
Pochipp
Pochipp Assist
PS Auto Sitemap
Redirection
Search Regex
SEO SIMPLE PACK
WebSub (FKA. PubSubHubbub)
WPForms Lite
XML Sitemap & Google News

 
投稿済 : 12/02/2023 5:30 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

ちょっと広告が邪魔でよくわからないですが、パッとみた感じはコンテンツ自体にレイアウトシフトは起きてなさそうです。

ファーストビューに入ってくる広告が原因の可能性が高いと思うのですが、そちらは検証済みですか?

SWELL開発者です。

 
投稿済 : 12/02/2023 5:53 pm
skillsharejp
(@skillsharejp)
投稿: 941
SWELL高速化顧問
 
投稿者:: @swell3791

Cumulative Layout Shiftでも0で良好と表示されています。

Google説明の通り、Lighthouseの結果とCrUXの結果は異なります。シミュレーションで見た時はサイトとGoogleサーバーとの関係です。しかし実際のサイトでは閲覧者のネットワーク環境、端末性能などがサイトの高速化度合いに加わります。

逆に言えばLighthouseのCLSが0よりも悪化した値でも、リアルデータのCLSは0と判断される事があります。

投稿者:: @swell3791

「画像等のLazyloadは使用しないを選択している」

プラグインでLCP含む画像のlazyloadを使用されてますので、Above the foldは適切に除外設定してください。

投稿者:: @swell3791

対策としてアドセンスの高さをcssで設定などをしました。(全部だめだったので、元通りにしました。)

広告のCLSについてはGoogleのweb.devをご一読されるのが良いです。

https://web.dev/i18n/ja/optimize-cls

一般的な対策としてはmin-heightで大きなズレを減らします。

投稿者:: @swell3791

これもSwellテンプレートで起きた巨大な問題であることは紛れもない事実。

客観的にサイトを見てもSWELLとは関係ない部分の影響が大きいです。テーマ設計に関わる問題をご指摘される場合は、先ず第三者の影響をゼロにした状態で検証しその結果をご共有されるのが良いです。

これはSWELLに限らず、開発者に問題を報告する場合の一般的なルールのためです。

 

 

SWELLフォーラムはユーザーフォーラムのため、開発者以外の回答は全て任意です。当アカウントによる回答もボランティアのため、ヒントの提供に留まる場合があります。

ご依頼のご相談・お問い合わせ窓口
https://skillshare.biz/inquiry/

 
投稿済 : 12/02/2023 8:28 pm
weiser, , 山本大介 and 1 people reacted
swell3791
(@swell3791)
投稿: 4
メンバー
Topic starter
 
投稿者:: @skillsharejp

客観的にサイトを見てもSWELLとは関係ない部分の影響が大きいです。テーマ設計に関わる問題をご指摘される場合は、先ず第三者の影響をゼロにした状態で検証しその結果をご共有されるのが良いです。

これはSWELLに限らず、開発者に問題を報告する場合の一般的なルールのためです。

第三者の影響を予測せず、「swellのテンプレートで起きた課題」と判断を誤ってしまって申し訳ございません。

アドセンス等の広告を一旦外し、もう一度検証します。その時に返信します。

 
投稿済 : 13/02/2023 9:19 am
共有: