Move storefront script to head with defer
This document represents an architecture decision record (ADR) and has been mirrored from the ADR section in our Shopware 6 repository. You can find the original version here
- Currently, our main storefront scripts (inline scripts as well as
all.js) are located at the bottom of the page near the body end tag.
asyncattribute is used for the
- Additionally, the
DOMContentLoadedis not compatible with
asyncscripts because they might run before this particular event. That's why
document.readystatechange --> completeis being used at the moment.
- In order to improve the script loading all default
<script>tags are moved to the
<head>and get a
deferattribute in favor of
DOMContentLoadedis being used instead of
document.readystatechange --> complete.
- This change allows the browser to download/fetch the scripts right away when the
<head>is parsed instead of when almost the entire document is already parsed.
- Because of
deferthe script execution will wait until the document is parsed (Just right before the
deferalso ensures that the different
<script>'s are executed in the order in which they are declared.
All app/plugin script tags which extended one of the
base_body_script child blocks must be moved to