[{"data":1,"prerenderedAt":584},["ShallowReactive",2],{"guide-html-minification-cdn":3},{"id":4,"title":5,"body":6,"date":575,"description":576,"extension":577,"meta":578,"navigation":579,"path":580,"readingTime":270,"seo":581,"stem":582,"__hash__":583},"guides\u002Fguides\u002Fhtml-minification-cdn.md","HTML Minification via CDN",{"type":7,"value":8,"toc":568},"minimark",[9,13,18,21,40,43,47,50,57,62,125,128,162,173,180,369,373,376,412,415,418,422,527,531,538,552,555,564],[10,11,12],"p",{},"Minifying HTML at the origin server adds processing latency to every request. For dynamic applications where response time directly impacts user experience and conversion rates, origin-side minification can become a bottleneck under high load. Content Delivery Networks solve this by moving minification to the edge—processing HTML responses at nodes geographically close to users, without touching your origin infrastructure.",[14,15,17],"h2",{"id":16},"how-edge-minification-works","How Edge Minification Works",[10,19,20],{},"When a CDN sits between your origin server and the client, it can intercept the HTML response and transform it before forwarding it to the browser. The flow is:",[22,23,24,28,31,34,37],"ol",{},[25,26,27],"li",{},"The client requests a page.",[25,29,30],{},"The CDN checks its cache. If the page is cached and fresh, it serves the cached (already minified) copy.",[25,32,33],{},"If not cached, the CDN forwards the request to the origin.",[25,35,36],{},"The origin returns the full, unminified HTML.",[25,38,39],{},"The CDN minifies the HTML, stores the minified version in cache, and sends it to the client.",[10,41,42],{},"This architecture means minification overhead occurs only on cache misses. Subsequent requests for the same page serve the cached, minified version instantly. Since cache hit rates for most websites exceed 90%, the real-time minification cost applies to a small fraction of traffic.",[14,44,46],{"id":45},"cloudflare-auto-minify","Cloudflare Auto Minify",[10,48,49],{},"Cloudflare offers built-in HTML minification that requires zero code changes. You enable it through the dashboard or API:",[10,51,52,56],{},[53,54,55],"strong",{},"Dashboard:"," Speed → Optimization → Auto Minify → check HTML → Save.",[10,58,59],{},[53,60,61],{},"API:",[63,64,69],"pre",{"className":65,"code":66,"language":67,"meta":68,"style":68},"language-bash shiki shiki-themes github-light github-dark","curl -X PATCH \"https:\u002F\u002Fapi.cloudflare.com\u002Fclient\u002Fv4\u002Fzones\u002F{zone_id}\u002Fsettings\u002Fminify\" \\\n  -H \"Authorization: Bearer {api_token}\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\"value\":{\"html\":\"on\",\"css\":\"on\",\"js\":\"on\"}}'\n","bash","",[70,71,72,95,106,116],"code",{"__ignoreMap":68},[73,74,77,81,85,89,92],"span",{"class":75,"line":76},"line",1,[73,78,80],{"class":79},"sScJk","curl",[73,82,84],{"class":83},"sj4cs"," -X",[73,86,88],{"class":87},"sZZnC"," PATCH",[73,90,91],{"class":87}," \"https:\u002F\u002Fapi.cloudflare.com\u002Fclient\u002Fv4\u002Fzones\u002F{zone_id}\u002Fsettings\u002Fminify\"",[73,93,94],{"class":83}," \\\n",[73,96,98,101,104],{"class":75,"line":97},2,[73,99,100],{"class":83},"  -H",[73,102,103],{"class":87}," \"Authorization: Bearer {api_token}\"",[73,105,94],{"class":83},[73,107,109,111,114],{"class":75,"line":108},3,[73,110,100],{"class":83},[73,112,113],{"class":87}," \"Content-Type: application\u002Fjson\"",[73,115,94],{"class":83},[73,117,119,122],{"class":75,"line":118},4,[73,120,121],{"class":83},"  -d",[73,123,124],{"class":87}," '{\"value\":{\"html\":\"on\",\"css\":\"on\",\"js\":\"on\"}}'\n",[10,126,127],{},"Cloudflare's Auto Minify performs these transformations:",[129,130,131,134,137,140,151],"ul",{},[25,132,133],{},"Removes HTML comments (excluding conditional IE comments)",[25,135,136],{},"Collapses whitespace between tags",[25,138,139],{},"Removes unnecessary quotes from attributes",[25,141,142,143,146,147,150],{},"Removes optional closing tags (e.g., ",[70,144,145],{},"\u003C\u002Fli>",", ",[70,148,149],{},"\u003C\u002Fp>",")",[25,152,153,154,157,158,161],{},"Minifies inline ",[70,155,156],{},"\u003Cstyle>"," and ",[70,159,160],{},"\u003Cscript>"," blocks",[10,163,164,165,168,169,172],{},"One limitation: Cloudflare Auto Minify does not remove ",[70,166,167],{},"type=\"text\u002Fjavascript\""," or ",[70,170,171],{},"type=\"text\u002Fcss\""," attributes because some applications depend on them for content negotiation.",[10,174,175,176,179],{},"For more granular control, Cloudflare Workers let you write custom minification logic. You can use the ",[70,177,178],{},"htmlRewriter"," API to stream-transform HTML without buffering the entire response:",[63,181,185],{"className":182,"code":183,"language":184,"meta":68,"style":68},"language-javascript shiki shiki-themes github-light github-dark","export default {\n  async fetch(request) {\n    const response = await fetch(request)\n    return new HTMLRewriter()\n      .on('*', {\n        element(el) {\n          \u002F\u002F Custom minification logic\n          el.removeAttribute('data-debug')\n        },\n        comments(comment) {\n          comment.remove()\n        },\n      })\n      .transform(response)\n  },\n}\n","javascript",[70,186,187,200,218,237,251,268,281,288,305,311,324,335,340,346,357,363],{"__ignoreMap":68},[73,188,189,193,196],{"class":75,"line":76},[73,190,192],{"class":191},"szBVR","export",[73,194,195],{"class":191}," default",[73,197,199],{"class":198},"sVt8B"," {\n",[73,201,202,205,208,211,215],{"class":75,"line":97},[73,203,204],{"class":191},"  async",[73,206,207],{"class":79}," fetch",[73,209,210],{"class":198},"(",[73,212,214],{"class":213},"s4XuR","request",[73,216,217],{"class":198},") {\n",[73,219,220,223,226,229,232,234],{"class":75,"line":108},[73,221,222],{"class":191},"    const",[73,224,225],{"class":83}," response",[73,227,228],{"class":191}," =",[73,230,231],{"class":191}," await",[73,233,207],{"class":79},[73,235,236],{"class":198},"(request)\n",[73,238,239,242,245,248],{"class":75,"line":118},[73,240,241],{"class":191},"    return",[73,243,244],{"class":191}," new",[73,246,247],{"class":79}," HTMLRewriter",[73,249,250],{"class":198},"()\n",[73,252,254,257,260,262,265],{"class":75,"line":253},5,[73,255,256],{"class":198},"      .",[73,258,259],{"class":79},"on",[73,261,210],{"class":198},[73,263,264],{"class":87},"'*'",[73,266,267],{"class":198},", {\n",[73,269,271,274,276,279],{"class":75,"line":270},6,[73,272,273],{"class":79},"        element",[73,275,210],{"class":198},[73,277,278],{"class":213},"el",[73,280,217],{"class":198},[73,282,284],{"class":75,"line":283},7,[73,285,287],{"class":286},"sJ8bj","          \u002F\u002F Custom minification logic\n",[73,289,291,294,297,299,302],{"class":75,"line":290},8,[73,292,293],{"class":198},"          el.",[73,295,296],{"class":79},"removeAttribute",[73,298,210],{"class":198},[73,300,301],{"class":87},"'data-debug'",[73,303,304],{"class":198},")\n",[73,306,308],{"class":75,"line":307},9,[73,309,310],{"class":198},"        },\n",[73,312,314,317,319,322],{"class":75,"line":313},10,[73,315,316],{"class":79},"        comments",[73,318,210],{"class":198},[73,320,321],{"class":213},"comment",[73,323,217],{"class":198},[73,325,327,330,333],{"class":75,"line":326},11,[73,328,329],{"class":198},"          comment.",[73,331,332],{"class":79},"remove",[73,334,250],{"class":198},[73,336,338],{"class":75,"line":337},12,[73,339,310],{"class":198},[73,341,343],{"class":75,"line":342},13,[73,344,345],{"class":198},"      })\n",[73,347,349,351,354],{"class":75,"line":348},14,[73,350,256],{"class":198},[73,352,353],{"class":79},"transform",[73,355,356],{"class":198},"(response)\n",[73,358,360],{"class":75,"line":359},15,[73,361,362],{"class":198},"  },\n",[73,364,366],{"class":75,"line":365},16,[73,367,368],{"class":198},"}\n",[14,370,372],{"id":371},"fastly-edge-logic","Fastly Edge Logic",[10,374,375],{},"Fastly provides HTML minification through its Varnish Configuration Language (VCL) and the Fanout\u002FEdge Logic capabilities. A basic VCL snippet to strip comments and collapse whitespace:",[63,377,381],{"className":378,"code":379,"language":380,"meta":68,"style":68},"language-vcl shiki shiki-themes github-light github-dark","sub vcl_deliver {\n  if (resp.http.Content-Type ~ \"text\u002Fhtml\") {\n    set resp.http.X-Fastly-Minified = \"true\";\n    \u002F* Fastly's built-in minify via ImageOpto or custom VCL *\u002F\n  }\n}\n","vcl",[70,382,383,388,393,398,403,408],{"__ignoreMap":68},[73,384,385],{"class":75,"line":76},[73,386,387],{},"sub vcl_deliver {\n",[73,389,390],{"class":75,"line":97},[73,391,392],{},"  if (resp.http.Content-Type ~ \"text\u002Fhtml\") {\n",[73,394,395],{"class":75,"line":108},[73,396,397],{},"    set resp.http.X-Fastly-Minified = \"true\";\n",[73,399,400],{"class":75,"line":118},[73,401,402],{},"    \u002F* Fastly's built-in minify via ImageOpto or custom VCL *\u002F\n",[73,404,405],{"class":75,"line":253},[73,406,407],{},"  }\n",[73,409,410],{"class":75,"line":270},[73,411,368],{},[10,413,414],{},"For production use, Fastly recommends using their Compute@Edge platform with Wasm-based minification. This approach processes HTML at the edge with near-native performance and gives you full control over the minification rules.",[10,416,417],{},"Fastly's edge computing model processes HTML as a stream, meaning memory usage stays constant regardless of page size. This is a significant advantage over origin-side minification tools that must buffer the entire document.",[14,419,421],{"id":420},"comparative-overview","Comparative Overview",[423,424,425,443],"table",{},[426,427,428],"thead",{},[429,430,431,435,437,440],"tr",{},[432,433,434],"th",{},"Feature",[432,436,46],{},[432,438,439],{},"Cloudflare Workers",[432,441,442],{},"Fastly Compute@Edge",[444,445,446,461,474,488,501,515],"tbody",{},[429,447,448,452,455,458],{},[449,450,451],"td",{},"Setup complexity",[449,453,454],{},"Click to enable",[449,456,457],{},"Write Worker code",[449,459,460],{},"Write Wasm module",[429,462,463,466,469,472],{},[449,464,465],{},"Customization",[449,467,468],{},"None",[449,470,471],{},"Full",[449,473,471],{},[429,475,476,479,482,485],{},[449,477,478],{},"Streaming support",[449,480,481],{},"Yes (internal)",[449,483,484],{},"Yes (HTMLRewriter)",[449,486,487],{},"Yes (native)",[429,489,490,493,496,499],{},[449,491,492],{},"CSS\u002FJS minification",[449,494,495],{},"Included",[449,497,498],{},"Manual",[449,500,498],{},[429,502,503,506,509,512],{},[449,504,505],{},"Cost",[449,507,508],{},"Free on all plans",[449,510,511],{},"Paid (Workers)",[449,513,514],{},"Paid (Compute)",[429,516,517,520,523,525],{},[449,518,519],{},"Cache integration",[449,521,522],{},"Automatic",[449,524,498],{},[449,526,522],{},[14,528,530],{"id":529},"considerations-and-caveats","Considerations and Caveats",[10,532,533,534,537],{},"Edge minification interacts with caching in ways that can surprise you. If your origin sends ",[70,535,536],{},"Vary: Accept-Encoding"," headers, the CDN may store differently compressed variants. Ensure your minification configuration is consistent across all edges to avoid serving different HTML to different users.",[10,539,540,541,146,544,547,548,551],{},"Some HTML should never be minified. Pages containing ",[70,542,543],{},"\u003Cpre>",[70,545,546],{},"\u003Ccode>",", or ",[70,549,550],{},"\u003Ctextarea>"," elements rely on whitespace preservation. Most minifiers handle these correctly, but verify with your CDN provider if you serve code-heavy content like documentation or technical articles.",[10,553,554],{},"Finally, edge minification makes debugging harder since the HTML served to the browser differs from what your origin produces. Use cache purge APIs to temporarily disable minification during debugging sessions.",[10,556,557,558,563],{},"To preview how minification affects your HTML, the ",[559,560,562],"a",{"href":561},"\u002Ftools\u002Fhtml-minifier","HTML Minifier tool"," lets you compare original and minified output side by side.",[565,566,567],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":68,"searchDepth":97,"depth":97,"links":569},[570,571,572,573,574],{"id":16,"depth":97,"text":17},{"id":45,"depth":97,"text":46},{"id":371,"depth":97,"text":372},{"id":420,"depth":97,"text":421},{"id":529,"depth":97,"text":530},"2026-05-28","Using Cloudflare, Fastly, and other CDNs to minify HTML on the fly at the edge.","md",{},true,"\u002Fguides\u002Fhtml-minification-cdn",{"title":5,"description":576},"guides\u002Fhtml-minification-cdn","pvOKVpoNP0FNOZLoGCr-flhaLxjHRXOBvmC3Z0LY99Y",1780401334434]