ASP.NET WebFormsパフォーマンス改善の秘訣!高速なウェブサイトを作る方法
生徒
「ASP.NETで作ったページが表示されるまで、最近すごく時間がかかる気がします。もっとサクサク動かす方法はありますか?」
先生
「ウェブサイトの動作が遅いと、見ている人も疲れてしまいますよね。これを解決することを『パフォーマンス改善』と呼びます。」
生徒
「パフォーマンス改善…。難しそうですが、初心者でもできることはありますか?」
先生
「もちろんです!WebForms特有の仕組みを少し工夫するだけで、驚くほど読み込みが早くなるんですよ。そのコツを伝授しましょう!」
1. パフォーマンス改善とは?ウェブサイトの「ダイエット」
ASP.NET WebForms(エーエスピー・ドットネット・ウェブフォーム)でサイトを作っていると、機能が増えるにつれて動作が重くなることがあります。パフォーマンス改善とは、ウェブサイトが表示されるまでの待ち時間を短くし、快適に動くように調整することです。
パソコンを触ったことがない方には、ウェブサイトの表示を「荷物の配達」に例えると分かりやすいでしょう。配達する荷物が大きすぎたり、道が混んでいたりすると、届くまでに時間がかかりますよね。パフォーマンス改善は、荷物を軽く(データの削減)したり、近道を探したり(処理の効率化)する、いわばウェブサイトのダイエットのような作業なのです。
サイトが速くなると、検索エンジンからの評価も上がりやすくなり、多くの人に記事を読んでもらえる可能性も高まります。
2. ViewState(ビューステート)の最適化
WebFormsを使っていて一番重くなる原因になりやすいのがViewState(ビューステート)です。これは、画面を切り替えても入力内容を覚えておくための「記憶用メモ」のようなものです。
このメモはとても便利ですが、何もしないと全ての部品の情報をメモしてしまい、荷物がどんどん重くなってしまいます。例えば、ただ文字を表示しているだけの場所まで記憶しておく必要はありませんよね。不要な場所ではこの機能を「オフ」にすることで、劇的にスピードが上がります。
<asp:Label ID="lblTitle" runat="server" Text="タイトル" EnableViewState="False"></asp:Label>
このように設定するだけで、インターネットを通るデータの量が減り、表示が軽くなります。小さな積み重ねが、大きな高速化につながります。
3. キャッシュ機能で「同じ計算」を省略する
ウェブサイトでは、誰が見ても同じ内容を表示する部分があります。例えば「今日のニュース」や「会社概要」などです。これらを表示するたびに毎回データベースから探してくるのは、とても効率が悪いです。
そこで役立つのがキャッシュという機能です。これは、一度計算した結果を「すぐ出せる場所」に一時的に保存しておく仕組みです。数学のテストで、一度計算した答えを消さずにメモしておいて、同じ問題が出たらそれを見て答えるようなものです。WebFormsでは、ページ全体や一部をキャッシュに保存して使い回すことができます。
<%@ OutputCache Duration="60" VaryByParam="None" %>
4. ポストバックの回数を減らす工夫
WebFormsには「ボタンを押すと画面全体をサーバーに送って、もう一度作り直す」というポストバックという動きがあります。これが何度も起きると、そのたびに画面がリセットされるため、ユーザーは待たされていると感じます。
これを防ぐには、前回の授業で学んだ「UpdatePanel(アップデートパネル)」を使って、画面の一部だけを更新するようにします。また、ちょっとした文字のチェックなどは、サーバーに聞かなくてもブラウザ側で完結させる「クライアントサイドスクリプト」を活用するのも効果的です。サーバーとの往復回数を減らすことが、高速化への近道です。
5. データベース接続の無駄をなくす
多くのウェブアプリは、情報を「データベース」という本棚から取ってきます。この本棚とのやり取りは、プログラムの中で最も時間がかかる作業の一つです。
パフォーマンスを良くするためには、「一回でまとめて取ってくる」ことが大切です。10冊の本が必要なときに、1冊ずつ往復して取りに行くのではなく、大きなカゴを持って一度に取りに行くイメージです。また、使い終わった接続はすぐに片付ける(Closeする)ことも、システム全体の健康を保つために非常に重要です。
// データベースへの命令(イメージ)
using (SqlConnection conn = new SqlConnection(connectionString))
{
// 接続を自動で閉じてくれる仕組みを使って、無駄を防ぎます
conn.Open();
// ここでまとめてデータを取得する処理を書く
}
6. 画像やファイルの圧縮と最適化
プログラムのコードだけでなく、表示する「画像」の重さも無視できません。とても綺麗な高画質画像は素敵ですが、その分ファイルが大きくなり、読み込みが遅くなります。
画像をウェブ専用の軽い形式(WebPなど)に変換したり、適切なサイズに小さくしたりすることを画像最適化と言います。また、ウェブサイトを動かすための設定ファイル(CSSやJavaScript)の余分な空白を消して、ギリギリまで細くする「ミニファイ」という作業も行われます。見た目は変えずに、見えないところを磨き上げるのがプロの技です。
7. リリースモードでのコンパイル
アプリが完成して、実際にみんなに見てもらうとき(公開するとき)には、リリースモードという設定でプログラムを固める必要があります。開発中はエラーの原因を詳しく教えてくれる「デバッグモード」を使いますが、これは少し動作が遅くなります。
リリースモードに切り替えると、コンピュータが読みやすいようにコードが最適化され、無駄な診断機能がオフになるため、スピードが向上します。設定一つで速くなるので、公開前には必ずチェックしたいポイントです。
<system.web>
<compilation debug="false" targetFramework="4.8" />
</system.web>
8. 継続的な計測と監視が大事
どこが遅いのか分からないまま闇雲に直すのは、暗闇で的を狙うようなものです。そこで、計測(プロファイリング)という作業を行います。どの処理に何秒かかったかを数字で出してくれるツールを使い、犯人(遅い原因)を特定します。
一度速くしたら終わりではありません。機能を追加するたびに、重くなっていないかを確認する。まるで、定期的に健康診断を受けるように、自分の作ったウェブサイトの速さをチェックし続けることが、長く愛されるサイト作りの鍵となります。