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は気付けば大きなサイズになっているので、うまく使ってサイトの高速化を図りたいですね。