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
2.3 nginxのgzip圧縮
検出ツール:http://gzip.zzbaike.com/
Nginxのgzipwiki:http://wiki.nginx.org/NginxChsHttpGzipModule
code
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
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