Achieving a 100/100 Core Web Vitals Score on WordPress Without Bloated Plugins

One of the most common misconceptions among webmasters is installing a battery of bulky optimization plugins (WP Rocket, NitroPack, Perfmatters) in hopes of achieving a 100/100 Google PageSpeed score. In reality, these plugins often cause code conflicts, generate massive amounts of junk files, and break layouts on mobile devices. At DevPixel VN, we apply clean-code architectural principles (Zero-Bloat Engineering) and infrastructure-level optimization, enabling websites to achieve sub-100ms response times and perfect 100/100 Core Web Vitals without relying on any caching plugins.

1. The Core Nature of the 3 Core Web Vitals Metrics (LCP, INP, CLS)

Google evaluates real-world user experience based on 3 key technical pillars:

• LCP (Largest Contentful Paint): The render time of the largest content element visible within the viewport (typically a featured image or an H1 heading block). A good threshold is under 2.5 seconds (optimal target: under 1.2s).
• INP (Interaction to Next Paint): The responsiveness latency when a user interacts with the page (clicking, tapping a button, key pressing). It replaced the old FID metric in March 2024. A good threshold is under 200 milliseconds (optimal target: under 50ms).
• CLS (Cumulative Layout Shift): The degree of unexpected layout shifts or visual instability of UI elements while the page is loading. A good threshold is under 0.1 (optimal target: absolute 0).

2. Strategy 1: Eliminate LCP Bottlenecks by Self-Hosting WOFF2 Fonts

Most LCP latency is wasted because the browser has to send requests to Google Fonts or third-party servers to download font files. The standard technical solution is to self-host variable WOFF2 font files on your own server and preload them:

<!-- Add to <head> to preload critical fonts -->
<link rel="preload" 
      href="/fonts/inter-latin-var.woff2" 
      as="font" 
      type="font/woff2" 
      crossorigin>

<style>
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap; /* Prevent Flash of Invisible Text (FOIT) */
    src: url('/fonts/inter-latin-var.woff2') format('woff2');
  }
</style>

The font-display: swap declaration ensures that the browser immediately renders text using a fallback system font while the primary font is loading, completely eliminating blank screen flashing.

3. Strategy 2: Lock Image Dimensions to Eliminate CLS to 0

Cumulative Layout Shift (CLS) typically occurs when images or ad blocks load without predefined width and height dimensions in CSS, causing all underlying content to suddenly jump downward:

/* Lock fixed dimensions for images and video containers */
.hero-image-wrapper {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9; /* Lock aspect ratio immediately upon HTML download */
  background-color: #f1f5f9; /* Gray placeholder background before the image loads */
  overflow: hidden;
  border-radius: 8px;
}

.hero-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Using the aspect-ratio property allows the browser to calculate and reserve the exact space needed right during the initial DOM construction.

4. Strategy 3: Unloading Bloat Assets to Bring INP Below 50ms

By default, WordPress automatically injects a bunch of redundant CSS and JavaScript files that casual visitors never need (such as Emoji icons, Dashicons font, or unused Gutenberg libraries):

// Add to Theme's functions.php to remove redundant WordPress files
add_action('wp_enqueue_scripts', function() {
    // 1. Remove redundant Gutenberg CSS if not used on the frontend
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
    
    // 2. Remove Emoji scripts and Dashicons for guest users
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    remove_action('wp_print_styles', 'print_emoji_styles');
    if (!is_user_logged_in()) {
        wp_dequeue_style('dashicons');
    }
}, 100);

Cleaning up these redundant assets helps offload the browser’s Main Thread, keeping JavaScript execution idle to immediately respond to every user touch and swipe gesture.

5. Strategy 4: Configure Caddy / Nginx Reverse Proxy to Achieve Sub-80ms TTFB

Time to First Byte (TTFB) is the foundation of all Core Web Vitals metrics. Instead of letting PHP handle every incoming request, configure your web server to serve responses directly from a lightweight microcache:

# Caddyfile configuration for Reverse Proxy and ultra-fast Microcaching
devpixelvn.com {
    encode zstd gzip

    # Forward requests to Next.js frontend
    reverse_proxy localhost:3002 {
        header_up Host {host}
        header_up X-Real-IP {remote_host}
    }

    # Set immutable cache headers for static assets
    @static path /_next/static/* /fonts/* /images/*
    header @static Cache-Control "public, max-age=31536000, immutable"
}

6. Technical Comparison: Speed Plugins vs Clean Code Optimization

7. Frequently Asked Questions & Troubleshooting (FAQ)

A comprehensive compilation of in-depth answers regarding performance optimization and Core Web Vitals scores for WordPress:

Back: First Page of DevPixel VN Technical Handbook