Skip to content

Commit 9977399

Browse files
ClaudeDavidKRKCopilot
authored
[WIP] Fix Lighthouse scores below acceptable thresholds (#260)
* Initial plan * fix: improve touch target sizes for accessibility - Increase header navigation links to meet 44x44px minimum - Increase language button sizes to meet accessibility standards - Add min-width/min-height to all interactive elements - Improve padding for better touch targets on mobile Fixes critical target-size failures in Lighthouse audit Agent-Logs-Url: https://github.com/DavidKRK/DavidKRK.github.io/sessions/83353388-96ec-4eb9-ad24-aecc4f47d452 Co-authored-by: DavidKRK <136035295+DavidKRK@users.noreply.github.com> * perf: remove non-existent responsive.css reference - Remove broken link to responsive.css that doesn't exist - Reduces failed resource requests - All responsive styles are already in main style.css Agent-Logs-Url: https://github.com/DavidKRK/DavidKRK.github.io/sessions/83353388-96ec-4eb9-ad24-aecc4f47d452 Co-authored-by: DavidKRK <136035295+DavidKRK@users.noreply.github.com> * perf: improve CLS and lazy loading for images - Add loading="lazy" to all images for better performance - Add loading="lazy" to Mixcloud iframe - Improve iframe styling to prevent layout shifts - All images already have width/height attributes Addresses CLS and LCP performance warnings Agent-Logs-Url: https://github.com/DavidKRK/DavidKRK.github.io/sessions/83353388-96ec-4eb9-ad24-aecc4f47d452 Co-authored-by: DavidKRK <136035295+DavidKRK@users.noreply.github.com> * Fix review feedback on image loading --------- Co-authored-by: anthropic-code-agent[bot] <242468646+Claude@users.noreply.github.com> Co-authored-by: DavidKRK <136035295+DavidKRK@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
1 parent eb604a3 commit 9977399

3 files changed

Lines changed: 26 additions & 18 deletions

File tree

‎assets/css/style.css‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -282,12 +282,14 @@ body {
282282
.hero-header a {
283283
display: inline-flex;
284284
align-items: center;
285+
justify-content: center;
285286
color: white;
286287
text-decoration: none;
287-
margin: 0 1rem;
288+
margin: 0 0.5rem;
288289
font-size: 1.2rem;
289290
min-height: 44px;
290-
padding: 0.4rem 0.35rem;
291+
min-width: 44px;
292+
padding: 0.6rem 0.75rem;
291293
line-height: 1.2;
292294
transition: color 0.3s ease;
293295
}
@@ -473,7 +475,10 @@ footer {
473475

474476
.hero-header a {
475477
font-size: 0.9rem;
476-
margin: 0 0.35rem;
478+
margin: 0 0.25rem;
479+
padding: 0.6rem 0.5rem;
480+
min-height: 44px;
481+
min-width: 44px;
477482
}
478483

479484

@@ -523,7 +528,9 @@ footer {
523528
background: rgba(255, 255, 255, 0.1);
524529
border: none;
525530
color: white;
526-
padding: 0.5rem 1rem;
531+
padding: 0.75rem 1.25rem;
532+
min-height: 44px;
533+
min-width: 44px;
527534
border-radius: 2rem;
528535
cursor: pointer;
529536
transition: var(--transition);
@@ -782,7 +789,9 @@ footer {
782789
background: rgba(0,0,0,0.7);
783790
color: #00ff00;
784791
border: 2px solid #00ff00;
785-
padding: 10px 15px;
792+
padding: 12px 18px;
793+
min-height: 44px;
794+
min-width: 44px;
786795
border-radius: 20px;
787796
cursor: pointer;
788797
transition: all 0.3s;

‎index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></noscript>
3333
<!-- CSS principal -->
3434
<link rel="stylesheet" href="assets/css/style.css">
35-
<link rel="stylesheet" href="assets/css/responsive.css">
3635
</head>
3736
<body class="home-page">
3837

‎shop.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,10 @@ <h2 class="mt-4">Boutique Officielle</h2>
8282
<p>Scannez le QR code pour commander votre T‑shirt et rejoindre le mouvement.</p>
8383
</div>
8484
<div class="product-image mt-6">
85-
<img src="images/tshirt-davidkrk.png" alt="T-shirt officiel David KRK porté, coupe premium, logo noir sur fond blanc" width="400" height="400">
85+
<img src="images/tshirt-davidkrk.png" alt="T-shirt officiel David KRK porté, coupe premium, logo noir sur fond blanc" width="400" height="400" loading="lazy">
8686
</div>
8787
<div class="mt-6">
88-
<img src="images/qr-tshirt-boutique.png" alt="QR code pour commander le T‑shirt officiel David KRK à 24,90 euros frais de port inclus" width="200" height="200">
88+
<img src="images/qr-tshirt-boutique.png" alt="QR code pour commander le T‑shirt officiel David KRK à 24,90 euros frais de port inclus" width="200" height="200" loading="lazy">
8989
</div>
9090
</div>
9191

@@ -100,10 +100,10 @@ <h2 class="mt-4">Official Shop</h2>
100100
<p>Scan the QR code to order your T‑shirt and join the movement.</p>
101101
</div>
102102
<div class="product-image mt-6">
103-
<img src="images/tshirt-davidkrk.png" alt="Official David KRK T-shirt, premium fit, black logo on white" width="400" height="400">
103+
<img src="images/tshirt-davidkrk.png" alt="Official David KRK T-shirt, premium fit, black logo on white" width="400" height="400" loading="lazy">
104104
</div>
105105
<div class="mt-6">
106-
<img src="images/qr-tshirt-boutique.png" alt="QR code to order the official David KRK T-shirt for 24.90 euros including shipping" width="200" height="200">
106+
<img src="images/qr-tshirt-boutique.png" alt="QR code to order the official David KRK T-shirt for 24.90 euros including shipping" width="200" height="200" loading="lazy">
107107
</div>
108108
</div>
109109

@@ -118,10 +118,10 @@ <h2 class="mt-4">Tienda Oficial</h2>
118118
<p>Escanea el código QR para pedir tu camiseta y unirte al movimiento.</p>
119119
</div>
120120
<div class="product-image mt-6">
121-
<img src="images/tshirt-davidkrk.png" alt="Camiseta oficial David KRK, corte premium, logo negro sobre blanco" width="400" height="400">
121+
<img src="images/tshirt-davidkrk.png" alt="Camiseta oficial David KRK, corte premium, logo negro sobre blanco" width="400" height="400" loading="lazy">
122122
</div>
123123
<div class="mt-6">
124-
<img src="images/qr-tshirt-boutique.png" alt="Código QR para pedir la camiseta oficial David KRK por 24,90 euros con envío incluido" width="200" height="200">
124+
<img src="images/qr-tshirt-boutique.png" alt="Código QR para pedir la camiseta oficial David KRK por 24,90 euros con envío incluido" width="200" height="200" loading="lazy">
125125
</div>
126126
</div>
127127

@@ -136,10 +136,10 @@ <h2 class="mt-4">Denda Ofiziala</h2>
136136
<p>Eskaneatu QR kodea zure kamiseta eskatzeko eta mugimenduarekin bat egiteko.</p>
137137
</div>
138138
<div class="product-image mt-6">
139-
<img src="images/tshirt-davidkrk.png" alt="David KRK kamiseta ofiziala, premium mozketa, logo beltza zurian" width="400" height="400">
139+
<img src="images/tshirt-davidkrk.png" alt="David KRK kamiseta ofiziala, premium mozketa, logo beltza zurian" width="400" height="400" loading="lazy">
140140
</div>
141141
<div class="mt-6">
142-
<img src="images/qr-tshirt-boutique.png" alt="QR kodea David KRK kamiseta ofiziala 24,90 eurotan, bidalketa barne, eskatzeko" width="200" height="200">
142+
<img src="images/qr-tshirt-boutique.png" alt="QR kodea David KRK kamiseta ofiziala 24,90 eurotan, bidalketa barne, eskatzeko" width="200" height="200" loading="lazy">
143143
</div>
144144
</div>
145145

@@ -154,10 +154,10 @@ <h2 class="mt-4">المتجر الرسمي</h2>
154154
<p>امسح رمز QR لطلب القميص والانضمام إلى الحركة.</p>
155155
</div>
156156
<div class="product-image mt-6">
157-
<img src="images/tshirt-davidkrk.png" alt="تي شيرت ديفيد كرك الرسمي، جودة عالية، شعار أسود على خلفية بيضاء" width="400" height="400">
157+
<img src="images/tshirt-davidkrk.png" alt="تي شيرت ديفيد كرك الرسمي، جودة عالية، شعار أسود على خلفية بيضاء" width="400" height="400" loading="lazy">
158158
</div>
159159
<div class="mt-6">
160-
<img src="images/qr-tshirt-boutique.png" alt="رمز QR لطلب تي شيرت ديفيد كرك الرسمي بسعر 24.90 يورو مع الشحن" width="200" height="200">
160+
<img src="images/qr-tshirt-boutique.png" alt="رمز QR لطلب تي شيرت ديفيد كرك الرسمي بسعر 24.90 يورو مع الشحن" width="200" height="200" loading="lazy">
161161
</div>
162162
</div>
163163

@@ -172,10 +172,10 @@ <h2 class="mt-4">Офіційний магазин</h2>
172172
<p>Скануй QR‑код, щоб замовити футболку та приєднатися до руху.</p>
173173
</div>
174174
<div class="product-image mt-6">
175-
<img src="images/tshirt-davidkrk.png" alt="Офіційна футболка David KRK, преміальний крій, чорний логотип на білому" width="400" height="400">
175+
<img src="images/tshirt-davidkrk.png" alt="Офіційна футболка David KRK, преміальний крій, чорний логотип на білому" width="400" height="400" loading="lazy">
176176
</div>
177177
<div class="mt-6">
178-
<img src="images/qr-tshirt-boutique.png" alt="QR‑код для замовлення офіційної футболки David KRK за 24,90 євро з доставкою" width="200" height="200">
178+
<img src="images/qr-tshirt-boutique.png" alt="QR‑код для замовлення офіційної футболки David KRK за 24,90 євро з доставкою" width="200" height="200" loading="lazy">
179179
</div>
180180
</div>
181181
</main>

0 commit comments

Comments
 (0)