×"Chúng tôi không cố gắng trở thành công ty lớn nhất. Chúng tôi muốn trở thành người giỏi nhất trong lĩnh vực của mình cam kết lâu dài với lĩnh vực này"
Thiết kế web chuẩn seo
×"Chúng tôi không cố gắng trở thành công ty lớn nhất. Chúng tôi muốn trở thành người giỏi nhất trong lĩnh vực của mình cam kết lâu dài với lĩnh vực này"

Tối ưu tốc độ tải trang web với HTTP Cache Tăng tốc độ tải trang web

Như vậy là bạn đã biết cách thiết lập các HTTP Header để cache các nội dung trang web. Bạn có thể hỏi, làm sao tôi biết Browser và Server trao đổi với nhau bằng những Headers nào?  Bạn hãy cài đặt addons Firefox có tên gọi 'Live HTTP Headers. Sau khi cài đặt, bạn chọn menu  Tools >> Live HTTP Headers để bật chương trình, sau đó truy cập vào bất cứ trang web nào để xem các headers.

Web cache là gì

Với mỗi website, tốc độ tải là yếu tố quan trọng #1, bởi người dùng rất ghét phải chờ đợi. Bài viết này tôi hướng dẫn các bạn làm lập trình web cách thực hiện Cache các nội dung trang web bằng HTTP Headers, giúp trang web tải nhanh hơn, Server xử lý ít hơn.

CACHE LÀ GÌ?

Cache là hành động lưu trữ các nội dung trên website để sử dụng lại cho những lần truy vấn tiếp theo. Ngày nay, các trình duyệt đều có thể lưu lại một bản sao mỗi hình ảnh (logo, banner,..), javascript (.js), stylesheets (.css), hoặc toàn bộ trang web. Lần sau, khi người dùng cần những nội dung này, trình duyệt sẽ sử dụng lại nội dung cũ, không cần phải kết nối tới máy chủ để tải nội dung.

Khi xem một trang web, số lần tải file càng ít thì tốc độ càng nhanh, máy chủ càng ít phải xử lý.

Dưới đây là hình ảnh mô tả cách thức trình duyệt lấy 1 nội dung từ máy chủ.

Tối ưu tốc độ trang web với HTTP cache

  • Browser:  gửi yêu cầu lấy file index.html
  • Server:  tìm & đọc nội dung file
  • Server:  trả về nội dung file
  • Browser:  hiển thị nội dung

Theo cách này, nếu bạn refresh một trang web n lần thì sẽ có n lần Browser và Server phải xử lý công việc kể trên. Trong thực tế, rất nhiều file không thay đổi nội dung trong thời gian dài. Nếu một trang web có 10 file (html, ảnh, js, css,..) thì mỗi lần bạn bấm F5 thì Browser phải thực hiện 10 lần kết nối đến Server. Bạn hãy hình dung, nếu lúc đó website có 1.000 lượt truy cập đồng thời thì tốc độ tải trang web sẽ rất chậm.

WEB CACHE #1:  Last-Modified

Khi Server gửi nội dung về Browser thì kèm theo thuộc tính Last-Modified để xác định thời điểm sửa file (ví dụ: inet.png) lần cuối cùng.

Ví dụ: Last-modified: Wed, 16 Oct 2013 05:00:25 GMT+7

Lúc này, Browser biết được file inet.png được tạo ra ngày 16/10/2013. Lần sau khi cần tải lại file này, nó sẽ gửi yêu cầu đến Server kèm theo header  Last-Modifed. Server chỉ trả về nội dung nếu file đã được cập nhật.

tối ưu tốc độ tải trang web với HTTP cache

  • Browser:  Này ông! hãy gửi cho tôi file inet.png, nhưng chỉ gửi nội dung nếu file được cập nhật nội dung sau ngày 16/10/2013
  • Server: tìm file và kiểm tra thời điểm câp nhật cuối cùng
  • Server: Hey! bạn thật may mắn, file bạn đang có là bản cập nhật mới nhất  (304 Not Modified)
  • Browser: OK! tôi sẽ sử dụng nội dung đã được cache. 

Như vậy, Server chỉ gửi 1 dòng thông báo "Not Modified" mà không phải gửi lại nội dung file.

WEB CACHE #2:  ETag

Trong bước #1 vẫn còn một số vấn đề:  (1) Vẫn phải kết nối nhiều lần đến server, tại server phải xử lý thời gian cập nhật file, (2) Nếu đồng hồ trên server bị sai lệch thì nội dung file vẫn được tải xuống Browser.

Giải pháp #2 là sử dụng header ETag với giá trị là chuỗi số duy nhất cho tất cả các file trên server. Nó có thể là một mã Hash hay Footprint: mỗi file đều có footprint (dấu chân) duy nhất, nếu bạn thay đổi nội dung file (dù chỉ là 1 byte) thì footprint sẽ thay đổi.

Thay vì gửi cho Browser thời gian cập nhật lần cuối, Server sẽ gửi mã ETag. Browser sẽ lưu lại file kèm theo mã ETag. Lần sau khi cần tải lại file này, nó sẽ gửi yêu cầu đến Server kèm theo header ETag. Server chỉ trả về nội dung nếu file đã được cập nhật.

Tối ưu tốc độ tải trang web với HTTP Cache

  • Browser: Hãy gửi tôi file inet.png, nếu file đã thay đổi, mã etag 'ead145f'
  • Server:  Kiểm tra footprint của file inet.png
  • Server:  Hey file bạn yêu cầu chưa thay đổi nội dung (Not Modifed)
  • Browser: OK! tôi sẽ sử dụng nội dung đã được cache.

Ví dụ: mã HTML khi tải file style.css 

GET /style.css HTTP/1.1

Host: seomaster.vn

User-Agent: Mozilla/5.0 (Windows NT)Firefox/24.0

Accept: text/css,*/*;q=0.1

Accept-Language: en-US,en;q=0.5

Accept-Encoding: gzip, deflate

Referer: http://inet.vn/

Connection: keep-alive

If-None-Match: "inet-1331151434"

Cache-Control: max-age=0

----HTTP RESPONSE------------------

HTTP/1.1 304 Not Modified

Date: Wed, 16 Oct 2013 03:45:28 GMT+7

Server: iNET WebServer 1.3

Connection: Close

Etag: "inet-1331151434"

WEB CACHE  #3:  Expires

Cache theo cách #2 thì Browser vẫn phải kết nối nhiều lần đến Server để kiểm tra xem file có thay đổi nội dung. Thay vì để Browser hỏi nhiều lần, khi gửi file, Server sẽ gửi kèm header expires để thông báo rằng nội dung file sẽ không thay đổi cho đến thời điểm expires. Từ bây giờ đến lúc đó, bạn cứ lấy nội dung cache mà dùng, không phải phải hỏi nữa.

Expires: Wed, 16 Oct 2013 05:00:25 GMT+7

Tối ưu tốc độ tải trang web với HTTP cache

HTTP Caching - header Expires

Không có kết nối Browser - Server. Browser tự kiểm tra nếu file còn thời hạn thì sử dụng luôn nội dung đã được cache. Điều này sẽ làm giảm bớt công việc của Server - dành thời gian làm việc khác. 

WEB CACHE  #4:  Max-Age

Thông tin expires (ngày hết hạn) rất tuyệt vời, nhưng Browser phải liên tục tính toán thời gian. Giải pháp #4 là sử dụng header max-age - "file inet.png sẽ hết hạn trong 1 tuần kể từ hôm nay", đơn giản hơn so với việc sử dụng chính xác thời điểm hết hạn.

Cache-Control: public | private | no-cache, max-age = n 

Giá trị max-age được tính bằng giây,  1 giờ = 3600,  1 ngày = 86400. 

Public: file có thể được cache bởi proxy hoặc các máy chủ trung gian

Private: file có giá trị khác nhau cho từng người sử dụng. 

              Browser có thể cache, nhưng các proxy không được cache.

No-cache: Browser và Proxy không được cache file này.

KIỂM TRA TRẠNG THÁI CACHE

Như vậy là bạn đã biết cách thiết lập các HTTP Header để cache các nội dung trang web. Bạn có thể hỏi, làm sao tôi biết Browser và Server trao đổi với nhau bằng những Headers nào?  Bạn hãy cài đặt addons Firefox có tên gọi 'Live HTTP Headers. Sau khi cài đặt, bạn chọn menu  Tools >> Live HTTP Headers để bật chương trình, sau đó truy cập vào bất cứ trang web nào để xem các headers. 

Tối ưu tốc độ tải trang web với HTTP Cache

Live HTTPS Header

Ngoài ra, nếu bạn đã cài addons Web Developer thì có thể dùng luôn tính năng Network, bằng cách chọn menu: Tools >> Web Developers >> Network; Sau đó truy cập vào các trang web trên website để kiểm tra.

Tối ưu tốc độ tải trang web với HTTP Cache

  • Những file có trong danh sách là Browser có thực hiện kết nối tới Server
  • Những file có biểu tượng xanh sáng ở góc trái:  Server gửi dữ liệu về Browser.
  • Biểu tượng xám:  Server không gửi dữ liệu, chỉ thông báo Not Modified.

Chúc bạn thành công!

Tối ưu tốc độ tải trang web với HTTP Cache Tăng tốc độ tải trang web. Như vậy là bạn đã biết cách thiết lập các HTTP Header để cache các nội dung trang web. Bạn có thể hỏi, làm sao tôi biết Browser và Server trao đổi với nhau bằng những Headers nào?
4.75 sao của 1369 phiếu bầu
Tối ưu tốc độ tải trang web với HTTP Cache
Tối ưu tốc độ tải trang web với HTTP Cache
Ý tưởng thiết kế web 090.696.7056 093.784.1299 243 Huỳnh Văn Bánh, Phường 12, Q. Phú Nhuận, HCM

BÀI VIẾT LIÊN QUAN

Cách tìm công ty thiết kế web chuẩn seo có dịch vụ seo web quảng cáo
Cách tìm công ty thiết kế web chuẩn seo có dịch vụ seo web quảng cáo
Bao gồm 5 điều sau bạn phải bảo đảm xem xét về các yếu tố như: số năm kinh doanh website, tư vấn cụ thể rõ ràng, website phải có đủ tính tăng chuẩn SEO, tương tích nhiều thiết bị và tốc độ cao.
Cấu trúc website chuẩn SEO 2022 cấu trúc website bao gồm những gì
Cấu trúc website chuẩn SEO 2022 cấu trúc website bao gồm những gì
SEO là tối ưu hóa công cụ tìm kiếm. Cấu trúc website chuẩn SEO là cấu trúc website chuẩn tối ưu hóa công cụ tìm kiếm. Nói cách khác là website thân thiện với công cụ tìm kiếm, được các công cụ tìm kiếm lớn như Google, Bing, Yahoo đánh giá tốt và đạt thứ hạng cao trên các kết quả tìm kiếm.
Thiết kế web cho người mới bắt đầu kinh doanh bán hàng khởi nghiệp
Thiết kế web cho người mới bắt đầu kinh doanh bán hàng khởi nghiệp
Khởi nghiệp (tiếng Anh: startup hoặc start-up) là thuật ngữ chỉ về những công ty đang trong giai đoạn bắt đầu kinh doanh nói chung (Startup company), nó thường được dùng với nghĩa hẹp chỉ các công ty công nghệ trong giai đoạn lập nghiệp....
Code nào thiết kế web bán bất động sản dự án căn hộ cho thuê nhà tốt
Code nào thiết kế web bán bất động sản dự án căn hộ cho thuê nhà tốt
Phát triển và duy trì sự hiện diện chuyên nghiệp là điều cần thiết cho sự thành công của bạn với tư cách là một nhà môi giới bất động sản. Sử dụng các công nghệ hiện đại đi đôi với phát triển hình ảnh chuyên nghiệp. Các...
Cách kiểm tra website lừa đảo cách nhận biết trang web chính thống
Cách kiểm tra website lừa đảo cách nhận biết trang web chính thống
Các website giả mạo, không chính thống ẩn chứa những tác hại khôn lường cho người người dùng, dẫn đến việc lệch lạc trong tiếp nhận thông tin, thậm chí bị đánh cắp thông tin, mất tiền bạc do truy cập những website này.
Lựa chọn giải pháp nào tốt cho Mobile friendly Mobile Friendly là gì?
Lựa chọn giải pháp nào tốt cho Mobile friendly Mobile Friendly là gì?
Thiết kế responsive tự động tải và không tải nội dung dựa vào kích thước của màn hình được sử dụng để hiển thị trang. Bạn có thể kiểm tra thiết kế responsive trên desktop bằng cách thay đổi kích thước cửa sổ trình...
Sự khác biệt giữa Hosting Linux và Hosting Windows
Sự khác biệt giữa Hosting Linux và Hosting Windows
Sự quan tâm đầu tiên của một website chính là hosting. Và dung lượng và băng thông rộng. Vì vậy, trước khi tạo một website, bạn nên xác định rõ mục đích tạo trang web đó là gì? Đối tượng sản phẩm hiển thị trên website và lưu...
13 thủ thuật cần biết khi không có domain như ý
13 thủ thuật cần biết khi không có domain như ý
Việc có được địa chỉ .com hoàn hảo cũng cần nên được cân nhắc. Chúng ta đang tiến vào thời kì mà tên miền thay thế đang ngày càng thịnh hành, thế nhưng đuôi domain .com vẫn là nổi bật nhất. Nó có ở khắp mọi nơi. Khi mọi người nghĩ tới một website thì họ sẽ tự động nghĩ rằng đuôi miền sẽ là .com
Xây dựng thư viện Hỏi đáp cho website của bạn hiệu quả hơn
Xây dựng thư viện Hỏi đáp cho website của bạn hiệu quả hơn
Có lần tôi mua một chiếc ghế cho xe ô tô trên một cửa hàng trên mạng. Sau khi tôi đặt hàng khoảng một tháng chiếc ghế vẫn chưa được đưa đến. Vì vậy tôi quyết định vào hỏi nhân viên hỗ trợ khách hàng qua việc chat với họ trên...
093.784.1299
Mục lục