Debugging and Performance
Debug faster and optimize performance with AI — interpret error messages, fix layout issues, improve Core Web Vitals, and audit your site for speed.
Premium Course Content
This lesson is part of a premium course. Upgrade to Pro to unlock all premium courses and content.
- Access all premium courses
- 1000+ AI skill templates included
- New content added weekly
🔄 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.
Knowledge Check
Complete the quiz above first
Lesson completed!