revamped

src/scripts/components/faq-item.js

@@ -10,6 +10,7 @@ function closeAllExcept(list, exceptEl) {
 
 export function createFaqItem(item, list) {
     const el = createElement('div', 'faq-item reveal');
+    el.setAttribute('role', 'listitem');
     el.innerHTML = `
         <button class="faq-question" aria-expanded="false">
             <span>${item.q}</span>

src/scripts/components/script-card.js

@@ -31,7 +31,7 @@ export function createScriptCard(script) {
     let html = `
         <div class="script-glow"></div>
         <div class="script-image">
-            <img src="${script.image}" alt="${script.title}" crossorigin="anonymous">
+            <img src="${script.image}" alt="${script.title}" crossorigin="anonymous" width="300" height="168" loading="lazy" decoding="async">
         </div>
         <h3 class="script-title">
             ${script.title}

src/scripts/components/showcase-item.js

@@ -5,7 +5,7 @@ export function createShowcaseItem(video) {
     const item = createElement('div', 'showcase-item');
     item.innerHTML = `
         <button class="showcase-card" type="button" aria-label="Play video">
-            <img class="showcase-thumb" src="${youtubeThumbnailUrl(video.id)}" alt="">
+            <img class="showcase-thumb" src="${youtubeThumbnailUrl(video.id)}" alt="" width="280" height="157" loading="lazy" decoding="async">
         </button>
     `;
 

src/scripts/components/testimonial-card.js

@@ -12,7 +12,7 @@ function initials(name) {
 export function createTestimonialCard(testimonial) {
     const card = createElement('div', 'testimonial-card');
     const avatar = testimonial.avatar
-        ? `<img src="${testimonial.avatar}" alt="">`
+        ? `<img src="${testimonial.avatar}" alt="" width="34" height="34" loading="lazy" decoding="async">`
         : initials(testimonial.name || '?');
 
     card.innerHTML = `