← PageScore

Website Speed Optimization Guide

Practical tips and techniques to drastically improve your website loading time. From image optimization to caching, CDN usage, and code minification.

Why Does Website Speed Matter?

Page loading time directly impacts user experience, conversion rates, and Google rankings. Studies show that 53% of mobile users abandon a site if it takes longer than 3 seconds to load. Each additional second of loading time can reduce conversion rates by up to 7%.

Google has used page speed as a ranking factor for desktop since 2010 and for mobile search results since 2018. With the introduction of Core Web Vitals in 2021, performance has become even more heavily weighted.

1. Optimize Images

Images often account for 50–70% of total page weight. Here are the key measures:

Use modern formats: WebP offers 25–35% smaller files than JPEG at the same quality. AVIF saves even more but has more limited browser support.
Responsive images: Use the srcset attribute to serve different image sizes for different screens.
Lazy loading: Load images only when they scroll into view. The native loading="lazy" attribute makes this possible without JavaScript.
Compression: Tools like Squoosh, TinyPNG, or ImageOptim can shrink images by 40–80% without visible quality loss.
Correct dimensions: Never load a 4000px image when it is only displayed at 800px. Scale images server-side to the required size.

<img src="photo.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
     loading="lazy"
     alt="Description of the image"
     width="800" height="600">

2. Leverage Browser Caching

Proper caching means returning visitors do not have to re-download all resources. Set cache headers for static files:

CSS, JS, fonts: Cache-Control: public, max-age=31536000, immutable — cache for one year when you use versioning in file names (e.g., style.v3.css).
HTML pages: Cache-Control: no-cache — always check with the server for a new version.
Images: Cache for at least 30 days, ideally one year with versioning.

3. Enable Compression

Gzip or Brotli compression reduces the transfer size of text resources by 60–80%. Most web servers support this out of the box — it just needs to be enabled.

Brotli offers 15–20% better compression than Gzip and is supported by all modern browsers. In Apache configuration:

# Apache - Enable Brotli
<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/css
    AddOutputFilterByType BROTLI_COMPRESS application/javascript application/json
    AddOutputFilterByType BROTLI_COMPRESS image/svg+xml
</IfModule>

4. Minify CSS and JavaScript

Minification removes unnecessary whitespace, comments, and line breaks from your code. This typically reduces file size by 10–30%.

CSS: Use tools like cssnano, clean-css, or Lightning CSS.
JavaScript: Terser, esbuild, or SWC are fast and effective minifiers.
Inline critical CSS: Extract the CSS needed for the visible area (above the fold) and load it directly in the <head> as inline CSS.
Remove unused CSS: Tools like PurgeCSS or UnCSS find and remove unused CSS rules.

5. Use a Content Delivery Network (CDN)

A CDN distributes your static content across servers worldwide, so users load data from the nearest location. This significantly reduces latency, especially for international visitors.

Popular CDN providers include Cloudflare (free tier available), Bunny CDN, AWS CloudFront, and Fastly. Cloudflare also offers automatic image optimization, Brotli compression, and DDoS protection.

6. Eliminate Render-Blocking Resources

JavaScript and CSS in the <head> block page rendering. Here is how to avoid that:

JavaScript: Use defer or async for script tags. defer is usually the better choice as it preserves execution order.
CSS: Load non-critical CSS asynchronously with the media="print" onload="this.media='all'" pattern.
Fonts: Use font-display: swap and <link rel="preconnect"> for external font servers.

7. Optimize Server Response Time

Time to First Byte (TTFB) should be under 200ms. Measures to improve it:

Server-side caching: Use OPcache for PHP, Redis or Memcached for database queries.
Optimize database queries: Add indexes, eliminate unnecessary queries, fix N+1 problems.
HTTP/2 or HTTP/3: Modern protocols enable multiplexing — multiple requests over a single connection.
Hosting: A powerful server or managed hosting makes a big difference. Shared hosting is often too slow.

8. Reduce Third-Party Scripts

Every external script (analytics, chatbots, social media widgets, ads) costs loading time. Ask critically:

Is this script truly needed?
Can it be loaded lazily (e.g., only after user interaction)?
Is there a lighter alternative?

Tip: Load tracking scripts only after cookie consent. This improves not only performance but also privacy compliance.

Measure and Monitor Performance

Optimization is an ongoing process. Use these tools to regularly check your speed:

PageScore: Quick overview of performance, SEO, and security in a single audit.
Chrome DevTools: The Lighthouse tab provides detailed performance analysis.
WebPageTest: Detailed waterfall diagrams and filmstrip view.
Google Search Console: Shows Core Web Vitals for real users (field data).

Test your website performance for free with PageScore and get actionable optimization suggestions.

More Guides

Website Speed Optimization SEO Checklist 2026 Security Headers Guide Core Web Vitals Explained Website Privacy Compliance Meta Tags Best Practices