schmidt1024/kashilo
1
0
Fork 0
Code Issues Pull Requests Releases Activity

perf: lighthouse optimizations - inline critical CSS, lazy-load routes, WebP images, fix CLS and contrast

Browse Source
This commit is contained in:
Schmidt
2026-02-08 11:22:36 +01:00
parent 013d591e75
commit c66c80adcc
23 changed files with 448 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
js/components/app-shell.js
View File

@@ -3,20 +3,6 @@ import { i18n } from '../i18n.js'
import { auth } from '../services/auth.js'
import './app-header.js'
import './app-footer.js'
import './auth-modal.js'
import './pages/page-home.js'
import './pages/page-listing.js'
import './pages/page-create.js'
import './pages/page-favorites.js'
import './pages/page-my-listings.js'
import './pages/page-messages.js'
import './pages/page-settings.js'
import './pages/page-notifications.js'
import './pages/page-not-found.js'
import './pages/page-privacy.js'
import './pages/page-terms.js'
import './pages/page-about.js'
import './pages/page-contact.js'
class AppShell extends HTMLElement {
constructor() {
@@ -25,8 +11,17 @@ class AppShell extends HTMLElement {
}
connectedCallback() {
this.render()
if (!this.querySelector('#router-outlet')) {
this.innerHTML = /* html */`
<app-header></app-header>
<main class="container" id="router-outlet"></main>
<app-footer></app-footer>
<div id="auth-modal-slot"></div>
`
}
this.main = this.querySelector('#router-outlet')
this.setupRouter()
this.loadAuthModal()
i18n.subscribe(() => {
this.querySelector('app-header').updateTranslations()
@@ -34,35 +29,32 @@ class AppShell extends HTMLElement {
})
}
render() {
this.innerHTML = /* html */`
<app-header></app-header>
<main class="container" id="router-outlet"></main>
<app-footer></app-footer>
<auth-modal hidden></auth-modal>
`
this.main = this.querySelector('#router-outlet')
async loadAuthModal() {
await import('./auth-modal.js')
this.querySelector('#auth-modal-slot').innerHTML = '<auth-modal hidden></auth-modal>'
}
setupRouter() {
router.setOutlet(this.main)
const lazy = (path) => () => import(path)
router.setNotFoundLoader(lazy('./pages/page-not-found.js'))
router
.register('/', 'page-home')
.register('/search', 'page-home') // Redirect search to home
.register('/listing/:id', 'page-listing')
.register('/create', 'page-create')
.register('/edit/:id', 'page-create')
.register('/favorites', 'page-favorites')
.register('/my-listings', 'page-my-listings')
.register('/messages', 'page-messages')
.register('/settings', 'page-settings')
.register('/notifications', 'page-notifications')
.register('/privacy', 'page-privacy')
.register('/terms', 'page-terms')
.register('/about', 'page-about')
.register('/contact', 'page-contact')
.register('/', 'page-home', lazy('./pages/page-home.js'))
.register('/search', 'page-home', lazy('./pages/page-home.js'))
.register('/listing/:id', 'page-listing', lazy('./pages/page-listing.js'))
.register('/create', 'page-create', lazy('./pages/page-create.js'))
.register('/edit/:id', 'page-create', lazy('./pages/page-create.js'))
.register('/favorites', 'page-favorites', lazy('./pages/page-favorites.js'))
.register('/my-listings', 'page-my-listings', lazy('./pages/page-my-listings.js'))
.register('/messages', 'page-messages', lazy('./pages/page-messages.js'))
.register('/settings', 'page-settings', lazy('./pages/page-settings.js'))
.register('/notifications', 'page-notifications', lazy('./pages/page-notifications.js'))
.register('/privacy', 'page-privacy', lazy('./pages/page-privacy.js'))
.register('/terms', 'page-terms', lazy('./pages/page-terms.js'))
.register('/about', 'page-about', lazy('./pages/page-about.js'))
.register('/contact', 'page-contact', lazy('./pages/page-contact.js'))
router.handleRouteChange()
}