Salin dan Bagikan

Cara Mengatasi Slow Loading Website untuk SEO

Website yang lambat merusak SEO dan user experience. Google menjadikan page speed sebagai ranking factor melalui Core Web Vitals.

Impact Slow Website

SEO Impact

Consequences:
1. Lower Core Web Vitals scores
2. Higher bounce rate
3. Less pages crawled
4. Poorer rankings
5. Lost conversions

User Impact

Statistics:
- 1s delay = 7% conversion loss
- 3s load = 53% mobile abandonment
- Users expect < 2 seconds
- Slow = unprofessional perception

Diagnosa Kecepatan

PageSpeed Insights

URL: pagespeed.web.dev

Reports:
- Performance score (0-100)
- Core Web Vitals
- Opportunities
- Diagnostics

Test both mobile and desktop.

GTmetrix

URL: gtmetrix.com

Shows:
- Load time
- Total page size
- Requests
- Waterfall chart
- Historical data

WebPageTest

URL: webpagetest.org

Advanced:
- Multiple locations
- Different connections
- Filmstrip view
- Detailed waterfall

Chrome DevTools

F12 → Network tab:
- Disable cache
- Throttle connection
- See each resource
- Identify slow requests

Optimasi Gambar

Problem

Images often:
- 50%+ of page weight
- Unoptimized sizes
- Wrong formats
- No lazy loading

Solutions

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

Image Compression

Tools:
1. Squoosh.app (online)
2. TinyPNG/TinyJPG
3. ImageOptim (Mac)
4. ShortPixel (WordPress plugin)

Target: 70-85% quality, 80%+ size reduction.

Modern Formats

<picture>
  <source srcset="image.webp" type="image/webp" />
  <source srcset="image.jpg" type="image/jpeg" />
  <img src="image.jpg" alt="Description" />
</picture>

WebP: 25-35% smaller than JPEG. AVIF: Even smaller (less support).

Lazy Loading

<img src="image.jpg" loading="lazy" alt="Description" />

Native lazy loading: - Supported by modern browsers - No JavaScript needed

Responsive Images

<img
  srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
  sizes="(max-width: 480px) 100vw,
            (max-width: 768px) 100vw,
            1200px"
  src="large.jpg"
  alt="Description"
/>

Serve appropriate size per device.

Optimasi CSS

Critical CSS

<head>
  <style>
    /* Critical CSS inline */
    .header {
      ...;
    }
    .hero {
      ...;
    }
  </style>
  <link
    rel="stylesheet"
    href="styles.css"
    media="print"
    onload="this.media='all'"
  />
</head>

Above-fold CSS loads immediately.

CSS Minification

Before:
.class {
  margin: 10px;
  padding: 10px;
}

After:
.class{margin:10px;padding:10px}

Tools: cssnano, clean-css

Remove Unused CSS

Tools:
- PurgeCSS
- UnCSS
- Chrome Coverage tool

Average site: 50%+ unused CSS.

Optimasi JavaScript

Defer Non-Critical JS

<!-- Defer: loads parallel, executes after parsing -->
<script src="script.js" defer></script>

<!-- Async: loads parallel, executes immediately -->
<script src="analytics.js" async></script>

Minification

Tools:
- Terser
- UglifyJS
- Webpack/Rollup built-in

Reduces file size significantly.

Code Splitting

// Dynamic import
const module = await import("./heavy-module.js");

// Load only when needed
button.addEventListener("click", async () => {
  const { heavyFunction } = await import("./heavy.js");
  heavyFunction();
});

Remove Unused JS

Analyze:
1. Chrome DevTools Coverage
2. See unused bytes
3. Remove or defer

Common culprits:
- jQuery (if not needed)
- Unused plugins
- Analytics overkill

Server Optimization

Enable Compression

# Apache .htaccess
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/javascript
</IfModule>

# Nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript;

Browser Caching

# Apache
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

CDN Implementation

Benefits:
- Serve from nearest location
- Reduce server load
- Better availability
- Automatic optimization

Options:
- Cloudflare (free tier)
- AWS CloudFront
- BunnyCDN
- KeyCDN

HTTP/2

Benefits:
- Multiplexing
- Header compression
- Server push
- Better than HTTP/1.1

Most modern hosts support.
Check with: tools.keycdn.com/http2-test

Database Optimization

WordPress Specific

Actions:
1. Delete post revisions
2. Clean spam comments
3. Remove transients
4. Optimize tables
5. Use object caching

Query Optimization

Reduce queries:
- Cache database calls
- Use object caching (Redis/Memcached)
- Optimize slow queries
- Index important columns

Hosting

Hosting Impact

Server response time goal:
< 200ms TTFB

Factors:
- Server location
- Server resources
- Server configuration
- Traffic handling

Hosting Upgrade Options

Progression:
1. Shared hosting (slowest)
2. VPS hosting
3. Cloud hosting
4. Dedicated server
5. Managed WordPress hosting

Match hosting to traffic needs.

Quick Wins

Immediate Improvements

Fast fixes:
1. Enable GZIP compression
2. Add browser caching
3. Compress images
4. Use CDN
5. Enable lazy loading
6. Minify CSS/JS
7. Remove unused plugins
8. Upgrade PHP version

Speed Optimization Checklist

Images:
☐ Compress all images
☐ Use WebP format
☐ Implement lazy loading
☐ Serve responsive sizes

Code:
☐ Minify CSS and JS
☐ Remove unused code
☐ Defer non-critical JS
☐ Inline critical CSS

Server:
☐ Enable GZIP
☐ Set browser caching
☐ Use CDN
☐ Optimize database

Monitoring:
☐ Test with PageSpeed
☐ Check Core Web Vitals
☐ Monitor regularly
☐ Fix regressions

Kesimpulan

Page speed optimization adalah ongoing process. Start dengan quick wins seperti image compression dan caching, lalu progressively optimize code dan server. Monitor regularly untuk maintain performance.