Optimization

PageSpeed 5: Cache và CDN là gì? Tại sao nó giúp website tải nhanh hơn?

Chào các bạn, sau 2 tuần mới lên bài mới không biết bà còn có ai nhớ series này không!? Mong là mọi người còn nhớ mình và series này ^^.
Nếu chưa đọc thì xem lại các tập trước tại đây nhé.
Hôm nay mình tiếp tục làm bài viết này để chia sẻ với các bạn 2 từ khóa được nhắc nhiều trong việc tăng tốc độ tải trang là Cache & CDN. Hai từ khóa này đặc thù dành cho dân kĩ thuật, tuy nhiên mình sẽ cố gắng mô tả kèm các ví dụ bình dân để mọi người dễ hiểu hơn nhé. Đừng quá lo lắng, bắt đầu nào.

CACHE

Chắc hẳn các bạn cũng ít nhất thấy từ khóa này một vài lần rồi, có thể là khi xem cấu hình điện thoại thông minh và laptop, hay khi xài trình duyệt Chrome/Safari cũng được hướng dẫn "Xóa cache đi để tải lại trang coi hết lỗi chưa?"

Vậy CACHE là gì?

Theo mô tả từ Wikipedia:

Trong tin học, cache (/ˈkæʃ/ KASH) là bộ nhớ đệm chứa dữ liệu, các dữ liệu được nằm chờ yêu cầu từ ứng dụng hoặc phần cứng.
Dữ liệu được chứa trong cache có thể là kết quả của tính toán trước đó, hoặc là sự trùng lặp dữ liệu được lưu trữ ở một nơi khác.
Phần cứng cài đặt cache như một nơi chứa dữ liệu tạm thời để có thể sử dụng lại. Vi xử lý (CPUs) và ổ đĩa cứng (HDD) thường xuyên sử dụng Cache, tương tự trình duyệt web và máy chủ (server).

Hơi rối đúng không, dĩ nhiên mình không định chỉ kết thúc bằng việc sao chép cả đoạn trên Wiki cho mọi người là xong..hehe..

Vậy nên mình sẽ mô tả thêm bằng ví dụ bên dưới và rồi so sánh chi tiết hơn cho mọi người dễ hiểu hơn nhé.

À.. do phạm vi series bài viết đang nói về website nên mình cũng giải thích xoay quanh website thôi nhé.

Ví dụ về tiệm photocopy gần trường học:

Các tiệm này hay có bán tiểu luận mẫu và "phao" cho học sinh / sinh viên nè, họ cung cấp "phao" ở đây cũng giống website cung cấp #cache vậy.

Thay vì bạn phải tự tìm kiếm, lục lọi Google mỗi nơi một tí (dữ liệu) rồi soạn thành lời giải cho đề thi mẫu vừa khít cái "phao" cho dễ xài, xong phải đem tới tiệm chờ in cả buổi nữa.

thì giờ bạn chỉ việc tới mua cái "phao" có sẵn ngon lành để xài thôi.

Vì đề bài này có người giải rồi, họ cũng đã tốn nhiều công sức soạn thành "phao" xịn sò để in ra cả ngàn bản để sẵn, bạn chỉ việc tới hốt đem về xài thôi.

Nhanh – gọn – lẹ.

Giải thích thêm bằng phép so sánh:

  1. Ví dụ bạn giống như máy chủ web (webserver) có CPU, HDD, RAM..v.v…
  2. Thông tin lời giải rải rác khắp nơi mà bạn đi tìm kiếm và tổng hợp là cơ sở dữ liệu (database)
  3. Để giải đề bài yêu cầu "Phân tích Bình Ngô Đại Cáo" tương đương yêu cầu mở trang https://website-cua-tui.com/bai-viet/phan-tich-binh-ngo-dai-cao
  4. Và "phao" là kết quả hiển thị trang web trên nhỏ gọn trên lòng bàn tay của bạn, dễ giấu và dễ đọc

Bởi vậy, để có được cái "phao" để xài bạn phải đi tìm kiếm và xử lý dữ liệu, sắp xếp lại cho đúng, định dạng văn bản lại cho đẹp → xong mới tạo thành tập tin phao.docx rồi đem ra tiệm in. Bạn – webserver làm việc hơi mệt heng?

Có cache rồi thì y như có tờ "phao" copy sẵn, ai yêu cầu phát cho xài liền. Nhàn!

Đến đây chắc bạn cũng đã hiểu hơn về tầm quan trọng của cache trong việc tối ưu tốc độ tải trang rồi đúng không. Website có cache thường chạy phà phà, đông khách truy cập hơn cũng không.. dễ chết như trước nữa.

Chi tiết thì có nhiều loại cache và cơ chế xử lý cache (API, Proxy, Gateway, Browser..) nhưng cái này cứ để cho các bạn chuyên kĩ thuật nghiên cứu và xử lý, mình chỉ cần biết website đã có cache là được rồi.

CDN

Thường các bài viết hay tách riêng 2 chủ đề Cache & CDN ra, nhưng mình thì thấy nếu đã giới thiệu tới Cache mà không trình bày luôn CDN thì hơi.. đứt mạch xíu, nên mình gom vào một chỗ rồi.. lên phường trình bày 1 lần luôn.

Vậy CDN là gì?

CDN là viết tắt của Content Delivery Network, có thể tạm dịch là mạng lưới các máy chủ cung cấp bản sao nội dung tĩnh trong website. Với hệ thống các máy chủ được đặt tại nhiều nơi trên thế giới sẽ giúp tối ưu tốc độ website cho người truy cập, cải thiện chất lượng website.

Nghe có gì đó giống giống Cache đúng không, vì nó cũng lưu lại bản photocopy mà. Ừa.. nhưng nó có nhiều thứ hay ho hơn đấy.

Đọc tiếp đoạn mô tả bên dưới nhé…

CDN (Content Delivery Network) là một bước tiến thông minh của công nghệ nhằm giải quyết việc vận hành quá tải của các hệ thống Server và giảm thời gian truy cập cho các website.
Cụ thể nhằm đưa ra giải pháp giúp giảm tải cho các máy chủ vận hành chính hệ thống, với tính năng lưu trữ và phân tải các dữ liệu tĩnh ít thay đổi như “hình ảnh, video clip, mã nguồn, css” tại các máy chủ được đặt ở khắp nơi trên thế giới.
Hệ thống CDN được hiểu nôm na bao gồm rất nhiều Server chứa các dữ liệu tĩnh như hình ảnh, video, css, js,… được đặt khắp nơi trên thế giới nhằm cung cấp dữ liệu 1 cách nhanh nhất cho người truy cập.

Rồi, sách vở như ở trên đã đủ, nghe hơi ong ong cái đầu rồi. Giờ mình bắt đầu giải thích lại cho đơn giản hơn bằng nhiều gạch đầu dòng nhé:

  1. Webserver của mình đã tự tạo bản sao (như trên rồi), tuy nhiên nó cũng phải tự xử lý phát tài nguyên ("phao") cho người dùng.
  2. Còn CDN giúp mình chứa được bản sao cho các trang kết quả (tĩnh) gồm: HTML, CSS, JS, Images, Videos.. trên hệ thống server của nó.
  3. Ai truy cập website thì CDN sẽ cấp bản sao cho thay vì webserver của mình phải cấp cho họ.
  4. Webserver của mình lúc này "bao rảnh rỗi" luôn vì gần như xử lý rất ít.

Giờ bạn thấy nó giống như tiệm photocopy in ra 1 triệu bản rồi, mà đông học sinh quá phát mỏi tay (có khi nó ở US đặt hàng thì còn mỏi. chân nữa)

→ Vậy nên CDN sẽ là các đại lý hoặc kho trung chuyển khắp nơi vậy.
→ Ở Mỹ hú thì kêu kho bên Mỹ giao, ở Việt Nam cần thì cho kho Việt Nam giao.

Vì vậy mọi người đừng nhầm lẫn giữa webserver/hosting với CDN nhé, vì ông CDN lấy bản sao đi phát thôi, không xử lý nhào nặn dữ liệu hay thực thi tính năng bạn mới code thêm vô gì cả.

Ngoài ra, CDN còn nhiều điểm nổi bật như:

  • Hệ thống server chuyên dụng, tốc độ cao cho tập tin tĩnh nên tải nhanh hơn nhiều.
  • Hầu hết CDN phổ biến hiện tại đều có tính năng nén, gộp các tập tin theo chuẩn bài Google PageSpeed.
  • Tự động lưu cache các trang web đã được truy cập trước đó → vì vậy giúp webserver gốc giảm tải cực kì nhiều.
  • HA – tính sẵn sàng cao, kiến trúc phần tán với nhiều server hỗ trợ cho nhau, lại có Firewall nên khó.. chết được.
  • Đôi lúc còn có tính năng ẩn IP thật, giúp kẻ tấn công khó tìm được IP webserver của bạn.
  • Tự động bắt được vị trí người dùng truy cập để chọn ra server gần nhất phản hồi cho người dùng.

CHỐT LẠI

Khi nào thì cần dùng Cache?

✔️ Khuyến cáo luôn có cache để không xử lý lại những tác vụ không đáng, làm webserver luôn bận rộn rồi.. đình công sớm luôn.

✔️ Miễn sao xử lý Cache khéo tránh lỗi là được.

Khi nào cần dùng CDN?

✔️ Khi có điều kiện ^^

✔️ Khi có lượt truy cập lớn, tốn nhiều băng thông mà 1 mình webserver hiện tại (đang kiêm nhiệm nhiều việc) phải xử lý cho download nhiều tập tin tĩnh nữa.

✔️ Khi máy chủ xa người dùng quá, ví dụ webserver ở Việt Nam mà khách hàng bên Mỹ vào thì bị delay ít nhất cũng 200ms rồi, chưa tính thời gian xử lý.

Cơm thêm:

  • Thường hệ thống bạn tự dựng thì mới phải tự cài đặt (hoặc code) tính năng xử lý cache → ví dụ tự dựng website bằng WordPress thì dùng plugin LitespeedCache hoặc W3Total Cache là ngon rồi.
  • Ngoài ra do tự dựng, tự thuê hosting/webserver nên muốn có CDN bạn phải tự đi thuê và cấu hình cho website của mình. Các nhà cung cấp CDN nổi tiếng nhiều người biết như là Cloudflare, Amazon Cloudfront, MaxCDN.. cũng hỗ trợ nguồn mở khá nhiều nên cũng dễ cấu hình. Tuy nhiên, bạn phải nhờ kĩ thuật can thiệp chứ không là dễ rối lắm.
  • Còn các hệ thống trả phí như Shopify, Haravan, Sapo hay LadiPage thì người ta đầu tư CDN sẵn trọn gói, bao tiết kiệm rồi, không cần phải có điều kiện hoặc đi thuê thêm nữa.

Mong rằng bài viết có giá trị với mọi người.

Hẹn gặp nhau vào tuần tới nhé!

Thao Le

Share
Published by
Thao Le

Recent Posts

AWS #3 – Kinh nghiệm triển khai EC2

Trong phần trước, mình đã chia sẻ với mọi người những khó khăn khi team…

3 years ago

Microservices #4: Làm việc đa môi trường và sự chờ đợi của Frontend

Xin chào, tiếp tục loạt bài về trải nghiệm của mình trong việc xây dựng…

3 years ago

Frontend Du Ký S2E3 | Cross-platform Apps (phần 3): Có công mài sắt, có ngày release

Cắm đầu cắm cổ dọn dẹp deadline và dọn nhà trước Tết nên ngâm bài…

3 years ago

Front-end Engineer (Reactjs, Nextjs, TypeScript, Svelte, TailwindCSS..)

Nếu bạn yêu thích phát triển sản phẩm với nhiều thử thách và cơ hội…

3 years ago

AWS #2 – Vấn đề và giải pháp

Trong phần 1, mình đã giải thích lý do tại sao EGANY chọn AWS làm…

3 years ago

AWS #1 – Sự lựa chọn của EGANY

Trong giới công nghệ hiện nay, Amazon Web Service không còn là một cái gì…

3 years ago