SOユーザーから、JavaScript、CSS、画像、Flashファイルなどの静的ファイルをWebサイトでより速く提供するためのヒントをいくつか入手したいと思います。役立つヒントはありますか?
3 に答える
私があなたに与えることができる最高のヒントは次のとおりです。わかりやすいヒントが満載のSteveSounderの本HighPerformanceWebSitesを購入してください。静止画像の場合:コンテンツ配信ネットワーク(CDN)を使用します。つまり、静的コンテンツを別のサーバー、別の(サブ)ドメインに配置するだけで、静的コンテンツに対して最高のパフォーマンスが得られます。
利点は次のとおりです。Cookieが送受信されない(これは多くのオーバーヘッドを説明します!)、他のHTTPオーバーヘッドがない、良好なタイムアウト、外部CDNを使用する場合の安定したパフォーマンス、および独自のサーバーのトラフィックが大幅に減少します。多くの商用(Amazon S3など)だけでなく、無料のCDNサプライヤーもあります。
重要性は低いが、それでも価値のあるヒント:
- JavaScriptを縮小します(最初の読み込みのみを高速化します)。
- JavaScriptとCSSファイルを1つに結合します。
- (小さい)画像にはCSSスプライトを使用します。
注:StackOverflowは、これらすべてのヒントに従い、 YSlowをダウンロードして独自のWebサイトをテストする優れたWebサイトの例です。
静的コンテンツには、コンテンツ配信ネットワーク(CDN)を使用します。
または、サブドメイン、つまりgfx.yoursite.comを作成して、すべての静的コンテンツをホストすることもできます。Cookieを無効にし、積極的なキャッシュを使用してサイトのパフォーマンスを最適化します。
また、CSSスプライトを調べて、一般的なグラフィックのパフォーマンスを向上させることもできます。
ページ内の外部リソースの数を減らすために、base64エンコーディングを使用してCSSファイルに小さな画像を直接埋め込むこともできます。これにより、DNSルックアップの数が減り、パフォーマンスが向上します。ただし、それはかなりの複雑さを追加し、メンテナンスはすぐに悪夢になります。これは、画像をbase64文字列に変換するのに役立つ便利なツールですが、注意が必要です。:)
http://developer.yahoo.com/yslow/およびhttp://developer.yahoo.com/performance/rules.htmlでYahooの提案を確認してください。いくつかの一般的なポイント:
- 静的ファイルにCDNを使用する(およびCDNドメインでCookieを無効にする)
- 画像サイズが最適化されていることを確認してください
- JSファイルを縮小する
- HTMLの下部にSCRIPTタグを配置し、可能な場合は「defer =」属性を使用します(これにより、ブラウザによるページの読み込みが高速化されます)