Starter Hub Starter Hub

Lộ trình đang học Current learning path

Application Services Application Services

Bảo vệ và tăng tốc website, application và API. Protect and accelerate websites, applications, and APIs.

Về trang lộ trình Track home

Phần 4: Content delivery & tăng tốc website Part 4: Content delivery & website speed · Bài 3/4 Lesson 3/4

Speed & Images Speed & Images

Brotli, Early Hints, HTTP/3; resize ảnh WebP/AVIF tại edge. Brotli, Early Hints, HTTP/3; resize images to WebP/AVIF at the edge.

Speed & Images
Minh họa từ Cloudflare Reference Architecture (developers.cloudflare.com) Illustration from Cloudflare Reference Architecture (developers.cloudflare.com)

Các bước thực hiện Step-by-step

  1. Speed → Optimization: bật Brotli, Early Hints, HTTP/3. Speed → Optimization: enable Brotli, Early Hints, HTTP/3.
  2. Speed → Optimization → Image: Polish/resize nếu dùng legacy; hoặc Cloudflare Images. Speed → Optimization → Image: Polish/resize or Cloudflare Images.
  3. Convert ảnh lớn sang WebP/AVIF tại edge. Convert large images to WebP/AVIF at the edge.
  4. Re-test LCP trên PageSpeed hoặc Web Analytics. Re-test LCP on PageSpeed or Web Analytics.

Giải thích chi tiết Detailed explanation

Speed optimizations thường “free win” — không đổi code app, chỉ bật tại dashboard. Speed optimizations are often free wins — no app code changes, just dashboard toggles.

Lưu ý (best practices) Note (best practices)

Nên bật Tiered Cache trước khi dùng Cache Reserve — Tiered Cache gom request trước khi chạm Reserve, giảm read/storage trùng lặp. Enable Tiered Cache before using Cache Reserve — Tiered Cache funnels requests before Cache Reserve, reducing redundant reads and duplicate storage.

Nguồn: Source: Content Delivery Network (CDN) Reference Architecture Content Delivery Network (CDN) Reference Architecture ↗

Ví dụ triển khai (Cloudflare Resources) Deployment examples (Cloudflare Resources)

Ví dụ chính thức từ Cloudflare Resources — gợi ý theo chủ đề bài học trong lộ trình này. Official examples from Cloudflare Resources — matched to this lesson within this path.

Xem thêm ví dụ trong lộ trình → More examples in this path →

Tài liệu Cloudflare Developers Cloudflare Developer docs

Sơ đồ kiến trúc (Cloudflare Docs) Architecture diagrams (Cloudflare Docs)

Figure 1: Cloudflare Image Resizing and R2

Optimizing image delivery with Cloudflare image resizing and R2 Optimizing image delivery with Cloudflare image resizing and R2

Learn how to get a scalable, high-performance solution to optimizing image delivery. Learn how to get a scalable, high-performance solution to optimizing image delivery.

Thuật ngữ: Concepts: Image Resizing · R2 · Transformations · Cache

Sơ đồ chính thức ↗ Official diagram ↗ · Content delivery Content Delivery

Sản phẩm liên quan Related products

Học xong hoặc muốn đổi hướng? Finished or want a different path?

Ba lộ trình độc lập — mỗi lộ trình chỉ gồm bài học và tài liệu trong phạm vi đó. Chọn lộ trình khác khi sẵn sàng, không cần học song song. Three independent paths — each includes only lessons and materials for that scope. Switch when you are ready; no need to study paths in parallel.

Developer Platform Developer Platform

Build và deploy app trên Cloudflare Build and deploy apps on Cloudflare

Vào lộ trình này → Enter this path →

Cloudflare One Cloudflare One

Bảo vệ users, access, SaaS và mạng doanh nghiệp Secure users, access, SaaS, and corporate networks

Vào lộ trình này → Enter this path →

Chưa chắc — làm bài chọn lộ trình Not sure — use the path selector · So sánh cả ba lộ trình Compare all three paths