前書き

NginxはWebページのリクエストを処理する場合に優れていますが、Webページは高速に見えても、デフォルトのNginx構成によりGoogleのhttps://developers.google.com/speed/が発生します。 pagespeed / insights / [PageSpeed Insights]ツールを使用して、サイトの非効率性にフラグを付け、不十分に評価します。 Googleは、サイトの速度をサイトの検索位置を決定する重要な要素として使用します。

このチュートリアルでは、ドメインの構成ファイルをすばやく編集して、サイトの応答速度とそのPageSpeedメトリックを瞬時に向上させます。 目標は、80/100を超えるスコアを達成することです。これは、Googleがあなたのスコアに緑色のマーカーを適用し、高速サイトを知らせるしきい値を超えるためです。

まず、特定の種類のファイルに対してGzip圧縮を有効にします。 次に、ブラウザのキャッシングを構成して、さらにブーストします。 これらの方法は、Nginxで構築されているソフトウェアまたはCMSに関係なく、Nginxで実行されているサイトの速度を改善します。 たとえば、Wordpressの低速でパフォーマンスの低いインストールでは、コアのラインに触れたり、高価なパフォーマンスプラグインの費用を支払うことなく、即座に利益が得られます。 このアプローチは、サーバーがNginxであり、構成ファイルを編集できる限り、サイトが低電力の共有ホスティングで実行されている場合でも機能します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

ステップ1-最初のPageSpeedスコアを取得する

変更を行う前に、既存のPageSpeedスコアをキャプチャして、チュートリアルが完了したときに比較するパフォーマンスベースラインを用意します。 これを行うには、サイトのURLをhttps://developers.google.com/speed/pagespeed/insights/[GoogleのPageSpeed Insightsサービス]に貼り付けて、[* Insights を実行]をクリックします。

次のような結果が表示されます。

image:https://assets.digitalocean.com/articles/pagespeed_nginx_1604/LbXFqZD.png [最適化前のPageSpeedスコア]

この例では、サーバーで圧縮とブラウザーのキャッシュが正しく構成されていないため、モバイルで63、デスクトップで74という低いスコアが表示されます。 このチュートリアルの終わりまでに、これら2つの項目は、Nginxの構成変更により、すべてのデバイスタイプで解決されます。

まず、Nginxを構成して、いくつかの応答を圧縮します。

ステップ2-圧縮の有効化

CSS、JavaScript、および画像ファイルは大きくなる可能性があり、ユーザーがダウンロードしなければならないデータ量が増加します。 圧縮とは、これらのアセットのサイズを小さくして、より小さく、必要なデータをすべて含むよりコンパクトなバージョンにすることを意味します。 Gzipは、Nginxでこの圧縮を実行するための1つのオプションです。 すべての主要なLinuxディストリビューションで利用可能であり、有効化して正しく構成する必要があります。 Gzip圧縮が有効になっていると、ブラウザーは静的アセットをより速くダウンロードできるため、PageSpeedツールは対処する必要があるものとしてフラグを立てます。

圧縮を有効にするには、nanoまたはお気に入りのテキストエディターでサイトのNginx構成ファイルを開きます。 この例では、デフォルトファイルを使用します。

sudo nano /etc/nginx/sites-available/

次のようなサーバー構成ブロックを見つけます。

/ etc / nginx / sites-available / default

server {
   listen 80 default_server;
   listen [::]:80 default_server;
   . . .
}

圧縮を設定するために一連のスニペットを追加しましょう。

まず、Gzip圧縮を有効にして、圧縮レベルを設定します。

/ etc / nginx / sites-available / default

server {
   listen 80 default_server;
   listen [::]:80 default_server;

この値には、「+ 1+」から「9」までの数値を選択できます。 `+ 5 +`は、サイズとCPU使用率の完璧な妥協点であり、ほとんどのASCIIファイル(レベル9とほぼ同じ)で約75%削減されます。

次に、Nginxに、既に小さく、さらに縮小する可能性が低いものを圧縮しないように指示します。 デフォルトは「20」バイトです。これは、通常、圧縮後にファイルが大きくなるため、好ましくありません。 代わりに「256」に設定します。

/ etc / nginx / sites-available / default

...
   gzip_comp_level    5;

次に、https://aws.amazon.com/cloudfront/ [CloudFront]のようなプロキシを介して接続しているクライアントでもデータを圧縮するようにNginxに指示します。

/ etc / nginx / sites-available / default

...
   gzip_min_length    256;

次に、クライアントの `+ Accept-Encoding +`機能ヘッダーが変化するたびに、これらのプロキシにリソースの圧縮バージョンと通常バージョンの両方をキャッシュするように指示します。 これにより、今日非常にまれな非Gzip対応クライアントが、プロキシが圧縮バージョンを提供した場合にちらつきが表示される問題を回避できます。

...
   gzip_proxied       any;

最後に、圧縮する出力のMIMEタイプを指定します。 画像、JSONデータ、フォント、その他の一般的なファイルタイプを圧縮します。

/ etc / nginx / sites-available / default

...
   gzip_vary          on;

完了すると、セクション全体が次の例のようになります。

/ etc / nginx / sites-available / default

server {
   listen 80 default_server;
   listen [::]:80 default_server;

   gzip on;
   gzip_comp_level    5;
   gzip_min_length    256;
   gzip_proxied       any;
   gzip_vary          on;

   gzip_types
   application/atom+xml
   application/javascript
   application/json
   application/ld+json
   application/manifest+json
   application/rss+xml
   application/vnd.geo+json
   application/vnd.ms-fontobject
   application/x-font-ttf
   application/x-web-app-manifest+json
   application/xhtml+xml
   application/xml
   font/opentype
   image/bmp
   image/svg+xml
   image/x-icon
   text/cache-manifest
   text/css
   text/plain
   text/vcard
   text/vnd.rim.location.xloc
   text/vtt
   text/x-component
   text/x-cross-domain-policy;
   # text/html is always compressed by gzip module
}

ファイルを保存して閉じます。

設定ファイルに多くの行を追加しましたが、何かを壊す可能性のある文字やセミコロンが欠落している可能性が常にあります。 この時点でファイルにエラーがないことを確認するには、Nginx構成をテストします。

sudo nginx -t

このチュートリアルに記載されているとおりに変更を加えた場合、エラーメッセージは表示されません。

この変更により、サイトの速度が最大に向上しますが、ブラウザのキャッシュを活用するようにNginxを構成することもできます。これにより、サーバーのパフォーマンスがさらに向上します。

ステップ3-ブラウザーキャッシュの構成

ドメインに初めてアクセスすると、これらのファイルがダウンロードされ、ブラウザのキャッシュに保存されます。 その後のアクセスでは、ブラウザはファイルを再度ダウンロードする代わりにローカルバージョンを提供できます。 これにより、最後のアクセス以降に変更されたデータのみを取得する必要があるため、Webページのロードがはるかに高速になります。 これは、ユーザーにはるかに優れたエクスペリエンスを提供し、GoogleのPageSpeed Insightsが実装を推奨する理由です。

もう一度、エディターでデフォルトのNginx構成ファイルを開きます。

sudo nano /etc/nginx/sites-available/default

ブラウザにCSS、JavaScript、画像、PDFファイルをキャッシュに7日間保存するよう指示する小さなコードを追加します。

Gzip圧縮の以前のコードの直後に、サーバーブロック内に次のスニペットを挿入します。

/ etc / nginx / sites-available / default

...
# text/html is always compressed by gzip module

最終的なNginx構成ファイルは次のようになります。

/ etc / nginx / sites-available / default

server {
   listen 80 default_server;
   listen [::]:80 default_server;

   gzip on;
   gzip_comp_level    5;
   gzip_min_length    256;
   gzip_proxied       any;
   gzip_vary          on;

   gzip_types
   application/atom+xml
   application/javascript
   application/json
   application/ld+json
   application/manifest+json
   application/rss+xml
   application/vnd.geo+json
   application/vnd.ms-fontobject
   application/x-font-ttf
   application/x-web-app-manifest+json
   application/xhtml+xml
   application/xml
   font/opentype
   image/bmp
   image/svg+xml
   image/x-icon
   text/cache-manifest
   text/css
   text/plain
   text/vcard
   text/vnd.rim.location.xloc
   text/vtt
   text/x-component
   text/x-cross-domain-policy;
   # text/html is always compressed by gzip module

   location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
       expires 7d;
   }
}

ファイルを保存して閉じ、終了します。 構成にエラーがないことを確認します。

sudo nginx -t

次に、Nginxを再起動して、これらの新しいディレクティブを着信リクエストに適用します。

sudo systemctl restart nginx

より良いPageSpeedスコアを提供するようにNginxを調整しました。 これらの変更がPageSpeedにどのように影響するかを見てみましょう。

ステップ4-結果を測定する

これらの構成変更によりPageSpeedスコアがどれだけ上昇したかを確認するには、URLを貼り付けて[* Insights *を実行]をクリックして、PageSpeed Insightsツールでサイトをもう一度実行します。 圧縮とブラウザキャッシュの警告が消えていることがわかります。

image:https://assets.digitalocean.com/articles/pagespeed_nginx_1604/IQolNMR.png [最適化後のPageSpeedスコア]

新しいスコアを最初のベースラインメトリックと比較します。 このチュートリアルを完了すると、以前より少なくとも10ポイント高い評点が得られます。

私たちの目標は、80以上のスコアを持つことでした。 サイトがまだこのしきい値を下回っている場合、注意する必要がある他のことがあります。 PageSpeed Insightsは、これらが何であるかを正確に詳述し、各問題の[*修正方法を表示]リンクをクリックすると、それらを修正する方法を示します。 正確な手順はサイトごとに異なり、このチュートリアルの範囲外です。

結論

Nginxの設定を簡単に変更して、ウェブサイトを高速化しました。 PageSpeedスコアが大幅に改善され、サイトの読み込み速度が大幅に向上しました。 これにより、ユーザーの満足度が向上し、Googleの目にはサイトの品質が向上します。 PageSpeedは非常に重要なランキングシグナルであり、ドメインが訪問者に快適な体験を提供していることを実証しています。

Nginxの設定を変更することはPageSpeedを改善する1つの方法にすぎず、それだけでは不十分な場合があります。 パフォーマンスコードを記述し、物事を適切にキャッシュし、コンテンツ配信ネットワーク(CDN)を介してアセットを提供し、可能な限りミニフィケーションを使用して物事を高速化する必要があります。