Page lag from css

Question

私はテンプレートを持っていますが、ページを下にスクロールすると、実際に遅れているようです。 私は8GBのRAMを搭載した8コアのコンピュータを持っています。自分のサイトが遅いと言っている他のユーザーがいました。私は自分のレイアウトを変更し、すべて正常に動作するので、サーバではないことがわかります。私は私のHTMLレイアウトを変更し、新しいHTML/CSSレイアウト上にすべての私のPHPスクリプトを入れていないラグで正常に動作しますが、私はこのレイアウトを好き...ここ

は、私は問題があると思う私のcssである

html 
{ 
    background: url(../images/background.png); 
    background-color: transparent; 
    overflow-y: auto; 
} 

body { 
    width: 1000px; 
    margin: auto; 
    padding: 0; 
    text-align: center; 
    color: #000000; 
    font-family: verdana; 
    font-size: 0.7em; 
} 

div.container 
{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    margin:auto; 
} 
div.holder 
{ 
    width:990px; 
    background-color:#d7f7f7; 
    height:100%; 
    margin:auto; 
    margin-top:0px; 
    background-image:url('../images/swampertbackground.png'); 
    background-repeat:no-repeat; 
    background-position:bottom center; 
} 
#container{ 
    height: 100%; 
    width: 1000px; 
    background-color: #d7f7f7; 
    position: fixed; 
    border-bottom-left-radius:10px; 
    border-bottom-right-radius:10px; 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
    border-left: solid #25a5a6 2px; 
    border-right: solid #25a5a6 2px; 
    overflow-y: auto; 
    overflow-x: auto; 
} 
div.banner 
{ 
    height:125px; 
    width:700px; 
    display:block; 
    position:absolute; 
    margin-top:2px; 
    margin-left:140px; 
    background-color:#FFF; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border: solid #25a5a6 1px; 
    background-image:url('../images/banner.png'); 
    box-shadow: 3px 3px 3px #4b8384; 
} 

ul , li 
{ 
    margin:0px; 
    padding:0px; 
    list-style:none; 

} 
div.left_navigation 
{ 
    position:absolute; 
    margin-left:5px; 
    margin-top:150px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
    width: 152px; 
} 

div.left_navigation2 
{ 
    position:absolute; 
    margin-left:5px; 
    margin-top:300px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 

div.left_navigation3 
{ 
    position:absolute; 
    margin-left:5px; 
    margin-top:400px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 
div.left_navigation4 
{ 
    position:absolute; 
    margin-left:5px; 
    margin-top:500px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 
div.left_navigation5 
{ 
    position:absolute; 
    margin-left:5px; 
    margin-top:600px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 

div.left_navigation6 
{ 
    position:absolute; 
    margin-left:5px; 
    margin-top:700px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 

li.header 
{ 
    width:150px; 
    height:14px; 
    background-color:#54c0c1; 
    border:1px #188c8d solid; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    background-image:url('../images/header.png'); 
    border-left:2px #188c8d solid; 
    color:#FFFFFF; 
    font-weight:900; 

} 
li.links 
{ 
    width:150px; 
    height:16px; 
    background-color:#c1f9fa; 
    border-bottom:1px #188c8d solid; 
    border-left:2px #188c8d solid; 
    border-right:1px #188c8d solid; 
    color:#074647; 

} 

li.links:hover 
{ 
    background-color:#FFFF00; 
    color:#296584; 
    font-weight:bold; 
    text-shadow: 1px 2px 2px #0096ff; 

} 
li.footer 
{ 
    width:150px; 
    height:9px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
    background-image:url('../images/header.png'); 
    border-bottom:1px #188c8d solid; 
    border-left:2px #188c8d solid; 
    border-right:1px #188c8d solid; 
} 
div.centerboxholder 
{ 
    position:absolute; 
    top:150px; 
    margin-left:165px; 
    width:661px; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 
div.centerbox 
{ 
    position:absolute; 
    width:661px; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 
li.chead 
{ 
    width:660px; 
    height:14px; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    background-image:url('../images/header.png'); 
    border-left:2px #188c8d solid; 
    border-right:1px #188c8d solid; 
    border:1px #188c8d solid; 
    color:#FFFFFF; 
    font-weight:900; 
    box-shadow: 0px 0px 3px #4b8384; 
} 

li.ccontent 
{ 
    width:659px; 
    background-color:#c1f9fa; 
    border-bottom:1px #188c8d solid; 
    border-left:2px #188c8d solid; 
    color:#000; 
    font-size:0.9em; 
    border-right:1px #188c8d solid; 
    box-shadow: 3px 3px 3px #4b8384; 
} 
li.cfoot 
{ 
    width:659px; 
    height:9px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
    background-image:url('../images/header.png'); 
    border-bottom:1px #188c8d solid; 
    border-left:2px #188c8d solid; 
    border-right:1px #188c8d solid; 
    box-shadow: 3px 3px 3px #4b8384; 
} 

div.right_navigation 
{ 
    position:absolute; 
    margin-left:834px; 
    top:150px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 

table 
{ 
    padding:0px; 
    margin:0px; 
    border: 0px; 
    font-size:0.9em; 
    font-weight:bold; 
    color:#000; 
} 

td 
{ 
    border:1px #188c8d solid; 
    width:200px; 
    text-align:center; 
} 

#textfield 
{ 
    color: #000000; 
    font-family: verdana; 
    font-size: 1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border:1px #188c8d solid; 
    border-radius:5px; 
} 
#gender 
{ 
    color: #000000; 
    font-family: verdana; 
    font-size: 1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border:1px #188c8d solid; 
    border-radius:5px; 
    width:110px; 
    padding:0px; 
} 
#gendertop 
{ 
    color: #000000; 
    font-family: verdana; 
    font-size: 1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border:1px #188c8d solid; 

} 
#genderbottom 
{ 
    color: #000000; 
    font-family: verdana; 
    font-size:1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border:1px #188c8d solid; 
} 

#button 
{ 
    background-color:Transperent; 
    color: #000000; 
    font-family: verdana; 
    font-size: 1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border:1px #188c8d solid; 
    width:100px; 
    padding-top:0px; 
    margin:0px; 
    height:16px; 
    padding-bottom:5px; 
} 
#Avatar 
{ 
    color: #000000; 
    font-family: verdana; 
    font-size: 1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border:1px #188c8d solid; 
    border-radius:5px; 
    width:110px; 
} 
#changer 
{ 
    color: #000000; 
    font-family: verdana; 
    font-size: 1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border-bottom:1px #188c8d solid; 


} 

li.topper 
{ 
    height:12px; 
    border:1px #188c8d solid; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
    background-image:url('../images/header.png'); 
} 
li.bottomer 
{ 

    border:1px #188c8d solid; 
    border-bottom-left-radius:5px; 
    border-bottom-right-radius:5px; 
    background-image:url('../images/header.png'); 
    height:12px; 
} 

#button:hover 
{ 
    cursor:pointer; 
} 
a:link { color:#296584; text-decoration:none;display:block;} 
a:visited { color:#296584; text-decoration:none;} 
a:hover { color:#296584; text-decoration:none;text-shadow: 1px 2px 2px #0096ff;} 
a:active {color:#296584; text-decoration:none; background-color:} 

遅れてしまうようなCSSがありますか？

それは私が81個のエラーがこれらの大きなエラーが発生している必要があり http://jigsaw.w3.org/css-validator/validator?uri=pokemontoxic.net&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

ここに言いますか？

Answer 1

border-radiusはプロセス集中型であることが示されています.1つのブラウザで具体的にはFirefoxだと思います。位置：固定では、私はあなたの唯一の2つの問題領域、特にあなたが持っている半径プロパティの数であると見ることができます。それがあなたに気付く問題を引き起こすのに十分であるかどうかは分かりません。 http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

Answer 2

このツールを使用し、著者は大きな要素の境界の半径に問題がありました。 あなたの画像はどれくらい重いかチェックしてください。透明でない場合はpngを使用し、軽い場合はjpgに変換してください。監査]タブで、

F12キーを押した後、[実行]ボタンをクリックしてください：あなたはクロームに確認することができます

一つのことは、未使用のスタイルです。あなたが使ってはいけないものを知ることができます。

あなたは

そして、あなたはgzip圧縮を追加することができ、最後の（thisと例えば）CSSを最小限に抑えることができ

グッドラックあなたの背景には、大きなPNGのようだ、とあなたがしている

Answer 3

私はそう思ういけない：あなたのCSSをストレステストする

Answer 4

絶対位置を使用して、ページの内容を静止した背景の上に置きます。私は、スクロールラグの前に、この原因の問題を見てきました。変更：div.containerで

position:relative; 

とあなたのイメージダウンスケールする前に述べたように：

position:absolute; 

へ。少なくとも、HTMLタグの背景画像をjpegにすることから始めます。