サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021-01-01 20:05
いつもお世話になっております。コクーンが大好きです。素人なので教えてください。
１つ気になったのですが、ブラウザキャッシュという機能は外部ファイルの読み込みを2回め以降させないためのものですよね。
高速化設定でCSSやジャバスクリプトをHTMLの中に入れると思うのですが、この場合ブラウザから見たら同じCSSなどを参照しているようには見えないのでキャッシュとかは関係なくなりませんか？（サーバー側でCSSを読みに行ってHTMLに展開しているんですよね？間違ってたらすみません）
コードは縮小化した方がいいのは分かりますが、ブラウザキャッシュを使いたいならインラインCSSとかではなくて外部参照のままの方がいいんじゃないかと思ってしまいました。このへんの仕組みを詳しく教えてもらえれば幸いです。
よろしくお願い致します。
2021-01-01 23:45
@コクーン大好きさん
高速化ではCSSやJSをHTMLの中に書き込んでいないと思いますが、そういった説明がありましたでしょうか？
私の高速化の設定ページでは確認できませんでした…
2021-01-02 02:04
「CSSを縮小化する」や「JavaScriptを縮小化する」にチェックを入れると、例えば親テーマのstyle.cssは
< link rel='stylesheet' href='～～～/wp-content/themes/cocoon-master/style.css' />
のような形では読み込まれず
<style>～～～～～～</style>
のような形でHTML内に直接書き込まれています。
CSSの縮小化をオンオフしてみてページソースを「style.css」で検索してみたりすると分かりやすいかも知れません。
なのでコクーン大好きさんの指摘は妥当なものだと思います。
言われてみれば、ほとんど変更されることのないcssなんかはキャッシュから読んでもらった方が早そうかなと思え、分かる人の回答を楽しみにしています。
わいひら reacted
2021-01-02 12:54
@はるさん
cocoonではそういう仕様なんですね！
最近ではリクエストの回数を減らせたりバージョン違いによるデザイン崩れを防ぐためにHTMLに直接書き込んだりすることもあるのでそういうことなんですかね。
静的ファイルを別ファイルにとしておいてブラウザにキャッシュさせておくことでクライアントのローカル環境から静的ファイルを読むのとHTML内のCSSやJSを読み込むのではそこまで大きな差はないと思います。
なので、データ転送量を減らしたい場合はブラウザにキャッシュさせて、静的ファイルの変更をリアルタイムで行わせたい場合はHTML内に記述した方がいいって感じですね。
これに関してはどちらも一長一短なのでわいひらさんがどういった意図で実装したのか次第なのかな？
2021-01-02 19:19
まず前提として、一口に「高速化」と言ってもサイトによって様々な要素が絡んでくるので、Cocoonの高速化設定にある各機能をそのまま利用するのが正しいかどうかはケースバイケースになります。
Cocoonの縮小化機能はブラウザ側ではなく、サーバー側でCSS・JSファイルを先に読み込み、縮小・インライン化したHTMLを渡す仕様になっている点を理解しておく必要があります。
また、表示速度を見る際に
- SEO的なパフォーマンスの指標を基準にして、各数値の良し悪しを見る。
- レンダリング時、ネットワーク上でどの部分がボトルネックとなっているかを見る。
といった方法がありますが、CSS・JS読み込みの最適化ではレンダリングの速度も追った方がいいです。
Cocoonの高速化設定のみで考えたとき、
コードは縮小化した方がいいのは分かりますが、ブラウザキャッシュを使いたいならインラインCSSとかではなくて外部参照のままの方がいいんじゃないかと思ってしまいました。
確かにCSSファイルをインライン化すると、ブラウザキャッシュは使えません。
しかし、ブラウザキャッシュはサーバーからの受け渡し時間を短縮するだけで、
- 1度目の読み込みはブラウザキャッシュの有無は関係ない。
- 2度目以降もファイル自体を読み込むのは変わらない。
ので、CSSのファイル数分だけ読み込みが入ります。
さらに同期読み込みが必要なJSが入ってくると、DOM構築の仕組みからブラウザ上での表示が開始されるタイミング（ファーストインプレッション）が遅くなります。
一方、全てのCSS・JSをHTMLファイル内にインライン化してしまえば、その分HTMLファイルの容量は大きくなるものの、ひとつのファイルを読み込むだけでよくなります。
ただし、表示開始が速いのはいいのですが、インライン化にも別の問題があり、インライン化されたCSSはHTML内で一緒に読まれるため、このCSS部分の容量が増えれば増えるほど、表示するページを把握するのに時間がかかる場合があります。
サーバーのレスポンスタイム、プラグインのCSSファイル数やそれぞれの容量、加えてJSの扱い方などによって単純にどちらの設定が速いとは言えないので、現在のパフォーマンスからボトルネックを洗い出しつつ、最適化させるのが正しい高速化設定の使い方だと思います。
2021-01-02 19:32
１つ気になったのですが、ブラウザキャッシュという機能は外部ファイルの読み込みを2回め以降させないためのものですよね。
これは違うと思いますよ。
外部も内部もだと思います。
読み込みをしないわけではありません。ブラウザキャッシュからも読み込みはすると思います。
ブラウザーキャッシュは、取得をしないだけだと思います。リソースファイルを取得しておくことで、2回目以降はサーバーから取得する必要がなく、クライアントのブラウザ上のファイルを読みに行くので、少し早くなるということだと思います（通信が不要になる）。
インラインに書くのは、ファイルのリクエスト数を減らすためです。
ブラウザキャッシュからでもファイルからの読み込みの時間はかかるので、インラインにしています。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。