画像やCSSを先読み、"WebLink"

Symfony Component Advent Calendar 2023の13日目の記事です。

画像やCSSを先読み、"WebLink"

WebLinkは、HTTP/2 Server PushやResource
Hintsを使って、画像を事前にロードできるコンポーネントです。HTML部分に影響があるのでTwigが必要です。

※ Resource Hintsについて
※ HTTP/2 Server Pushについて

インストール

composer require symfony/web-link

Preload

WebLinkインストール前はbase.html.twigで以下のようにCSSを読み込んでいます。

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
{% endblock %}

WebLinkをインストール後、上記部分をちょっと変えます。

{% block stylesheets %}
-    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
+    <link rel="preload" href="{{ preload(asset('styles/app.css'), {as: 'style'}) }}">
{% endblock %}

すると、レスポンスヘッダにLinkが追加されます。

Link:
</assets/styles/app-4820de829a334adbb3ab0347b423073a.css>; rel="preload"; as="style",

このレスポンスヘッダがついている場合、HTTP/2に対応のサーバであれば該当のCSSはサーバ側からpushされます。イメージ的にはCSSのリクエスト分速くなる感じでしょうか。

通常

WebLink利用時

Cloudflare, Fastly, Akamaiなどもこの機能を利用しているとのこと。

Resource Hints

Resource Hintsはどのリソースを最初にダウンロードしたり、前処理・接続する必要があるかをブラウザに伝えます。Preloadと同じく、レスポンスヘッダのLinkに記載されます。

関数	事前に行う処理	残処理
dns_prefetch()	DNS lookupまで	接続・リソース取得・レンダリング
preconnect()	接続まで	リソース取得・レンダリング
prefetch()	リソースの取得まで	レンダリング
prerender()	レンダリングまで

例えば、prerender()であれば、

といった感じになり、/other-pageを高速で表示することができます。

まとめ

今回はWebLinkでした。画像やCSS、JSは気付けば大きなサイズになっているので、うまく使ってサイトの高速化を図りたいですね。