- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
Swellテーマ(Swell Child)を使用している際に発生している問題についてご相談させていただきたく存じます。
【発生している問題】
TranslatePressというプラグインで翻訳したページにおいて、画像のURL処理に問題が発生しております。 翻訳先のページにおいて1つの画像を変更すると、それにつられてサイト内のすべての画像が同じものに変更されてしまいます
【技術的な詳細】
1. Swellテーマ有効時:
- すべての画像が同一のbase64データに置換されます:
`data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==`
2. Swellテーマ無効時:
- 画像は正常なURLとなっています:
` `
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データに置換されてしまうことを防ぐ解決法。
必要に応じて、追加の情報提供やテスト環境でのご確認にもご協力させていただきます。
よろしくお願いいたします。
テスト環境で、後述のTranslatePress以外をオフにした状態でも問題事象が発生いたしますのでプラグインの問題ではないと考えています。
Advanced Editor Tools
AI Engine (Pro)
Blocks Animation: CSS Animations for Gutenberg Blocks
Carousel Slider
CMP - Coming Soon & Maintenance Plugin
ConoHa WING コントロールパネルプラグイン
ConoHa WING 自動キャッシュクリア
EWWW Image Optimizer
MetaSlider
PDF Embedder
Reviews Feed
SEO SIMPLE PACK
Shortcodes Ultimate
Site Kit by Google
SiteGuard WP Plugin
Smart Post Show
Smash Balloon Instagram Feed
SVG Support
TranslatePress - Business
TranslatePress - Multilingual
UpdraftPlus - バックアップ/復元
Widgets for Google Reviews
WP Mail SMTP
WPForms Lite
XML Sitemap Generator for Google
YellowPencil
前提条件としてSWELLはTranslatePressに互換性を持つ開発はしていないと思います。
そして質問についてですが、試しにSWELLのlazyloadをOFFにして確かめてください。
SWELLフォーラムはユーザーフォーラムのため、開発者以外の回答は全て任意です。当アカウントによる回答もボランティアのため、ヒントの提供に留まる場合があります。
ご依頼のご相談・お問い合わせ窓口
https://skillshare.biz/inquiry/
WordPress保守管理・セキュリティ対策
https://kanripress.ne.jp/wordpress-maintenance/
TranslatePressの確認は特にしていなかったので、ちょっと調べてみますね。
SWELL開発者です。
こちらでも問題を再現できました。
結論を先に言いますと、「SWELL設定」>「高速化」>「画像等のLazyload」を「使用しない」または「loading="lazy"」にすれば解決できると思います。
テーマ側で解決方法があるかは、別途開発者の了さんに詳細を共有いたします。
皆様、ご返信ありがとうございます。
画像等のLazyloadを「loading="lazy"」にすることで解決できました。
こちら2点、初歩的な質問でしたら申し訳ございません。
デフォルトで「スクリプト(lazysizes.js
)を使って遅延読み込みさせる」に設定となっていたのですがこちらは何か利点がありますでしょうか?
また、「loading="lazy"」に設定を変更することを検討しているのですが、こちらを変更することで「表示のスピードが遅くなる・SEOの順位に悪影響が出る」など、ありますでしょうか?
デフォルトで「スクリプト(
lazysizes.js
)を使って遅延読み込みさせる」に設定となっていたのですがこちらは何か利点がありますでしょうか?
PHPコードでlazyloadが作用する範囲(しきい値)を調整できます。
また、「loading="lazy"」に設定を変更することを検討しているのですが、こちらを変更することで「表示のスピードが遅くなる・SEOの順位に悪影響が出る」など、
JS形式のlazyloadと異なりしきい値は調整できません。あくまでブラウザによって定められた条件で画像がlazyloadされます。最大限JSを活用した場合に比べると、ページ表示のタイミングで読み込まれる画像数は多くなる傾向があります。
ご関心お持ちの様子ですので、より技術的な解説貼っておきます。
https://web.dev/articles/browser-level-image-lazy-loading?hl=ja
表示速度はAbove the foldと直後の画像数、画像自体のファイルサイズにより遅くなる場合もあります。単純にlazyloadの種類だけで全体的な表示速度やSEOを語ることは不可能です。
サイトというのは導入するプラグイン次第で変わるものですので、何度か条件を変えてテストをしてサイトにとって適切な組み合わせや設定を選ぶようにしてください。
SWELLフォーラムはユーザーフォーラムのため、開発者以外の回答は全て任意です。当アカウントによる回答もボランティアのため、ヒントの提供に留まる場合があります。
ご依頼のご相談・お問い合わせ窓口
https://skillshare.biz/inquiry/
WordPress保守管理・セキュリティ対策
https://kanripress.ne.jp/wordpress-maintenance/