サイトを高速化する方法、またはサイトの読み込みに影響する要因

目的 ：サイトの読み込み速度に影響する要因に関する基本的な概念を提供する。 各読み込みステップを解析します。 影響を受ける可能性のある各負荷係数を最適化することにより、加速方法を理解します。



ここで設定やコマンドを提供しないことをすぐに明確にしたいと思います。この記事は、サイト全体の負荷の写真を提示することを目的としています。そして、問題のある場所を見つけた人は、少なくとも正しい方向にグーグルで検索できます。



対象読者 ：サイト所有者、Webスタジオ、専門家、アマチュア。 誰もがアクセスできるように記事を書きます。



記事を書く理由は、多くの人が自分のサイトのブレーキの本当の理由すら理解していないことに気づいたという事実にあり、人が欠けているものを読んで理解できるようにこの記事を書くことにしました。 多くの要因がサイトの読み込みに影響しますが、それらのほとんどに影響を与える可能性があります。 残りは検討する必要があるだけです。

クライアントのデバイスの電力と品質、およびインターネットの速度とサーバーの場所からの距離

クライアント用に通常のコンピューターを購入し、高速インターネットに接続することで、この要素に関する問題は発生しなくなります（もちろん、冗談です）。 私は間違いなく、所有者が私のコンピューターを更新し、インターネットの料金を支払うサイトを訪れます。 ジョークに加えて、クライアントのインターネットが弱く、低電力のデバイスがある場合、実際に何ができますか？



1.サイトを潜在的な顧客の近くにあるデータセンターに配置し、計画された負荷に対してかなり広いチャネルを提供するようにします。 簡単に言えば、良いホスティングを選択してください。 多くの人がこの点の重要性を過小評価しており、無駄に過小評価しています。



2.デバイスが弱いほど、サーバーへの新しい接続が長くなります。つまり、これらの接続の数を減らす必要があります。 多くの場合、サイトの所有者は自分のサイトの読み込みがどれほど難しいかさえ想像しておらず、ブレーキの問題は明らかにサイトに起因するものではなく、単に顧客がインターネット接続が遅いと考えています。 所有者であるあなたは他の人よりも頻繁にあなたのサイトを訪れ、サイトのすべてのコンテンツは長い間ブラウザによってキャッシュされていることを覚えておく必要があります 。 したがって、毎回インターネットチャネルを読み込むことなくトラフィックが保存されるだけでなく、これらのファイルをダウンロードするための接続も作成されません。



接続の数、ロード手順、およびページの重みは、ブラウザー開発者ツールで確認できます。 Google Chromeでは、開発者向けツールを開くには、ページ上の任意の右ボタンでページをクリックし、[コードを表示]をクリックして、そこの[ネットワーク]セクションに移動します。











ダウンロードはいくつかの段階に分けることができます。サイトのページを読み込む各段階は重要です。



1.サーバーの応答時間。 このダウンロード段階の実行時間は、一般に「サーバー応答時間」と呼ばれます。 ここで、この期間中に何が起こるか、異常な時間がある場合にこの時間を短縮する方法、および一般的に異常と見なされるサーバー応答時間を説明します。



このギャップをサブパラグラフに分割します。



1.1クライアントのブラウザによるリクエストの送信。



インターネットの速度とクライアントのデバイスの能力、およびサイトが置かれているサーバーのクライアントからのリモート性とそのワークロードは、この段階に影響を与える可能性のある要因です。



さらに、サーバーが応答して完成したページを送信するまで、いくつかの段階を経て、特定のサイトごとに段階が異なる場合があります。 MySQLデータベースを使用したphp Webサイトの例を取り上げます。



1.2リクエストはWebサーバーによって受け入れられ、リクエストに一致するものを見つけて仮想ホストを処理します。この例では、サイトはphpにあるため、Webサーバーはphpになってページを生成し、ページを埋めます。データはデータベースに送られます。 ページが形成されると、Webサーバーによってクライアントのブラウザーに転送されます。



非常に重要な役割は、すべての段階でのキャッシング、Webサーバーレベルでのキャッシング、PHPレベルでのキャッシング（opcache）、データベースでのクエリキャッシング（memcache）によって果たされます。他のキャッシングオプションがあるかもしれません。これらを最も一般的なものとして挙げました。 これはまさにあなたが影響を与えることができる段階であり、この段階には時間を与える必要があります。



これを高速化する方法を次に示します。

• 高速ホスティング、さらに優れたVPS、VDS、さらには物理サーバーを選択します。 この選択ができない場合は、専門家に助けを求めるか、すでに1人または別のホストを使用している友人に推奨を求めることをお勧めします。 ホストのデータセンターの場所に注意してください。潜在的な顧客のすぐ近くに配置する場合に最適です。 私は個人的に外部サーバーを使用しています。サイトでDDOS攻撃のみが行われる場合、ロシアのホスティング事業者は低品質のDDOSに対する保護を提供し、ここでpingと遅延に耐えなければなりません。
  
  
  
  
• 適切なサーバー構成は、サーバーからの応答を高速化するのに役立ちます。 ここでは、より高速なソフトウェアの選択とその適切な構成が役割を果たします。 Nginxを使用するWebサーバーの場合、可能であればhhvmをphp 7.1と一緒に使用します。phpバージョンの選択とhhvmの大部分は、サイトのコードによって異なります。サイトで古い機能が使用されている場合は、更新するか、パフォーマンスがそれほど高くない古いバージョンのコンテンツである。 まあ、大規模なプロジェクトがある場合は、MariaBDまたはPersonaをデータベースとして使用します。 また、保護についても忘れないでください：ブルート対策、一般的な攻撃からのフィルター、すべての管理パネルでの追加承認としてのhttp承認、スパム対策、ウイルス対策など。

1.3生成されたページをクライアントに送信し、このページを受信する瞬間がページ読み込みのこの部分の最終段階になります。 ここで、送信されるデータの量を減らすには、gzip圧縮を使用するのが最適です。



修正したいのですが、スクリーンショットでは、Habrサイトのサーバー応答は3.48秒です。これは悪い時期ですが、Habrは本質的にここで責任を負いません。 私は平凡な品質の3Gインターネットを持っています。 したがって、サービスを使用してこの特定のダウンロード段階を追跡することをお勧めします。 これにはYandexのサーバー応答検証サービスを使用します 。







HTTPステータスコードは200である必要があります。



ここでのサーバーの応答は、私の3Gインターネットよりも著しく少ないです。 理想的には、サーバーの応答時間はゼロになる傾向がありますが、少なくとも200ミリ秒を超えないようにする必要がありますが、これは私の個人的な基準です。 いいえ、私だけではありません。 間違っていない場合、Google PageSpeedはサーバーレスポンスが200ミリ秒を超えないようにし、サイトが推奨時間を超えた場合、サーバーレスポンスを短縮する必要があることを警告します。



さて、一番下で、答えがgzipを使用して圧縮されていることがわかります。



Habrは5台のロードの第1段階を通過しました（いいえ、いいえ、まったく吸いません）。



サイトがこれらの要件を満たしている人はさらに読むことができますが、残りは私の推奨事項について考え、最初の段階を終えた後も記事を読み続ける必要があります。



2. DOMContentLoaded-これはまさにページ読み込みのこの段階が開発者のツールで呼び出されるものです。簡単な方法であれば、これはまさに視覚的なページの読み込みが完了する瞬間です。



何に注意する必要がありますか？



2.1化合物の数-Habrには多くの化合物があります。多くの化合物がある場合は、これらの化合物の数を減らすことを検討してください。 上記で書いたように、接続が多いほど、接続を開くために必要なリソースが多くなります。これは、特に弱いデバイスでは、そしてサーバー自体にも大きな負荷です。



それらを減らす方法は？ http / 1.0およびhttp / 1.1では、個々のファイルごとに個別の接続が作成されます。つまり、ページにアップロードされるファイルの数を減らすことがタスクです。

• すべてのcssを1つのファイルに結合し、すべてのjsを1つのファイルに結合します。この手順は連結と呼ばれます。
  
  
  
  
• 個別の接続が作成されないように、小さな画像をエンコードされた形式で直接cssまたはページの本文に配置します。
  
  
  
  
• いくつかの不要な要素のロードを取り除き、可能であればjsのロードを遅らせるか、最後に置くか、少なくともロードを非同期にすることができます。 ちなみに、CSSは最適化するのに適しています。
  
  
  
  
• cssの読み込みを延期すると、サイトをサーフィンするときのページが点滅します-私の意見では、これは受け入れられませんが、最初にサイトの上部を表示し、残りを後で表示するために必要なcssをダウンロードできます。 私はそうではないので、レイアウトデザイナーに相談することをお勧めします。したがって、これらの推奨事項を文字どおりに受け取らないでください。
  
  
  
  
• http / 2に移動すると、このバージョンのプロトコルでは、不要な接続を作成せずにすべての要素を1つのストリームにロードできます。 そして、最も独創的なものはすでに考えているので、 http / 2に切り替えることができるのであれば、なぜ最初の2つの推奨事項に従うのか、今説明します。 現時点では、 http / 2はまだすべてのデバイスでサポートされていないため、一部のクライアントは以前のバージョンのプロトコルでサイトを使用し続けるため、この推奨事項は最新のブラウザーバージョンで新しいデバイスのページの読み込みを高速化するのに役立ちます。

ここでは、 http / 2を使用して作成された接続の数を明確に確認できます。



2.2ページとそこからロードされる要素の重量。

• コード内の不要なコメントを削除します。
• 圧縮を使用します。
• Webサイトのコンテンツの最適化、CSSとJSの圧縮と結合、画像の圧縮など。

また、接続数を減らし、ページとページに投稿されるコンテンツの重量を減らすのに役立つ別の推奨事項があります。 これは一種の万能薬ですが、カスタマイズには特定のスキルが必要です。



PageSpeed Webサーバー用のモジュール。 nginx-ngx_pagespeedおよびapache2-mod_pagespeed用です。 公式文書で彼が何ができるかについてもっと読むことをお勧めします。彼の設定は非常に柔軟です。 接続の数を減らすのに役立つオンザフライで連結を実行できることに注意してください。また、コンテンツを完全に圧縮し、ページとそのコンテンツの重量を減らします。



この段階では、Habra solid 4を配置できますが、http / 2がない場合のみ、ロードされた要素の量を減らして連結します。

このページ読み込みの段階は、理想的には2〜3秒を超えないようにする必要があります（ただし、完璧に終わりはなく、1秒未満のダウンロード速度でもより速くしたいクライアントがいます） 。 さらに時間があれば、上記の推奨事項を検討する必要があります。



3.ロード -これは、ブラウザのホイールが回転を停止した瞬間、つまりページが完全にロードされた瞬間です。 これはそれほど重要ではないダウンロードフェーズであり、サイト上の顧客やその他の小さな要素と通信するためにサードパーティチャットによって遅くなることがよくあります。 上記の推奨事項に従えば、この段階も速くなります。 また、負荷の高いプロジェクトがなく、同時にVPS、VDS、または物理がある場合も注意してください。 サーバー、サーバーからのみ読み込まれたすべての静的を取得してください。 サードパーティのサイトとCDNに静的データを配置すると、高負荷の場合にのみメリットがあり、負荷がかかっていないサイトの場合はマイナスでしか再生されません。



4.本質的にはページがロードされ、ここではブラウザが常に何かをロードしてサイトと通信するため、この段階はまったく見ることができません。



5.スクリーンショットのこの数字で、ページにロードされたアイテムの数とすべての要素を含むページの重量が表示される場所を指定しました。 PCが2.5 MBのページをダウンロードするのに問題がなければ、3Gが弱いモバイルブラウザーではこれがより問題になることに留意してください。 特に、3GインターネットとHabrを使用しているため、他のサイトほど速くロードされません。 モバイルデバイスの場合、理想的には、ページの重量を1 Mb未満にする必要があります。 ここでは、ページ上のすべてのコンテンツのサイズを小さくするか、モバイルバージョンを作成します。

PS

以下からコンテンツをダウンロードする長所：

• サーバーの負荷を減らします。
• 同じ静的データ、つまりcss、js、写真、およびフォントは、この静的も使用する他のサイトを表示しているときに既にダウンロードされている可能性があり、ブラウザキャッシュからロードされます。

以下からコンテンツをダウンロードすることの短所：

• 多くの場合、トラフィック、レベルが異なる数百、または数千ものサイトが使用するため、フォント、画像、CSS、およびJSを格納する公開CDNおよびサイトの負荷が高くなります。 。
• 接続数を減らすためにhttp2を使用する場合、サードパーティのサイトはそれらを追加するだけです。

今、あなたがあなたのサイトのブレーキの理由をまだ理解していない場合でも、少なくともあなたはどこを掘るか知っています。 また、適切に記述されたサイトコードと最適なレイアウトによってサイトが高速化されることにも注意したいのですが、これは私の運命ではありません。これらの点はすでにインターネットで十分に説明されています。



この記事が皆様のお役に立てば幸いです。