現在デフォルトスキンとして「Season (Summer)」を適用中。

「WordPress内の全ての画像を適切にレスポンシブ読み込みさせる」のをあとから行いたい | Cocoonテーマに関する質問 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
Share:

[解決済] 「WordPress内の全ての画像を適切にレスポンシブ読み込みさせる」のをあとから行いたい  

  RSS

はるたそ
 はるたそ
(@はるたそ)
ゲスト
参加: 4か月 前
投稿: 24
2019年6月16日 19:04  

お世話になっております。
並行して別の内容もご相談させていただきたく思います。

PageSpeedInsightsの「適切な画像の表示」などで怒られるのをはじめ、そのデバイス(カラム幅)で必要な最小限の画像を適宜用意し読み込むのがベストと思います。

が、私の状況として、

添付ファイル1のように、アップロードした画像は全てオリジナル画像のまま使用し、「サムネイル画像の別生成」は一切ないので、後付けの対策でどうしたものか悩んでいます。

お聞きしたいのは2つで、

  1. Cocoonでは画像を読み込む場所、デバイスによってサムネイル表示の引数(「medium」や「small」など)は変えていますでしょうか?
  2. もし先程の添付ファイル1のそれぞれを適切に設定したとして、あとから全ての画像で再生成する方法はありますでしょうか?

2に関しては、テーマが利用しているサムネイルを再生成して最適化する方法テーマ全体のサムネイル画像の縦横比(アスペクト比)を変更する方法を拝見しましたが、今回の件とは関係ないという理解です(あっていますよね?)

Cocoonの範疇を超えているかもしれませんが、分かることがありましたらどうかご助力願えませんでしょうか。足りない情報等ありましたらお申し付けください。

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


未解決
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6160
2019年6月16日 19:31  

Cocoonでは画像を読み込む場所、デバイスによってサムネイル表示の引数(「medium」や「small」など)は変えていますでしょうか?

Cocoonテーマ内では、smallもmediumもlargeも利用していないです。
Cocoon独自で指定した画像サイズが利用されています。

これらのサイズが利用されるのは、基本的に本文部分のみとなっているので、WordPress設定のメディアサイズを変更したとしても、本文部分への影響しかないと思います。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6160
2019年6月16日 19:34  

もし先程の添付ファイル1のそれぞれを適切に設定したとして、あとから全ての画像で再生成する方法はありますでしょうか?

全て変更する方法はこちらです。
https://wp-cocoon.com/regenerate-thumbnails/
けれど、Cocoonテーマで、Wordpress メディアサイズで設定したものは利用されないので変更してもテーマ側の変化はないです。本文部分に使用されている画像のみの影響となると思います。


はるたそ
 はるたそ
(@はるたそ)
ゲスト
参加: 4か月 前
投稿: 24
2019年6月16日 20:53  

お返事ありがとうございます。

Cocoonテーマ内では、smallもmediumもlargeも利用していないです。
Cocoon独自で指定した画像サイズが利用されています。

こちら、理解しました。独自でなにか方法を考えてみます。解決しましたらここに追記してみます。

けれど、Cocoonテーマで、Wordpress メディアサイズで設定したものは利用されないので変更してもテーマ側の変化はないです。本文部分に使用されている画像のみの影響となると思います。

こちら、やや理解できておりません。

太字にした部分について、「本文内の画像出力はテーマテンプレートが行っている」と思っていたのですが、そうではなく「ここはWordPress標準の仕様」で動作しているということでしょうか?

(もしそうだとしても、適切に条件分岐させて引数の中身を変えたりするのは難しそうなのでいずれにしても別の方法を考えますが…)


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6160
2019年6月17日 19:19  

太字にした部分について、「本文内の画像出力はテーマテンプレートが行っている」と思っていたのですが、そうではなく「ここはWordPress標準の仕様」で動作しているということでしょうか?

そうです。
テーマ側から、本文画像サイズの出力に介入はしていなかったと思います。
全て、WordPressの標準機能で出力されていたと思います。


はるたそ
 はるたそ
(@はるたそ)
ゲスト
参加: 4か月 前
投稿: 24
2019年6月17日 20:24  

わいひら様

お返事ありがとうございます。

承知いたしました。そうなると、適切な画像サイズを読み込み分けるのはどうするのが一番いいんでしょうかね…。

https://translate.google.co.jp/translate?sl=auto&tl=ja&u=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ftools%2Flighthouse%2Faudits%2Foversized-images%3Futm_medium%3Dunknown%26utm_source%3Dlighthouse

(↑もとは英語ページですので、Google翻訳したURLをそのまま載せています)

PageSpeedInsightsから飛べるこのヘルプページでは、「それぞれのデバイスに合ったサイズ(画素数)の画像が読み込まれているのがベストで、それ以上のものが検知された場合、減点に繋がります」という趣旨のことが書いてあります。

Cocoonのホームページでは画像を多用していないですし、そもそも画素数も少なめのものを使っているのでPageSpeedInsightsのスコアも素晴らしいものになっていますが、私はPC:69、モバイル:22という有様です。おそらくは大部分がこの画像の件によって下がっていると思っていたのでなんとかしたかったのですが…。

いずれにしても、テーマ側で解決できる範囲はやや超えていそうということが分かりました。ご相談させていただき本当にありがとうございました。

 


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6160
2019年6月17日 21:48  

この状態で、適切な画像サイズを読み込むという意味は、ちょっと厳しいかもしれません。
実際に試したことはないので、詳しくはわかりませんが、全て同じ大きさの画像になると思うので、大きさの変化がないので。

PageSpeed Insightsのスコアに関しては、実際のメッセージを見てみないとちょっと何ともいえないかもしれません。
別のトピックに貼られているURLのことであれば、ページを確認してみた限りでは、Lazy Loadとかは有効になっていますか?
また、WEBフォントを利用しているため、読み込みのオーバーヘッドがスコアを悪くしているっぽいです。


はるたそ
 はるたそ
(@はるたそ)
ゲスト
参加: 4か月 前
投稿: 24
2019年6月17日 23:39  

そうですね、このままでは厳しそうです。
cssでどうこうしても読み込まれる画像ファイル自体が一緒なので意味はないですし、いずれにしても「PCのカラム幅用」と「スマホのカラム幅用」の複数の画像ファイルは必要そうです。
あとからメディアファイル内の画像を全てサイズ違いで複製してくれるようなプラグインがないかも探してみます。

Lazy Loadは有効にしています!自前で実装しようと思っていたらPageSpeed Insightsのアップデートに関連して少し前にCocoonでも対応されていて、本当に頭が上がりません…。

Webフォントも頭の痛い問題ですね。本文テキストの「Noto Sans JP」が驚くほど魅力的で絶対に使いたいのですが、これもhttpリクエストの障害となっているようです。

あとはFont Awesomeなどのアイコンフォントも速く軽く読み込めないか模索中です…。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6160
2019年6月18日 19:23  

昨日、なぜかPageSpeed Insightsでエラーが出たので今あらためてやってみたのですが、やはりほとんどが、Google FontsかFont Awesomeですね。

Google Fontsはいずれ、Cocoonでも対策しなければと思います
あと、Font Awesome5を使用している部分を、JavaScript読み込みの方にすればちょっとは良いのかも。


はるたそ
 はるたそ
(@はるたそ)
ゲスト
参加: 4か月 前
投稿: 24
2019年6月18日 21:52  

やはりその2つがネックですね。

Google Fontsはできることがないので私も待つことにさせていただきます。

FontAwesome5の「JavaScriptの方」とは、SVGのことですよね?
暇を見て実験し、スコアが変わったようでしたらどこかでご報告させていただきたく思います。


今までページスピードにはほとんど興味がなかったのですが、「モバイルのページ速度は検索順位決定の大事な一要素となる」と公言されてからかなり気になるようになってしまいました(なにしろ20点とかなので…)。

しばらく他のブログなどの観察も含め、情勢の様子を見てみます。

今回もお世話になりまして、ありがとうございました。
解決済みとさせていただきます。


わいひら 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年1ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:10ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

タイトルとURLをコピーしました