問題タブ [pagespeed]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
php - css リクエストと php リクエストのどちらがロード時間に重いですか?
私は cms (Wordpress) を使用しており、各ページに読み込んでいる外部スタイルシートがたくさんありますが、これらのスタイルシートの一部はページ固有のものです。全体的に、Yslow と Page Speed のスコアが悪いので、必要に応じてページ固有の css ファイルのみを読み込むようにブラウザに指示する php 条件を追加することを検討しています。ただし、ブラウザーに PHP リクエストを追加する予定なので、実際に読み込み時間を短縮するかどうかは疑問です。
compression - .css および .js ファイルを CDN に配置するのは賢明ですか?
ほとんどの人は、画像や動画を配置するために CDN を使用しているようです。js と css も cdn に配置するのが賢明ですか?
.htaccess - .htaccessで「Vary：Accept-Encoding」ヘッダーを指定する方法
Google PageSpeedは、JSとCSSの「Vary：Accept-Encodingヘッダーを指定する」必要があると言っています。.htaccessでこれを行うにはどうすればよいですか？
performance - .htaccess:「キャッシュバリデーターを指定する」方法は?
サイトで Google PageSpeed を実行していますが、
「キャッシュ バリデータを指定する」必要があると表示されます。
次のリソースにはキャッシュ バリデータがありません。キャッシュ バリデータを指定しないリソースは、効率的に更新できません。Last-Modified または ETag ヘッダーを指定して、次のリソースのキャッシュ検証を有効にします。
...次に、画像、CSS、JS などを一覧表示します。
http://code.google.com/speed/page-speed/docs/caching.html#LeverageBrowserCachingによると:
Last-Modified 日付を、リソースが最後に変更された日付に設定します。Last-Modified の日付が十分に過去の日付である場合、ブラウザはそれを再取得しない可能性があります。
.htaccess に次のものがあります。
私は何を間違っていますか？
web - すべての画像、スクリプト、スタイルシートなどを含む Web ページのベンチマークを行う方法
いくつかのツール (Apache ベンチ、html_load) を使用してみましたが、それらは 1 つのファイルしか要求しません。
バンドル戦略をテストしているので、元の html ファイルに含まれているスタイルシートやスクリプトなどもダウンロードするツールが必要です。つまり、ブラウザがロードするものとまったく同じです。
image-processing - Google PageSpeed＆ImageMagickJPG圧縮
ユーザーがアップロードした画像を前提として、Webサイトに表示するためにさまざまなサムネイルを作成する必要があります。私はImageMagickを使用していて、GooglePageSpeedを幸せにしようとしています。quality残念ながら、コマンドで指定した値に関係なくconvert、PageSpeedは画像をさらに圧縮することを提案できます。
http://www.imagemagick.org/script/command-line-options.php?ImageMagick=2khj9jcl1gd12mmiu4lbo9p365#qualityに言及していることに注意してください。
JPEG ...画像形式の場合、品質は1です[提供]最低の画像品質と最高の圧縮...。
私は実際に1を使用して画像を圧縮することをテストしましたが（ただし、使用できない画像が生成されました）、PageSpeedは、画像を「可逆圧縮」することでそのような画像を最適化できることを示しています。ImageMagickを使用して画像を圧縮する方法がわかりません。助言がありますか？
これが私が話していることをテストする簡単な方法です：
performance - .htaccess 競合に関する YSlow と Google Page Speed のアドバイス
よろしくお願いします。
私は YSlow と Google のページ速度を実験してきましたが、どちらも非常に役立つアドバイスを提供し、どちらにも利点があるようには見えませんが、エンティティ タグに関しては、何らかの形で意見が一致しないか、競合しているようです。次のコードは、YSlows の「Configure entity tags (ETags)」ポインターを満たします。
ただし、このコードを配置すると、Google Page Speed は「キャッシュ バリデータを指定する」という次のアドバイスを提供します。別のメンバーAularonは、このコードを使用して Google の要件を満たすことを提案しています。
どちらも別々に機能しますが、どちらのソリューションも両方のバリデータを満たさないので、私の質問は.
- 気にする必要がありますか？
- 両方のバリデーターに適した解決策はありますか?
- どちらのソリューションも本当に大きな影響を与えるのでしょうか?
css - wordpress テンプレートの style.css ファイルを別のフォルダーに移動するにはどうすればよいですか?
Page Speed の推奨事項の 1 つに従いたいと思います: Cookie のないドメインから静的コンテンツを提供します。そのため、 style.cssファイルをデフォルトのテンプレート フォルダーから移動し、Cookie を使用しないドメインに配置する必要があります。
この変更を wordpress に通知するにはどうすればよいですか?
ありがとう。
css - 効率的で非効率的なCSSセレクター（Google、PageSpeedによると...）
WebページのHTMLサイズを縮小しようとしているときに、GoogleとPageSpeed FirefoxアドオンによるCSSセレクターの効率の再調整に関する提案に出くわしました。これにより（ほぼ）変更を再考することができました。
http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
特に、子孫セレクターは、IDまたはCLASS属性を使用してブロック全体（DIVなど）を選択し、そのすべての子要素にCLASS/ID属性がないようにするのに最適です。ただし、ルールを適用するためのトラバーサルの順序がGoogleの説明どおりである場合は、それらを使用しないでください。
子孫セレクターは非効率的です。これは、キーに一致する要素ごとに、ブラウザーがDOMツリーをトラバースし、一致する要素が見つかるかルート要素に到達するまですべての祖先要素を評価する必要があるためです。キーの具体性が低いほど、評価する必要のあるノードの数が多くなります。
ブラウザがこのような非効率的なトラバーサルの順序を使用していることは非常に疑わしいです。確かに、ブラウザは最上位のセレクタコンポーネントに一致する要素のサブツリーのみを処理します。つまり、#foo span {...} すべてのスパンではなく、＃fooより下の要素のみをチェックする必要があります。最近のブラウザコードを見た人は誰でもこれを確認/拒否できますか？
2番目の疑わしい提案は、過度に修飾されたセレクターに関するものです。
IDセレクターは定義上一意です。タグまたはクラス修飾子を含めると、不必要に評価する必要のある冗長な情報が追加されるだけです。
IDセレクターが定義上一意である場合、ブラウザーが冗長な情報をチェックする必要があるのはなぜですか？私は彼らがそうすることを知っています、例えば、
div＃foo {色：黒; } #foo {色：白; }
に黒いテキストが表示されますが<div id=foo>、a）実行しないでください（？W3C参照が必要です）b）要素の単純なO（1）チェックが発生したときに、なぜ著しく遅くなるのかわかりませんタグ名。
現代のブラウザのソースコードと仲良くしている人は、これらの主張に光を当てることができますか？最近のほとんどのサイトは子孫セレクター（SOを含む）を使用しており、それらには明らかな利点があるので、私はそれらを使用したいと思います...
編集：
生成されたページで少し実験しましたが、ブラウザーによる子孫セレクターの処理は確かに哀れなようです。
（省略形）で構成されるページ：
#top a {text-decoration：none;}
＃foo1 a.foo {色：赤;}
＃foo2 a.foo {色：赤;}
[...10000回繰り返し]
<body id = top>
<div>...[50回ネスト]<ahref= foo> bla </a> </ div> [...]
[前の行が10000回繰り返されました]
（基本的に、ルートノードと10000から一致する1つのセレクターまでトラバースするためにそれぞれ50のネストされたdivを持つ10000行）
window.onload()Safari 5では2.2秒、Firefox 3.6.10では10秒弱でロードおよびレンダリング（実行までの時間）します。
クラスセレクターが非適用ルールから削除されると、.fooページはSafari 5では約200秒、Firefox3.6.10では96秒かかります。これは、子孫セレクターの実装がいかに悪いかを示しています（この場合、10000の各ルールは、ルールが失敗する#topまでトラバーサルを引き起こす可能性があります）。
チャイルドセレクターはどのように運賃を支払いますか？#foo > span > div > div > div > div > div a {color: red;}（これも一致することはありませんが、6つの親ノードのトラバーサルを強制します）Safari 5では27秒、Firefox3.6.10では31秒かかります。
結論
子孫セレクターと子セレクターはどちらも、現在主要なブラウザーを嫌っています。速度が気になる場合は、少なくとも非常に一般的なHTMLタグ（a、img、divなど）の場合は、すべてのスタイル付きタグに醜いclass/id属性を追加することをお勧めします。
asp.net - IIS6の「Cookieなしのドメインから静的コンテンツを提供する」ページ速度ルールを尊重するにはどうすればよいですか？
IIS6の「Cookieなしのドメインから静的コンテンツを提供する」ページ速度ルールを尊重するにはどうすればよいですか？