Clever Geek Handbook

サイトを高速化する方法：初心者向けの7つの最適化のヒント





King Serversのサポートは、リソースのロードが遅い理由を理解していないサイト所有者から頻繁に連絡されます。 その結果、初心者のためにダウンロード速度を最適化するための簡単な指示を作成することにしました-あなたの注意にそれを提示します。



注 ：記事の最後に、さらなる研究のためのリソースのリストがあります-コメントに追加していただければ幸いです。



はじめに：サイトの読み込み方法



「 ユーザーがGoogle.comウェブサイトのアドレスを操作するとどうなるか 」 という題名の資料には、サイトへのアクセスに関連するすべてのプロセスが詳しく説明されています。 要するに、サイトの訪問者がURLをアドレスバーに移動して応答を受け取ると、一般にいくつかの手順があります。



  1. 最初に、ブラウザはサイト名のDNSクエリを作成します。
  2. 次に、このサイトが配置されているサーバーへのTCP接続が開始されます。
  3. これに続くのは、httpまたはhttps接続です。
  4. 次に、目的のページが要求され、そのHTMLコードがロードされます。
  5. HTML解析が開始されます。
  6. その後、ブラウザはページに関連付けられた外部リソース（スタイル、画像、スクリプトなど）の読み込みを開始します。
  7. その結果、すべてのコンテンツを含むページの最終バージョンがレンダリングされます。
  8. 次に、JSコードが実行されます。スクリプトでは、追加のネットワーク要求の処理、ページまたはそのテンプレートの変更が必要になる場合があるため、新しいレンダリングサークルも可能です。


これらの手順の一部は、サーバー側の別の部分であるクライアント側で最適化できます。 今日はこれについてお話します。



最初のステップ：減速しているものを理解する



QuoraのスレッドでFacebookの元エンジニアであり、PaveのスタートアップであるJustin Mitchellの創設者は、サイトの読み込みを最適化する作業の始まりについて説明しました 。



修復を開始する前に、何が壊れているのかを調べる必要があります。 サーバーが5秒間ページを生成する場合、CDNを使用しても役に立ちません。各ページビューに10メガバイトの写真がある場合、バックエンドアーキテクチャへのmemcacheの追加も無意味です。


サイトのパフォーマンスを分析するためのさまざまなツールがあります。 たとえば、Googleの無料サービスを使用して、サイトのパフォーマンスを分析し、改善のための推奨事項を提供できます。







いくつかの重要なサイトパフォーマンスメトリックがあります。 それらの1つは、最初のバイトまでの時間（TTFB-最初のバイトまでの時間）です。これは、要求を送信した後、ブラウザーがサーバーからデータの受信を開始する速さを示します。 ページのレンダリングの開始と読み込み時間を測定することも重要です。



同時に、パフォーマンスインジケーター自体を分析するだけでなく、特定のページのトラフィックに関連してそれらを考慮することも重要です。 ページがユーザーに人気がない場合、読み込み速度は重要ではありません。



これらは、サイトの読み込みを高速化するための最も一般的なサーバー最適化手順です。



サーバーリソース拡張



サーバー自体が遅い場合、クライアントの最適化に時間と労力を浪費しても意味がありません。 小規模プロジェクトの場合、負荷が増大すると、十分なホスティングリソース（CPUやディスクなど）がなくなったために、サイトの速度が低下し始めることがよくあります。



最初のステップとして、追加のリソースの購入を検討することが論理的です。 ただし、この方法は特定の時点まで機能し、その後、ホスティングサービスのコストが大幅に増加する可能性があるため、他の方法を使用して負荷を最適化する方が簡単で収益性が高くなります。 それは彼らができることです。



キャッシング



サイトを高速化するツールの1つにサーバーキャッシュがあります。 上記のように、サイトへのリンクをたどってからブラウザーでページを表示するまでのプロセスには、多くのステップが含まれます。







画像： CrazyEgg



一部の要素は、サイトに入るたびにキャッシュされ、ダウンロードされることはありません。 これにより、起動時間を大幅に短縮できます。







画像： CrazyEgg



すべての利点があるため、これが価値のある最適化方法だけではありません。 第一に、すべてをキャッシュすることはできません。第二に、将来キャッシュをリセットする方法を考える必要があります。第三に、この方法は、既にアクセスしたユーザーのサイトを高速化するのに役立ちます。



画像圧縮



誰もが常に画像圧縮の必要性について話しますが、初心者のウェブサイトの所有者は多くの場合、すべての微妙さを持たず、CSSを使用して大きな画像を拡大縮小できます。 その結果、ユーザーのブラウザは引き続きフルサイズの画像をダウンロードします。



TinyPNG、Kraken.io、JPEGminiなど、いくつかの画像圧縮ツールがあります。 さらに、WebP形式への画像変換を有効にしようとすることは理にかなっています。 Googleが開発したもので、同社によれば、このような画像はPNGファイルより26％軽く 、JPEG画像より25-34％少ない。



変換を有効にするには、次のコードを.htaccessファイルに追加できます。 



<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{DOCUMENT_ROOT}/$1.webp -f RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp


残念ながら、現時点では、すべてのブラウザがWebP形式をサポートしているわけではありません-これまでのところ、ChromeとOperaのみがサポートされています。



CDN



遅延を減らすためのもう1つの「インフラストラクチャ」方法は、コンテンツ配信ネットワーク（CDN）の使用です。 このようなネットワークは、世界のさまざまな地域のサーバーで構成されています。 サイトがネットワークに接続されると、それに含まれるサーバー上にWebリソースファイルのコピーが作成され、データがそれに最も近いサーバーからユーザーに転送されます。その結果、ダウンロード速度が向上します。



gzipを使用する



Gzipは、サイトファイルを圧縮してチャネルリソースを節約し、読み込みを高速化する簡単な方法です。 Gzipを使用すると、ファイルは圧縮されてアーカイブになり、ブラウザはより高速にダウンロードしてから、コンテンツを解凍して表示できます。



Gzipの使用を有効にするのは非常に簡単です-.htaccessファイルに数行のコードを追加するだけです。 たとえば、Apache Webサーバーを使用している場合、webmasterがmod_gzipモジュールを使用してGzipをアクティブ化できます。この場合、.htaccessに次のコードを入力する必要があります（詳細については、 SitePointチュートリアルを参照）。 



 mod_gzip_on Yes mod_gzip_item_include mime ^application/x-javascript$ mod_gzip_item_include mime ^application/json$ mod_gzip_item_include mime ^text/.*$ mod_gzip_item_include file .html$ mod_gzip_item_include file .php$ mod_gzip_item_include file .js$ mod_gzip_item_include file .css$ mod_gzip_item_include file .txt$ mod_gzip_item_include file .xml$ mod_gzip_item_include file .json$


ウェブサイトのコード最適化



わずかなコストなしで操作を最適化できるサイトコードを作成するためのベストプラクティスがいくつかあります。 まず第一に、専門家はCSSコードをページの先頭に配置し、スクリプトを末尾に配置することを推奨します。 この方法では、ブラウザはすべてのスクリプトが実行される前でもページのレンダリングを開始できるため、非常に迅速に実行できるので便利です。



インラインCSSおよびJSコードも回避する必要があります。 この場合、ブラウザはこれらの外部リソースをキャッシュするため、読み込み時間が節約されます。 JSとCSSも縮小する必要があります-JSMIN、YUI Compressor、Packerなどのツールを使用してこれを行うことができます。



Nginx + Apacheバンドルの使用



ページの読み込み速度を上げるには、ApacheとNginxの束を使用できます。 これらは世界で最も一般的な2つのWebサーバーであり、人気はApacheのパワーとNginxの速度によるものです。 利点に加えて、各ツールには独自の欠点があります。たとえば、Apacheにはサーバーメモリの制限がありますが、静的ファイルに有効なNginxは動的コンテンツを読み込むためにphp-fhmまたは同様のモジュールの助けを必要とします。



それでも、Nginxを静的フロントエンドとして使用し、Apacheをバックエンドとして使用して、2つのWebサーバーを組み合わせて効率を高めることが可能であり、必要です。 この決定は、サイト上のページの読み込み速度にプラスの影響を与えます。



結論：サイトの最適化に関する有用なリソースと記事



以下に、ロシア語と英語の役立つ記事をいくつか集めました。





More articles:


All Articles