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.

Tutorial Tutorial Application Services Application Services

Tối ưu mobile viewing Optimize mobile viewing

Tóm tắt thực hành: Tối ưu mobile viewing trên Cloudflare. Lazy loading is an easy way to optimize the images on your webpages for mobile devices, with faster page load times and lower costs.

Lazy loading is an easy way to optimize the images on your webpages for mobile devices, with faster page load times and lower costs.

Tìm hiểu thêm Learn more
Tutorial Tutorial Developer Platform Developer Platform

Thêm mới AI Models vào Playground (Part 2) Add New AI Models to your Playground (Part 2)

Tóm tắt thực hành: Thêm mới AI Models vào Playground (Part 2) trên Workers AI. In part 2, Kristian expands upon the existing environment built in part 1, by showing you how to integrate new AI models and introduce new parameters that allow you to customize h…

In part 2, Kristian expands upon the existing environment built in part 1, by showing you how to integrate new AI models and introduce new parameters that allow you to customize how images are generated.

Tìm hiểu thêm Learn more
Tutorial Tutorial Developer Platform Developer Platform

Xây dựng AI Image Generator Playground (Part 1) Build an AI Image Generator Playground (Part 1)

Tóm tắt thực hành: Xây dựng AI Image Generator Playground (Part 1) trên Workers AI. The new flux models on Workers AI are our most powerful text-to-image AI models yet. Using Workers AI, you can get access to the best models in the industry without having to worr…

The new flux models on Workers AI are our most powerful text-to-image AI models yet. Using Workers AI, you can get access to the best models in the industry without having to worry about inference, ops, or deployment.

Tìm hiểu thêm Learn more

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.

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