diff --git a/src/content/docs/speed/troubleshooting.mdx b/src/content/docs/speed/troubleshooting/index.mdx similarity index 100% rename from src/content/docs/speed/troubleshooting.mdx rename to src/content/docs/speed/troubleshooting/index.mdx diff --git a/src/content/docs/speed/troubleshooting/slow-website.mdx b/src/content/docs/speed/troubleshooting/slow-website.mdx new file mode 100644 index 000000000000000..9351b392411ab5a --- /dev/null +++ b/src/content/docs/speed/troubleshooting/slow-website.mdx @@ -0,0 +1,409 @@ +--- +title: Troubleshooting a slow website +pcx_content_type: troubleshooting +description: Identify and resolve performance issues affecting your website. +products: + - speed +sidebar: + order: 1 +head: + - tag: title + content: Troubleshooting a slow website +--- + +import { Details, DashButton, Tabs, TabItem, GlossaryTooltip } from "~/components"; + +This guide helps you identify and resolve performance issues affecting your website. It starts with basic diagnostics and progresses to advanced troubleshooting techniques. + +## Before you start: Verify traffic goes through Cloudflare + +Before troubleshooting performance, confirm that your traffic is actually going through Cloudflare. If requests bypass Cloudflare, the issue is not related to Cloudflare and this guide will not help. + +### Check for the cf-ray header + +Every response served through Cloudflare includes a `cf-ray` header. Use `curl` to check: + +```bash +curl -s -D- -o /dev/null https://www.example.com | grep -i cf-ray +``` + +If you see a `cf-ray` header (for example, `cf-ray: 8a1b2c3d4e5f6g7h-SJC`), your traffic is going through Cloudflare. If not, check your DNS configuration. + +### Verify DNS is pointing to Cloudflare + +Your domain must resolve to Cloudflare IP addresses for traffic to be proxied: + +```bash +dig +short www.example.com +``` + +The returned IP addresses should be [Cloudflare IPs](https://www.cloudflare.com/ips/). If they point directly to your origin server, your DNS records are not proxied. + +To fix this: +1. Go to the [Cloudflare dashboard](https://dash.cloudflare.com/?to=/:account/:zone/dns). +2. Find the DNS record for the slow hostname. +3. Ensure the **Proxy status** is set to **Proxied** (orange cloud icon). + +:::note +If your DNS records are set to **DNS only** (gray cloud), Cloudflare does not proxy the traffic and cannot improve performance. The request goes directly to your origin server. +::: + +--- + +## Gather information about the slow requests + +Performance issues are easier to solve when you can pinpoint exactly what is slow. Start by gathering the following information: + +1. **Identify specific slow requests** - Determine which URLs, assets, or API endpoints are slow. +2. **Measure the slowness** - Quantify the delay (for example, "this image takes 5 seconds to load"). +3. **Reproduce the issue** - Confirm the slowness is consistent and not a one-time occurrence. + +--- + +## Step 1: Identify slow assets + +The first step is to identify which specific resources are causing slowness. A slow website is usually caused by one or more slow assets, not the entire site. + +### Use browser developer tools + +1. Open your browser's developer tools. +2. Go to the **Network** tab. +3. Reload the page and observe which requests take the longest. +4. Sort by **Time** or **Duration** to identify the slowest assets. +5. Note the specific URLs of slow resources. + +Look for: +- Large images or videos +- Slow API calls +- Third-party scripts +- Render-blocking resources + +### Generate a HAR file + +For a complete record of all requests, [generate a HAR file](/support/troubleshooting/general-troubleshooting/gathering-information-for-troubleshooting-sites/#generate-a-har-file). This captures timing information for every request and is useful when working with Cloudflare Support. + +--- + +## Step 2: Use Observatory to analyze performance + +[Observatory](/speed/observatory/) provides synthetic tests and real user monitoring (RUM) data to assess your website's performance. + +### Run a speed test + +1. Go to the Cloudflare dashboard. + + +2. Select **Observatory**. +3. Enter the URL you want to test and select **Run test**. + +### Understand the results + +Observatory reports key metrics: + +| Metric | What it measures | Target | +|--------|------------------|--------| +| **Largest Contentful Paint (LCP)** | Time until the largest visible element loads | Under 2.5 seconds | +| **First Contentful Paint (FCP)** | Time until the first content appears | Under 1.8 seconds | +| **Cumulative Layout Shift (CLS)** | Visual stability during page load | Under 0.1 | +| **Time to First Byte (TTFB)** | Time until the first byte of response is received | Under 800 ms | +| **Total Blocking Time (TBT)** | Time the main thread is blocked | Under 200 ms | + +### Enable recommended optimizations + +Based on Observatory results, enable relevant [Speed optimizations](/speed/optimization/): + +- [Brotli compression](/speed/optimization/content/compression/) - Compress responses for faster transfer +- [Early Hints](/cache/advanced-configuration/early-hints/) - Preload critical resources +- [HTTP/2 and HTTP/3](/speed/optimization/protocol/) - Use modern protocols with multiplexing, allowing multiple requests over a single connection instead of opening separate connections for each asset +- [Image optimization](/images/) - Automatically optimize and resize images +- [Rocket Loader](/speed/optimization/content/rocket-loader/) - Defer loading of JavaScript to improve paint times + +--- + +## Step 3: Analyze origin performance + +If your website is slow, the issue may be at your origin server. Use Origin Analytics to understand how your origin is performing. + +### Check origin response times + +In the Cloudflare dashboard: + +1. Go to **Speed** > **Origin Analytics**. +2. Review the **Origin Response Time** metrics. +3. Look for patterns in slow responses (specific paths, times of day, or geographic regions). + +High origin response times indicate your origin server is struggling. Consider: +- Upgrading your hosting plan +- Optimizing database queries +- Implementing server-side caching + +### Check for slow Workers + +If your zone has [Cloudflare Workers](/workers/) deployed, they execute on every matching request and add to the total response time. A slow Worker is a common cause of high TTFB. + +To check if Workers are affecting performance: + +1. Go to **Workers & Pages** in the Cloudflare dashboard. +2. Review which Workers are deployed on your zone. +3. Check the **Analytics** for each Worker to see execution times. +4. Temporarily disable Workers to isolate whether they are causing the slowness. + +If a Worker is slow, review its code for: +- Slow external API calls or `fetch()` requests +- Inefficient loops or data processing +- Missing `await` statements causing sequential instead of parallel execution + +--- + +## Step 4: Measure performance with curl + +For detailed timing metrics on specific requests, use `curl` with the `--write-out` option. + +### Basic performance test + +```bash +curl -w "\n\nDNS Lookup: %{time_namelookup}s\nTCP Connect: %{time_connect}s\nTLS Handshake: %{time_appconnect}s\nTime to First Byte: %{time_starttransfer}s\nTotal Time: %{time_total}s\n" -o /dev/null -s https://www.example.com/slow-asset.jpg +``` + +This outputs: + +```txt +DNS Lookup: 0.025s +TCP Connect: 0.045s +TLS Handshake: 0.120s +Time to First Byte: 0.350s +Total Time: 1.250s +``` + +### Understand the metrics + +The curl timing breakdown shows the following: + +| Metric | Description | High value indicates | +|--------|-------------|---------------------| +| **DNS Lookup** | Time to resolve the domain name | DNS issues or slow resolver | +| **TCP Connect** | Time to establish TCP connection | Network latency or server distance | +| **TLS Handshake** | Time to complete SSL/TLS negotiation | Certificate chain issues or slow server | +| **Time to First Byte (TTFB)** | Time until first response byte | Slow origin processing | +| **Total Time** | Complete request duration | Large file size or slow transfer | + +### Test from different locations + +To test from different geographic locations, use online tools like: +- [KeyCDN Tools](https://tools.keycdn.com/performance) +- [Uptrends](https://www.uptrends.com/tools/website-speed-test) +- [Dotcom-Tools](https://www.dotcom-tools.com/website-speed-test) + +--- + +## Step 5: Investigate caching + +Caching is one of the most effective ways to improve website performance. When content is cached, Cloudflare serves it directly from a data center close to your visitors, eliminating the round trip to your origin server. This can reduce response times from hundreds of milliseconds to just a few milliseconds. + +Uncached content must travel from the visitor to Cloudflare, then to your origin server, and back again. Use [Cache Analytics](/cache/performance-review/cache-analytics/) to understand your cache performance and identify opportunities to cache more content. + +### Check if assets are cached + +Use `curl` to check the cache status of a specific asset: + +```bash +curl -s -D- -o /dev/null https://www.example.com/asset.jpg | grep -i "cf-cache-status" +``` + +Possible values: + +| Status | Meaning | Action | +|--------|---------|--------| +| **HIT** | Served from Cloudflare cache | No action needed | +| **MISS** | Not in cache, fetched from origin | May need cache rules | +| **DYNAMIC** | Not eligible for caching | Create a cache rule if static | +| **BYPASS** | Cache intentionally bypassed | Review cache rules | +| **EXPIRED** | Cached copy was stale | Increase Edge TTL | +| **REVALIDATED** | Cloudflare confirmed content is current | Increase Edge TTL | + +For a complete list, refer to [Cloudflare cache responses](/cache/concepts/cache-responses/). + +### Use Cache Analytics + +1. Go to the Cloudflare dashboard. + + +2. Review the **Cache Performance** section. +3. Filter by **Cache status equals MISS** or **DYNAMIC** to identify uncached content. + +### Investigate why static content is not cached + +If static assets (images, CSS, JavaScript) show a cache status of `DYNAMIC`, `BYPASS`, or `MISS`, investigate the cause: + +| Symptom | Likely cause | Solution | +|---------|--------------|----------| +| `DYNAMIC` status | Content type not in [default file extensions](/cache/concepts/default-cache-behavior/#default-cached-file-extensions) | Create a Cache Rule to cache the content | +| `DYNAMIC` status | Origin sends `Cache-Control: private` or `no-store` | Create a Cache Rule to [override origin cache control](/cache/how-to/cache-rules/settings/#origin-cache-control) | +| `BYPASS` status | A Cache Rule is bypassing cache | Review your [Cache Rules](/cache/how-to/cache-rules/) configuration | +| `MISS` on every request | Response includes `Set-Cookie` header | Configure your origin to not set cookies on static assets, or use a Cache Rule to [ignore cookies](/cache/concepts/cache-behavior/#interaction-of-set-cookie-response-header-with-cache) | +| `MISS` with query strings | Different query strings create different cache entries | Use a [custom cache key](/cache/how-to/cache-rules/examples/custom-cache-key/) to ignore or normalize query strings | + +### Cache additional static content + +By default, Cloudflare only caches certain [file extensions](/cache/concepts/default-cache-behavior/#default-cached-file-extensions). To cache additional static content: + +1. Go to **Caching** > **Cache Rules**. +2. Create a rule to [cache specific content](/cache/how-to/cache-rules/examples/cache-everything/). +3. Set appropriate [Edge TTLs](/cache/how-to/cache-rules/settings/#edge-ttl). + +:::caution +Be careful when caching HTML or API responses. These often contain personalized or dynamic content that should not be cached. Only cache content you are certain is static. +::: + +--- + +## Step 6: Diagnose network issues + +If curl shows high TCP Connect or TLS Handshake times, the issue may be network-related rather than application-related. + +### Test your Internet connection + +Visit [speed.cloudflare.com](https://speed.cloudflare.com) to test: +- Download and upload speeds +- Latency (ping) +- Jitter +- Packet loss + +Poor results indicate issues with your local network or ISP. + +### Run MTR from your location to Cloudflare + +MTR combines traceroute and ping to show latency and packet loss at each network hop. + + + + +```bash +mtr -rw www.example.com +``` + + + + +Download [WinMTR](https://github.com/White-Tiger/WinMTR/releases) and run it with your domain as the target. + + + + +Look for: +- **High latency** at specific hops (indicates slow network segments) +- **Packet loss** (indicates network congestion or issues) +- **Timeouts** (may indicate firewalls or routing issues) + +For more details, refer to [How to read MTR](https://www.cloudflare.com/learning/network-layer/what-is-mtr/). + +### Run MTR from your origin to Cloudflare + +If you have access to your origin server, run MTR from the origin to a [Cloudflare IP address](https://www.cloudflare.com/ips/) to test the network path between your origin and Cloudflare. + +```bash +mtr -rw 104.16.132.229 +``` + +High latency or packet loss on this path affects all requests that miss the cache. + +--- + +## Step 7: Understand network routing + +How requests are routed to Cloudflare data centers can significantly impact performance. + +### Identify which data center serves your requests + +Add `/cdn-cgi/trace` to your domain to see which Cloudflare data center is serving your requests: + +```bash +curl https://www.example.com/cdn-cgi/trace +``` + +The `colo` field shows the three-letter airport code of the serving data center (for example, `colo=SJC` for San Jose). You can find the full list of Cloudflare data centers and their codes on the [Cloudflare status page](https://www.cloudflarestatus.com/). + +### Why routing matters + +When a request reaches Cloudflare: + +1. The request is routed to a nearby Cloudflare data center based on anycast [routing](https://www.cloudflare.com/learning/cdn/glossary/anycast-network/). +2. If the content is cached, it is served immediately. +3. If not cached, Cloudflare fetches from your origin server. + +If your origin server is geographically distant from the Cloudflare data center serving your users, uncached requests will be slow. + +### Troubleshoot unexpected routing + +If requests are being routed to a data center that seems far from the user, this may be due to Cloudflare's automated traffic engineering or a user’s ISP routing traffic. + +While Cloudflare always strives to provide the best possible performance by serving traffic from the closest location, reliability is the top priority. In instances where performance and reliability are in conflict, Cloudflare's systems are designed to prioritize a stable connection over a local one. + +For more details, refer to [Cloudflare traffic not being sent to the geographically closest data center](/support/troubleshooting/general-troubleshooting/geographic-traffic-routing/). + +Common causes of unexpected routing: + +| Symptom | Explanation | +|---------|-------------| +| Requests route to a distant data center | Cloudflare traffic engineering for reliability, or ISP routing decisions | +| Routing changes between requests | Normal behavior - routing adapts to network conditions or ISP load balancing | +| Consistent routing to a distant region | ISP peering location or Cloudflare capacity management | +| High latency despite nearby data center | Network congestion on the path | + +### Solutions for origin distance + +Consider these solutions based on your needs: + +| Solution | Description | Best for | +|----------|-------------|----------| +| **Improve cache hit ratio** | Cache more content to reduce origin fetches | All sites | +| **[Tiered Cache](/cache/how-to/tiered-cache/)** | Use upper-tier data centers to reduce origin requests | Sites with global traffic | +| **[Argo Smart Routing](/argo-smart-routing/)** | Route traffic over faster network paths | Sites with slow origin connections | +| **Move origin closer** | Deploy origin servers in multiple regions | Large-scale applications | + +### Enable Argo Smart Routing + +[Argo Smart Routing](/argo-smart-routing/) analyzes network conditions in real-time and routes traffic over the fastest paths, reducing latency by an average of 30%. + +Argo Smart Routing is part of [Smart Shield](/smart-shield/), which bundles multiple Cloudflare performance and reliability features. + +To enable Argo Smart Routing: + +1. Go to the [Cloudflare dashboard](https://dash.cloudflare.com/?to=/:account/:zone/smart-shield). +2. Follow the [Smart Shield setup guide](/smart-shield/get-started/) to enable the feature. + +Argo is particularly effective when: +- Your origin is far from your users +- Network congestion affects certain paths +- You need consistent performance globally + +For detailed information about how Argo Smart Routing works, refer to the [Argo Smart Routing documentation](/argo-smart-routing/). + +--- + +## Summary checklist + +Use this checklist to systematically troubleshoot slow website performance: + +- [ ] Verify traffic is going through Cloudflare (check for `cf-ray` header) +- [ ] Identify specific slow assets using browser developer tools +- [ ] Run Observatory tests and review Core Web Vitals +- [ ] Enable recommended Speed optimizations +- [ ] Check origin response times in Analytics +- [ ] Use `curl` to measure detailed timing for slow assets +- [ ] Verify assets are being cached using Cache Analytics +- [ ] Create cache rules for static content that is not cached +- [ ] Test network performance with speed.cloudflare.com +- [ ] Run MTR to identify network path issues +- [ ] Check which Cloudflare data center serves your requests +- [ ] Consider Argo Smart Routing for improved routing + +--- + +## Related resources + +- [Observatory](/speed/observatory/) - Test and monitor website performance +- [Cache Analytics](/cache/performance-review/cache-analytics/) - Analyze cache hit rates +- [Cache Rules](/cache/how-to/cache-rules/) - Control what gets cached +- [Argo Smart Routing](/argo-smart-routing/) - Optimize network routing +- [Gathering information for troubleshooting](/support/troubleshooting/general-troubleshooting/gathering-information-for-troubleshooting-sites/) - Collect diagnostic data