HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Performance

Web Performance

Performance refers to the speed at which web pages are downloaded and displayed. Fast websites improve user experience and SEO rankings.

CSS Performance Tips:

Minification: Compress your CSS files by removing whitespace and comments before deploying to production.
Limit Web Fonts: Each custom font (e.g., from Google Fonts) requires a separate network request. Only load the font weights you actually use.
Hardware Acceleration: For smooth 60fps animations, only animate properties that don't trigger layout recalculations. Animate transform and opacity, but AVOID animating width, margin, or top/left.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 30px; }
    
    .box { width: 100px; height: 100px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
    
    /* BAD PERFORMANCE: Animating margin forces the browser to recalculate the layout of the entire page on every frame! */
    .bad-anim {
      background: #e74c3c;
      animation: bad-move 2s infinite alternate;
    }
    @keyframes bad-move { from { margin-left: 0; } to { margin-left: 200px; } }
    
    /* GOOD PERFORMANCE: Animating transform uses the GPU (Hardware Acceleration) and is silky smooth! */
    .good-anim {
      background: #2ecc71;
      animation: good-move 2s infinite alternate;
    }
    @keyframes good-move { from { transform: translateX(0); } to { transform: translateX(200px); } }
  </style>
</head>
<body>

<h2>Performance: Animation Quality</h2>
  <p>Notice how hardware-accelerated transforms provide smoother results with less CPU usage.</p>
  
  <div class="box bad-anim">BAD<br>(Margin)</div>
  <div class="box good-anim">GOOD<br>(Transform)</div>

</body>
</html>

Result

Topics