How to Improve Your Core Web Vitals in Morocco

Optimize and Compress Images

• Use modern formats: WebP (30% smaller), AVIF (50% smaller)
• Compress with tools like ImageOptim, Squoosh, or TinyPNG
• Implement responsive images with srcset
• Use lazy loading for below-the-fold images

Use a CDN

Bring content closer to users with a Content Delivery Network (Cloudflare, AWS CloudFront, Fastly)

Implement Efficient Browser Caching

Set appropriate Cache-Control headers for static resources (images, CSS, JS)

Preload Critical Resources

Use <link rel="preload"> for above-the-fold resources:

<link rel="preload" href="/hero.webp" as="image">

Reduce Blocking JavaScript

• Code splitting: Load only what's needed for each page
• Dynamic imports: Lazy load components with React.lazy() or Next.js dynamic()
• Tree shaking: Remove unused code with modern bundlers

Defer Non-Essential Scripts

Load analytics, chat widgets, and third-party scripts after page load:

<script defer src="/analytics.js"></script>

Minimize Main Thread Work

• Break up long tasks into smaller chunks
• Use requestIdleCallback for non-critical work
• Optimize JavaScript execution time

Use Web Workers for Heavy Computations

Offload CPU-intensive tasks to Web Workers to keep the main thread responsive

Define Explicit Dimensions for Images and Iframes

Always specify width and height attributes:

<img src="/hero.webp" width="1200" height="630" alt="Hero">

Reserve Space for Dynamic Content

• Use skeleton screens while loading
• Set min-height for containers with dynamic content
• Avoid inserting content above existing viewport content

Use font-display: swap for Custom Fonts

Prevent invisible text while fonts load:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

Avoid Inserting Content Above Existing Viewport

Don't inject banners, notifications or ads that push content down after page load