デザインとアクセスを損なうことなく、ウェブサイトの速度をどのように向上させますか？
デザインとアクセシビリティを犠牲にすることなく、ウェブサイトの読み込み速度をどのように向上させますか？ファイル圧縮、CDN、Gzip？そのための最良のツールは何ですか？
たとえば、Googleはデザインを損なうことなくサイトを最適化しました。また、多くのWebサイトでは、圧縮により画像の純度が低下する可能性があります。
デザインやアクセシビリティを損なうことなく速度を上げる方法がありますか、それともベストプラクティスではありませんか？
注：あいまいなので申し訳ありませんが、この質問を他にどのように表現するかわかりません。
Gzipはおそらくあなたができる最も抜本的なものです。
csおよびjsファイルをすべて最小化することは役立ちます。不要なjsライブラリまたはcssをロードしていないことを確認してください。ほとんどのユーザーはこれらをキャッシュするので、最初のページの後はそれほど重要ではありません。
それ以外は、再解析する必要のないリクエストごとにページを再解析しないなど、キャッシュが適切に機能していることを確認してください。とにかくね
Yahooのほとんどすべての ベストプラクティス は、サイトのデザインに一切手を加えることなく実装できます。すべてのCSSを1つのファイルに結合し、すべてのJSを1つのファイルに結合することにより、HTTP要求を最小限に抑えます。 Gzipを使用します。適切なExpiresヘッダーを設定します。
これらの規則は設計に影響を与える可能性があります。
- DOM要素の数を減らす-見る価値がありますが、デザインを同じに保ちながらHTMLサイズを減らすことができるはずです。
- iframeの数を最小限に抑えます-とにかくできる限りこれらを避けるのが最善です。
- 画像の最適化-可能な限り画像を最適化する必要がありますが、デザインを犠牲にして無理をしないでください。
CSS/JSを縮小するだけでなく、できる限り各形式の1つのファイルに結合します。ダウンロード数が少ないほど良い。これが不可能な場合は、同じサーバーまたはCDNでホストされている他のドメイン名に移動します。
前述のように、Gzipは驚くほど強力です。
JSをドキュメントの一番下に移動し、すべてのCSSがheadにあることを確認します。インラインJSとCSSを避けてください。
すべてから地獄をキャッシュし、ExpiresヘッダーとETagを設定します。
ページ速度。これは、FireBug用のGoogleのプラグインです。サイトで実行すると、どこを改善する必要があるかがわかります。 Yahooのベストプラクティスによって与えられたアドバイスにほぼ従っていますが、改善する必要がある場所を教えてくれます。
画像サイズの縮小で最大の速度改善が見られました。これを実現するには、Photoshopで「Webおよびデバイス用に保存」またはを使用します。画像を削減できるもう1つの優れたMacプログラムは ImageOptim です。
Yahoo Best Practices（YBP）に沿って、 YSlow Firefoxアドオン をご覧ください。 YBPに関してサイトがどのように行っているかを簡単に説明します。
速度の最適化に関する詳細な記事を書きましたが、これは役に立つかもしれません。
http://www.elevatelocal.co.uk/blog/17-rules-of-speed-optimisation-0501511
JavaScript、CSS、画像などの静的ファイルにはCDNを使用します。 RackspaceCloudとAmazonの両方にはかなり安価なものがあります。
- HTTPリクエストの数を最小限に減らします-例可能な場所でイメージスプライトを使用していることを確認してください。各ページに複数のJavaScriptファイルまたはCSSファイルを読み込んでいますか？それらを1つにまとめる
- 排除できるリダイレクトはありますか？
- ドキュメントの上部にスタイルシートを、下部にjavascriptをロードします
- サイトが大きい場合は、最大のユーザーベースに地理的に近いサーバーを提供します。
ASP.NETでキャッシングを使用します。これにより、データベース呼び出し、関数呼び出し、およびページの重複を回避することで時間を節約できます。