openvibers/openvibe.network Commits
Defer shared scripts on public pages (#775)
Changes
@@@ -672,10 +672,10 @@<!-- Shared scripts --><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>--<script src="/shared/navbar.js"></script>++<script src="/shared/navbar.js" defer></script><script src="/js/account-safety.js" defer></script>--<script src="/shared/notification-ui.js"></script>--<script src="/shared/account-switcher.js"></script>++<script src="/shared/notification-ui.js" defer></script>++<script src="/shared/account-switcher.js" defer></script><script src="/shared/ov-forms.js" defer></script><script src="/js/admin/core.js" defer></script>@@@ -226,7 +226,7 @@ footer{border-top:1px solid var(--border);background:var(--bg-secondary)}.home-chips>li>a { min-height: 44px; }}</style>--<script src="/shared/theme-loader.js"></script>++<script src="/shared/theme-loader.js" defer></script></head><body>@@@ -272,9 +272,9 @@ footer{border-top:1px solid var(--border);background:var(--bg-secondary)}<!-- Footer (shared across the network) --><div id="ov-footer"></div>--<script src="/shared/navbar.js"></script>++<script src="/shared/navbar.js" defer></script><script src="/js/account-safety.js" defer></script>--<script src="/shared/footer.js"></script>++<script src="/shared/footer.js" defer></script><script src="/shared/shipped.js" defer></script><script src="/shared/boost.js" data-main="#main" defer></script><script>(function () { function shipped() { if (window.OpenVibeShipped && document.getElementById('ov-shipped')) OpenVibeShipped.mount('#ov-shipped', { limit: 8, title: 'Recently shipped across OpenVibe', more: '/updates' }); } document.addEventListener('DOMContentLoaded', shipped); document.addEventListener('ov:boost:load', shipped); })();</script>@@@ -631,11 +631,11 @@</dialog><!-- Shared scripts -->--<script src="/shared/theme-loader.js"></script>--<script src="/shared/navbar.js"></script>++<script src="/shared/theme-loader.js" defer></script>++<script src="/shared/navbar.js" defer></script><script src="/js/account-safety.js" defer></script>--<script src="/shared/notification-ui.js"></script>--<script src="/shared/account-switcher.js"></script>++<script src="/shared/notification-ui.js" defer></script>++<script src="/shared/account-switcher.js" defer></script><!-- The kit's behaviour in the page: the copy button on the Account ID (data-ovk-copy). --><script src="/shared/kit-web.js" defer></script>@@@ -30,8 +30,8 @@</div></main>--<script src="/shared/theme-loader.js"></script>--<script src="/shared/navbar.js"></script>++<script src="/shared/theme-loader.js" defer></script>++<script src="/shared/navbar.js" defer></script><script src="/js/account-safety.js" defer></script><script src="/shared/kit-web.js" defer></script><script src="/js/wallet/money.js" defer></script>@@@ -28,7 +28,7 @@} catch (_) { /* nothing kept: theme-loader.js paints shortly */ }})();</script>--<script src="/shared/theme-loader.js"></script>++<script src="/shared/theme-loader.js" defer></script><style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0f1c;--bg-secondary:#101828;--bg-card:#131c2e;--bg-hover:#1c2a44;--border:#1f2d47;--text-primary:#e8ecf5;--text-secondary:#a9b3c9;--text-muted:#6b7590;--accent:#3b82f6;--accent-light:#60a5fa;--accent-rgb:59,130,246;--on-accent:#fff;--success:#22c55e;--danger:#ef4444;--warning:#f59e0b}@@@ -92,7 +92,7 @@ p{color:var(--text-secondary);font-size:14px;line-height:1.6}</div></section></main>--<script src="/shared/navbar.js"></script>++<script src="/shared/navbar.js" defer></script><script src="/js/account-safety.js" defer></script><script>(function () {@@@ -170,8 +170,8 @@</div></dialog>--<script src="/shared/theme-loader.js"></script>--<script src="/shared/navbar.js"></script>++<script src="/shared/theme-loader.js" defer></script>++<script src="/shared/navbar.js" defer></script><script src="/js/account-safety.js" defer></script><script src="/shared/kit-web.js" defer></script><script src="/js/wallet/money.js" defer></script>nnew file mode 100644@@@ -0,0 +1,19 @@++'use strict';++// Every /shared script on a public page is deferred: the look renders from look-boot, and the++// navbar/footer run after the document parses, not before the first paint.++const assert = require('assert');++const fs = require('fs');++const path = require('path');++++for (const name of ['index.html', 'my.html', 'wallet.html', 'pay.html', 'verify-email.html']) {++ const html = fs.readFileSync(path.join(__dirname, '..', 'public', name), 'utf8');++ for (const m of html.matchAll(/<script\b[^>]*>/gi)) {++ const tag = m[0];++ if (!/\ssrc\s*=\s*"\/shared\//.test(tag)) continue;++ const type = /type\s*=\s*"module"/.test(tag);++ assert.ok(/\bdefer\b|\basync\b/.test(tag) || type, `${name}: ${tag.slice(0, 90)} is blocking`);++ }++ assert.ok(html.includes('<script src="/shared/navbar.js" defer></script>') || !html.includes('/shared/navbar.js'), `${name}: navbar deferred`);++ assert.ok(html.includes('<script src="/shared/theme-loader.js" defer></script>') || !html.includes('/shared/theme-loader.js'), `${name}: theme-loader deferred`);++}++console.log('defer shared: no blocking /shared script on public pages');
@@ -672,10 +672,10 @@
@@ -672,10 +672,10 @@
<!-- Shared scripts -->
<!-- Shared scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
-<script src="/shared/navbar.js"></script>
+<script src="/shared/navbar.js" defer></script>
<script src="/js/account-safety.js" defer></script>
<script src="/js/account-safety.js" defer></script>
-<script src="/shared/notification-ui.js"></script>
-<script src="/shared/account-switcher.js"></script>
+<script src="/shared/notification-ui.js" defer></script>
+<script src="/shared/account-switcher.js" defer></script>
<script src="/shared/ov-forms.js" defer></script>
<script src="/shared/ov-forms.js" defer></script>
<script src="/js/admin/core.js" defer></script>
<script src="/js/admin/core.js" defer></script>
@@ -226,7 +226,7 @@ footer{border-top:1px solid var(--border);background:var(--bg-secondary)}
@@ -226,7 +226,7 @@ footer{border-top:1px solid var(--border);background:var(--bg-secondary)}
.home-chips>li>a { min-height: 44px; }
.home-chips>li>a { min-height: 44px; }
}
}
</style>
</style>
-<script src="/shared/theme-loader.js"></script>
+<script src="/shared/theme-loader.js" defer></script>
</head>
</head>
<body>
<body>
@@ -272,9 +272,9 @@ footer{border-top:1px solid var(--border);background:var(--bg-secondary)}
@@ -272,9 +272,9 @@ footer{border-top:1px solid var(--border);background:var(--bg-secondary)}
<!-- Footer (shared across the network) -->
<!-- Footer (shared across the network) -->
<div id="ov-footer"></div>
<div id="ov-footer"></div>
-<script src="/shared/navbar.js"></script>
+<script src="/shared/navbar.js" defer></script>
<script src="/js/account-safety.js" defer></script>
<script src="/js/account-safety.js" defer></script>
-<script src="/shared/footer.js"></script>
+<script src="/shared/footer.js" defer></script>
<script src="/shared/shipped.js" defer></script>
<script src="/shared/shipped.js" defer></script>
<script src="/shared/boost.js" data-main="#main" defer></script>
<script src="/shared/boost.js" data-main="#main" defer></script>
<script>(function () { function shipped() { if (window.OpenVibeShipped && document.getElementById('ov-shipped')) OpenVibeShipped.mount('#ov-shipped', { limit: 8, title: 'Recently shipped across OpenVibe', more: '/updates' }); } document.addEventListener('DOMContentLoaded', shipped); document.addEventListener('ov:boost:load', shipped); })();</script>
<script>(function () { function shipped() { if (window.OpenVibeShipped && document.getElementById('ov-shipped')) OpenVibeShipped.mount('#ov-shipped', { limit: 8, title: 'Recently shipped across OpenVibe', more: '/updates' }); } document.addEventListener('DOMContentLoaded', shipped); document.addEventListener('ov:boost:load', shipped); })();</script>
@@ -631,11 +631,11 @@
@@ -631,11 +631,11 @@
</dialog>
</dialog>
<!-- Shared scripts -->
<!-- Shared scripts -->
-<script src="/shared/theme-loader.js"></script>
-<script src="/shared/navbar.js"></script>
+<script src="/shared/theme-loader.js" defer></script>
+<script src="/shared/navbar.js" defer></script>
<script src="/js/account-safety.js" defer></script>
<script src="/js/account-safety.js" defer></script>
-<script src="/shared/notification-ui.js"></script>
-<script src="/shared/account-switcher.js"></script>
+<script src="/shared/notification-ui.js" defer></script>
+<script src="/shared/account-switcher.js" defer></script>
<!-- The kit's behaviour in the page: the copy button on the Account ID (data-ovk-copy). -->
<!-- The kit's behaviour in the page: the copy button on the Account ID (data-ovk-copy). -->
<script src="/shared/kit-web.js" defer></script>
<script src="/shared/kit-web.js" defer></script>
@@ -30,8 +30,8 @@
@@ -30,8 +30,8 @@
</div>
</div>
</main>
</main>
-<script src="/shared/theme-loader.js"></script>
-<script src="/shared/navbar.js"></script>
+<script src="/shared/theme-loader.js" defer></script>
+<script src="/shared/navbar.js" defer></script>
<script src="/js/account-safety.js" defer></script>
<script src="/js/account-safety.js" defer></script>
<script src="/shared/kit-web.js" defer></script>
<script src="/shared/kit-web.js" defer></script>
<script src="/js/wallet/money.js" defer></script>
<script src="/js/wallet/money.js" defer></script>
@@ -28,7 +28,7 @@
@@ -28,7 +28,7 @@
} catch (_) { /* nothing kept: theme-loader.js paints shortly */ }
} catch (_) { /* nothing kept: theme-loader.js paints shortly */ }
})();
})();
</script>
</script>
-<script src="/shared/theme-loader.js"></script>
+<script src="/shared/theme-loader.js" defer></script>
<style>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg-primary:#0a0f1c;--bg-secondary:#101828;--bg-card:#131c2e;--bg-hover:#1c2a44;--border:#1f2d47;--text-primary:#e8ecf5;--text-secondary:#a9b3c9;--text-muted:#6b7590;--accent:#3b82f6;--accent-light:#60a5fa;--accent-rgb:59,130,246;--on-accent:#fff;--success:#22c55e;--danger:#ef4444;--warning:#f59e0b}
:root{--bg-primary:#0a0f1c;--bg-secondary:#101828;--bg-card:#131c2e;--bg-hover:#1c2a44;--border:#1f2d47;--text-primary:#e8ecf5;--text-secondary:#a9b3c9;--text-muted:#6b7590;--accent:#3b82f6;--accent-light:#60a5fa;--accent-rgb:59,130,246;--on-accent:#fff;--success:#22c55e;--danger:#ef4444;--warning:#f59e0b}
@@ -92,7 +92,7 @@ p{color:var(--text-secondary);font-size:14px;line-height:1.6}
@@ -92,7 +92,7 @@ p{color:var(--text-secondary);font-size:14px;line-height:1.6}
</div>
</div>
</section>
</section>
</main>
</main>
-<script src="/shared/navbar.js"></script>
+<script src="/shared/navbar.js" defer></script>
<script src="/js/account-safety.js" defer></script>
<script src="/js/account-safety.js" defer></script>
<script>
<script>
(function () {
(function () {
@@ -170,8 +170,8 @@
@@ -170,8 +170,8 @@
</div>
</div>
</dialog>
</dialog>
-<script src="/shared/theme-loader.js"></script>
-<script src="/shared/navbar.js"></script>
+<script src="/shared/theme-loader.js" defer></script>
+<script src="/shared/navbar.js" defer></script>
<script src="/js/account-safety.js" defer></script>
<script src="/js/account-safety.js" defer></script>
<script src="/shared/kit-web.js" defer></script>
<script src="/shared/kit-web.js" defer></script>
<script src="/js/wallet/money.js" defer></script>
<script src="/js/wallet/money.js" defer></script>
new file mode 100644
new file mode 100644
@@ -0,0 +1,19 @@
@@ -0,0 +1,19 @@
+'use strict';
+// Every /shared script on a public page is deferred: the look renders from look-boot, and the
+// navbar/footer run after the document parses, not before the first paint.
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+
+for (const name of ['index.html', 'my.html', 'wallet.html', 'pay.html', 'verify-email.html']) {
+ const html = fs.readFileSync(path.join(__dirname, '..', 'public', name), 'utf8');
+ for (const m of html.matchAll(/<script\b[^>]*>/gi)) {
+ const tag = m[0];
+ if (!/\ssrc\s*=\s*"\/shared\//.test(tag)) continue;
+ const type = /type\s*=\s*"module"/.test(tag);
+ assert.ok(/\bdefer\b|\basync\b/.test(tag) || type, `${name}: ${tag.slice(0, 90)} is blocking`);
+ }
+ assert.ok(html.includes('<script src="/shared/navbar.js" defer></script>') || !html.includes('/shared/navbar.js'), `${name}: navbar deferred`);
+ assert.ok(html.includes('<script src="/shared/theme-loader.js" defer></script>') || !html.includes('/shared/theme-loader.js'), `${name}: theme-loader deferred`);
+}
+console.log('defer shared: no blocking /shared script on public pages');