Techniques to improve website loading speed.
Web performance optimization is making websites load faster and run smoother. Every millisecond counts - faster sites rank higher in Google, convert more users, and cost less to run.
Amazon found that every 100ms of latency costs them 1% in sales. Google found that 53% of mobile users abandon sites that take over 3 seconds to load.
Speed is not a nice-to-have. It is a business requirement.
User Experience: Nobody waits for slow websites. They bounce to competitors.
SEO: Google ranks fast sites higher. Core Web Vitals are ranking factors.
Conversions: Faster sites make more money. Pinterest increased conversions 15% by reducing load time 40%.
Costs: Faster sites use less bandwidth and fewer server resources.
Accessibility: Slow sites hurt users on poor networks or old devices most.
Largest Contentful Paint (LCP): How long until main content loads. Target: under 2.5 seconds.
First Input Delay (FID): How long until page responds to interaction. Target: under 100ms.
Cumulative Layout Shift (CLS): How much content jumps around while loading. Target: under 0.1.
Google uses these metrics for ranking. Optimize these first.
No related topics found.
Minimize File Sizes:
Compress images:
# Use modern formats
WebP instead of JPEG/PNG (30-50% smaller)
AVIF even better (50% smaller than WebP)
# Responsive images
<img srcset="small.jpg 480w, large.jpg 1080w"
sizes="(max-width: 600px) 480px, 1080px">
Minify code:
# JavaScript, CSS, HTML
npm install terser cssnano html-minifier
# Result: 40-60% smaller files
Lazy Loading:
Load images when needed:
<img src="image.jpg" loading="lazy">
Lazy load JavaScript:
// Load component only when needed
const HeavyComponent = lazy(() => import("./Heavy"))
Code Splitting:
Split JavaScript into chunks:
// Next.js does this automatically
// Manually with dynamic imports
import("./module").then(module => {
module.doSomething()
})
Each page loads only code it needs.
Critical CSS:
Inline CSS for above-the-fold content:
<style>
/* Critical styles inline */
.header { /* ... */ }
</style>
<link rel="stylesheet" href="non-critical.css" media="print"
onload="this.media='all'">
Page renders instantly, rest loads later.
Use a CDN:
Serve static files from edge servers worldwide:
Users get files from nearest server. Massive speed boost.
Enable Compression:
Enable Gzip or Brotli compression:
# Nginx config
gzip on;
gzip_types text/plain text/css application/json application/javascript;
Text files compress 70-90%. Huge bandwidth savings.
HTTP/2 and HTTP/3:
Modern protocols are faster:
Most hosts support HTTP/2 now. Enable it.
Reduce HTTP Requests:
Combine files where possible:
<!-- Bad: 5 requests -->
<script src="lib1.js"></script>
<script src="lib2.js"></script>
<script src="lib3.js"></script>
<script src="lib4.js"></script>
<script src="lib5.js"></script>
<!-- Good: 1 request -->
<script src="bundle.js"></script>
Avoid Layout Thrashing:
Bad code (forces multiple reflows):
for (let i = 0; i < 100; i++) {
const width = element.offsetWidth // Read
element.style.width = width + 10 // Write
// Browser reflows 100 times!
}
Good code (batch reads and writes):
const width = element.offsetWidth // Read once
for (let i = 0; i < 100; i++) {
element.style.width = width + 10 // Write all
}
// Browser reflows once
Use CSS Transforms:
CSS transforms are GPU-accelerated:
/* Slow (triggers layout) */
.box { left: 100px; }
/* Fast (GPU accelerated) */
.box { transform: translateX(100px); }
Debounce Expensive Operations:
// Resize handler fires 100+ times per second
window.addEventListener("resize", () => {
recalculateLayout() // Too expensive!
})
// Debounced - fires once when resizing stops
window.addEventListener("resize", debounce(() => {
recalculateLayout() // Much better
}, 250))
Defer Non-Critical Scripts:
<!-- Blocks rendering -->
<script src="heavy.js"></script>
<!-- Better: loads asynchronously -->
<script src="heavy.js" async></script>
<!-- Best: loads after page interactive -->
<script src="heavy.js" defer></script>
Tree Shaking:
Remove unused code:
// Import only what you need
import { debounce } from "lodash-es" // Good (4KB)
// Not this
import _ from "lodash" // Bad (70KB with unused code)
Modern bundlers eliminate dead code automatically.
Optimize Loops:
// Slow - accesses length every iteration
for (let i = 0; i < array.length; i++) { }
// Fast - cache length
const len = array.length
for (let i = 0; i < len; i++) { }
// Fastest - use built-in methods
array.forEach(item => { })
Browser Cache Headers:
# Cache static assets for 1 year
Cache-Control: public, max-age=31536000, immutable
# Cache HTML for 1 hour
Cache-Control: public, max-age=3600
Service Workers:
Cache assets for offline use:
self.addEventListener("install", event => {
event.waitUntil(
caches.open("v1").then(cache => {
return cache.addAll([
"/",
"/styles.css",
"/app.js"
])
})
)
})
Server-Side Caching:
Cache expensive operations:
Add Indexes:
-- Slow query (scans millions of rows)
SELECT * FROM users WHERE email = 'john@example.com'
-- Fast query with index (instant lookup)
CREATE INDEX idx_email ON users(email)
Optimize Queries:
-- Bad (fetches everything)
SELECT * FROM users
-- Good (only needed columns)
SELECT id, name, email FROM users
-- Best (with limit)
SELECT id, name, email FROM users LIMIT 20
Use Connection Pooling:
Reuse database connections instead of creating new ones.
Lighthouse:
Built into Chrome DevTools. Run audits to get performance scores and suggestions.
WebPageTest:
Test from real devices and locations worldwide. Shows waterfall charts and film strips.
Google PageSpeed Insights:
Tests real user metrics. Shows Core Web Vitals scores.
Real User Monitoring (RUM):
Track actual user performance:
Set maximum limits:
{
"budget": [
{
"resourceSizes": [
{ "resourceType": "script", "budget": 250 },
{ "resourceType": "image", "budget": 500 }
]
}
]
}
CI fails if bundle exceeds limits. Prevents performance regressions.
These seven changes can reduce load time by 50-70%.
Reduce JavaScript:
Mobile devices have slower CPUs. Less JavaScript means faster parsing and execution.
Optimize for 3G:
Test on slow networks:
# Chrome DevTools
Network tab → Throttle to "Slow 3G"
Responsive Images:
Serve appropriate sizes for mobile screens. No need to load desktop-size images on phones.
Preload Critical Resources:
<link rel="preload" href="font.woff2" as="font">
<link rel="preload" href="hero.jpg" as="image">
Browser loads these immediately.
DNS Prefetch:
<link rel="dns-prefetch" href="https://api.example.com">
Resolve DNS early for faster API calls.
Resource Hints:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="prefetch" href="/next-page.html">
Premature Optimization: Optimize based on data, not guesses
Over-Optimizing: Diminishing returns after the big wins
Ignoring Mobile: Most traffic is mobile now
No Monitoring: Cannot improve what you do not measure
Breaking User Experience: Speed should not break functionality
Web performance optimization is an ongoing process, not a one-time task. Start with the quick wins that provide the biggest impact, then iterate based on real user data.
Fast sites make more money, rank higher, and provide better user experiences. The investment in performance pays dividends in user satisfaction and business results.
Measure first, optimize second, and never stop improving. Your users will thank you with their time, attention, and money.