35

現在、私のサイトにはほとんど何も含まれていませんが、ロードには数千年かかります。私の仮定は、ページにかなりの数の画像とJavaScriptがあるためだと思います。

長いロード時間を引き起こしている原因をテストする方法はありますか？

4

17 に答える 17

50

ここでページをテストしますPageSpeedInsights-GoogleDevelopersを使用すると、サイトを高速化するためのすべての提案が表示されます。

于 2012-12-21T10:31:38.227 に答える
28

サイトの速度を上げるために従うことができるいくつかの基本的なことは次のとおりです。

  1. コンテンツの読み込み後：最初は、JavaScriptファイル、画像、データなどのすべてのものを読み込まないでください。ユーザーが最初に表示するコンテンツのフローを作成し、その順序でロードします。これにより、他のコンテンツが読み込まれている間にサイトの読み込まれた部分を確認できるため、ユーザーが感じる待ち時間が短縮されます。
  2. コンテンツのプリロード：ユーザーのアイドル時間のメリット。Ajaxまたは画像キャッシュのトリックを使用してバックグラウンドにコンテンツをロードし、ユーザーがページがまだ「機能している」ことに気付かないようにします。ファイルはすでにブラウザのキャッシュにプリロードされているため、ユーザーが次のページまたはビューをロードすると、データがすでにローカルに保存されているため、非常に高速に見えます。（要するに、投稿およびプリロードされたコンテンツの背後にある主なアイデアは、ユーザーが最初に欲しいものを示し、次にそのコンテンツを表示する必要がある前にバックグラウンドで他のコンテンツをロードすることです。JavaScriptまたはjQueryAjaxを使用してコンテンツをロードします。それらをキャッシュします。
  3. 画像の最適化：
    1. 人間の目では理解できない程度に画像の品質を低下させます。ファイルサイズを大幅に縮小し、ダウンロード/読み込み速度を大幅に向上させるために、画質を少し妥協することができます。
    2. ブラウザを使用して画像を縮小しないでください。巨大な画像を送信せず、CSSの幅と高さを使用してブラウザを大幅に小さいサイズに拡大縮小します。完全に引き伸ばされた背景画像のようにスケーリングを使用する場合でも、画像を手動でほぼ正しいサイズにサイズ変更します。
    3. 画像のCSS置換を使用します。
    4. CSSスプライトを使用する：小さな画像を1つの画像に結合し、CSSを使用して適切な部分を表示します。
    5. 画像をキャッシュ可能にします。
  4. CSSを一番上に保つ：CSSを一番上に保つと、ページの読み込みが速くなったように感じられます。CSSは、コンテンツの一部が読み込まれるときに適用されます。
  5. JavaScriptを下部に保持：JavaScriptはDOM要素を操作するために使用されるため、最初にDOM要素をロードして、ページが最初にレンダリングされるようにしてから、スクリプトをロードします。JavaScriptは並列ダウンロードもブロックします。
  6. JavaScriptとCSSを縮小する：CSSとJavaScriptを縮小すると、元のコピーの最大50〜30％のサイズに縮小できます。
  7. 外部CSSおよびJavaScriptを使用する：.cssおよび.jsファイルはキャッシュ可能であるため、外部CSSおよびJavaScriptファイルを使用します。
  8. ドメイン間でコンポーネントをexample.com分割：コンポーネントをtocom1.example.comや。のように2つまたは3つのドメインに分割しますcom2.example.com。これにより、並列ダウンロードを最大化できます。2つから4つを超えるドメインを保持しないでください。そうしないと、DNSルックアップのペナルティが発生します。
于 2012-12-31T03:57:22.780 に答える
24

Webページをテストできるリストは次のとおりです。

  1. PageSpeedInsights-Googleデベロッパー
  2. YSlow
  3. Webページテスト
  4. Pingdomツール
  5. GTmetrix
  6. iWebTool
  7. APMクラウドモニター

また、ページを高速化するために使用できます。

  1. Amazon CloudFront
  2. CloudFlare-無料プランがあります

1.画像を最適化する

画像に適切なファイル形式をいつ使用するかを知ってください。別のファイル形式に変更すると、画像のファイルサイズを大幅に減らすことができます。

  • GIF-ロゴのように色が少ない画像に最適です。
  • JPEG-写真のように色やディテールがたくさんある画像に最適です。
  • PNG-高品質の透明な画像が必要な場合に選択します。

画像の最適化について詳しくは、次のリソースをご覧ください。

画像サイズを小さくするには、TinyPNGをお勧めします

2.画像​​を縮小しないでください

HTMLで要素の属性widthとheight属性を設定できるという理由だけで、必要以上に大きな画像を使用することは避けてください。<img>

* 100x100pxの画像が必要で、700x700pxの画像がある場合は、Photoshopなどの画像エディタまたはこれらのWebベースの画像エディタのいずれかを使用して、画像のサイズを必要なサイズに変更します。これにより、画像のファイルサイズが小さくなり、ページの読み込み時間が短縮されます。

3.コンテンツを圧縮して最適化する

Webサイトのコンテンツを圧縮するタスクは、読み込み時間の短縮に大きな影響を与える可能性があります。HTTP圧縮を使用する場合、すべてのWebページデータは、多くの異なるファイルでいっぱいのリクエストではなく、1つの小さなファイルで送信されます。詳細については、HTTP圧縮に関するこのウィキペディアの記事を参照してください。

また、JavaScriptファイルとCSSファイルを組み合わせてソースコードを縮小することにより、それらを最適化および圧縮することもできます。

4.スタイルシート参照を一番上に置く

スタイルシートの参照を<head>HTMLドキュメントのに移動すると、ページでスタイルを段階的にレンダリングできるため、ページの読み込みが速くなったように感じることができます。さらに、それがW3C標準であることも問題ありません。

5.スクリプト参照を下部に配置します

ブラウザは、ホスト名ごとに同時に2つのコンポーネントのみをダウンロードできます。スクリプトを上部に追加すると、ページの最初の読み込み時にその下にあるものがすべてブロックされます。これにより、ページの読み込みが遅くなっているように感じられます。

この状況を回避するには、スクリプト参照をHTMLドキュメントのできるだけ下、できれば終了<body>タグの直前に配置します。

6.JavaScriptとCSSを外部ファイルに配置します

JavaScriptとCSSがHTMLドキュメントに直接含まれている場合、HTMLドキュメントが要求されるたびにダウンロードされます。したがって、これはブラウザのキャッシュを利用せず、HTMLドキュメントのサイズを大きくします。

CSSとJavaScriptは常に外部ファイルに配置してください。これはベストプラクティスであり、サイトの保守と更新が容易になります。

7.HTTPリクエストを最小限に抑える

新しいWebページにアクセスすると、ページの読み込み時間のほとんどは、そのページのコンポーネント（画像、スタイルシート、スクリプトなど）のダウンロードに費やされます。

Webページが行う必要のあるリクエストの数を最小限に抑えることで、Webページの読み込みが速くなります。画像に対するHTTPリクエストを減らすためにできることのひとつは、CSSスプライトを使用して複数の画像を結合することです。

複数のスタイルシートとJavaScriptライブラリがある場合は、それらを組み合わせてHTTPリクエストの数を減らすことを検討してください。

8.Webページをキャッシュします

Webページを動的に生成するコンテンツ管理システムを使用する場合は、Webページとデータベースクエリを静的にキャッシュして、サーバーへの負担を軽減し、ページのレンダリング時間を短縮する必要があります。

9.301リダイレクトを減らす

301リダイレクトが使用されるたびに、ブラウザは新しいURLに強制され、ページの読み込み時間が長くなります。可能であれば、301リダイレクトの使用は避けてください。

于 2012-12-30T21:28:29.283 に答える
8

ここでの他の回答は、パフォーマンスデバッグツールとロード時間を改善するためのヒントを詳しく説明しているので、繰り返しません。

あなたの主な問題は、訪問者にホームページを表示する前に、サイト内のすべてのものを完全にロードすることです。これは不要であり、サイトの読み込みが遅いという認識の主な原因です。

できるだけプリロードしたいので、訪問者がサイトを閲覧すると、すべてが瞬時にロードされているように見えます。ただし、実行しているのは、各セクションの小さなロード時間を1つの大きな先行ロード時間に移動することだけです。訪問者がサイトの1つの領域のみを閲覧する場合でも、訪問したセクションだけでなく、サイト全体の読み込み時間に対して料金を支払っています。

短い読み込み時間を実装する最も簡単な方法は、各セクションを独自のページに分割し、そのページに表示されているものだけを読み込むことです。JavascriptやCSSなどのリソースは通常、かなりうまくキャッシュされるため、通常、ロード時間がホームページ以外に影響を与えることを心配する必要はありません。

または、サイト全体を1ページにまとめたい場合は、ホームページに必要なものがすべて読み込まれ、進行状況バーが非表示になったら、Javascriptを使用してさまざまなサブセクションをページに動的に追加する必要があります。はい、訪問者がサブセクションをすばやくクリックすると、そのコンテンツが読み込まれていることがわかりますが、連絡先セクションにのみ関心がある場合は、必要な情報をより早く取得できます。他のセクションがまだ完全にロードされていないことに気付くことさえありません。

それと、巨大な背景画像を使用しないでください。低解像度の画像をアップスケールして画面全体に表示し、JPEG圧縮レベルを上げてファイルサイズを小さくしてもかまいません。これは背景画像であり、焦点とすべきではありません。ポートフォリオに高解像度の画像を残してください。:)

于 2012-12-31T12:19:50.860 に答える
7

Chromeには、サイトの読み込み時間やダウンロードする必要のあるすべてのものを表示できるコンソールがあります。

于 2012-12-21T10:30:21.243 に答える
7

FireBugプラグインをFireFoxにインストールしてから、FireBugで[NET]タブを開いた状態でサイトをロードします。各リソースの読み込みにかかる時間を確認できます。

読み込みにそれぞれ20秒以上かかる2つの背景画像があるようです。

アップデート

私がこれを投稿して以来、世界はかなり進んでいます。Chromeには、ネットワーク、パフォーマンス、メモリアナライザーに加えて、さまざまなデバイスやネットワーク速度などをシミュレートできる[監査]タブが用意されています。灯台プラグインhttps://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=enもかなり良いです。

于 2012-12-21T10:31:45.913 に答える
5

ロード時間を改善するための提案はほとんどありません。

  1. 表示されているのは1つだけですが、3つの背景画像を使用しています。他の2つを削除するか、後でロードします。
  2. PNG画像をJPEGに変換し、サイズを節約できるかどうかを確認します。
  3. サーバーからロードするのではなく、cdnリポジトリから標準のJavaScriptファイルをロードします。ファイルがキャッシュに見つかる可能性があります。
  4. まだ行っていない場合は、JavaScriptファイルを連結してから縮小します。
于 2012-12-21T10:39:06.817 に答える
5

だから：はい、あなたは本当にあなたのサイトを修正する必要があります。人々はサイト、特に個人/専門サイトをロードするのを待つことはありません。私があなたのサイトで見ている最大のものは、ほとんど存在しない画像圧縮/最適化です。ここにいくつかのガイドラインがあります：

写真やグラデーションにはJPEGを使用してください。線画やテキストにはPNG（またはGIF）を使用します。これは、各タイプの画像に使用される圧縮アルゴリズムと関係があります。

通常、80％のJPEG圧縮率は、すべてのサムネイル/ギャラリーショットを含むWeb上のほとんどの画像に適しています。たとえば、このJPEGは次のとおりです。http ： //www.jj-triggs.com/images/page4_img3.jpgは25kです。25k !!! それは巨大です、そしてあなたはそれらの15のようなものをページに持っています！80％の圧縮率（画像サイズ7k）で、いくつかの圧縮アーティファクトを検出できますが、私はプロのデザイナーでもあり、それを探しています。85％でも、画像サイズは約8kに低下します。

背景画像も同じです。bg_img1.jpgは約900kでクロックインしています。bg_img2.jpgは1.5mbです。狂ってる！特に、街並みはすでに部分的にぼやけているため、JPEG圧縮が完全に欠如していることを保証する詳細はありません。bg_img2.jpgの圧縮を60％にノックし、ファイルサイズを200k未満にしましたが、品質に検出可能な違いはほとんどありません：https ://d3vv6lp55qjaqc.cloudfront.net/items/1y3V2B2r0S1W0T1i081n/cityscape-compressed.jpg?X- CloudApp-Visitor-Id = 695722fcc5cecec10f09e16181dbdf5f＆v=3cf18008。

画像がコンテンツ/サイトの焦点である場合、画像が大きくて圧縮率が低くても問題ない場合があります。ただし、背景やギャラリーにあるこれらの画像は重要ではありません。これらは背景画像です。それらは研究されることを意図されていません。ギャラリーの画像も同じです。次のクリックで何が得られるかをユーザーに知らせているだけです。

選択的なJPEG圧縮を使用します。Adobe Fireworksはこれを提供します—一部が鮮明で焦点が合っているが、残りがぼやけているかコンテンツで覆われる大きな画像がある場合、より高いJPEG圧縮率（たとえば85％）が必要な領域を選択できます）画像の残りの部分を50％程度まで下げます。たとえば、選択的なJPEG選択を使用したCityscape https://d3vv6lp55qjaqc.cloudfront.net/items/2V1I1o0B1H0v2O141w1R/cityscape-compressed-selective.jpg?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&v= 焦点が合っている部分は75％です。残りはスムージングがオンになっている状態で50％です。

テキストにグラフィックを使用しないでください。TypeKit、Google Webfonts、およびCSSを介した合理的な活版印刷制御の今日では、それはほとんど必要ありません。

転送する必要のあるファイルの数を減らします。各画像、JavaScriptファイル、CSSファイルなどには、ダウンロード時間に加えて、独自のHTTPリクエストが必要です。

画像圧縮とダウンロード時間に関するいくつかの記事は次のとおりです。

于 2013-01-01T00:05:23.287 に答える
5

長い返事ですが...しかし、サイトのパフォーマンスを改善するためのいくつかの基本的なアプローチに十分な詳細を提供していると思います。次の回答は、ほとんどすべてのサイトに当てはまります。以下に示す特定の例は、現在のバージョンのhttp://www.jj-triggs.com/のものである可能性があります。

以下のポイントでは、FirefoxでのFirebugアドオンのNet Panelの使用法について言及していますが、他のブラウザにも、前述したのとほぼ同じアプローチの同様のツールがあります。

FirefoxにFirebugをインストールし、Webサイトを開きます。サイトでFirebugを有効にします（F12）。Firebugのネットパネルがまだ有効になっていない場合は有効にします。

あなたのサイト：http ：//www.jj-triggs.com/- 私のシステムでは繰り返し訪問するのに5〜6秒かかります（この回答では、これを改善するためのアプローチについては触れていません）-しかし、最初の訪問には約60秒かかりました秒。（以下のポイントは、それを改善する方法に焦点を当てています）下記のポイントのほとんどは、最初のロード（またはフレッシュリロード）でサイトを改善します

すでにページをロードした後、新しいロードをテストするには、Ctrl + F5、Ctrl + R、Ctrl + Shift + Rを使用できます（ブラウザーによって異なります）。ページの読み込み中にFirebugのネットパネルを監視します。

サイトにかかる時間は、以下によって異なります。

- The speed of the site host server (seems OK, nothing much to do for now)

- Visitor's connection speed (cannot do anything for it)

- Everything else (where you need to fix many things).
  The important approaches to resolve them are listed below:
    - Serve the user files with less size but same content:
        - Approach:
            Enable gzip on files which contain text contents (*.js, *.css, *.html etc) (currently your site does not use gzip)
        - How to identify:
            In Net panel, expand the HTTP request details for a file, in the Headers tab of the expanded details, Content-Encoding field should show the value gzip.
        - Solution:
            It might need you to modify .htaccess file (or some other approach based on the server)
            Search on Google or StackOverflow to see how to enable it.

        - Approach:
            Use minified JS and CSS files
        - How to identify:
            In Net panel, expand the HTTP request details for a JS/CSS file, in the Response tab of the expanded details, the code should be a minified version (no whitespace characters) of the file.
        - Solution:
            Use either the minified JS/CSS files as provided by the library.
            Or you can minify them yourself by using tools like "JSMin" or "YUI (CSS and JS) Compressor"

    - Approach:
        - Serve the user optimum images, i.e., less size with good enough quality
    - How to identify:
        - In Net Panel, go to Images tab > Sort by size
        - Generally the size of the images should be ... 1kb to 30kb for simple icons and logos and 20kb to 250kb for photos and large backgrounds.
    - Solution:
        - Compress the large images with softwares like GIMP (free) or Photoshop.

    - Approach:
        - Load the files from a CDN if possible
        - eg: Load jQuery, jQuery UI etc from popular but still free CDN
        - Advantage even for first visit: If the user has visited any other site which refers to the same path, it would be fetched from the cache itself
    - How to identify:
        - Check the Net panel's "Domain" column for popular libraries like jQuery, jQuery UI etc.
          They should be getting loaded from a popular CDN such as Google.
    - Solution:
        - Include JS and CSS from (Google) CDN if available.

    - Approach:
        - Load CSS before JS
        - It may not necessarily help much with faster loading completion,
          but it usually gives a faster feeling of load because your CSS gets applied as soon as possible.
    - How to identify:
        - Check the Timeline column in Net panel. Usually CSS files should be the getting loaded before JS.
    - Solution:
        - Move the <script> tags towards the bottom of the page.

    - Approach:
        - Wherever possible, load third-party components like Google Maps dynamically after the page load has completed
    - How to identify:
        - Check the Timeline column in Net panel. The 3rd-party components should usually begin loading after almost all the other code for the site has loaded.
    - Solution:
        - The solution would depend on the third-party component and might be a bit tricky.
          Generally, loading the 3rd-party JavaScript after a small delay (using window.setTimeout and code to dynamically add script tags) would provide you better performance compared to loading the 3rd-party JS using plain HTML.

これらの問題を修正すると、（http://www.jj-triggs.com/）の最初の読み込み時間が現在の10〜30％に短縮される可能性があると思います。

于 2013-01-01T00:50:27.527 に答える
4

Firefox用のYSlow プラグインを使用します。さまざまなパフォーマンスバケットに関する詳細な分析が提供されます。

于 2012-12-21T10:47:12.213 に答える
4

あなたはあなたがあなたのサイトの毎日のパフォーマンスをチェックすることができるこのサイトとpingdomを試すことができます

于 2013-01-04T13:27:59.623 に答える
3

ここでもチェックできます： テストサイト

このテストは、画像が読み込み時間に大きく貢献していることを示しています。特に、最適化されておらず、重量が1.4MBのように見える背景画像

これを研究し、リクエストの数を減らし、画像を縮小し、読み込みを延期すると、読み込み時間を短縮し始める必要があります

免責事項：私は上記の無料ツールに参加している開発者の1人です

于 2012-12-21T10:45:13.567 に答える
3

このページの主な問題は、大きな画像bg_img1.jpg、bg_img2.jpg、bg_img3.jpgです。サイズは0.91MBから1.45MBです。

于 2013-01-05T14:58:24.870 に答える
1

誰もがネットワークトラフィックに関連する問題について言及していますが、ページの読み込みもJavaScriptが原因である可能性があります。これが私がその主題に関して拾ったいくつかのトリックです...

Chromeデベロッパーツールには、ブラウザに組み込まれたプロファイラーがあります。開発者ツールを開き、プロファイルをクリックし、[開始]をクリックして、必要なタスクを実行することで、開始できます。

このプロファイラーは、アプリケーションの時間がどこで費やされているか、そしてどの関数があなたの時間の大部分を占めているかを教えてくれます。

JavaScriptはシングルスレッドであるため、アプリケーション「init」で多くの処理を実行すると、ページが短期間応答しなくなります。ブロックしているJSがあるかどうかをどうやって知ることができますか？さて、主な症状は、マウスホイールをスクロールしたり、何かをクリックしたりすると、ページの読み込み時にかなりの時間何も起こらないことです。

この間、スクロールイベントとクリックはどうなりますか？さて、彼らはイベントキューに入れられます。イベントキューは、他のJavaScriptが実行されていないときに呼び出されます。多くの場合、これらの問題の原因は、JSデバッガーの[一時停止]ボタンをクリックしてスタックトレースを調べることで、ルートによって追跡できます...はい、実行が非常に遅くなる可能性があります。

以下はいくつかの問題/解決策です

問題：ページの読み込み時にページが応答しない

これらの種類の問題を修正するには、一般に2つの方法があります。-最初に（あまり良くありませんが、多くの場合合理的な方法）、ページの読み込み時にforループで実行される可能性のある高価な操作を実行し、それらをにスローする可能性がありますsetTimeout(fn, 0)。注：0は実際には4msまたは5msであり、操作はイベントキューにスローされます。これにより、多くの重労働を行う必要が生じる前に、アプリケーションのより多くの部分をロードできます。-次に、これらの操作がすべてをページの「準備完了」または「読み込み」にスローするのではなく、必要なときにのみ実行されるようにアプリを設計します。これは非常に予防策またはリファクタリングです。一般に、この種の問題を解決することは困難です。

問題：クリック/インタラクションが遅い（ページの読み込み後）

通常、イベントを委任することで、より良い仕事をすることでこれを解決できます。イベントのバブリングは、JSでは誰もが知っておくべきことです。つまり、1つのオブジェクトのクリックイベントが、実際にはそのオブジェクトを含むすべての親で発生するクリックであると考えてください。委任は、その事実を使用して、類似/同じことを行う多くのDOM要素に対して1つのハンドラーを作成できるようにします。jQueryのメソッドのドキュメントを読んで、パラメーターonの使用方法と、vsvsとは何かに焦点を当ててください。filtere.currentTargete.targetthis

問題：最初のAJAX呼び出しを待つ時間が長すぎる

これを修正する1つの方法は、AJAXリクエストをより早く作成することです。ページの読み込み時にリクエストを送信できますが、ページの準備が整う前です。次に、リクエストは、ロードされている残りのページアセットと並列化されます。

問題：JSファイルが多すぎます

現在、人々はモジュールシステムを使用しています（AMDとCommonJSをチェックしてください）が、ページの読み込みを遅らせるネットワークトラフィックが多すぎることを解決する最も基本的な方法は、すべてのJSファイルをキャットすることです。10万行のJSがある場合は、逆の問題が発生します（JSのコンパイルには時間がかかりすぎ、ファイルを分割する必要があります）。ただし、一般的に、すべてをバンドルすることは迅速な解決策です。ネットワークトラフィックを複数のサブドメインに分割することもできます。これにより、より多くのダウンロードを並列化できます。現在、ブラウザのダウンロード数にはドメインあたり6回の上限があると思います。CDNもこれを支援します。

于 2013-07-30T03:38:43.210 に答える
1

Firefox / Chrome / IE-F12キーを押すと、開発者パネルが開き、ネットワークパネルを見つけることができます。

または試してみてください：http：//tools.pingdom.com/fpt/

于 2013-08-02T14:00:51.793 に答える
1

この場合、Chromeと開発ツールバー（[ネットワーク]タブ）を使用して、重い要素が何であるかを監視します。

于 2013-08-02T17:54:28.707 に答える
1

これは古い質問ですが、Webサイトのパフォーマンスの問題を見つけるために使用できるもう1つの優れた無料ツールを捨てたいと思います。

コンピュウェア（dnyaTrace）のAJAX Free Editionツールは、過去にいくつかのサイトで見逃していたいくつかの問題を解決するのに役立ちました...ツールを使用して発見したキャッシュの問題（htaccess関連）があったことを思い出します。

いずれにせよ、現在ここからダウンロードできます：http: //www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html

于 2014-01-22T22:30:18.183 に答える