Tối ưu landing & marketing (tag, font, tốc độ) Optimize marketing & landing pages (tags, fonts, speed) Optimize marketing & landing pages (tags, fonts, speed)

Landing và trang campaign chậm vì quá nhiều tag phía browser (GTM, Meta Pixel, TikTok…), font tải từ Google Fonts CDN, và team marketing không đo được LCP/INP thực tế sau khi chạy ads. Landing and campaign pages feel slow because too many browser tags (GTM, Meta Pixel, TikTok…), fonts load from Google Fonts CDN, and marketing cannot see real LCP/INP after ads go live. Landing and campaign pages feel slow because too many browser tags (GTM, Meta Pixel, TikTok…), fonts load from Google Fonts CDN, and marketing cannot see real LCP/INP after ads go live.

Tài liệu Cloudflare (use case) → Official Cloudflare use case docs → Official Cloudflare use case docs →

Kiến trúc gợi ý Suggested architecture Suggested architecture

Visitor → CDN + Speed + Fonts + Zaraz → Origin / vendor APIs Visitor → CDN + Speed + Fonts + Zaraz → Origin / vendor APIs Visitor → CDN + Speed + Fonts + Zaraz → Origin / vendor APIs

Các bước thực hiện Recommended steps Recommended steps

Xác nhận domain đã proxy (orange cloud) — không proxy thì Speed/Zaraz/Fonts không áp dụng Confirm the domain is proxied (orange cloud) — without proxy, Speed/Zaraz/Fonts do not apply Confirm the domain is proxied (orange cloud) — without proxy, Speed/Zaraz/Fonts do not apply
Speed > Optimization: bật Brotli và Early Hints; Auto Minify chỉ sau khi test staging Speed > Optimization: enable Brotli and Early Hints; Auto Minify only after staging tests Speed > Optimization: enable Brotli and Early Hints; Auto Minify only after staging tests
Bật Cloudflare Fonts để phục vụ font qua edge thay third-party font CDN Enable Cloudflare Fonts so fonts are served from the edge instead of a third-party font CDN Enable Cloudflare Fonts so fonts are served from the edge instead of a third-party font CDN
Tag Administration / Zaraz: thêm tool (GA, Meta…) và dần tắt script GTM/pixel trên HTML Tag Administration / Zaraz: add tools (GA, Meta…) and gradually remove GTM/pixel scripts from HTML Tag Administration / Zaraz: add tools (GA, Meta…) and gradually remove GTM/pixel scripts from HTML
Bật Web Analytics hoặc Speed Observatory — so sánh LCP/INP trước và sau campaign Turn on Web Analytics or Speed Observatory — compare LCP/INP before and after the campaign Turn on Web Analytics or Speed Observatory — compare LCP/INP before and after the campaign

Controls & stack Controls & stack Controls & stack

Zaraz = tag manager phía edge/server: giữ tracking & ads, giảm JS nặng trên browser Zaraz = edge/server tag manager: keep tracking & ads, fewer heavy scripts in the browser Zaraz = edge/server tag manager: keep tracking & ads, fewer heavy scripts in the browser
Cloudflare Fonts: privacy + ít kết nối phụ + cache font tại PoP gần user Cloudflare Fonts: privacy, fewer extra connections, fonts cached at a nearby PoP Cloudflare Fonts: privacy, fewer extra connections, fonts cached at a nearby PoP
Speed (Brotli, Early Hints, HTTP/3): tối ưu delivery từ dashboard, không cần sửa code app Speed (Brotli, Early Hints, HTTP/3): delivery tweaks from the dashboard — no app code changes Speed (Brotli, Early Hints, HTTP/3): delivery tweaks from the dashboard — no app code changes
Web Analytics / RUM: chứng minh cải thiện Core Web Vitals cho stakeholder Web Analytics / RUM: prove Core Web Vitals gains to stakeholders Web Analytics / RUM: prove Core Web Vitals gains to stakeholders
Song song CDN/cache static (xem tình huống tăng tốc CDN) khi asset nặng Pair with CDN/cache for heavy assets (see the accelerate content delivery scenario) Pair with CDN/cache for heavy assets (see the accelerate content delivery scenario)

Lỗi thường gặp Common mistakes Common mistakes

Nhồi hết pixel/GTM phía client rồi mới nghĩ tới tốc độ Dumping every pixel/GTM client-side before thinking about speed Dumping every pixel/GTM client-side before thinking about speed

Mỗi tag thêm JS và request. Ưu tiên Zaraz (hoặc giảm số tool) trước khi tối ưu ảnh/hero. Each tag adds JS and requests. Prefer Zaraz (or fewer tools) before polishing hero images. Each tag adds JS and requests. Prefer Zaraz (or fewer tools) before polishing hero images.

Bật Auto Minify hoặc Rocket Loader không test staging Enabling Auto Minify or Rocket Loader without staging tests Enabling Auto Minify or Rocket Loader without staging tests

Có thể làm gãy tracking hoặc layout. Bật từng bước trên staging/preview, rồi mới production. Can break tracking or layout. Flip settings one at a time on staging/preview, then production. Can break tracking or layout. Flip settings one at a time on staging/preview, then production.

Quên consent / privacy khi migrate tag Forgetting consent / privacy when migrating tags Forgetting consent / privacy when migrating tags

Zaraz hỗ trợ quản lý consent — cấu hình trước khi chạy ads ở thị trường có GDPR/PDPA. Zaraz supports consent management — configure it before running ads in GDPR/PDPA markets. Zaraz supports consent management — configure it before running ads in GDPR/PDPA markets.

Chỉ nhìn Lighthouse lab, bỏ RUM sau campaign Only watching Lighthouse lab scores, not RUM after the campaign Only watching Lighthouse lab scores, not RUM after the campaign

Lab khác traffic thật. Dùng Web Analytics hoặc Speed Observatory khi ads đang chạy để thấy LCP/INP thực tế. Lab ≠ real traffic. Use Web Analytics or Speed Observatory while ads run to see real LCP/INP. Lab ≠ real traffic. Use Web Analytics or Speed Observatory while ads run to see real LCP/INP.

Tình huống khác (cùng lộ trình) Other scenarios (same track) Other scenarios (same track)

← Tất cả tình huống lộ trình này ← All scenarios in this track ← All scenarios in this track · Ba nhóm tình huống All three groups All three groups

Next step Next step Next step

Tiếp tục hành trình học của bạn. Continue your learning journey. Continue your learning journey.

Zaraz & Fonts trên Content delivery Zaraz & Fonts in Content delivery Zaraz & Fonts in Content delivery