Webページのロード速度を向上させるにはどうすればいいですか?

2092 ワード

まず、良いサーバーがあるはずです.これは根本的な要素です.その上で、Webページのロード速度を向上させるにはどうすればいいのでしょうか.
1 Webページのロード速度をテストするツールを選択
Firefoxのプラグインpage speed
http://code.google.com/intl/zh-CN/speed/page-speed/
2,page speedの推奨操作によると、以下のように私のいくつかのまとめ2.1まずrailsのページキャッシュcachesをします.page :index
2.2ブラウザキャッシュnginxを使用した設定Yes
       location ~ .*\.(gif|jpg|jpeg|png|bmp)$
       {
               expires 30d;
       }
       location ~ .*\.(js|css)?$
       {
               expires 1h;
       }

2.3 nginxのgzip圧縮
検出ツール:http://gzip.zzbaike.com/
Nginxのgzipwiki:http://wiki.nginx.org/NginxChsHttpGzipModule
code
   gzip  on;
   gzip_min_length  1000;
   gzip_buffers     4 8k;
   gzip_types       text/plain application/x-javascript text/css  application/xml;

2.4大図の遅延ロード
参照方法:http://www.cnblogs.com/xingzhi/archive/2011/06/01/2067272.html
まず画像のsrc値を_という値に置きます.srcの値には入っていますが、その画像領域に実行すると、src賦値src
まず2.5のテクノロジーを使用して、画像をプリロードできます.
2.5ピクチャのプリロード技術
まずImageオブジェクトを使用し、画像loaderをメモリに追加し、使用する必要があるときにブラウザがメモリから探します.具体的な方法は以下の通りです.
    function preloader(){
        var i = 0;
        var imageObj = new Image();
        var images = new Array();
        images[0] = "/images/01.png";
        images[1] = "/images/02.png";
        images[2] = "/images/03.png";
        images[3] = "/images/04.png";
        for(i=0; i <= 3; i++){
              imageObj.src=images[i];
        }
    }
そしてload

または
$(window).ready(function(){
});
画像のロードが完了したと判断するにはどうすればいいですか?
2つのプロパティを同時に使用
img = new Image();
if(img.complete){
do...
}
img.onload = function(){
do...
}
2.6 webサイト制限速度テストツール
Fiddler速度制限試験ツール
http://www.fiddler2.com(今はもうダウンロードできないようです)
さらに、
バージョン3.6のfirefox throttleで使用できます
バージョン3.6のfirefox throttleでは、2.7でcssとjsコードbundle-fuを圧縮できます.https://github.com/timcharper/bundle-fu