【Blazor】 gzip形式でデータを圧縮する方法

圧縮されたデータを送信することで、通信速度が向上します。 これによって、WEBページやアプリケーションの読み込み時間が短縮され、UX向上が見込めます。 特に、低帯域幅のユーザーやモバイルデバイスの利用者にとっては効果的です。 また、SEO対策にも繋がりますので、設定しておいて損はありません。

Gzip形式でデータ圧縮を行い、Blazorアプリ側とServer側の設定の2つが必要になります。 まずはBlazor側で設定を行います。 Program.csを編集していきます。

using Blazor_GzipCompression.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.ResponseCompression;
using System.IO.Compression;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

// 圧縮設定を追加
builder.Services
    .Configure<GzipCompressionProviderOptions>(options => options.Level = CompressionLevel.Fastest);

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();

// 圧縮を使用する
// ※ app.UseStaticFiles()の前に必ずおくこと
app.UseResponseCompression();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

14,15行目で圧縮の方式を設定します。 CompressionLevelで圧縮方式を変更することができます。 圧縮方式によって、圧縮する速度を優先するか圧縮サイズを小さくするのを優先するかを選択できます。 各圧縮方式については以下の表を確認してみてください。

また、データ圧縮を行うために、30行目のapp.UseResponseCompression()が必要になります。 この文は32行目のapp.UseStaticFiles()より先に記述する必要があるので、注意してください。

Webサーバーの設定は利用しているサーバーよって異なります。 詳しくは各Webサーバーのgzip圧縮を有効にする方法について調べてみてください。

参考までに、Nginxの場合の設定方法について簡単に解説します。 Nginxの場合は設定ファイルに以下のコードを追加します。 必要に応じてgzip_typesに圧縮したいMIMEタイプを設定してください。

gzip on;
gzip_types text/css application/javascript application/json application/font-woff application/font-tff image/gif image/png image/jpeg application/octet-stream;

設定したら、以下のコマンドでNginxを再起動しましょう。

systemctl restart nginx

これで問題なく起動するはずです。 gzipによる圧縮が有効かを確認するには、以下のコマンド使用します。 [Webサーバーのドメイン]の部分はご自身のアプリケーションのドメインへ置き換えてください。

curl -I -H 'Accept-Encoding: gzip,deflate' Webサーバーのドメイン

コマンド結果にContent-Encoding: gzipという記述があれば、問題なく圧縮できていると確認できます。

HTTP/1.1 200 OK
Server: nginx/1.10.1
Date: Tue, 15 Nov 2022 14:22:01 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
X-Powered-By: PHP/7.4.33
Link: ; rel="https://api.w.org/"
Link: ; rel="alternate"; type="application/json"
Link: ; rel=shortlink
Content-Encoding: gzip　　←この記述があれば圧縮できています