1

1 つの問題を除いて完了した画像ギャラリーがあります。ギャラリー ページのスクロールはかなりラグがあり、遅いです。最初はこのパソコンかブラウザだけかと思ったのですが、10倍の画像があるfacebookギャラリーでも遅くはありません。

ページがロードされた後にこれ以上 JavaScript を実行する必要はないので、問題を引き起こしているのが私の jQuery であるとは想像できませんが、そうである可能性があります。いつでも JavaScript が実行されている場合、Google の開発者ツール インスペクターまたは Firefox の firebug を使用して通知する方法はありますか? ブレークポイントを設定してコードを実行すると、最終的に停止し、それ以上関数にステップインできなくなります。したがって、jQueryではないと思います。

ネットワークログを確認すると、2.37MBの画像とアセットしか取り込んでいないため (これはキャッシュをクリアした後なので、すべての画像がまったく新しいものとして読み込まれます)、純粋な画像サイズではないと思います。

最後に、タスク マネージャーの CPU とメモリの使用量も確認しましたが、そのページにいるときに急増しないので、無限ループやメモリの問題はないと思います。

スクロールが遅いページは次のとおりです:ギャラリー

4

1 に答える 1

1

EDIT2: 画像スプライトを実装することもできますが、この状況ではお勧めしません。

http://www.w3schools.com/css/css_image_sprites.asp

または、Photoshop を使用して各画像の画像最適化を向上させることもできます (まだ行っていない場合は、これを行うことをお勧めします)... またはhttp://kraken.io/のようなオンライン画像オプティマイザ


編集:すべての Javascript が外部ファイルとして参照されていることを確認し、埋め込まれた JavaScript を削除することで、おそらく速度を大幅に向上させることができます。すべてのJavaScriptを一番上から直前に移動します...

</body>

そして、可能であれば、すべての JavaScript ファイルをできるだけ少数にまとめて縮小します。


...からのいくつかの可能な改善http://analyze.websiteoptimization.com/

分析と推奨事項

TOTAL_HTML - おめでとう、このページの HTML ファイルの総数 (メインの HTML ファイルを含む) は 1 で、ほとんどのブラウザーがマルチスレッド化できます。HTTP リクエストを最小限に抑えることは、Web サイトを最適化するための鍵です。

TOTAL_OBJECTS - 警告!このページのオブジェクトの総数は 41 で、その数によって Web ページの遅延が支配的になります。これをより妥当な数に減らすことを検討してください。ページあたりのオブジェクト数が 20 を超えると、実際のオブジェクトの処理によるオーバーヘッド (記述時間と待機時間) が、ページ全体のレイテンシの 80% 以上を占めます。オブジェクト オーバーヘッドが Web ページ レイテンシを支配する方法の詳細については、図 II-3: オブジェクト オーバーヘッドが Web ページ レイテンシを支配することを示すレイテンシ コンポーネントの相対分布を参照してください。外部オブジェクトを結合、改良、および最適化します。グラフィックのロールオーバーを CSS のロールオーバーに置き換えて、表示を高速化し、HTTP リクエストを最小限に抑えます。CSS スプライトを使用して、装飾的な画像を統合することを検討してください。色付きの背景、枠線、または、グラフィック技術の代わりに間隔を空けることで、HTTP リクエストを減らすことができます。グラフィック テキスト ヘッダーを CSS テキスト ヘッダーに置き換えて、HTTP リクエストをさらに削減します。最後に、異なるホスト名または CDN を使用して並列ダウンロードを最適化し、オブジェクトのオーバーヘッドを削減することを検討してください。

TOTAL_IMAGES - 警告!このページの画像の総数は 32 です。これをより適切な数に減らすことを検討してください。グラフィックスの結合、置換、および最適化をお勧めします。グラフィック ロールオーバー メニューを CSS ロールオーバー メニューに置き換えて、表示を高速化し、HTTP リクエストを最小限に抑えます。CSS スプライトを使用して、装飾的な画像を統合することを検討してください。グラフィック手法の代わりに、色付きの背景、境界線、間隔などの CSS 手法を使用して、HTTP 要求を減らします。グラフィック テキスト ヘッダーを CSS テキスト ヘッダーに置き換えて、HTTP リクエストをさらに削減します。最後に、異なるホスト名を使用して並列ダウンロードを最適化し、オブジェクトのオーバーヘッドを削減することを検討してください。

TOTAL_CSS - 注意。このページの外部 CSS ファイルの総数は 3 です。これをより適切な数に減らすことを検討してください。外部 CSS ファイルは HTML ドキュメントの HEAD にある必要があるため、BODY コンテンツが表示される前に最初に読み込む必要があります。CSS ファイルは後続のリクエストでキャッシュされますが、ページの最初の表示が遅くなります。外部 CSS ファイルを結合、改良、最適化します。理想的には、ページに 1 つ (またはトラフィックの多いページの場合は CSS を埋め込むことも) あるべきです。省略形のプロパティ、グループ化を使用して CSS ファイルを最適化し、縮小および GZIP 圧縮してフットプリントを削減できます。プログレッシブ表示を有効にするには、必ず CSS ファイルを HEAD に配置し、JavaScript ファイルを BODY の最後に配置してください。

TOTAL_SIZE - 警告!このページの合計サイズは 2987624 バイトで、56Kbps モデムでは 603.63 秒でロードされます。56K 接続で 20 秒未満の応答時間を達成するには、合計ページ サイズを 100K 未満に減らすことを検討してください。100K を超えるページは、フィードバックがあっても、56Kbps でほとんどの注意しきい値を超えています。ウェブサイト最適化の秘密を使用してサイトを最適化することを検討するか、サイトを高速化するか、最適化サービスについてお問い合わせください。TOTAL_SCRIPT - 注意。このページの外部スクリプト ファイルの総数は 5 です。これを 1 つまたは 2 つに減らすことを検討してください。結合、リファクタリング、縮小して JavaScript ファイルを最適化します。理想的には、ページに 1 つ (またはトラフィックの多いページ用の埋め込みスクリプト) を配置する必要があります。HTTP 要求を最小限に抑えるために、サーバーで JavaScript ファイルを結合することを検討してください。

HTML_SIZE - おめでとうございます。この HTML ファイルの合計サイズは 1472 バイトで、50K 未満です。画像の HEIGHT と WIDTH を指定すると、このサイズにより、HTML は 10 秒未満でコンテンツを表示できます。これは、ユーザーがフィードバックなしでページが表示されるのを待つ平均時間です。IMAGES_SIZE - 警告!画像の合計サイズは 2900543 バイトで、100K を超えています。グラフィック形式を切り替えて、ファイル サイズを小さくすることを検討してください (たとえば、JPEG から PNG へ)。最後に、グラフィック技法を CSS 技法に置き換えて、色付きの境界線、背景、および間隔を作成します。SCRIPT_SIZE - 警告! 外部スクリプトの合計サイズは 65770 バイトで、20K を超えています。JavaScript のサイズを最適化したり、それらを組み合わせたり、ドキュメントの HEAD に配置されたスクリプトに適切な HTTP 圧縮を使用します。JavaScript ベースのメニューを CSS メニューに置き換えて、JavaScript の使用を最小限に抑えたり、まったくなくしたりすることができます。

CSS_SIZE - 注意。外部 CSS の合計サイズは 19839 バイトで、8K を超え 20K 未満です。外部ファイルの場合、1 つの高速 TCP-IP パケット (またはそのほぼ倍数) に収まるように、1160 バイト未満に保つことが理想的です。CSS を最適化し、機能を削除して、これをより適切なサイズに縮小することを検討してください。MULTIM_SIZE - おめでとうございます。すべての外部マルチメディア ファイルの合計サイズは 0 バイトで、10K 未満です。

于 2012-08-01T17:26:53.377 に答える