Pages Static Assets & File Optimization
In this tutorial, you'll learn about Pages Static Assets & File Optimization. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.
This tutorial explains how to manage and optimize static assets in Cloudflare Pages, including image optimization, font delivery, cache strategies, and large file handling for fast global performance. Static Sites rely on efficient asset delivery to achieve fast load times. The DodaTech tutorial site uses Cloudflare image resizing and cache headers to serve screenshots at optimal sizes for every device.
Asset Pipeline Overview
Static assets in Pages are served directly from the edge CDN without invoking a function. Cloudflare automatically optimizes images and applies cache headers based on your configuration.
flowchart LR A[Build assets] --> B[Upload to Pages] B --> C[Edge CDN cache] C --> D[Image resizing] C --> E[Cache control] D --> F[Optimized image] E --> G[Cached response] style C fill:#f90,color:#fff style D fill:#f90,color:#fff
Image Optimization
Cloudflare can automatically resize and convert images to WebP format. Enable this through the Speed settings in your Cloudflare dashboard.
// Generate responsive image srcset
const imageSizes = [320, 640, 960, 1280];
const baseUrl = 'https://example.com/images/photo.jpg';
const srcset = imageSizes.map(function(size) {
const optimizedUrl = baseUrl + '?width=' + size + '&format=webp';
return optimizedUrl + ' ' + size + 'w';
}).join(',\n');
console.log(srcset);
// Expected output:
// https://example.com/images/photo.jpg?width=320&format=webp 320w,
// https://example.com/images/photo.jpg?width=640&format=webp 640w,
// https://example.com/images/photo.jpg?width=960&format=webp 960w,
// https://example.com/images/photo.jpg?width=1280&format=webp 1280w
// Check if Cloudflare image optimization is active
async function checkImageOptimization(imageUrl) {
const response = await fetch(imageUrl);
const contentType = response.headers.get('content-type');
const cfCacheStatus = response.headers.get('cf-cache-status');
const cfResized = response.headers.get('cf-resized');
console.log('Content-Type:', contentType);
console.log('CF Cache:', cfCacheStatus);
console.log('CF Resized:', cfResized);
if (contentType === 'image/webp') {
console.log('Image converted to WebP');
} else {
console.log('Image served as original format');
}
}
checkImageOptimization('https://example.com/images/photo.jpg?format=webp');
// Expected output:
// Content-Type: image/webp
// CF Cache: HIT
// CF Resized: true
// Image converted to WebP
Font Optimization
Web fonts can slow down page rendering. Optimize font delivery using font-display: swap and preload critical fonts.
// Generate preload links for fonts
const fonts = [
{ name: 'Inter-Regular', weight: '400', file: '/fonts/inter-regular.woff2' },
{ name: 'Inter-Bold', weight: '700', file: '/fonts/inter-bold.woff2' }
];
const preloadLinks = fonts.map(function(font) {
return '<link rel="preload" href="' + font.file + '" as="font" type="font/woff2" crossorigin>';
}).join('\n');
console.log(preloadLinks);
// Expected output:
// <link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
// <link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>
Cache Strategy
Set appropriate cache headers for different asset types using the _headers file to maximize CDN cache hits.
# _headers
*.jpg
Cache-Control: public, max-age=31536000, immutable
*.png
Cache-Control: public, max-age=31536000, immutable
*.webp
Cache-Control: public, max-age=31536000, immutable
*.woff2
Cache-Control: public, max-age=31536000, immutable
*.js
Cache-Control: public, max-age=86400
*.css
Cache-Control: public, max-age=86400
FAQ
Practice Questions
- What query parameter controls image width in Cloudflare image optimization?
- Which cache directive makes a file permanently cacheable with a revalidation key?
- What is the recommended font-display value for preventing invisible text during load?
Summary
Optimize static assets in Cloudflare Pages using automatic image resizing, WebP conversion, font preloading, and cache headers. Set immutable cache for versioned assets and shorter TTLs for HTML and API responses. Use the _headers file to control Caching behavior at the edge.
Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro — security-first tools for the modern web.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro