本文へ移動
技術を、自社の仕事に。
判断と実行を助けるメディア

記事を検索

遅い一部分のために、ページ全体を待たせない書き方が標準へ

目次 · 5項目

商品一覧の表示が遅い。調べてみると、遅いのは商品名でも画像でもなく、1件ずつ外部に問い合わせている在庫の表示だけ。それでもページ全体が出てこないので、利用者から見れば「サイトが重い」という話になります。

この症状に対する答えは以前からありました。先に出せる部分を返し、遅れて届いた分だけ後から差し替える。ただ、これを実装するにはフレームワークの仕組みに乗る必要がありました。その前提が変わりつつあります。

<template> に for 属性が加わる

Declarative Partial Updates と呼ばれる提案の記法が、2026年8月20日に WHATWG の HTML Living Standard に取り込まれました。Chrome の開発チームから出された提案で、標準の <template> 要素に新しい for 属性を加える形で、順序どおりでないストリーミングを表現します。

差し替える位置は、<?marker> や <?start>〜<?end> という処理命令で示します。対応は Chrome 150 と Edge 150 ですでに入っており、レスポンスを文字列のストリームとして読む textStream() も Chrome 151 で追加されました。WebKit は標準化への立場として支持(support)を、Mozilla は前向き(positive)を表明しています。ただし今回の確認では、Safari と Firefox の正式版で使えることは確認できていません。

何が要らなくなり、何が残るか

誤解しやすいのは、「フレームワークが不要になる」という読み方です。実際に置き換わるのは、部分更新を実現するための配管だけです。

  • 要らなくなる可能性があるもの: 差し替えのためだけに入れたクライアント側の仕組み、そのための追加のJavaScript
  • 変わらず必要なもの: 遅い処理を切り出したサーバー側の設計、順序が入れ替わっても壊れないレイアウト

つまり、サーバーが「先に出せる部分」と「後から出す部分」を分けて返せないなら、記法が標準に入っても使い道はありません。この分割の考え方そのものはストリーミングSSRと部分更新で扱っています。

全員に効くのは、まだ先

対応がChrome系から始まる以上、いま改修しても効くのは一部の利用者です。実務では、対応していないブラウザでも従来どおり表示が完了する作り、つまり届いたら差し替わる、届かなければ最後まで待つ、という形にしておきます。この作りなら、対応が広がった時点で自動的に恩恵が増えます。Chromeの開発チームは未対応のブラウザ向けのポリフィル(同じ動きを補うスクリプト)も公開していますが、ブラウザのHTML解析そのものは変えられないため、補えるのは主な使い方に限られると説明しています。

逆に言えば、いま急いで書き換える理由は薄いということです。先にやることが別にあります。

いまの作りのままでも効くこと

記法を待たずにできることもあります。遅い処理を画面の描画から切り離し、その場所に「読み込み中」の枠を先に出しておく。枠の大きさを確定させておけば、後から中身が入っても表示が飛び跳ねません。

これは新しい仕様とは無関係に効きますし、順序が入れ替わっても崩れないレイアウトを先に用意することにもなります。対応するブラウザが広がったときに、標準の記法へそのまま載せ替えられる状態です。

この作りは、対応するブラウザが増えるのを待つ間も無駄になりません。枠の大きさが決まっていれば、読み込みの途中で文字や画像が飛び跳ねる現象そのものが減り、指標としても改善します。

測る場所を間違えない

そもそも、遅さの原因が本当に「一部の遅い処理」なのかを確かめていない改修は空振りします。ブラウザの計測ツールで見えるのは、ブラウザから先の区間だけです。配信の前段とサーバーの間で時間を使っている場合、部分更新を入れても最初の1文字が届くまでの待ち時間は変わりません。

区間を分けて測る考え方は表示が遅いときに見る区間、指標の読み方はCore Web Vitals の基本で整理しています。

逆に、区間を分けて測った結果、遅いのがページの生成そのものだった場合は、部分更新を入れても体感は変わりません。測ってから決める順番を崩さないことが、結局いちばん早く終わります。

測ったうえで、遅い処理が本当に画面の一部に限られているなら、その部分をサーバー側で切り出しておきます。対応が広がったときに記法へ載せ替えるだけで済み、切り出し自体は今の作りのままでも効果があります。

2026年9月24日に、WHATWGのHTML仕様への変更(8月20日に取り込まれたプルリクエスト)、ChromeとEdgeのリリースノート、WebKitとMozillaの標準化への立場を確認しました。対応ブラウザでの実装検証、ポリフィルの動作確認、既存サイトへの適用による表示時間の実測は行っていません。HTMLの仕様は継続して更新されるため、記法や各ブラウザの対応状況は変わる可能性があります。

サイトの表示速度の調査や、改修範囲の切り分けの相談は、グリームハブへご相談ください。

この記事を共有XFacebook
鈴木 翔

技術の可能性に魅了され、学生時代からプログラミングとデジタルアートの分野に深い関心を持つ

この記事のテーマを、自社の次の一歩へ

Webサイトで、実現したいことから。

使う人の目的、必要な機能、更新の体制を整理し、制作・改善で最初に取り組むことを考えます。

  • サイトの目的
  • 機能と使いやすさ
  • 公開後の運用
Web制作・改善を相談する

構想段階からご相談いただけます。この記事の情報を相談フォームに引き継ぎます。

最新記事をメールで受け取る・Web制作ガイドを読む
無料ダウンロード

Web制作 費用・発注・集客 完全ガイド【2026年版】

費用相場・制作会社の選び方・集客戦略をPDFにまとめました。

The PDF and newsletter emails are currently in Japanese.

メルマガにも登録されます。いつでも解除可能です。