Skip to content
intermediate Phase 78 · Performance Advanced

Frontend Performance

45m
1 problems
Topic Progress 0%

Core Web Vitals

LCP (Largest Contentful Paint)

<!-- Preload hero image -->
<link rel="preload" as="image" href="hero.jpg" />

<!-- Use responsive images -->
<img src="product.webp" 
     srcset="product-300.webp 300w, product-600.webp 600w"
     sizes="(max-width: 600px) 300px, 600px"
     alt="Product" />

CLS (Cumulative Layout Shift)

/* Set explicit dimensions for images */
img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

/* Reserve space for ads/iframes */
.ad-container {
    min-height: 250px;
}

INP (Interaction to Next Paint)

// Debounce event handlers
debounce(handler, delay) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => handler.apply(this, args), delay);
    };
}

// Use requestIdleCallback for non-critical work
requestIdleCallback(() => {
    // Analytics, non-essential code
});

Key Points

  • LCP < 2.5s: optimize hero image loading
  • CLS < 0.1: set explicit dimensions
  • INP < 200ms: optimize event handlers
  • Test with Lighthouse and CrUX

JavaScript Optimization

Bundle Size Reduction

// Enable JS bundling
// app/etc/env.php
return [
    'deploy' => [
        'bundle' => true,
    ],
];

Code Splitting

// Dynamic import for non-critical modules
const modal = await import('./modal.js');

// RequireJS optimization
require.config({
    paths: {
        'module': 'js/minified/module'
    }
});

Defer Non-Critical JS

<!-- Defer non-critical scripts -->
<script src="analytics.js" defer></script>
<script src="chat.js" async></script>

<!-- Critical inline -->
<script>
    // Critical path JavaScript
</script>

Key Points

  • Enable JS bundling in production
  • Use dynamic imports for code splitting
  • Defer non-critical JavaScript
  • Minify and compress JS files

CSS Optimization

Critical CSS

<!-- Inline critical CSS -->
<style>
    /* Above-the-fold CSS */
    .header { ... }
    .hero { ... }
</style>

<!-- Load remaining CSS async -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Remove Unused CSS

# Use PurgeCSS to remove unused CSS
purgecss --css styles.css --content index.html --output cleaned.css

CSS Delivery

// Enable CSS minification
return [
    'dev' => [
        'css' => [
            'minify' => 1,
        ],
    ],
];

Key Points

  • Inline critical CSS for fast rendering
  • Load non-critical CSS asynchronously
  • Remove unused CSS rules
  • Minify CSS files

Image Optimization

Modern Formats

<!-- Use WebP/AVIF -->
<picture>
    <source srcset="product.avif" type="image/avif" />
    <source srcset="product.webp" type="image/webp" />
    <img src="product.jpg" alt="Product" />
</picture>

Lazy Loading

<!-- Native lazy loading -->
<img src="product.jpg" loading="lazy" alt="Product" />

<!-- Above-the-fold: no lazy loading -->
<img src="hero.jpg" alt="Hero" />

Image Sizing

// Resize images on server
$optimizer = $this->imageOptimizer->optimize($imagePath, [
    'width' => 600,
    'height' => 400,
    'aspect_ratio' => true,
]);

Key Points

  • Use WebP/AVIF for smaller file sizes
  • Lazy load below-the-fold images
  • Serve appropriately sized images
  • Use CDN for image delivery

Practice Problems

0 / 1 solved
Optimize Core Web Vitals

Optimize a Magento store to improve Core Web Vitals scores.

Solution 
// 1. Fix LCP (hero image)
// - Preload hero image
// - Use WebP format
// - Serve responsive sizes
<link rel="preload" as="image" href="hero.webp" />

// 2. Fix CLS (layout shifts)
// - Set explicit image dimensions
// - Reserve space for dynamic content
<img src="product.webp" width="600" height="400" />

// 3. Fix INP (slow interactions)
// - Debounce event handlers
// - Use requestIdleCallback for non-critical
// - Reduce JavaScript execution time

Quiz

1. What is the target LCP?

Question 1 options

2. How to reduce CLS?

Question 2 options

3. What is critical CSS?

Question 3 options

4. Why use WebP images?

Question 4 options

Flashcards

Question

LCP target?

Click to reveal answer

Answer

Under 2500ms

Question

Reduce CLS?

Click to reveal answer

Answer

Set explicit image/container dimensions

Question

Critical CSS?

Click to reveal answer

Answer

Minimal CSS for above-the-fold content

Question

WebP benefit?

Click to reveal answer

Answer

Smaller file size than JPEG/PNG

Revision Notes

Key Takeaways

  • 1. LCP < 2.5s, CLS < 0.1, INP < 200ms
  • 2. Defer non-critical JavaScript
  • 3. Inline critical CSS, defer rest
  • 4. Use WebP/AVIF with lazy loading

Interview Tips

  • • Explain Core Web Vitals and their targets
  • • Discuss JavaScript optimization techniques
  • • Know image optimization best practices

Cheat Sheet

Frontend Performance

  • LCP: < 2.5s (hero image)
  • CLS: < 0.1 (explicit dimensions)
  • JS: defer, code split
  • CSS: critical inline, rest async
  • Images: WebP, lazy load