{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreihzaokhbj27lz65cyvxjdtsw7cfaw5bhdfkse7xcvzwtwx3uwh7qi",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mpvjre44t372"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreicf5grsl7rvljsyvwpx7y5q2zmushtyqrx2kgqniay7adlo7qsuyu"
    },
    "mimeType": "image/webp",
    "size": 402198
  },
  "path": "/amr_osama99/how-i-approach-wordpress-core-web-vitals-before-rebuilding-anything-2hk0",
  "publishedAt": "2026-07-05T11:47:49.000Z",
  "site": "https://dev.to",
  "tags": [
    "wordpress",
    "performance",
    "webdev",
    "seo",
    "How to Improve WordPress Core Web Vitals (2026)",
    "https://amr-osama.net/services/wordpress-performance-optimization/",
    "https://amr-osama.net/"
  ],
  "textContent": "\n\n\n\n##  \n            How to Improve WordPress Core Web Vitals (2026)\n          \n\nA senior developer's practical guide to improving WordPress Core Web Vitals — LCP, INP, and CLS — often without a full rebuild.\n\namr-osama.net\n\nMost slow WordPress sites do not need a full rebuild first.\n\nThey need a proper performance diagnosis.\n\nWhen I audit a WordPress site, I usually start with three questions:\n\n  1. What is delaying the largest visible content?\n  2. What JavaScript is making interaction feel slow?\n  3. What layout shifts are happening after the page starts loading?\n\n\n\nThose map directly to the three Core Web Vitals:\n\n  * **LCP** : how fast the main content appears\n  * **INP** : how responsive the page feels\n  * **CLS** : how visually stable the layout is\n\n\n\n##  1. Start With LCP\n\nFor WordPress sites, LCP problems usually come from one of these:\n\n  * oversized hero images\n  * render-blocking CSS\n  * slow hosting response time\n  * too many plugins loading assets early\n  * sliders or builders delaying the first meaningful section\n\n\n\nBefore touching plugins, I check the actual LCP element. If it is the hero image, I optimize image size, preload strategy, responsive sources, and server delivery.\n\nIf it is text, I look at CSS, fonts, caching, and server response.\n\n##  2. Reduce JavaScript Pressure For INP\n\nINP is where many WordPress sites struggle, especially sites using heavy page builders, tracking scripts, chat widgets, popups, and large plugin stacks.\n\nThe fix is not always “remove JavaScript.”\n\nUsually, I look for scripts that can be:\n\n  * delayed\n  * loaded only on the pages that need them\n  * replaced with lighter code\n  * moved away from the initial interaction path\n\n\n\nA WooCommerce product page, for example, should not load the same assets as a blog post.\n\n##  3. Fix CLS With Stable Layouts\n\nCLS is often caused by simple layout issues:\n\n  * images without dimensions\n  * ads or embeds loading late\n  * fonts swapping badly\n  * sticky headers changing size\n  * dynamic banners appearing above content\n\n\n\nThe boring fix is usually the right fix: reserve space before things load.\n\n##  4. Measure Before And After\n\nPerformance work should not be guesswork.\n\nI like to capture the starting point first, then measure again after each meaningful change. Otherwise, it is too easy to install five optimization plugins and never know what actually helped.\n\n##  My Practical Order\n\nFor most WordPress sites, I follow this order:\n\n  1. Measure real issues first\n  2. Identify the worst template or page type\n  3. Fix images and LCP delivery\n  4. Reduce unnecessary scripts\n  5. Stabilize layout shifts\n  6. Review hosting and caching\n  7. Only consider a rebuild if the architecture is the actual problem\n\n\n\nA rebuild can help, but it should be the conclusion of the audit, not the first guess.\n\nI wrote more about my WordPress performance process here:\n\nhttps://amr-osama.net/services/wordpress-performance-optimization/\n\nAnd this is my main site if you want to see the kind of WordPress and WooCommerce work I focus on:\n\nhttps://amr-osama.net/",
  "title": "How I Approach WordPress Core Web Vitals Before Rebuilding Anything"
}