Debugging and Performance

🔄 Quick Recall: In the last lesson, you built interactive features and connected to APIs — fetching data, search filters, and accessible components. Now let’s make everything work reliably and load fast.

Debugging with AI

The Debugging Prompt Pattern

When you hit an error, give AI the full picture:

I'm getting an error in my JavaScript:

Error message: [exact error from console]
Error location: [file name, line number if available]
The code:
[paste the relevant function or section — not the entire file]

What I expected: [what should happen]
What actually happens: [what's happening instead]
What I've tried: [any fixes you've already attempted]

Browser: [Chrome/Firefox/Safari/Edge]
Recent changes: [what did you change before the error appeared?]

Diagnose the issue and provide a fix.

✅ Quick Check: Why include “what I’ve tried” in a debugging prompt?

Because it prevents AI from suggesting solutions you’ve already tried and failed. If you’ve already checked that the API URL is correct, AI can skip that and look deeper — maybe the issue is CORS, or the response format changed, or there’s a caching issue. It also shows AI where your debugging went wrong, which often reveals the real problem.

CSS Layout Debugging

My CSS layout isn't working as expected:

Expected: [describe or sketch the layout you want]
Actual: [describe what's happening instead]

HTML structure:
[paste the relevant HTML]

CSS:
[paste the relevant CSS]

Viewport width where it breaks: [specific breakpoint or range]
Browser: [which browser]

Common issues to check:
- Flexbox alignment and wrapping behavior
- Grid track sizing and overflow
- Box model (is padding/border causing unexpected width?)
- Position context (is the parent positioned?)
- Z-index stacking context issues

Cross-Browser Issues

This code works in [browser A] but breaks in [browser B]:

The code:
[paste relevant HTML/CSS/JS]

Works correctly in: [browser + version]
Breaks in: [browser + version]
What breaks: [describe the specific behavior difference]

Check for:
1. CSS properties that need vendor prefixes
2. JavaScript APIs not supported in the target browser
3. CSS layout differences between rendering engines
4. Default browser styles that differ

Performance Optimization

Image Optimization

Images are typically the largest assets on a page:

Optimize the images on my website for performance:

Current setup:
- [number] images on the page
- Largest image: [size in KB/MB]
- Image formats: [jpg/png/svg]

Generate:
1. Responsive image HTML using srcset and sizes attributes
2. Lazy loading implementation (loading="lazy" for below-fold images)
3. Appropriate image format recommendations (WebP with fallbacks)
4. Width and height attributes to prevent layout shift (CLS)
5. Art direction with picture element for different screen sizes

Example image to optimize: [describe one of your images]

JavaScript Performance

Review this JavaScript for performance issues:

[paste your JavaScript]

Check for:
1. DOM queries inside loops (should cache references)
2. Missing debounce/throttle on scroll or resize handlers
3. Large arrays processed synchronously (should they be chunked?)
4. Event listeners not cleaned up (memory leaks)
5. Synchronous operations that could be async
6. Unnecessary re-renders or DOM updates

For each issue, show the current code and the optimized version.

Core Web Vitals Audit

Audit my website HTML/CSS/JS for Core Web Vitals performance:

[paste your HTML, or describe the page structure]

Check and optimize:

LCP (Largest Contentful Paint — target: < 2.5s):
- Is the hero image or largest element preloaded?
- Are render-blocking resources minimized?
- Is critical CSS inlined or prioritized?

CLS (Cumulative Layout Shift — target: < 0.1):
- Do all images have width and height attributes?
- Are fonts loaded with font-display: swap?
- Do dynamic elements (ads, embeds) have reserved space?

INP (Interaction to Next Paint — target: < 200ms):
- Are event handlers efficient?
- Is heavy JavaScript deferred?
- Are long tasks broken into smaller chunks?

Provide specific code fixes for each issue found.

✅ Quick Check: Why must images have explicit width and height attributes?

Because without dimensions, the browser doesn’t know how much space an image needs until it finishes loading. The content below the image sits at the top, then jumps down when the image appears — that’s layout shift (CLS). Setting width and height (the image’s natural dimensions) lets the browser reserve the correct space before the image loads. The content stays put, the image fills its reserved space, and nothing jumps.

Accessibility Audit

Audit this page for accessibility issues:

[paste your HTML]

Check against WCAG 2.1 AA:
1. Color contrast (text against backgrounds — need 4.5:1 ratio)
2. Keyboard navigation (can every interactive element be reached and used?)
3. Screen reader compatibility (landmarks, labels, live regions)
4. Focus management (visible focus indicators, logical tab order)
5. Alternative text (meaningful for informative images, empty for decorative)
6. Form accessibility (labels, error messages, required indicators)
7. Motion sensitivity (respects prefers-reduced-motion)

Prioritize issues by severity: Critical → Major → Minor.

Exercise: Debug and Optimize Your Project

Open your project in Chrome DevTools and check the Console for errors
Run Lighthouse (Chrome DevTools → Lighthouse tab) and note your scores
Use the Core Web Vitals audit prompt on your page
Add lazy loading to all below-fold images
Fix the top 3 issues Lighthouse identifies
Re-run Lighthouse and compare scores

Key Takeaways

Effective debugging prompts include: the error, the code, what you expected, what happened, and what you’ve already tried
Core Web Vitals (LCP, CLS, INP) affect both search rankings and user experience — target LCP < 2.5s, CLS < 0.1, INP < 200ms
Lazy loading images below the fold reduces initial load time by 50-70% on image-heavy pages
Always set explicit width and height on images to prevent layout shift (CLS)
Cache DOM references outside loops, debounce scroll/resize handlers, and clean up event listeners to prevent performance issues and memory leaks
Run Lighthouse before and after optimization to measure real improvement

Up Next: In the next lesson, you’ll deploy your website — hosting, domain setup, SEO optimization, and going live.