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.
