0
0
HTMLmarkup~8 mins

Absolute vs relative URLs in HTML - Performance Comparison

Choose your learning style9 modes available
Performance: Absolute vs relative URLs
MEDIUM IMPACT
This concept affects page load speed by influencing how quickly the browser can resolve and fetch resources.
Linking to internal resources on the same website
HTML
<img src="/images/photo.jpg" alt="Photo">
Relative URLs avoid extra DNS lookups and reuse existing connections, speeding up resource loading.
📈 Performance GainSaves DNS lookup time and reduces request latency by 50-100ms per resource
Linking to internal resources on the same website
HTML
<img src="https://www.example.com/images/photo.jpg" alt="Photo">
Using absolute URLs for internal resources causes extra DNS lookups and longer request times.
📉 Performance CostAdds extra DNS lookup and connection setup, increasing load time by 50-100ms per resource
Performance Comparison
PatternDOM OperationsReflowsPaint CostVerdict
Absolute URL for internal resourceNo extra DOM nodes0Minimal[✗] Bad
Relative URL for internal resourceNo extra DOM nodes0Minimal[✓] Good
Rendering Pipeline
When the browser encounters a URL, it resolves it to a full address before fetching the resource. Absolute URLs require full resolution including DNS lookup, while relative URLs resolve faster using the current page's base URL.
DNS Lookup
Connection Setup
Resource Fetching
⚠️ BottleneckDNS Lookup and Connection Setup
Core Web Vital Affected
LCP
This concept affects page load speed by influencing how quickly the browser can resolve and fetch resources.
Optimization Tips
1Use relative URLs for internal resources to reduce DNS lookups and speed up loading.
2Use absolute URLs for external resources to avoid confusion and ensure correct fetching.
3Check base URL settings to avoid broken relative links that hurt user experience.
Performance Quiz - 3 Questions
Test your performance knowledge
Why do relative URLs often load internal resources faster than absolute URLs?
AThey use a different server optimized for speed
BThey compress the resource automatically
CThey avoid extra DNS lookups and reuse existing connections
DThey load resources asynchronously by default
DevTools: Network
How to check: Open DevTools, go to Network tab, reload the page, and look at the requests for internal resources. Check if DNS lookup and connection times are present.
What to look for: Look for DNS Lookup and Initial Connection times. Relative URLs should show fewer or no DNS lookups compared to absolute URLs.