Open PixelCraft → DevTools (F12) → Network tab → Refresh the page.
Watch every file download: HTML, CSS, JS, images, fonts.
| Observe | What It Tells You |
|---|---|
| Number of requests | How many files make up this page |
| Total data transferred | How much bandwidth this page uses |
| Load time (DOMContentLoaded) | How fast the page becomes interactive |
| Largest resource | What's slowing the page down most |
Click each request — examine headers, status code, response body.
Click on the main HTML request and inspect:
| Field | Example Value | Meaning |
|---|---|---|
| Request URL | https://pixelcraft.app/ | Where the request went |
| Method | GET | Asking for a resource |
| Status | 200 OK | Success |
| Content-Type | text/html | What type of data came back |
| Content-Length | 14,832 | Size in bytes |
Enable airplane mode (or DevTools → Network → Offline). Reload PixelCraft.
What breaks? What still loads from cache? This shows the difference between network-dependent and cached resources.
# DNS lookup — see the IP behind a URL
nslookup google.com
# or
dig google.com
# Ping — measure latency to a server
ping google.com
# (Ctrl+C to stop)
# HTTP headers from terminal
curl -I https://www.google.com
On paper or a whiteboard, draw the complete path from typing a URL to seeing a page:
Your Computer → Router → ISP → DNS Server → Web Server
↓
Screen ← Browser Renders ← Response (HTML/CSS/JS) ←
Label each step with what happens: DNS resolution, TCP handshake, HTTP request, response, parsing, rendering.
Packet Switching.
Your image doesn't travel as one giant chunk — it's split into small packets (typically 1.5 KB each). Each packet can take a different route through the internet.