Performance

Website Speed Optimization: A Complete Guide

Published: 11.03.2026 · 6 min read · 12 views

Website loading speed is one of the key factors that determines user experience, conversion rates, and search engine rankings. According to Google, if a page takes longer than 3 seconds to load, more than 50% of mobile users will leave it. In this guide, we will thoroughly cover all aspects of speed optimization — from the server side to client-side rendering.

Core Web Vitals: Key Performance Metrics

In 2021, Google introduced PageSpeed анализ as an official ranking factor. These metrics reflect real user experience and are measured under field conditions.

LCP — Largest Contentful Paint

LCP measures the time it takes for the largest visible element on a page to render. This could be a banner image, video, or a large block of text. The target value is under 2.5 seconds.

Main causes of poor LCP:

Slow server response (high TTFB)
Render-blocking resources — CSS and JavaScript in <head>
Unoptimized large images
Client-side rendering without server-side pre-rendering
Slow font loading that blocks text display

FID and INP — Interface Responsiveness

FID (First Input Delay) measured the delay of the user's first interaction. Since March 2024, it has been replaced by INP (Interaction to Next Paint), which evaluates responsiveness throughout the entire session. The target INP value is under 200 milliseconds.

To improve INP:

Break long JavaScript tasks into smaller ones (under 50 ms each)
Use requestIdleCallback and requestAnimationFrame
Minimize main thread work
Apply lazy loading and code splitting

CLS — Cumulative Layout Shift

CLS measures the visual stability of a page. Layout shifts frustrate users — they accidentally click the wrong elements or lose their reading position. The target value is under 0.1.

How to prevent layout shifts:

Always specify width and height attributes for images and videos
Reserve space for ad blocks and dynamic content
Avoid inserting content above the visible area after loading
Use font-display: swap or font-display: optional

TTFB — Time to First Byte

TTFB measures the time from sending a request to receiving the first byte of the server's response. This is a foundational metric that affects all other performance indicators. The recommended value is under 800 ms, ideally under 200 ms.

Factors affecting TTFB:

Factor	Impact	Solution
Distance to server	High latency for remote users	CDN, edge servers
Server processing	Slow DB queries, heavy computations	Caching, query optimization
TLS handshake	Additional round trips	TLS 1.3, OCSP stapling, HTTP/2
Redirects	Each redirect adds to TTFB	Minimize redirect chains

You can check your site's TTFB using the enterno.io HTTP header checker tool — it shows server response time and all caching headers.

Image Optimization

Images typically account for 40–60% of total page weight. Optimizing them is the fastest way to speed up your site.

Modern Formats

WebP provides 25–35% better compression than JPEG at comparable quality. AVIF is an even more efficient format, compressing images 50% better than JPEG. Use the <picture> element for progressive enhancement:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600" loading="lazy">
</picture>

Lazy Loading

The loading="lazy" attribute defers loading of images outside the visible area. However, for the LCP element (main banner), use loading="eager" and add fetchpriority="high".

Responsive Images

The srcset attribute allows the browser to choose the optimal image size based on the screen. Don't load a 2000-pixel image on a mobile phone with a 375-pixel screen.

Resource Minification and Compression

Minification removes whitespace, comments, and shortens variable names from code. This reduces file sizes by 20–40%.

JavaScript — use Terser, esbuild, or SWC for minification
CSS — cssnano, Lightning CSS, or PostCSS
HTML — html-minifier-terser

In addition to minification, configure server-side compression. Gzip reduces text resource sizes by 70–80%, and Brotli by 80–90%. Check for the Content-Encoding: br or Content-Encoding: gzip header using the HTTP header analyzer.

CDN — Content Delivery Network

A CDN places copies of your content on servers around the world. Users receive data from the nearest server, significantly reducing latency. Learn more about how CDNs work in our dedicated article.

CDN benefits:

50–80% TTFB reduction for remote users
DDoS attack protection
Automatic image optimization (Cloudflare, Fastly)
Edge caching of static and even dynamic content

Caching

Properly configured caching is one of the most effective ways to speed up repeat visits.

HTTP Caching

The Cache-Control header manages caching at the browser and intermediate proxy level. Recommended strategies:

Resource Type	Recommended Cache-Control
Static resources with hash	`max-age=31536000, immutable`
HTML pages	`no-cache` (with ETag validation)
API документацию responses	`no-store` or short `max-age`
Images without hash	`max-age=86400, stale-while-revalidate=604800`

Server-Side Caching

On the server side, use:

OPcache — for caching compiled PHP code
Redis / Memcached — for caching database query results
Varnish — for full-page caching
FastCGI cache (nginx) — a simple and effective solution

JavaScript Optimization

JavaScript is the primary source of client-side performance issues. Every kilobyte of JS requires downloading, parsing, compiling, and executing.

Code Splitting

Split your bundle into parts, loading only the code needed for the current page. Dynamic import() allows loading modules on demand:

// Load module only when needed
const module = await import('./heavy-module.js');
module.init();

Tree Shaking

Ensure your bundler (webpack, Rollup, esbuild) removes unused code. Use ES modules (import/export) instead of CommonJS (require) for this to work.

Deferred Script Loading

Use async and defer attributes for scripts that are not critical to initial rendering. Analytics scripts, chat widgets, and social plugins should load after the main content.

Font Optimization

Web fonts can significantly slow down text rendering. Recommendations:

Use font-display: swap for instant text display with a system font
Preload critical fonts via <link rel="preload">
Include only the necessary font weights and character subsets
Consider the WOFF2 format — it's 30% more compact than WOFF
Host fonts locally instead of Google Fonts to reduce DNS Lookup

HTTP/2 and HTTP/3

HTTP/2 supports multiplexing — loading multiple resources over a single connection. HTTP/3 (based on QUIC) is even faster thanks to eliminating head-of-line blocking and built-in TLS 1.3.

Ensure your server supports at least HTTP/2. You can check the protocol using the enterno.io HTTP header analyzer.

Monitoring Tools

Regularly track your site's performance using:

Google PageSpeed Insights — lab and field data
Chrome DevTools (Lighthouse) — local auditing
WebPageTest — detailed loading waterfall analysis
enterno.io — header checking, SSL, DNS, and response time
Chrome UX Report — real data from Chrome users

Optimization Checklist

Check TTFB — it should be under 200 ms
Configure Brotli/Gzip compression
Optimize and convert images to WebP/AVIF
Add lazy loading for off-screen images
Minify CSS, JS, and HTML
Configure Cache-Control for all resource types
Implement code splitting for JavaScript
Connect a CDN
Optimize font loading
Eliminate redirect chains
Upgrade server protocol to HTTP/2 or HTTP/3
Set up performance monitoring

Try It Yourself

Use the enterno.io HTTP header checker tool to analyze your site's server response time and caching headers.

Check your website right now

Check now →