ブログ最適化_html/css_WEB-ITnose

最近、私は自分のブログ http://foofish.net で、主に次の側面からパフォーマンスの最適化を実行しました。基本原則は、書籍「Building High-Performance Web Sites」を参照しています。 。

CDN を使用する

Web サイトのアクセス速度を向上させるには、jquery.min.js、highlight.min.js やその他のファイルなどのすべてのパブリック静的リソースに CDN を使用します。

静的ファイルを結合する

ウェブサイト全体には 10 個以上の CSS ファイルと js ファイルがあり、これらのファイルをすべてブラウザーが読み込むのを待つと、比較的ネットワーク環境の場合、3 秒以上かかります。経験はさらに悪いかもしれません。そのため、デプロイ時には複数の CSS ファイルを 1 つにマージし、JS を 1 つのファイルにマージします。使用するツールは Django-Compressor です。合併後、Google の PageSpeed ツールを使用した Web サイトのスコアは 83 でした。

静的ファイルを圧縮する

ファイルがマージされた後、合計サイズは変化していないため、最適化の余地がまだあります。なぜなら、このような文字で構成される静的ファイルの圧縮率は非常に高く、通常は次のように圧縮できます。元のサイズの 3 分の 1。圧縮にはNginxのgizp機能を使用しています

rreee

圧縮後はPageSpeedスコアが95点まで急上昇しました。

ブラウザのキャッシュを使用する

サーバーが静的リソースの有効期限を指定しない場合、ブラウザは毎回サーバーにリクエストを送信して、これらの静的リソースが更新されたかどうかを確認する必要があります。更新がある場合は、完了します。コンテンツはブラウザに返されます。更新がない場合は、ブラウザに 304 を直接返すように指示し、ローカル キャッシュを直接使用するように指示します。更新がない場合は、ブラウザにリクエストを送信しないよう要求する手順があります。HTTP キャッシュについては、ブラウザのローカル キャッシュ コピーを直接読み取るだけで、別のリクエストを保存できます。 。 nginx の設定:

http {    gzip on;    gzip_disable "msie6";    gzip_vary on;    gzip_proxied any;    gzip_comp_level 6;    gzip_buffers 4 8k;    gzip_http_version 1.1;    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;    ..... 其他配置}