⚡ WEBSITE SPEED
Website Speed: Complete Guide to Page Speed & Performance Optimization
Website speed is shaped by everything that happens between a click and a usable page: server response, network delivery, the size of images, how CSS and JavaScript load, caching, content delivery networks and the work the browser does to render and respond.
This hub is a practical guide to understanding those pieces — how to measure them, what usually causes slowdowns, and how to improve performance based on evidence rather than guesswork.
- Measure first, optimise second
- Core Web Vitals explained accurately
- No fake scores or speed promises
How a page loads
THE BASICS
What Is Website Speed?
Website speed describes how quickly a website responds, loads and becomes usable. It starts with the initial server response, continues as the browser downloads HTML, CSS, JavaScript, fonts and images, and includes rendering content on screen, responding to interaction and keeping the layout visually stable.
The same page can feel fast on a new laptop over fibre and slow on an older phone on a patchy mobile network, because network conditions and device capabilities change the experience. That’s why website speed isn’t a single number: different metrics describe different moments, and lab tests differ from real-user field data.
WHY IT MATTERS
Why Does Website Speed Matter?
User Experience
Faster pages can reduce waiting and make websites more comfortable to use and navigate.
Mobile Experience
Mobile users may have slower or variable networks and less powerful devices, so efficiency matters more.
Conversion Experience
Slow interactions can create friction in forms, checkout and other important journeys.
Search & Performance
Performance is one part of the broader technical and page-experience picture, not a sole ranking factor.
SPEED GUIDES
Explore Website Speed Topics
Website performance is made up of connected areas: loading, Core Web Vitals, images, caching, content delivery and overall optimisation. Each guide goes deeper.
Page Speed
Understand how page loading works, what makes pages slow and which technical factors influence loading and rendering performance.
Core Web Vitals
Learn about LCP, INP and CLS and how loading performance, responsiveness and visual stability are measured.
Image Optimization
Learn how image dimensions, compression, formats, responsive images and loading strategies affect website performance.
Caching
Understand browser caching, page caching, object caching and other techniques that can reduce repeated processing and resource delivery time.
CDN
Learn how Content Delivery Networks use distributed edge locations to deliver cacheable resources closer to visitors.
Website Performance
Explore the broader performance picture, including server response, code, assets, third-party resources, mobile experience and performance monitoring.
DIAGNOSTICS
What Makes a Website Slow?
Slow websites rarely have a single cause. Diagnose which of these factors is actually the bottleneck before changing anything.
Server
Slow hosting response or overloaded resources delay the first byte.
Images
Oversized or inefficient images are often the heaviest resources.
JavaScript
Large bundles and long tasks block the main thread.
CSS
Large or render-blocking stylesheets delay first paint.
Fonts
Many font files or poor loading cause delays and shifts.
Third-Party Scripts
Analytics, ads, chat widgets and embeds add requests and work.
Database
Inefficient queries slow dynamic page generation.
Caching
Without caching, pages are rebuilt for every request.
CDN
Distance and cache configuration affect delivery.
LOADING SEQUENCE
How a Web Page Loads
Many of these steps overlap in practice, and modern browsers fetch resources in parallel, but the order helps explain where delays come from.
IMAGE PLACEHOLDER
Browser Network Waterfall Screenshot
Recommended ratio: 16:9
Capture from Chrome DevTools Network panel. — replace this container with an Image widget.
DNS lookup
Find the server address.
Connection
Open a TCP or QUIC connection.
TLS
Negotiate encryption for HTTPS.
Server request
Browser asks for the page.
HTML response
Server returns the document.
CSS
Styles are fetched and parsed.
JavaScript
Scripts download and execute.
Images/fonts
Media and fonts load.
Rendering
Browser lays out and paints.
Interaction
Page responds to input.
PAGE SPEED
Page Speed: What Does It Actually Measure?
“Page speed” can mean several different things: how quickly the server responds (often measured as Time to First Byte, TTFB), how soon key content appears, how long rendering takes, how quickly the page responds to input and when all resources finish loading.
Tools report different metrics and conditions. Lab tools simulate a device and network; field data reflects real visitors. A single score summarises some of these measurements but doesn’t equal how fast the site feels for everyone.
Loading
How quickly important content appears on screen.
Interactivity
How quickly the page responds to user interaction.
Visual Stability
How stable the layout remains while loading.
CORE WEB VITALS
Core Web Vitals
Core Web Vitals are Google’s metrics for loading, responsiveness and visual stability. INP replaced FID as the responsiveness metric in 2024. Google publishes official “good” thresholds for each metric, assessed at the 75th percentile of real page loads; check its current documentation rather than relying on numbers copied elsewhere. Meeting them supports a good experience but doesn’t guarantee rankings.
LCP
Largest Contentful Paint
Measures the render time of the largest image or text block visible in the viewport, a proxy for when the main content has loaded.
INP
Interaction to Next Paint
Assesses responsiveness by observing the latency of clicks, taps and key presses throughout a page’s lifecycle and reporting a value representative of the slowest interactions.
CLS
Cumulative Layout Shift
Measures unexpected movement of visible content during the page’s lifetime, such as text jumping when an image or ad loads.
IMAGE PLACEHOLDER
Core Web Vitals / PageSpeed Insights Report
Recommended ratio: 16:10 — replace this container with an Image widget.
IMAGES
Image Optimization for Faster Websites
Images are often the largest resources on a page. Serve them at the dimensions they’re displayed, compress them sensibly and use modern formats such as WebP or AVIF where supported. Responsive images with srcset and sizes let each device download an appropriately sized file.
Lazy loading helps for images below the fold, but the main hero or LCP image should load immediately, sometimes with higher fetch priority. Always set width and height to prevent layout shifts, and keep descriptive alt text and filenames for accessibility and image SEO.
IMAGE PLACEHOLDER
Image compression before/after example
Recommended ratio: 4:3 — replace this container with an Image widget.
CACHING
How Caching Improves Website Performance
Caching stores the result of work so it doesn’t have to be repeated. A browser cache keeps static files on the visitor’s device for repeat visits. A CDN cache stores copies at edge locations. A page cache saves fully generated HTML so the server can skip rebuilding it. An object cache (such as Redis or Memcached) stores database query results, and server-level caches such as opcode caching speed up code execution.
The right strategy depends on how dynamic your content is. Logged-in areas, carts and personalised pages usually need exclusions, and cache invalidation must keep content fresh.
Cache-ControlHIT / MISSfull pagePHPRedisMySQLIMAGE PLACEHOLDER
Website caching architecture
Recommended ratio: 16:9 — replace this container with an Image widget.
CDN
What Is a CDN and How Does It Improve Content Delivery?
A CDN distributes cacheable resources — images, CSS, JavaScript, fonts and sometimes HTML — across edge locations worldwide. Visitors are served from a nearby edge, reducing the geographic distance data travels.
Not every request is served from cache. Dynamic or uncached content still goes back to the origin server, and cache misses happen when content is new or expired. Benefits depend on how much of your site is cacheable, where your audience is and how the CDN is configured.
- Shorter geographic distance
- Edge locations near visitors
- Static assets served from cache
- Reduced load on the origin
IMAGE PLACEHOLDER
Global CDN network / edge delivery
Recommended ratio: 16:9 — replace this container with an Image widget.
THE BIG PICTURE
Website Performance Is More Than Page Speed
Page speed is one slice of website performance. The broader picture includes rendering efficiency, responsiveness to every interaction, visual stability, server response, network delivery, JavaScript execution, memory and CPU usage on low-end devices, and the overall mobile experience — across every page and journey, not just the homepage.
Conceptual illustration — these factors interact rather than add up mathematically.
MOBILE
Why Mobile Website Performance Matters
Mobile visitors often browse on smaller screens with variable network conditions and less processing power. JavaScript that runs instantly on a desktop can take far longer on a mid-range phone, and touch interactions need quick feedback. A mobile-first approach — responsive images, lean scripts and stable layouts — tends to benefit every device.
Desktop
Typically more CPU and memory, stable wired or Wi-Fi connections, larger viewports and mouse or keyboard input.
Mobile
Often less CPU power, variable cellular networks, small viewports, touch input and battery constraints.
IMAGE PLACEHOLDER
Mobile website performance testing
Recommended ratio: 4:3 — replace this container with an Image widget.
WORDPRESS
WordPress Website Speed Optimization
WordPress performance depends on the whole stack: the theme, the number and quality of plugins, how much markup a page builder outputs, database size and queries, images, caching, hosting, CDN use, fonts and third-party scripts.
No single plugin fixes everything. Measure first, remove what you don’t need, then configure caching and image optimisation carefully. See our WordPress guides and hosting & domains for related topics.
IMAGE PLACEHOLDER
WordPress performance / plugin audit
Recommended ratio: 16:10 — replace this container with an Image widget.
TESTING
How to Test Website Speed
Use several tools and compare lab tests with field data. Scores vary between runs, so look for trends and specific diagnostics rather than a single number.
PageSpeed Insights
Reports lab diagnostics from Lighthouse and, where enough data exists, real-user field data from the Chrome UX Report.
Lighthouse
An open-source auditing tool for performance, accessibility and best practices, run in Chrome DevTools or from the command line.
Chrome DevTools
The Network panel shows request waterfalls; the Performance panel records rendering, scripting and main-thread activity.
Search Console
Its Core Web Vitals report groups URLs by field-data status for sites with sufficient traffic.
WebPageTest
Runs detailed tests from different locations, devices and connection types with filmstrips and waterfalls.
AUDIT
What Should a Website Speed Audit Check?
SERVER
- Server response
- TTFB
- Hosting resources
ASSETS
- Images
- CSS
- JavaScript
- Fonts
DELIVERY
- Caching
- CDN
- Compression
BROWSER
- Rendering
- Main-thread work
- Layout stability
THIRD-PARTY
- Analytics
- Widgets
- External scripts
IMAGE PLACEHOLDER
Professional Website Speed Audit Report
Recommended ratio: 16:10 — replace this container with an Image widget.
WORKFLOW
A Practical Website Speed Optimization Workflow
Evidence-based optimisation beats installing plugins or toggling settings blindly. Change, measure, compare — and keep what genuinely helps.
Measure
Record baseline lab and field data.
Identify Bottlenecks
Find what actually slows the page.
Prioritize
Tackle the biggest impact first.
Optimize
Make one change at a time.
Test
Check functionality and metrics.
Compare
Measure against the baseline.
Monitor
Watch field data over time.
Repeat
Performance needs ongoing care.
PRIORITIES
Website Speed: Quick Wins and Deeper Optimization
The right work depends on your site’s real bottlenecks. Quick wins are common starting points; deeper work often needs development expertise.
Quick Wins
- Resize oversized images
- Compress images
- Remove unnecessary scripts
- Enable appropriate caching
- Use modern image formats
- Reduce unnecessary third-party resources
Deeper Optimization
- Server configuration
- Database optimisation
- JavaScript execution
- CSS architecture
- Rendering bottlenecks
- CDN strategy
- Application performance
- Custom code optimisation
SPEED & SEO
Website Speed and SEO
Performance is part of how search engines and users experience a site. Core Web Vitals feed into Google’s page experience signals, mobile performance matters because most crawling and browsing is mobile, and faster server responses can help crawlers fetch pages efficiently on large sites. Accessible, responsive pages also tend to serve users better.
Speed isn’t the biggest ranking factor, and a perfect PageSpeed score doesn’t guarantee higher rankings. Relevance and content quality come first; performance supports them. Learn more in our website SEO guides.
CHECKLIST
Website Speed Optimization Checklist
- Test the current website
- Identify the largest bottleneck
- Optimize image dimensions
- Compress images
- Use modern image formats
- Review JavaScript
- Review CSS
- Reduce unnecessary third-party scripts
- Configure caching
- Evaluate CDN usage
- Check server response
- Review fonts
- Check mobile performance
- Check Core Web Vitals
- Test forms and interactions
- Test after every major optimization
- Monitor performance over time
AVOID THESE
Common Website Speed Mistakes
Uploading Huge Images
Multi-megabyte photos displayed small waste bandwidth on every visit.
Installing Too Many Plugins
Each plugin can add scripts, styles and database queries.
Loading Unnecessary JavaScript
Scripts loaded on every page but used on one slow everything down.
Using Too Many Third-Party Scripts
Tags, chat widgets and embeds add requests outside your control.
Ignoring Mobile Performance
Testing only on fast desktops hides real-user problems.
Skipping Caching
Rebuilding every page per request wastes server time.
Incorrect Lazy Loading
Lazy-loading the hero image can delay LCP.
Poorly Configured CDN
Wrong cache rules can serve stale content or bypass caching.
Ignoring Server Response
Front-end fixes can't compensate for a slow backend.
Optimizing Without Measuring
Changes without baselines can make things worse unnoticed.
Chasing a Perfect Score
User experience matters more than a 100 in a lab test.
FAQ
Frequently Asked Questions About Website Speed
Clear answers to common performance questions.
ALL GUIDES
Explore All Website Speed Guides
KEEP LEARNING
Explore Related Website Topics
Website SEO
How performance fits into search visibility.
Web Development
Efficient code and architecture.
Web Design
Designing lightweight, stable layouts.
CMS
Platform choices and their performance impact.
Hosting & Domains
Servers, CDNs and infrastructure.
AI for Websites
AI-assisted performance analysis.
Build a Faster, More Efficient Website
Explore the Website Speed guides to understand page loading, Core Web Vitals, images, caching, CDN delivery and broader website performance.