When incorrectly set up, WordPress sites behave as if they were designed to be slow. When approached with the right tools and in the right order, the same site produces very different results. The steps in this guide are based on the methods EminTechLab applies to every project it delivers.
What are Core Web Vitals and Why Do They Affect SEO?
Google announced Core Web Vitals as an official ranking factor in 2021. It consists of three metrics, and they all measure the user's experience with the site from a different angle. A poor score directly impacts ranking negatively; a good score alone won't get you to the top, but it provides a competitive advantage.
The loading time of the largest content element on the page (usually the hero image). The moment the user feels "the page has loaded."
The amount of shift in elements while the page loads. If content shifts while clicking a button, the CLS score is poor.
The response time of the page to a user's click or tap. Slow JavaScript is the determining factor here.
You can track these three metrics via Google Search Console's "Core Web Vitals" report and PageSpeed Insights. Note your current scores before you start — seeing the extent of improvement keeps motivation high.
How to Improve LCP Score?
The vast majority of LCP issues stem from the hero image. Since this is usually the largest content element on the page, it's the focus of optimization.
- 🖼️Convert the hero image to WebP format
Compared to JPEG or PNG, WebP format produces on average 30–50% smaller file sizes while maintaining the same quality. You can convert using Squoosh or Cloudflare Images.
High Impact - ⚡Add
loading="eager"to the hero imageLazy load should be used for all other images, but the hero image must be eager for the browser to prioritize loading it. This single change significantly lowers LCP.
Easy to Implement - 🔗Add a preload tag for the hero image
Adding
Technical Step<link rel="preload" as="image">to the head section of the HTML tells the browser to start downloading the image early. - 🔤Load Google Fonts with
display=swapThe system font is shown until the font loads, not blocking LCP. Simply adding
Easy to Implement&display=swapto the end of the URL is enough.
<!-- Hero image preload -->
<link rel="preload" as="image" href="/images/hero.webp"><!-- Correct Google Fonts loading -->
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&display=swap"
rel="stylesheet">How to Fix CLS Issues?
Cumulative Layout Shift occurs when content shifts as the page loads. The three most common causes are:
- 📐Add width and height attributes to every image
To load the image without knowing its size, the browser first opens a placeholder, and when the image arrives, the page shifts. Adding
#1 Cause of CLSwidth="800" height="600"completely eliminates this issue. - 🔤Use font-display: swap
Text shifts and all paragraphs are repositioned until the font loads. The
#2 Cause of CLSswapvalue ensures the system shows its own font first and then switches to the site's font — minimizing the shift. - 📏Define min-height for dynamic content areas
If comments, ads, or late-loading widgets appear out of empty space and push the page, CLS increases. Defining a fixed
#3 Cause of CLSmin-heightvalue for these areas in CSS prevents the shift.
Image Optimization: WebP and Lazy Load
Image files generally make up between sixty to eighty percent of the total page weight on WordPress sites. When this single item is optimized, the change in speed can be dramatic.
WebP conversion
Squoosh (web-based, free), the ShortPixel plugin, or Cloudflare Images — all three convert JPEG/PNG files to WebP while preserving quality. Practically, I recommend this: Convert images to WebP in Squoosh before uploading them to WordPress, and save them by adding -optimized to the file name.
Lazy load
Browsers now support the loading="lazy" attribute in HTML. This ensures that images the user doesn't see are not loaded initially; they load as the user scrolls near them. Only use loading="eager" on the hero image, everything else should remain lazy.
Leaving lazy load on the hero image directly worsens LCP. Most of the "Render-blocking resources" warning in Google PageSpeed comes from here. Be sure to use loading="eager" and fetchpriority="high" for the hero.
Caching Setup with WP Rocket
Without caching in WordPress, all PHP and database queries run again on every page visit. A caching plugin performs this calculation once and stores the result as static HTML; the ready file is served to the next visitor.
- Page Cache is active — the most critical setting
- CSS and JS files are minified
- CSS and JS files are combined — use carefully, may conflict with some themes
- Image lazy load is active via WP Rocket (so it doesn't conflict with HTML attributes)
- Database optimization — old revisions and transient data cleaned
- Cloudflare integration is active — static files served from CDN
WP Rocket is a paid plugin. As a free alternative, LiteSpeed Cache (excellent for those using LiteSpeed hosting) or W3 Total Cache can be used. Hosting providers like Güzelnet offer Cloudflare integration support — when run together, results close to WP Rocket can be achieved.
Cloudflare CDN Integration
Cloudflare serves your site's static files (CSS, JS, images) from servers around the world, from the point closest to the user. For a visitor in Turkey, this difference is usually between 300–600 ms — sometimes more.
What needs to be done on the WordPress side: Define Cloudflare's IP addresses as a trusted source and activate the Cloudflare integration module of WP Rocket or LiteSpeed Cache. This way, cache clearing is also triggered automatically at the Cloudflare level.
SSL: Full (Strict) mode, Cache Level: Standard, Browser Cache TTL: 4 hours or longer, Rocket Loader: test your site — it causes issues with some WordPress themes, Minify: activate HTML + CSS + JS.
How to Speed Test with Free Tools?
Testing with the same tool before and after optimization shows concrete progress. Results can vary simultaneously — run at least 3 tests and take the average.
Shows both mobile and desktop scores. Breaks down CWV data, lists suggestions for fixes. This should be the starting point.
The waterfall chart shows how long each file waits. Ideal for detecting render-blocking resources.
Tests from different locations and different connection speeds. Shows TTFB, CLS, and INP separately. For advanced analysis.
Fed by real user data. These are numbers from the field, not lab data. Mandatory for long-term tracking.
Post-optimization target: 70+ mobile, 85+ desktop on PageSpeed Insights. Being above this threshold means being ahead of the vast majority of WordPress sites across Turkey. Better is possible — but this threshold is a realistic and sustainable starting point.
If you want to get a professional analysis of your site's speed status, contact EminTechLab. We prepare a free report including PageSpeed score, CWV status, and recommendations.
Over 3 years of experience in WordPress, Elementor, and SEO. Founder of Bursa-based EminTechLab. Applies Core Web Vitals optimization as a part of the standard process in every project.
How Fast is Your Site?
We provide a free speed analysis with PageSpeed Insights score, CWV report, and improvement recommendations.