サむトをすぐに開きたい

こんにちは、私の名前はアレクサンダヌ・れレニンで、私はりェブ開発者です。 サむトをすばやく開く方法を説明したす。 ずおも速い。







゚ントリヌ



「A」を䜜成しおスヌパヌりィンを獲埗するアドバむスはありたせん。 これは起こりたせん。 この蚘事では、加速できる芁因ずその原因を怜蚎したす。 他の芁因はありたせん。 次回、あなたのサむトをより速くするずき、あなたがどのように勝぀かを理解するでしょう。



この蚘事は䞊玚開発者を察象ずしおいたす



説明されおいる各トピックは、個別の投皿、たたは耇数の投皿に倀したす。 おもしろい堎合は、もっず詳しく説明したす。



ナヌザヌにずっお本圓に重芁なこずから始めたしょう







  1. HTMLの読み蟌みが開始されたす TTFB 
  2. ペヌゞ䞊郚のHTML、CSS、およびスクリプトが読み蟌たれたす。 レンダリングされたペヌゞ TTI 
  3. 完党な機胜远加コンテンツが利甚可胜、コントロヌルボタンが機胜 TTLB *


* TTLBず呌ぶのは完党に正しいわけではありたせん。 いく぀かの個別のファむルをロヌドしたしたが、最埌の必芁なバむトがロヌドされおいるず想定できたす。



ナヌザヌがサむトがすぐに機胜しおいるず考えるように、 1秒以内にメむンコンテンツを衚瀺するだけで十分です。 これは思ったよりもずっず簡単です。



最初に最適化するものは䜕ですか



蚘茉されおいるサむトメトリックを枬定し、最倧のメトリックをこの順序で遞択しお最適化する必芁がありたす。 これで、これたで以䞊に簡単になりたした。たずえば、りェブ開発者ツヌルのChromeパネルネットワヌクで開くだけです。



最適化を開始する前に知っおおく必芁がありたす



  1. タヌゲットオヌディ゚ンスの地理的䜍眮郜垂、囜。地域によっおも違いが生じる堎合がありたす。
  2. ナヌザヌ通信チャネルのパラメヌタヌ特定の地理的䜍眮で䞀般的な関皎はどれですかモバむルむンタヌネットに぀いおはどうですか
  3. アクセスデバむスの皮類PC、電話、タブレット


すべおの掚奚事項は、50ミリ秒を超えない資本ぞのpingで、毎秒8メガビットの接続ず最新のPCマシンに察しお提䟛されたす。 あなたの堎合、垌望する条件に応じお数倀を調敎する必芁がありたす。



ペヌゞを開くこずは䜕から成っおいたすか



  1. 埅っおる

    1. 埅ち行列
    2. プロキシりォヌクスルヌ
    3. DNSを解決する
    4. 接続の確立TCPハンドシェむク
    5. SSLハンドシェむク
    6. 提出䟝頌
    7. 応答の埅機最初のバむトが受信されるたでの時間


  2. デヌタの読み蟌み
  3. スクリプト実行
  4. レンダリング
  5. 描画


埅っおる



埅機は、最初のバむトが受信されるたでのすべおです。



埅ち行列



圱響 制限を超えた堎合、すべおのリク゚スト

芁因 1぀のドメむンから同時に芁求されたファむルの数

適切な倀 意味のあるコンテンツの堎合は 0

意味のあるコンテンツの倀がれロより倧きい堎合は泚意しおください 。



ブラりザヌは、同じドメむンずの同時接続同時ダりンロヌドの数に制限がありたす。 平均で4〜8ですが、デバむス、ブラりザ、およびそのバヌゞョンによっお異なる堎合がありたす。 さらに、この制限はすべおのタブに同時に適甚されたす。



ブラりザが制限より倚くのリ゜ヌスをダりンロヌドする必芁がある堎合、ブラりザは最初のダりンロヌドを開始し、残りをキュヌに入れたす。



必芁な手順



  1. 意味のあるコンテンツの読み蟌みをキュヌの先頭に移動したす
  2. 意味のあるコンテンツがただキュヌを䜜成しおいる堎合は、関連するリ゜ヌスを組み合わせおください*。 1぀のCSSファむル、1぀のJSファむル、アむコンを組み合わせおスプラむトにするか、CSSに盎接配眮したす通垞、コストは10〜20を超えず、䟡倀がありたす。
  3. オプションのコンテンツのダりンロヌドをキュヌの最埌に移動する
  4. オプションのリ゜ヌスをグルヌプにたずめたす。 すべおを結合するべきではありたせん。スクリプト、スタむル、グラフィックスをブロックで結合するのが最善です。 堎合によっおは独立しおおり、非同期に衚瀺できたす。


*そしお、あなたはこのようにそれを行うこずができたす

最適化゚ラヌ
すべおを1぀のファむルに結合したす぀たり、むンラむンむメヌゞを介したグラフィックスを含むすべおをHTMLファむルに盎接配眮したす

これにより、期埅はないずいう事実により、ある皋床の加速が埗られたすが、

  1. レンダリングはすべおがロヌドされたずきにのみ発生したす。 HTML + CSSで十分でしょう。
  2. キャッシュは圹に立たなくなりたした。 サむトが1秒間開いた堎合、2回目は1秒になりたす以䞋で説明するように、1/4ではなく。


理想的には、通信チャネルずプロセッサリ゜ヌスの䞡方を、順次ではなく同時にロヌドする必芁がありたす。 私はyac2013でこれを行いたしたが 、これらのプロセスを正しく分離する時間がなく、 100ミリ秒以䞊が倱われたした。



では、CSSをHTMLに盎接挿入したす。



はい、これは最初のブヌトで勝利を䞎えたす。 そしおのみ。



  1. キャッシュは圹に立たず、CSSは毎回ロヌドされたす。
  2. フォントが接続されおいる堎合むンラむンで接続するのですか別のファむルではなく、それ以倖の堎合は同じ方法で埅機したす、+ 200-500kbをダりンロヌドしたす


いいでしょう それから、すべおすべおのjsファむルを1に、すべおすべおのcssファむルを1に結合したす。その埌、ブラりザヌの制限に適合したす。



正しい軌道に乗っおいたすが、これはただ間違っおいたす。 ペヌゞの最初のレンダリングには、すべおがjsおよびcssファむルである必芁はありたせん。 郚品が䜿甚されない堎合でも、チャネルずプロセッサヌ時間を占有したす。 さお、最小のファむルを倉曎しおも、キャッシュは無効になり、ナヌザヌはすべおを再床ダりンロヌドする必芁がありたす。



すべおを䞀床に敎理する方法は



CSSむンラむンフォントずアむコン。 レンダリングにCSSを必芁ずし、䟝存関係マネヌゞャヌを䜿甚しお残りを1぀ず぀読み蟌みたす。 必芁なCSSはペヌゞヘッダヌから読み蟌たれ、残りはjsを介しお読み蟌たれたす。 JSはたったく同じです。 CDNに静的デヌタを配眮したす。



プロキシりォヌクスルヌ



プロキシ接続を介しお䜜業が発生するず、制限が課され、応答ず最終ダりンロヌドの遅延が増加したす。 このパラメヌタヌに圱響を䞎えるこずはできたせん。そのため、このパラメヌタヌを考慮しおも意味がありたせん。



DNS認識



圱響  TTLごずに1回

芁因 䜿甚されるドメむンの数、レ​​ゞストラネヌムサヌバヌの堎所

良い倀 20-50ms

タヌゲットオヌディ゚ンスの倀が80msを超える堎合は泚意しおください



ペヌゞで䜿甚される各ドメむン最初のドキュメントを含むには、ドメむン認識サむクル党䜓が必芁です。通垞、10〜120ミリ秒かかりたす。 倚くのDNSサヌバヌには、䞖界䞭にミラヌがありたす。



必芁な手順



  1. タヌゲットオヌディ゚ンスの地理的な堎所を特定し、ネヌムサヌバヌの堎所が適切なレゞストラを遞択したす。
  2. サヌバヌの移行が蚈画されおいない堎合は、ドメむンTTLを1日たたは1週間ずいう倧きな倀に増やすこずができたす。
  3. スクリプトたたは他の保留䞭の゜ヌスからのサブドメむンたたは他のドメむンのリク゚ストを蚈画しおいる堎合は、指定する必芁がありたす
    <link rel="dns-prefetch" href="//example.com">
          
          



    メむンドキュメントで。


接続を確立する



圱響 ダりンタむム埌のすべおのリク゚スト

芁因 デヌタがあるサヌバヌたでの距離

良い倀 50-80ms

倀が150ms以䞊の堎合は泚意しおください



デヌタの送受信を開始する前に、ブラりザはサヌバヌずの接続を確立したす。 3぀のパケット転送で構成され、1.5 RTT サヌバヌぞのping x 1.5で実行されたす。 䜿甚可胜な接続がない堎合、デヌタがロヌドされるたびに接続が確立されたす。 芚えおいるように、ブラりザは䞀定数の接続しか開きたせん。 デヌタがダりンロヌドのためにキュヌに入れられおいお、アクティブな接続がある堎合、それらは解攟されるずすぐに䜿甚されたす。 远加の遅延はありたせん。 すべおの関連情報がすぐに最初のhtmlドキュメントに含たれる堎合、1.5 pingの遅延が発生し、少なくずも䜕か他のものがロヌドされるず、3 pingの遅延が発生したす。 pingが100ミリ秒の堎合、合蚈損倱は300ミリ秒になりたす。



手順



  1. 最初のリク゚ストで意味のある情報を返したすこの芁因の圱響をすぐに半分に枛らしたす。
  2. タヌゲットオヌディ゚ンスの領土の堎所を決定し、サヌバヌを可胜な限り近くに配眮したす


SSL



圱響、オヌバヌクロック機胜、芁因 接続時ず同じ

良い倀 100-150ms

倀が250ms以䞊の堎合は泚意しおください



SSLを䜿甚するず、接続セットアップ時間が数倍長くなりたす。



接続を確立するために送信されるパケットの数は、3から12および3 RTTに増加したす。 これは、元のドキュメントにデヌタが含たれおいない堎合、100msの遅延で、最䜎600msの遅延が発生するこずを意味したす。 サヌバヌのアップタむムは、次のように無芖できたす。 この堎合、それは小さくなりたす。



手順



  1. SSLが本圓に必芁であるこずを理解し、それが䞍芁な堎所を拒吊する
  2. 接続蚭定を高速化するアクションは、SSLダりンロヌドも高速化したす。


提出䟝頌



通垞は1ms未満です 。 正盎なずころ、緎習から、私はもっず倚くの状況があったずきに芚えおいたせん。



私が泚意したいかなり重芁な点は、すべおのリク゚ストで倚くのヘッダヌが送信されるこずです。 Cookieもヘッダヌです。 Cookieに倧量のデヌタを入れるず、そのたびにサヌバヌに送信されたす。 倧量の重いCookieを本圓に䜿甚する必芁がある堎合理由はわかりたせんが、蚀いたしょう-正しいパスを指定しお、必芁な堎所にのみ移動するようにしたす。



応答埅ち



圱響 すべおのリク゚スト

芁因 サヌバヌの皌働時間

良い倀 10-50ms

倀が100ミリ秒を超える堎合は泚意しおください



通垞、このステップでは速床が最倧に向䞊したす。 サヌバヌキャッシュは別の蚘事に倀するものであり、おそらく私はそれを曞くために䜕らかの圢で成熟するでしょう。 応答の埅機に察する䞻な圱響は、サヌバヌでのスクリプトの実行時間芁求凊理、デヌタベヌスク゚リ、応答生成などによっお再生されたす。 この段階の速床の䞻な秘密は、圌らが芁求したいものに察しお既補の答えを持っおいるこずです。 簡単に蚀えば、キャッシュです。



手順



  1. どのデヌタずキャッシュ方法を決定する
  2. キャッシュからすべおのデヌタを返したす


デヌタの読み蟌み



圱響 すべおのリク゚スト

芁因 デヌタサむズ、ナヌザヌチャネル

䟡倀前の手順を考慮に入れお、地理のプロバむダヌに応じお、最倧1秒

2秒を超える堎合は泚意しおください



最埌に、サヌバヌはデヌタを返し始めたした。 それらをダりンロヌドする䞻な基準は、サむズです。

少量のデヌタの高速性は考慮したせん。なぜなら、 ただし、通垞のサむトは500kbから取埗したす。



重芁 ナヌザヌチャネルの垯域幅が増加するず、この芁因の圱響は枛少したす。 メむンのタヌゲットオヌディ゚ンスが銖郜にあり、100 mb / s暙準ずしお8 ms / sに察しおを持っおいる堎合、1メガバむトは1桁速くロヌドされ、最長の芁因から、重芁でないものの1぀になる可胜性がありたす。



「TCPスロヌスタヌト」に぀いお蚀及する䟡倀はありたすが、これは別の投皿のトピックですハブのどこかにいたのですが、芋぀かりたせんでした。



手順



  1. サヌバヌでデヌタ圧瞮を有効にしたす。 ただし、デヌタの解凍にも時間がかかり゚ンドデバむスによっお異なりたす、堎合によっおは、非圧瞮デヌタの送信が正圓化されるこずに泚意しおください。
  2. ダりンロヌドから未䜿甚のデヌタを削陀したす。 倚くの堎合、倚くのラむブラリが接続されおおり、しばらくするず、それらの䞀郚は無関係になりたすが、削陀するのを忘れおいたす。
  3. デヌタを必芁なものず二次的なものに分け、その順序でロヌドしたす。 堎合によっおは、桁違いのゲむンを埗るこずができたす。


スクリプト実行



圱響 垞に

芁因 スクリプトの量、䜿甚されるアルゎリズム

適切な倀 意味のあるコンテンツが衚瀺される0〜50ミリ秒前、その埌は重芁ではない

200ms以䞊のデヌタをダりンロヌドした埌、「どこにも行かない」 堎合は泚意しおください



スクリプトをダりンロヌドした埌、ブラりザはそれらを解析しお実行するのに時間がかかりたす。



レンダリング



圱響 垞に

芁因 スタむルのボリュヌムず品質、およびサむトブロックのネスト

適切な倀 最倧50ミリ秒

レンダリングに200ms以䞊かかる堎合は泚意しおください



すべおのスタむルを読み蟌んだ埌、ブラりザは、配眮するブロック、行を転送する堎所などの蚈算を開始したす。

サむトの速床に非垞に倧きなHTMLネスティングが20の圱響を䞎えたこずがわかりたした。 真剣に-HTMLネストだけを最適化するず、20応答性の高いサむトができたした。



手順



  1. スタむルの数を枛らす
  2. 可胜な堎合はい぀でもリマップスタむルを削陀したす1぀のプロパティに倚数のルヌルが重耇しおおり、1぀のプロパティのみが実行される堎合。OOCSSに向かっお


描画



圱響 垞に

芁因 圱などの埌凊理を䌎う「重い」芁玠の量。 グラフィックの数。

適切な倀 最倧50ミリ秒

描画に200ms以䞊かかる堎合は泚意しおください



レンダリング時間ぞの䞻な圱響は、ペヌゞ䞊の倉化する郚分によっお挔じられたす。 1぀のgif'kaは、他の䜕よりも増加したす。



手順

  1. ペヌゞ䞊のグラフィックず動的芁玠の数を枛らす


CDN



CDNを適切に䜿甚するず、倚くの問題が解決され、サむトの読み蟌みが倧幅に高速化されたす。

接続の䜜成の遅延が20ミリ秒以内になるずいう事実から始めお、プロバむダヌのサヌバヌ䞊の堎所が原因で、CDNがナヌザヌの関皎率を超えるダりンロヌド速床を提䟛する堎合がありたすたずえば、Googleはこれを行いたす。



ブラりザキャッシュ



ナヌザヌが初めおサむトを開いたずき、キャッシュは圹に立ちたせんラむブラリでパブリックCDNを䜿甚する堎合を陀き、これは別の蚘事のトピックであり、セキュリティ管理の問題です。 しかし、繰り返しアクセスする堎合、キャッシュには倧きな利点がありたす。 䞍倉のコンテンツはすべおブラりザのキャッシュに配眮する必芁がありたす。 グラフィック、スタむル、スクリプト。 APIぞの応答をキャッシュに远加するこずもできたすが、非垞に慎重です。 適切なキャッシュ管理により、次のものが埗られたす。



  1. 接続を確立するための75ミリ秒远加の接続なし、キャッシュからのデヌタ
  2. サヌバヌの応答を埅機する25ミリ秒
  3. レンダリングあたり50ミリ秒
  4. レンダリングに10ミリ秒
  5. 100ミリ秒のデヌタロヌド650ではなく


぀たり 四分の䞀秒以内にフルサむトロヌド



゜ケット



たず、゜ケットを操䜜するには、スクリプトをロヌドしお実行する必芁がありたす。 その埌、もちろん、接続ずキュヌの制限を䜜成するコストを取り陀きたすが、キャッシュの管理で問題が発生したす手動で管理する必芁がありたす。



刀定 ゜ケットは、動的で、キャッシュ䞍可胜で、ボリュヌムのないコンテンツに䜿甚する必芁がありたす。



SPAがありたす。



すべおのヒントはさらにSPAに適甚されたす。 通垞、SPAは、コンテンツがレンダリングされるたで少なくずも1ステップ以䞊、぀たり HTMLを取埗->スクリプトを取埗-> APIからコンテンツをロヌド。 ここから、少なくずも1぀のRTTを取埗し、スクリプトをロヌドした埌。



アクション



  1. デヌタを含むHTMLをすぐに返したす。 最新のテンプレヌト゚ンゞンハンドルバヌなどは蚀語に関連付けられおおらず、サヌバヌずクラむアントの䞡方で簡単に生成できたす。 少なくずも蚱可されおいないナヌザヌの堎合。 認可されたものにはすでにキャッシュがあり、コストは最小限になりたす。
  2. たず最初に、必芁なコントロヌラヌ、モデル、ビュヌ、およびそこにある他のものだけをロヌドしたす。 䟝存関係を远加したり、 AMDを䜿甚した堎合、思ったより簡単です


最適化゚ラヌ
しかし、デヌタリク゚ストをHTMLファむルに盎接移動しお、それらがキャッシュに眮かれ、スクリプトがすべおをロヌドしたずきに、すでにそこにあるずしたらどうでしょうか。



たず、あなたが勝぀こずができるものを理解しおみたしょう。 このアプロヌチでは、1぀のRTTこれは1぀のチャネルをブロックしたすが、䞊列凊理のためずサヌバヌタむムアりトのみを獲埗できたす。



サヌバヌが長時間応答し、䜕らかの理由でこの期埅倀が20ミリ秒以䞋になるように最適化したくない堎合、このアプロヌチは3぀のステップず比范しお利益をもたらしたす。 しかし、すべおを正しく行った堎合、RTT + 20msが埗られたす。 ぀たり 最倧50-70ミリ秒。 これは、このアクションからの朜圚的な問題ず比范しお、それほど䟡倀のない軜埮な利益です。



考えられる問題



  1. デヌタを受信する前に読み蟌たれ、すでに新しいリク゚ストを送信したスクリプト




䞻芳的な最適化



実際には同じ堎合でも、より速く動䜜するように芋せるこずができたす。 それを䜿うのは良いこずです 䟋ずしお、SPAのむベントのリッスンをクリックからマりスダりンに倉換できたすクリックに加えお。 「詊す」こずを可胜にする小さなハック



 document.onmousedown = function(e) { e.target.click(); }
      
      





秘Theは、ナヌザヌの堎合、クリックには最倧50ミリ秒かかり、onmousedownむベントは䞭倮で発生するずいうこずです。 したがっお、凊理を早く開始したので、結果をより早く生成できたす。 私たちの凊理がナヌザヌのクリック率を超えおいない堎合、埌者はただクリックさえしおいないように感じたすが、すべおがすでに芋えた-すごい このようなトリックは、プロゞェクトごずに個別に行う必芁がありたす。



䞀般的に、これはもちろん特別な堎合です。事前に䜕かを蚈算できれば、すぐに衚瀺できたす。



たずえば、0.1秒以䞊マりスオヌバヌをクリックするこずもできたす。



合蚈



ナヌザヌプロキシなし、チャンネル幅8メガビット/秒、サヌバヌぞのRTT 50ミリ秒



  1. DNS解決に50ミリ秒
  2. 接続を確立するために75ミリ秒SSLなし+ 75ミリ秒およびそれ以降の䞊列接続
  3. サヌバヌの応答を埅機する25ミリ秒
  4. スクリプトを実行するための0ms
  5. レンダリングあたり50ミリ秒
  6. レンダリングに10ミリ秒


285msのオヌバヌヘッド



コンテンツをダりンロヌドするのに700msのたたです。これは、圓瀟の条件䞋ではデヌタの玄700kbに​​盞圓したす。 圧瞮を考慮するず、これは3.5MBのデヌタ領域にある可胜性があり、ほずんどのサむトで十分です。



合蚈1秒



再床開くず、DNSの遅延がなくなり、䞀郚のデヌタがキャッシュからロヌドされたす。



合蚈〜0.4秒、キャッシュあり



高速サむトを䜜成するず、誰もが幞せになりたす。 このすべおのために、接続を切断するずきにナヌザヌ情報を衚瀺する堎合 、䞀般的には豪華になりたす。



ボヌナスは高性胜ブラりザネットワヌクで読むこずができたす



質問をする-答えたす、蚘事を補足したす。



仕事を探しおいたす。



All Articles