翻訳ページ（TranslatePress）での画像置換の問題について - SWELLに関する質問

RE: 翻訳ページ（TranslatePress）での画像置換の問題について

skillsharejp — Tue, 05 Nov 2024 15:36:33 +0000

投稿者:: @ameripros

デフォルトで「スクリプト(lazysizes.js)を使って遅延読み込みさせる」に設定となっていたのですがこちらは何か利点がありますでしょうか？

PHPコードでlazyloadが作用する範囲（しきい値）を調整できます。

投稿者:: @ameripros

また、「loading="lazy"」に設定を変更することを検討しているのですが、こちらを変更することで「表示のスピードが遅くなる・SEOの順位に悪影響が出る」など、

JS形式のlazyloadと異なりしきい値は調整できません。あくまでブラウザによって定められた条件で画像がlazyloadされます。最大限JSを活用した場合に比べると、ページ表示のタイミングで読み込まれる画像数は多くなる傾向があります。

ご関心お持ちの様子ですので、より技術的な解説貼っておきます。

https://web.dev/articles/browser-level-image-lazy-loading?hl=ja

表示速度はAbove the foldと直後の画像数、画像自体のファイルサイズにより遅くなる場合もあります。単純にlazyloadの種類だけで全体的な表示速度やSEOを語ることは不可能です。

サイトというのは導入するプラグイン次第で変わるものですので、何度か条件を変えてテストをしてサイトにとって適切な組み合わせや設定を選ぶようにしてください。

RE: 翻訳ページ（TranslatePress）での画像置換の問題について

Ameripros — Tue, 05 Nov 2024 13:11:48 +0000

皆様、ご返信ありがとうございます。

画像等のLazyloadを「loading="lazy"」にすることで解決できました。

こちら2点、初歩的な質問でしたら申し訳ございません。

デフォルトで「スクリプト(lazysizes.js)を使って遅延読み込みさせる」に設定となっていたのですがこちらは何か利点がありますでしょうか？

また、「loading="lazy"」に設定を変更することを検討しているのですが、こちらを変更することで「表示のスピードが遅くなる・SEOの順位に悪影響が出る」など、ありますでしょうか？

RE: 翻訳ページ（TranslatePress）での画像置換の問題について

Tetsuaki Hamano — Fri, 01 Nov 2024 04:58:20 +0000

こちらでも問題を再現できました。

結論を先に言いますと、「SWELL設定」＞「高速化」＞「画像等のLazyload」を「使用しない」または「loading="lazy"」にすれば解決できると思います。

テーマ側で解決方法があるかは、別途開発者の了さんに詳細を共有いたします。

RE: 翻訳ページ（TranslatePress）での画像置換の問題について

Thu, 31 Oct 2024 06:55:07 +0000

TranslatePressの確認は特にしていなかったので、ちょっと調べてみますね。

RE: 翻訳ページ（TranslatePress）での画像置換の問題について

skillsharejp — Thu, 31 Oct 2024 01:38:31 +0000

前提条件としてSWELLはTranslatePressに互換性を持つ開発はしていないと思います。

そして質問についてですが、試しにSWELLのlazyloadをOFFにして確かめてください。

翻訳ページ（TranslatePress）での画像置換の問題について

Ameripros — Thu, 31 Oct 2024 01:20:48 +0000

Swellテーマ（Swell Child）を使用している際に発生している問題についてご相談させていただきたく存じます。

【発生している問題】
TranslatePressというプラグインで翻訳したページにおいて、画像のURL処理に問題が発生しております。翻訳先のページにおいて1つの画像を変更すると、それにつられてサイト内のすべての画像が同じものに変更されてしまいます

【技術的な詳細】
1. Swellテーマ有効時：
- すべての画像が同一のbase64データに置換されます：
`data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==`

2. Swellテーマ無効時：
- 画像は正常なURLとなっています：
`http://test.smartskin-clinic.com/wp-content/uploads/2023/07/26-1.jpg`

Swellテーマ有効時には：
- 1つの画像を変更すると、それにつられてサイト内のすべての画像が同じものに変更されてしまいます

【環境情報】
- WordPress: 6.6.2
- テーマ: Swell Child 1.0.0
- プラグイン: TranslatePress

【確認済みの内容】
1. TranslatePress社に問い合わせを行い、「Swellテーマとの干渉による問題である可能性を指摘されました
2. テーマを一時的にSWELL以外のものに変更したところ、画像が正常なURLを参照し、個別変更が可能なことを確認しました
3. 画像に影響を与える可能性のあるCSSの削除を試みました
4. TranslatePress以外のすべてのプラグインを停止して検証を行いました

【期待する解決方法】
- SwellテーマとTranslatePressの両方を有効にした状態で：
1. 各画像を個別に変更可能となること

【ご確認いただきたい内容】
Swellテーマ有効時に画像URLがbase64データに置換されてしまうことを防ぐ解決法。

必要に応じて、追加の情報提供やテスト環境でのご確認にもご協力させていただきます。

よろしくお願いいたします。