Website Speed Optimization: Complete Guide for Better Performance

Complete Website Speed Optimization Guide

Website speed is not a technical detail — it is a direct business decision. Every second of delay reduces conversion rates by up to 7%, increases bounce rates, and lowers search engine rankings. This guide covers every level of optimization, from server to browser.

---

Part One: Server Response Time and TTFB

TTFB (Time to First Byte) is the time between sending the request and receiving the first byte of the response. The ideal value is under 200ms.

Factors Affecting TTFB

• Server geographic location: A server in Riyadh serves a Saudi user with very low latency. A server in Frankfurt adds 120ms or more for any Saudi visitor.
• PHP processing and database queries: Slow queries or heavy computations directly increase TTFB.
• Allocated resources: An oversold VPS means busy CPU and longer wait times.

Measuring TTFB

curl -w "TTFB: %{time_starttransfer}s\n" -o /dev/null -s https://example.com

Or use tools like WebPageTest with the test location set to Riyadh.

---

Part Two: Compression

Enabling Gzip or Brotli in Nginx

# Gzip
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;

# Brotli (requires ngx_brotli module)
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript;

Brotli is 15-25% more efficient than Gzip for text content, but consumes more CPU for dynamic compression.

---

Part Three: Minification and Asset Bundling

CSS and JavaScript

Minification removes whitespace, comments, and shortens variable names. Recommended tools:

• Vite: handles this automatically in production mode
• Webpack: with TerserPlugin for JS and CssMinimizerPlugin for CSS
• Laravel Mix: enable .version for cache busting

Avoid One Large Bundle

In 2025, HTTP/2 makes multiple small files faster than one large bundle thanks to parallel loading.

---

Part Four: Lazy Loading

For Images

<img src="hero.webp" loading="lazy" alt="Image description" width="800" height="600">

Images above the fold should not be lazy — use loading="eager" or omit the attribute entirely.

For Heavy Scripts

<script src="analytics.js" defer></script>
<script src="widget.js" async></script>

• defer: executes after HTML parsing, in order
• async: executes as soon as loaded, no order guarantee

---

Part Five: CDN and Distribution

A CDN stores copies of your static assets on distributed servers worldwide. For Saudi audiences, the critical factor is having a Point of Presence (PoP) in Saudi Arabia or the Middle East.

Cloudflare has a PoP in Riyadh, which means images, CSS, and JS are served locally.

Cache-Control Headers

location ~* \.(css|js|png|jpg|webp|woff2)$ {
 expires 1y;
 add_header Cache-Control "public, immutable";
}

For HTML:

location / {
 add_header Cache-Control "no-cache, must-revalidate";
}

---

Part Six: Infrastructure as Foundation

All the optimizations above lose their impact if the underlying infrastructure is weak. كلاود (cloud.net.sa) provides NVMe servers in Riyadh and Jeddah with very low latency latency within Saudi Arabia, making the ideal TTFB achievable in practice, not just theory. Plans start at competitive pricing — pricing and plans with free Let's Encrypt SSL included on every plan.

Speed Optimization Checklist

Area	Target	Priority
TTFB	Under 200ms	High
LCP	Under 2.5 seconds	High
Page size	Under 1.5MB	Medium
HTTP requests	Under 50	Medium
Gzip/Brotli	Enabled	High
HTTP/2	Enabled	Medium
WebP images	Enabled	High
Lazy Loading	Enabled	Medium

---

Optimization Steps in Order

1. Measure first: PageSpeed Insights and WebPageTest from Riyadh
2. Choose a local server: Latency cannot be fixed with software if the server is geographically far
3. Enable Gzip/Brotli: Fastest to implement, largest impact
4. Compress images and convert to WebP
5. Add a CDN: Free Cloudflare is an excellent starting point
6. Enable caching: Redis for dynamic data, cache headers for static content
7. Remove unnecessary JavaScript
8. Measure again: Compare numbers before and after

Speed is not a project that ends — it is an ongoing practice with every site update.

---

Get Started

Want to try it yourself? Choose the right hosting plan or build your custom server with the specs you need.