Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

perf(templates): add defer attribute to main.js script tags

Browse Source 
- Add defer attribute to all main.js script includes across 22 template files
- Improves page load performance by allowing HTML parsing to continue without blocking
- Maintains script execution order while enabling parallel resource loading

This optimization reduces page render blocking and improves perceived load times
across all admin and user-facing pages that include the main.js bundle.

Affected pages include: admin dashboard, library management, settings, user
management, analytics, bookshelf, collections, conflicts, custom sections,
devices, documentation, profile, progress tracking, queue, and authentication
pages (login/register).
This commit is contained in:
john-okeefe
2026-03-12 09:04:13 -04:00
parent b754f0ddce
commit 96e206b671
21 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/admin.templ
+1 -1
View File
@@ -7,7 +7,7 @@ templ Admin(user User) {
<meta charset="UTF-8"/>
<title>Admin Dashboard - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-tokyo-night" x-data="admin">
templates/admin_library.templ
+1 -1
View File
@@ -150,7 +150,7 @@ templ AdminLibrary(user User, libraries []LibraryData, users []User) {
</div>
</div>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
</body>
</html>
}
templates/admin_settings.templ
+1 -1
View File
@@ -7,7 +7,7 @@ templ AdminSettings(user User, systemConfig map[string]string, errorMessage stri
<meta charset="UTF-8"/>
<title>System Settings - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ user.Theme }" x-data="adminSettings">
templates/admin_users.templ
+1 -1
View File
@@ -7,7 +7,7 @@ templ AdminUsers(currentUser User, users []User, adminCount int) {
<meta charset="UTF-8"/>
<title>Users - Bookhoard Admin</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ currentUser.Theme }">
templates/analytics.templ
+1 -1
View File
@@ -8,7 +8,7 @@ templ Analytics(user User) {
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Reading Analytics - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body x-data="analytics" class="theme-{ user.Theme }">
templates/bookshelf.templ
+1 -1
View File
@@ -8,7 +8,7 @@ templ BookShelf(user User, libraries []LibraryData) {
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Library - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ user.Theme }" x-data="bookshelf" x-init="initBookshelf(); setupEventDelegation()">
templates/collection_rules.templ
+1 -1
View File
@@ -8,7 +8,7 @@ templ CollectionRules(user User, collection CollectionData) {
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Collection Rules - { collection.Name } - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ user.Theme }" x-data="collectionRules" x-init="initCollectionRules('{ collection.ID }')">
templates/collections.templ
+2 -2
View File
@@ -10,7 +10,7 @@ templ Collection(user User, collections []CollectionData, errorMessage string) {
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Collections - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body x-data="collections" class="theme-{ user.Theme }">
@@ -109,7 +109,7 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{ collection.Name } - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body x-data="collections" class="theme-{ user.Theme }">
templates/conflicts.templ
+1 -1
View File
@@ -10,7 +10,7 @@ templ Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total in
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Sync Conflicts - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body x-data="conflicts" class="theme-{ user.Theme }">
templates/custom_section.templ
+1 -1
View File
@@ -8,7 +8,7 @@ templ CustomSectionBuilder(user User, libraries []LibraryData, errorMessage stri
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Create Custom Section - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ user.Theme }">
templates/dashboard.templ
+1 -1
View File
@@ -13,7 +13,7 @@ templ Dashboard(user User, sections []handlers.SectionData, allSections []handle
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Dashboard - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ user.Theme }">
templates/devices.templ
+3 -3
View File
@@ -10,7 +10,7 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Device Management - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ user.Theme }" x-data="devices" x-init="setupEventDelegation()">
@@ -112,7 +112,7 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
/>
<button
@click="copyToClipboard(document.getElementById('sync-url-{ device.ID }').value, 'Kobo sync URL')"
@click="$store.devices.copyToClipboard(document.getElementById('sync-url-{ device.ID }').value, 'Kobo sync URL')"
class="px-3 py-2 text-xs rounded hover:opacity-80"
style="background-color: var(--accent); color: white;"
>
@@ -136,7 +136,7 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border); font-family: monospace;"
/>
<button
@click="copyToClipboard(document.getElementById('auth-token-{ device.ID }').value, 'Auth token')"
@click="$store.devices.copyToClipboard(document.getElementById('auth-token-{ device.ID }').value, 'Auth token')"
class="px-3 py-2 text-xs rounded hover:opacity-80"
style="background-color: var(--accent); color: white;"
>
templates/docs.templ
+1 -1
View File
@@ -11,7 +11,7 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
<title>{ doc.Title } - Bookhoard Documentation</title>
<link href="/static/style.css" rel="stylesheet"/>
<link rel="stylesheet" href="/static/highlight-dark.min.css"/>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
</head>
<body class={ "theme-" + user.Theme + " page-docs bg-background-primary text-text-primary font-sans antialiased" }>
@Header(user, currentPath)
templates/header.templ
+1 -1
View File
@@ -261,5 +261,5 @@ templ Header(user User, currentPath string) {
</div>
</div>
</nav>
<script src="/static/main.js" defer></script>
<script src="/static/main.js" defer defer></script>
}
templates/index.templ
+1 -1
View File
@@ -8,7 +8,7 @@ templ Index(loggedIn bool) {
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Bookhoard - Home</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-tokyo-night" x-data="index" x-init="initIndexTheme(); checkAuthRedirect()">
templates/login.templ
+1 -1
View File
@@ -8,7 +8,7 @@ templ Login(sessionExpired bool, deleted bool) {
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Login</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-tokyo-night min-h-screen" x-data="login" x-init="initLoginTheme()">
templates/profile.templ
+1 -1
View File
@@ -7,7 +7,7 @@ templ Profile(user User) {
<meta charset="UTF-8"/>
<title>Profile Settings - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ user.Theme }" x-data="profile">
templates/progress.templ
+1 -1
View File
@@ -10,7 +10,7 @@ templ Progress(user User, progressData []handlers.ProgressWithMedia, errorMessag
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Reading Progress - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ user.Theme }">
templates/queue.templ
+1 -1
View File
@@ -10,7 +10,7 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Sync Queue - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body x-data="queue" class="theme-{ user.Theme }">
templates/register.templ
+1 -1
View File
@@ -8,7 +8,7 @@ templ Register() {
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Register</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-tokyo-night min-h-screen" x-data="register" x-init="initRegisterTheme()">
templates/unlinked_books.templ
+1 -1
View File
@@ -8,7 +8,7 @@ templ UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) {
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Unlinked Books - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<script src="/static/main.js"></script>
<script src="/static/main.js" defer></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ user.Theme }" x-data="unlinkedBooks" x-init="setupEventDelegation()">