giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

perf: address PageSpeed Insights issues (CLS, contrast, touch targets, JS minification)

Browse Source 
- Reserve sidebar min-height on desktop to prevent CLS from Alpine.js hydration
- Defer lite-yt-embed.css with media="print" onload pattern
- Add terser JS minification in eleventy.after build hook
- Increase touch target sizing for category pills, facepile avatars, nav items
- Fix text-surface-400 contrast ratio (3.05:1 → 6.23:1) across 20 instances

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
This commit is contained in:
Ricardo
2026-03-07 20:13:45 +01:00
parent 2c60bc2580
commit 6ff40c8317
14 changed files with 59 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/critical.css
View File

@@ -45,6 +45,8 @@ main.container{padding-top:1.5rem;padding-bottom:1.5rem}
.layout-with-sidebar{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:1024px){.layout-with-sidebar{grid-template-columns:2fr 1fr;gap:2rem}}
.main-content{min-width:0;overflow-x:hidden}
/* Reserve sidebar space on desktop to prevent CLS when Alpine.js hydrates collapsible widgets */
@media(min-width:1024px){.sidebar{min-height:600px}}
/* Basic typography — prevent FOUT */
h1,h2,h3,h4{margin:0;line-height:1.25}

8
css/tailwind.css
View File

@@ -187,7 +187,7 @@
}
.nav-dropdown-menu a {
@apply block px-4 py-2 text-sm text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700 hover:text-surface-900 dark:hover:text-surface-100 no-underline;
@apply block px-4 py-2.5 text-sm text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700 hover:text-surface-900 dark:hover:text-surface-100 no-underline;
}
.nav-dropdown-divider {
@@ -224,7 +224,7 @@
}
.mobile-nav-submenu a {
@apply pl-8 py-2 text-sm border-b-0;
@apply pl-8 py-3 text-sm border-b-0;
}
.mobile-nav-divider {
@@ -332,7 +332,7 @@
/* Category tags (post metadata pills) */
.p-category {
@apply inline-block px-2 py-0.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors;
@apply inline-block px-3 py-1.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors;
}
/* Inline hashtags in post content — styled as subtle links, not pills */
@@ -353,7 +353,7 @@
}
.facepile-avatar img {
@apply w-8 h-8 rounded-full;
@apply w-10 h-10 rounded-full;
}
/* GitHub components */