Cara Optimasi Page Experience untuk SEO

Page experience signals:
- Core Web Vitals
- Mobile-friendliness
- HTTPS security
- No intrusive interstitials
- Safe browsing

User experience metrics.

Impact:
- Ranking factor
- User satisfaction
- Bounce rate
- Conversions
- Brand perception

What it measures:
Loading performance

Good: ≤ 2.5 seconds
Needs Improvement: 2.5-4 seconds
Poor: > 4 seconds

Main content visible quickly.

What it measures:
Interactivity/responsiveness

Good: ≤ 200 milliseconds
Needs Improvement: 200-500ms
Poor: > 500 milliseconds

Page responds quickly to input.

What it measures:
Visual stability

Good: ≤ 0.1
Needs Improvement: 0.1-0.25
Poor: > 0.25

Elements don't shift unexpectedly.

GSC → Page Experience report:
- Good URLs percentage
- URLs needing improvement
- Poor URLs
- Specific issues

Test at:
pagespeed.web.dev

Shows:
- Core Web Vitals
- Field data (real users)
- Lab data (simulated)
- Recommendations

DevTools → Performance:
- Run audit
- See metrics
- Identify issues
- Test changes

LCP problems:
- Slow server response
- Large images
- Render-blocking resources
- Client-side rendering

Improvements:
1. Optimize server (TTFB)
2. Compress images
3. Remove render-blocking CSS/JS
4. Preload LCP image
5. Use CDN

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

<!-- Proper sizing -->
<img
  src="hero.webp"
  width="1200"
  height="600"
  fetchpriority="high"
  alt="Hero image"
/>

<!-- Inline critical CSS -->
<style>
  /* Above-fold styles */
  .hero {
    ...;
  }
  .header {
    ...;
  }
</style>

<!-- Defer non-critical -->
<link
  rel="stylesheet"
  href="styles.css"
  media="print"
  onload="this.media='all'"
/>

INP problems:
- Heavy JavaScript
- Long tasks
- Third-party scripts
- Event handler delays

Improvements:
1. Break up long tasks
2. Optimize event handlers
3. Defer non-critical JS
4. Reduce third-party impact
5. Use web workers

// Break up long tasks
function processData(items) {
  const chunk = items.splice(0, 100);
  // Process chunk

  if (items.length > 0) {
    setTimeout(() => processData(items), 0);
  }
}

// Avoid long main thread work.

// Instead of many handlers
document.querySelector(".list").addEventListener("click", (e) => {
  if (e.target.matches(".item")) {
    // Handle click
  }
});

// Single handler for multiple elements.

CLS problems:
- Images without dimensions
- Ads/embeds without space
- Dynamic content
- Web fonts loading

Improvements:
1. Set image dimensions
2. Reserve space for ads
3. Avoid inserting content above
4. Optimize font loading
5. Use transform for animations

<!-- Always include dimensions -->
<img src="image.jpg" width="800" height="600" alt="Description" />

<!-- Or use aspect-ratio CSS -->
<style>
  img {
    aspect-ratio: 4/3;
    width: 100%;
    height: auto;
  }
</style>

.ad-container {
  min-height: 250px;
  width: 300px;
}

/* Reserve space before ad loads */

/* Use font-display */
@font-face {
  font-family: "CustomFont";
  src: url("font.woff2") format("woff2");
  font-display: swap;
}

/* Prevents flash of invisible text */

Mobile-friendly criteria:
- Responsive design
- Readable text (no zoom)
- Proper tap targets
- No horizontal scrolling
- Viewport configured

Test at:
- Search Console Mobile Usability
- Mobile-Friendly Test tool
- Chrome DevTools device mode

<!-- Viewport meta -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Tap targets -->
<style>
  button,
  a {
    min-height: 48px;
    min-width: 48px;
  }
</style>

Requirements:
- Secure connection
- Data encryption
- User trust
- Ranking signal

Must have in 2026.

Steps:
1. Get SSL certificate
2. Install on server
3. Redirect HTTP to HTTPS
4. Update internal links
5. Update GSC property

Problematic:
- Full-page popups
- Ads covering content
- Hard-to-dismiss overlays
- Interstitials before content

Blocks content access.

Allowed:
- Cookie consent (required)
- Age verification (legal)
- Small banners
- Easy-to-dismiss overlays

<!-- Non-intrusive banner -->
<div
  class="banner"
  style="position: fixed; bottom: 0;
            height: auto; max-height: 30vh;"
>
  <!-- Content -->
  <button class="close">×</button>
</div>

<!-- Easy to dismiss, doesn't block -->

Safe site:
- No malware
- No phishing
- No deceptive content
- No unwanted software

Check:
- GSC Security Issues
- Safe Browsing Site Status
- Regular security scans

Monitor:
- GSC Page Experience report
- Core Web Vitals trends
- Real user metrics
- Competitor comparison

Use:
- Google Search Console
- PageSpeed Insights
- Web Vitals Chrome extension
- Real User Monitoring (RUM)

Core Web Vitals:
☐ LCP under 2.5s
☐ INP under 200ms
☐ CLS under 0.1
☐ Tested on field data

Mobile:
☐ Responsive design
☐ Readable text
☐ Proper tap targets
☐ No horizontal scroll

Security:
☐ HTTPS enabled
☐ No security issues
☐ SSL certificate valid

UX:
☐ No intrusive popups
☐ Fast page loads
☐ Stable layout
☐ Accessible design

Monitoring:
☐ GSC configured
☐ Regular testing
☐ Track improvements