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

Application Services Application Services Application Services

Làm đúng từng bước trên dashboard: zone chạy, HTTPS Full (strict), WAF log rồi block, cache không phá session. Click through the dashboard: a live zone, Full (strict) HTTPS, WAF log-then-block, cache that does not break sessions. ចុចតាម dashboard៖ zone កំពុងដំណើរការ, HTTPS Full (strict), WAF log-then-block, cache ដែលមិនបំបែក session។

Phần 4: Content delivery & tăng tốc website Part 4: Content delivery & website speed ផ្នែក 4: Content delivery និងល្បឿន website · Bài 3/4 Lesson 3/4 មេរៀន 3/4

Speed & Images Speed & Images Speed & Images

Khuyến nghị Recommended ណែនាំ

Mục tiêuGoalគោលដៅ	Bật tối ưu Speed cơ bản: compression, HTTP/3, Early Hints; cân nhắc Images nếu phục vụ nhiều ảnh. Turn on basic Speed optimizations: compression, HTTP/3, Early Hints; consider Images if you serve many images. បើក Speed optimization មូលដ្ឋាន: compression, HTTP/3, Early Hints; ពិចារណា Images ប្រសិនបើអ្នក serve រូបភាពច្រើន។
Ai làmWho does thisអ្នកធ្វើ	Frontend / performance Frontend / performance Frontend / performance
Thời gianTimeរយៈពេល	~20 phút ~20 min ~20 នាទី
Kết thúc bạn sẽ cóYou'll finish withពេលបញ្ចប់អ្នកនឹងមាន	Brotli/gzip và HTTP/3 bật; biết Images/Polish là lớp tùy plan. Brotli/gzip and HTTP/3 on; you know Images/Polish are plan-dependent. Brotli/gzip និង HTTP/3 បើក; អ្នកដឹង Images/Polish អាស្រ័យលើ plan។
Trước khi bắt đầuBefore you beginមុនពេលចាប់ផ្តើម	Cache Rules ổn (as-4-l2). Có trang đo LCP. Cache Rules are in place (as-4-l2). You have a page to measure LCP. Cache Rules នៅនឹងកន្លែង (as-4-l2)។ អ្នកមានទំព័រដើម្បីវាស់ LCP។
Gói / planPlanPlan	Nhiều Speed features trên Pro+. Image Resizing / Cloudflare Images có giá riêng. Many Speed features are on Pro+. Image Resizing / Cloudflare Images are billed separately. Speed feature ច្រើននៅលើ Pro+។ Image Resizing / Cloudflare Images គិតថ្លៃដោយឡែក។

Làm theo từng bước Follow along ធ្វើតាមជំហាន

1 Speed → Optimization / Content: bật Brotli (và giữ gzip fallback). Speed → Optimization / Content: enable Brotli (keep gzip fallback). Speed → Optimization / Content: បើក Brotli (រក្សា gzip fallback)។

Nhấp: Click: ចុច៖ Brotli On Brotli On Brotli On
2 Network: HTTP/3 (QUIC) On; cân nhắc Early Hints (103) nếu origin/HTML hợp lệ. Network: HTTP/3 (QUIC) On; consider Early Hints (103) if origin/HTML is valid. Network: HTTP/3 (QUIC) On; ពិចារណា Early Hints (103) ប្រសិនបើ origin/HTML ត្រឹមត្រូវ។

Checkpoint: Checkpoint: Checkpoint៖ curl --http3 hoặc DevTools Protocol hiện h3. Không regress form/upload. curl --http3 or DevTools Protocol shows h3. Forms/uploads do not regress. curl --http3 ឬ DevTools Protocol បង្ហាញ h3។ Form/upload មិន regress។
3 Nếu ảnh lớn: Speed → Image Optimization hoặc Cloudflare Images — WebP/AVIF tại edge. If images are large: Speed → Image Optimization or Cloudflare Images — WebP/AVIF at the edge. ប្រសិនបើរូបភាពធំ: Speed → Image Optimization ឬ Cloudflare Images — WebP/AVIF លើ edge។

Bạn sẽ thấy: What you'll see: អ្នកនឹងឃើញ៖ Polish/Mirage/Images tùy plan — test visual trước khi bật lossless trên ảnh y tế/in ấn. Polish/Mirage/Images depend on plan — visual-test before lossless on medical/print images. Polish/Mirage/Images អាស្រ័យលើ plan — visual-test មុន lossless លើរូបភាពវេជ្ជសាស្ត្រ/បោះពុម្ព។

Cẩn thận Watch out ប្រុងប្រយ័ត្ន

Auto minify JS cũ có thể phá bundle — ưu tiên minify lúc build. Legacy auto-minify can break bundles — prefer minify at build time. Auto-minify បែប legacy អាចបំបែក bundle — ចូលចិត្ត minify ពេល build។

Mẹo Tips គន្លឹះ

Speed không thay Cache Rules sai. Sửa cache trước, rồi mới bật optimization. Speed does not fix wrong Cache Rules. Fix cache first, then turn on optimizations. Speed មិនជួសជុល Cache Rules ខុស។ ជួសជុល cache មុនបន្ទាប់មកបើក optimization។

Nguồn sự thật: tài liệu chính thức Cloudflare Developers (diễn giải, không sao chép nguyên văn). Nhãn menu dashboard có thể đổi — chọn mục tương đương gần nhất. Source of truth: official Cloudflare Developer docs (paraphrased, not copied verbatim). Dashboard labels shift — follow the nearest equivalent. ប្រភពពិត: official Cloudflare Developer docs (paraphrased)។ Dashboard labels ផ្លាស់ — តាម equivalent ជិតបំផុត។

Lưu ý (best practices) Note (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. Enable Tiered Cache before using Cache Reserve — Tiered Cache funnels requests before Cache Reserve, reducing redundant reads and duplicate storage.

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

Ví dụ triển khai (Cloudflare Resources) Deployment examples (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. Official examples from Cloudflare Resources — matched to this lesson within this path.

Tutorial Tutorial Tutorial Application Services Application Services Application Services

Tối ưu hóa mobile viewing Optimize mobile viewing លក្ខណៈពិសេស Mobile Viewing

Loading lười biếng là một cách dễ dàng để tối ưu hóa images trên các trang web của bạn cho thiết bị di động, với thời gian tải trang nhanh hơn và chi phí thấp hơn.

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 គឺជាវិធីងាយស្រួលដើម្បីបង្កើនភាពងាយស្រួលនៃ images នៅលើទំព័ររបស់អ្នកសម្រាប់ឧបករណ៍ទូរស័ព្ទដៃដោយមានពេលវេលាទាញយកទំព័រល្បឿនលឿននិងតម្លៃទាប។

Tìm hiểu thêm Learn more ស្វែងយល់បន្ថែម

Tutorial Tutorial Tutorial Application Services Application Services Application Services

Chuyển đổi người dùng tải lên images trước khi tải lên R2 Transform user-uploaded images before uploading to R2 ការផ្លាស់ប្តូរ images ដែលបានទាញយកដោយអ្នកប្រើមុនពេលទាញយកទៅ R2

Thiết lập liên kết để kết nối Images, R2 và Tài sản với Nhân viên của bạn

Set up bindings to connect Images, R2, and Assets to your Worker

ទាញយក Images, R2 និង Assets ដើម្បីបណ្តុះបណ្តាលរបស់អ្នក

Tìm hiểu thêm Learn more ស្វែងយល់បន្ថែម

Tutorial Tutorial Tutorial Developer Platform Developer Platform Developer Platform

Thêm mô hình AI mới vào sân chơi của bạn (Phần 2) Add New AI Models to your Playground (Part 2) បន្ថែមម៉ូដែល AI ថ្មីទៅក្នុងសួនកុមាររបស់អ្នក (ផ្នែកទី 2)

Trong phần 2, Kristian mở rộng trên môi trường hiện có được xây dựng trong phần 1, bằng cách cho bạn thấy cách tích hợp các mô hình AI mới và giới thiệu các thông số mới cho phép bạn tùy chỉnh cách images được tạo ra.

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.

នៅក្នុងផ្នែកទី 2 Kristian ពង្រីកលើបរិស្ថានដែលមានស្រាប់ដែលបានសាងសង់ក្នុងផ្នែកទី 1 ដោយបង្ហាញអ្នកពីរបៀបបញ្ចូលគំរូ AI ថ្មី និងណែនាំប៉ារ៉ាម៉ែត្រថ្មីដែលអនុញ្ញាតឱ្យអ្នកប្ដូរតាមបំណងពីរបៀបដែល images ត្រូវបានបង្កើត។

Tìm hiểu thêm Learn more ស្វែងយល់បន្ថែម

Tutorial Tutorial Tutorial Developer Platform Developer Platform Developer Platform

Xây dựng một AI Image Generator Playground (Phần 1) Build an AI Image Generator Playground (Part 1) បង្កើតសួនកុមារបង្កើតរូបភាព AI (ភាគ១)

Các mô hình dòng chảy mới trên Workers AI là các mô hình AI văn bản-to-hình mạnh nhất của chúng tôi cho đến nay. Sử dụng Workers AI, bạn có thể nhận access đến các mô hình tốt nhất trong ngành mà không phải lo lắng về kết luận, thao tác hoặc triển khai.

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.

ម៉ូដែល flux ថ្មីនៅលើ Workers AI គឺជាគំរូ AI អត្ថបទទៅរូបភាពដ៏មានឥទ្ធិពលបំផុតរបស់យើង។ ដោយប្រើ Workers AI អ្នកអាចទទួលបាន access ទៅជាគំរូល្អបំផុតនៅក្នុងឧស្សាហកម្មនេះដោយមិនចាំបាច់ព្រួយបារម្ភអំពីការសន្និដ្ឋាន ការមើលឃើញ ឬការដាក់ពង្រាយ។

Tìm hiểu thêm Learn more ស្វែងយល់បន្ថែម

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

Tài liệu Cloudflare Developers Cloudflare Developer docs Cloudflare Developer docs

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

Hình 1: Cloudflare Image Resizing and R2 — Tối ưu phân phối ảnh với Image Resizing và R2 Optimizing image delivery with Cloudflare image resizing and R2 Optimizing image delivery with Cloudflare image resizing and R2

Giải pháp tối ưu phân phối ảnh, mở rộng được và hiệu năng cao — Image Resizing kết hợp 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: Concepts: Image Resizing · R2 · Transformations · Cache

Sơ đồ chính thức ↗ Official diagram ↗ Official diagram ↗ · Phân phối nội dung Content Delivery Content Delivery

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

Học xong hoặc muốn đổi hướng? Finished or want a different path? 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. 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 Developer Platform

Follow-along Worker-first: C3 + Wrangler, rồi storage, Pages (compat), operate và AI Follow-along Worker-first: C3 + Wrangler, then storage, Pages (compat), operate, and AI Follow-along Worker-first: C3 + Wrangler បន្ទាប់មក storage, Pages (compat), operate និង AI

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

Cloudflare One Cloudflare One Cloudflare One

Triển khai Zero Trust theo từng mô-đun: identity, thiết bị, ZTNA, Gateway, DLP, AI và Cloudflare WAN Deploy Zero Trust module by module: identity, devices, ZTNA, Gateway, DLP, AI, and Cloudflare WAN Deploy Zero Trust module by module: identity, devices, ZTNA, Gateway, DLP, AI, and Cloudflare WAN

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

AI Security & Adoption AI Security & Adoption AI Security & Adoption

Adopt AI an toàn từ user đến ứng dụng Adopt AI safely from users to applications Adopt AI safely from users to applications

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

Operational Excellence Operational Excellence Operational Excellence

Vận hành Cloudflare an toàn, ổn định và hiệu quả Operate Cloudflare safely, reliably, and efficiently Operate Cloudflare safely, reliably, and efficiently

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

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