| /openbmc/bmcweb/include/ |
| H A D | security_headers.hpp | 499b5b4d Sat Apr 06 10:39:18 CDT 2024 Ed Tanous <ed@tanous.net> Add static webpack etag support
Webpack (which is what vue uses to compress its HTML) is capable of
generating hashes of files when it produces the dist files[1].
This gets generated in the form of
<filename>.<hash>.<extension>
This commit attempts to detect these patterns, and enable etag caching
to speed up webui load times. It detects these patterns, grabs the hash
for the file, and returns it in the Etag header[2].
The behavior is implemented such that:
If the file has an etag, the etag header is returned.
If the request has an If-None-Match header, and that header matches,
only 304 is returned.
Tested:
Tests were run on qemu S7106 bmcweb with default error logging level,
and HTTP/2 enabled, along with svg optimization patches.
Run scripts/generate_auth_certificate.py to set up TLS certificates.
(valid TLS certs are required for HTTP caching to work properly in some
browsers).
Load the webui. Note that DOM load takes 1.10 seconds, Load takes 1.10
seconds, and all requests return 200 OK.
Refresh the GUI.
Note that most resources now return 304, and DOM time is reduced to
279 milliseconds and load is reduced to 280 milliseconds. DOM load
(which is what the BMC has control over) is decreased by a factor of
3-4X.
Setting chrome to "Fast 5g" throttling in the network tab shows a more
pronounced difference, 1.28S load time vs 3.96S.
BMC also shows 477KB transferred on the wire, versus 2.3KB
transferred on the wire. This has the potential to significantly
reduce the load on the BMC when the webui refreshes.
[1] https://webpack.js.org/guides/caching/
[2] https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag
Change-Id: I68aa7ef75533506d98e8fce10bb04a494dc49669
Signed-off-by: Ed Tanous <ed@tanous.net>
|
| H A D | webassets.hpp | 499b5b4d Sat Apr 06 10:39:18 CDT 2024 Ed Tanous <ed@tanous.net> Add static webpack etag support
Webpack (which is what vue uses to compress its HTML) is capable of
generating hashes of files when it produces the dist files[1].
This gets generated in the form of
<filename>.<hash>.<extension>
This commit attempts to detect these patterns, and enable etag caching
to speed up webui load times. It detects these patterns, grabs the hash
for the file, and returns it in the Etag header[2].
The behavior is implemented such that:
If the file has an etag, the etag header is returned.
If the request has an If-None-Match header, and that header matches,
only 304 is returned.
Tested:
Tests were run on qemu S7106 bmcweb with default error logging level,
and HTTP/2 enabled, along with svg optimization patches.
Run scripts/generate_auth_certificate.py to set up TLS certificates.
(valid TLS certs are required for HTTP caching to work properly in some
browsers).
Load the webui. Note that DOM load takes 1.10 seconds, Load takes 1.10
seconds, and all requests return 200 OK.
Refresh the GUI.
Note that most resources now return 304, and DOM time is reduced to
279 milliseconds and load is reduced to 280 milliseconds. DOM load
(which is what the BMC has control over) is decreased by a factor of
3-4X.
Setting chrome to "Fast 5g" throttling in the network tab shows a more
pronounced difference, 1.28S load time vs 3.96S.
BMC also shows 477KB transferred on the wire, versus 2.3KB
transferred on the wire. This has the potential to significantly
reduce the load on the BMC when the webui refreshes.
[1] https://webpack.js.org/guides/caching/
[2] https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag
Change-Id: I68aa7ef75533506d98e8fce10bb04a494dc49669
Signed-off-by: Ed Tanous <ed@tanous.net>
|
| /openbmc/bmcweb/http/ |
| H A D | http2_connection.hpp | 499b5b4d Sat Apr 06 10:39:18 CDT 2024 Ed Tanous <ed@tanous.net> Add static webpack etag support
Webpack (which is what vue uses to compress its HTML) is capable of
generating hashes of files when it produces the dist files[1].
This gets generated in the form of
<filename>.<hash>.<extension>
This commit attempts to detect these patterns, and enable etag caching
to speed up webui load times. It detects these patterns, grabs the hash
for the file, and returns it in the Etag header[2].
The behavior is implemented such that:
If the file has an etag, the etag header is returned.
If the request has an If-None-Match header, and that header matches,
only 304 is returned.
Tested:
Tests were run on qemu S7106 bmcweb with default error logging level,
and HTTP/2 enabled, along with svg optimization patches.
Run scripts/generate_auth_certificate.py to set up TLS certificates.
(valid TLS certs are required for HTTP caching to work properly in some
browsers).
Load the webui. Note that DOM load takes 1.10 seconds, Load takes 1.10
seconds, and all requests return 200 OK.
Refresh the GUI.
Note that most resources now return 304, and DOM time is reduced to
279 milliseconds and load is reduced to 280 milliseconds. DOM load
(which is what the BMC has control over) is decreased by a factor of
3-4X.
Setting chrome to "Fast 5g" throttling in the network tab shows a more
pronounced difference, 1.28S load time vs 3.96S.
BMC also shows 477KB transferred on the wire, versus 2.3KB
transferred on the wire. This has the potential to significantly
reduce the load on the BMC when the webui refreshes.
[1] https://webpack.js.org/guides/caching/
[2] https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag
Change-Id: I68aa7ef75533506d98e8fce10bb04a494dc49669
Signed-off-by: Ed Tanous <ed@tanous.net>
|
| H A D | http_response.hpp | 499b5b4d Sat Apr 06 10:39:18 CDT 2024 Ed Tanous <ed@tanous.net> Add static webpack etag support
Webpack (which is what vue uses to compress its HTML) is capable of
generating hashes of files when it produces the dist files[1].
This gets generated in the form of
<filename>.<hash>.<extension>
This commit attempts to detect these patterns, and enable etag caching
to speed up webui load times. It detects these patterns, grabs the hash
for the file, and returns it in the Etag header[2].
The behavior is implemented such that:
If the file has an etag, the etag header is returned.
If the request has an If-None-Match header, and that header matches,
only 304 is returned.
Tested:
Tests were run on qemu S7106 bmcweb with default error logging level,
and HTTP/2 enabled, along with svg optimization patches.
Run scripts/generate_auth_certificate.py to set up TLS certificates.
(valid TLS certs are required for HTTP caching to work properly in some
browsers).
Load the webui. Note that DOM load takes 1.10 seconds, Load takes 1.10
seconds, and all requests return 200 OK.
Refresh the GUI.
Note that most resources now return 304, and DOM time is reduced to
279 milliseconds and load is reduced to 280 milliseconds. DOM load
(which is what the BMC has control over) is decreased by a factor of
3-4X.
Setting chrome to "Fast 5g" throttling in the network tab shows a more
pronounced difference, 1.28S load time vs 3.96S.
BMC also shows 477KB transferred on the wire, versus 2.3KB
transferred on the wire. This has the potential to significantly
reduce the load on the BMC when the webui refreshes.
[1] https://webpack.js.org/guides/caching/
[2] https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag
Change-Id: I68aa7ef75533506d98e8fce10bb04a494dc49669
Signed-off-by: Ed Tanous <ed@tanous.net>
|