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

22
js/components/pages/page-home.js
View File

@@ -243,6 +243,7 @@ class PageHome extends HTMLElement {
if (this.page === 1) {
this.listings = newItems
this.preloadLcpImage(newItems)
} else {
this.listings = [...this.listings, ...newItems]
}
@@ -261,6 +262,21 @@ class PageHome extends HTMLElement {
}
}
preloadLcpImage(listings) {
const first = listings[0]
if (!first) return
const imageId = first.images?.[0]?.directus_files_id?.id || first.images?.[0]?.directus_files_id
if (!imageId) return
const url = directus.getThumbnailUrl(imageId, 180)
if (document.querySelector(`link[rel="preload"][href="${url}"]`)) return
const link = document.createElement('link')
link.rel = 'preload'
link.as = 'image'
link.href = url
link.fetchPriority = 'high'
document.head.appendChild(link)
}
sortByDistance(listings) {
if (!this.hasUserLocation()) return listings
@@ -419,6 +435,7 @@ class PageHome extends HTMLElement {
${showFilters ? `<h2 class="listings-title">${this.getListingsTitle()}</h2>` : ''}
<div class="listings-toolbar">
<div class="sort-inline">
<label for="sort-select" class="sr-only">${t('search.sortBy')}</label>
<select id="sort-select">
${this.hasUserLocation() ? `<option value="distance" ${this.sort === 'distance' ? 'selected' : ''}>${t('search.sortDistance')}</option>` : ''}
<option value="newest" ${this.sort === 'newest' ? 'selected' : ''}>${t('search.sortNewest')}</option>
@@ -503,9 +520,9 @@ class PageHome extends HTMLElement {
`
}
const listingsHtml = this.listings.map(listing => {
const listingsHtml = this.listings.map((listing, index) => {
const imageId = listing.images?.[0]?.directus_files_id?.id || listing.images?.[0]?.directus_files_id
const imageUrl = imageId ? directus.getThumbnailUrl(imageId, 300) : ''
const imageUrl = imageId ? directus.getThumbnailUrl(imageId, 180) : ''
const locationName = listing.location?.name || ''
return /* html */`
@@ -517,6 +534,7 @@ class PageHome extends HTMLElement {
location="${escapeHTML(locationName)}"
image="${imageUrl}"
owner-id="${listing.user_created || ''}"
${index < 4 ? 'priority' : ''}
></listing-card>
`
}).join('')