Cara Optimasi Page Experience untuk SEO

Page Experience adalah ranking factor Google yang mengukur user experience. Optimize Core Web Vitals dan page experience signals untuk better rankings.

Apa Itu Page Experience?

Google’s Definition

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

User experience metrics.

Why It Matters

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

Core Web Vitals

LCP (Largest Contentful Paint)

What it measures:
Loading performance

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

Main content visible quickly.

INP (Interaction to Next Paint)

What it measures:
Interactivity/responsiveness

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

Page responds quickly to input.

CLS (Cumulative Layout Shift)

What it measures:
Visual stability

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

Elements don't shift unexpectedly.

Measuring Page Experience

Google Search Console

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

PageSpeed Insights

Test at:
pagespeed.web.dev

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

Chrome DevTools

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

Optimizing LCP

Common Issues

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

Solutions

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

Image Optimization

<!-- 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"
/>

Critical CSS

<!-- 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'"
/>

Optimizing INP

Common Issues

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

Solutions

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

JavaScript Optimization

// 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.

Event Delegation

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

// Single handler for multiple elements.

Optimizing CLS

Common Issues

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

Solutions

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

Image Dimensions

<!-- 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>

Reserve Ad Space

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

/* Reserve space before ad loads */

Font Loading

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

/* Prevents flash of invisible text */

Mobile-Friendliness

Requirements

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

Testing

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

Common Fixes

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

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

HTTPS Security

Why HTTPS

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

Must have in 2026.

Implementation

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

No Intrusive Interstitials

What to Avoid

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

Blocks content access.

Acceptable

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

Best Practice

<!-- 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 Browsing

Requirements

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

Monitoring

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

Page Experience Monitoring

Regular Checks

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

Tools

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

Page Experience Checklist

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

Kesimpulan

Page Experience adalah holistic view dari user experience. Optimize Core Web Vitals, ensure mobile-friendliness, use HTTPS, dan avoid intrusive interstitials. Monitor regularly dan fix issues proactively.