×"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"
×"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. Xem thêm tối ưu hóa website bán hàng.

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.

Hiện tại chúng tôi đang có chương trình khuyến mãi thiết kế web được thiết kế logo miễn phí + tên miền + hosting + hướng dẫn quảng cáo seo tổng thể marketing online miễn phí. Hãy liên hệ chúng tôi để biết thêm chi tiết.

Bạn muốn===>Tìm hiểu thêm
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
Các loại thẻ hỗ trợ seo Liên hệ Liên hệ Liên hệ

BÀI VIẾT CÙNG CHỦ ĐỀ

Cách lựa chọn tên miền đẹp cho doanh nghiệp đặt tên miền chuẩn SEO
Cách lựa chọn tên miền đẹp cho doanh nghiệp đặt tên miền chuẩn SEO
Nếu bạn đang sở hữu một doanh nghiệp hoặc một cơ sở kinh doanh, bạn đừng nên do dự mà hãy đăng ký tên miền ngay theo thương hiệu hoặc sản phẩm của mình. Như thế, bạn đã góp phần quảng bá thương hiệu mình rộng rãi hơn và làm...
Hướng dẫn tối ưu SEO website cách làm tối ưu hóa website seo Google
Hướng dẫn tối ưu SEO website cách làm tối ưu hóa website seo Google
Bạn nên sử dụng URL ngắn, cố gắng tạo nhiều liên kết qua lại bên trong trang web của bạn, một phần để làm phong phú thêm nội dung, tiện ích cho người đọc, phần khác cũng sẻ lan truyền được thông điệp tốt hơn mà bạn muốn gửi đến họ. Thông thường thì một URL có độ dài không quá 100 ký tự.
Công cụ tối ưu hóa website cách làm tối ưu hóa Seo Google hiệu quả
Công cụ tối ưu hóa website cách làm tối ưu hóa Seo Google hiệu quả
Hy vọng với 12 công cụ hỗ trợ việc tối ưu website nêu trên, bạn sẽ có thêm lựa chọn để giúp website tăng hạng. Chỉ cần tối ưu website đúng cách, việc vượt mặt đối thủ trong thị trường kinh doanh trực tuyến không còn quá khó khăn.
7 lỗi SEO có thể giết chết website của bạn seo bị lỗi
7 lỗi SEO có thể giết chết website của bạn seo bị lỗi
Lúc này chắc bạn đã biết SEO (Search Engine Optimization) là một khía cạnh quan trọng đóng vai trò dẫn dắt, thu hút traffic tới website của bạn, điều này đồng nghĩa với có nhiều khách hàng hơn cho bạn.
Những lỗi thường gặp khi thiết kế web chuẩn seo
Những lỗi thường gặp khi thiết kế web chuẩn seo
Thiết kế web theo chuẩn seo không còn là một khái niệm xa lạ với các dịch vụ thiết kế web hiện nay. Hôm nay THIẾT KẾ WEBSITE CHUẨN SEO chỉ ra một số lỗi cơ bản mà các dịch vụ thiết kế web hay mắc phải sẽ làm tổn hại đến seo của bạn.
Cách sử dụng crawl budget để đẩy SEO của website
Cách sử dụng crawl budget để đẩy SEO của website
Việc này phải được nằm trong chiến lược xây dựng đường link dẫn của bạn. Hãy nhắm tới những website thường xuyên cập nhật và rồi bạn sẽ có thể có một bước gần hơn tới một crawl budget to hơn.
Bí quyết đơn giản để giữ trang web luôn mới
Bí quyết đơn giản để giữ trang web luôn mới
Bỏ ra một vài phút để xem những gì đối thủ cạnh tranh của mình đang làm để rút kinh nghiệm cho kế hoạch sắp tới. Tương tự như vậy, mất một chút thời gian để nhìn lại và tự hỏi: Trang web của bạn dễ dàng chuyển hướng? những...
Kỹ thuật tối ưu hóa web chuẩn seo kiểm tra tối ưu hóa website
Kỹ thuật tối ưu hóa web chuẩn seo kiểm tra tối ưu hóa website
Bài có vẻ thiên về giới thiệu phần mềm website auditor, nhưng những bước đi cơ bản- nền tảng để thiết kế website chuẩn SEO rất đáng để tham khảo. Nếu bạn vẫn cảm thấy rắc rối và cần 1 website chuẩn SEO, hãy liên hệ với chúng...
SEO và thiết kế web responsive Sự kết hợp hoàn hảo
SEO và thiết kế web responsive Sự kết hợp hoàn hảo
Khi doanh nghiệp thử kiếm một nhóm các digital marketer hoặc web developer từ các công ty khác lại với nhau và hỏi họ liệu thiết kế web responsive có phải là một phần của chiến lược hiện tại hay kế hoạch trong tương lai của họ không,...

BÀI VIẾT LIÊN QUAN

HTTP/2 Là Gì? HTTP/2 có đặc điểm gì khác biệt?
HTTP/2 Là Gì? HTTP/2 có đặc điểm gì khác biệt?
HTTP/2 là phiên bản chính thức thứ hai của giao thức truyền tải siêu văn bản HTTP, được xây dựng trên hàng loạt những công nghệ tiên tiến nhằm cải thiện tốc độ truy cập web ở mức độ nhanh hơn. Công nghệ mới này sẽ dần thay thế...
Bảo mật ssl là gì? SSL CÓ HỖ TRỢ SEO TỐT HƠN KHÔNG? HTTPS LÀ GÌ?
Bảo mật ssl là gì? SSL CÓ HỖ TRỢ SEO TỐT HƠN KHÔNG? HTTPS LÀ GÌ?
Mọi người đang nỗ lực để tăng mức độ bảo mật dữ liệu trên Internet để chống lại các trang lừa đảo và thôi thúc mọi người nâng cao nhận thức về bảo mật. Google đã tuyên bố họ sẽ sử dụng SSL làm yếu tố xếp...
Cài đặt SSL có ảnh hưởng tới seo hay không
Cài đặt SSL có ảnh hưởng tới seo hay không
Giờ đây SSL không chỉ giúp website của bạn bảo mật tốt hơn mà giờ đây nó còn có cơ hội cải thiện thứ hạng ở Google nữa vì được chứng thực bảo mật. Nhưng rõ ràng, không phải cứ phải follow theo Google là tốt mà chúng ta cũng nên...
Cài ssl miễn phí tạo chứng chỉ SSL hosting cPanel directadmin
Cài ssl miễn phí tạo chứng chỉ SSL hosting cPanel directadmin
Chứng chỉ SSL miễn phí là loại hình SSL phù hợp với những doanh nghiệp hay cá nhân mới bắt đầu làm quen với SSL. Bạn đã hiểu SSL là gì chưa? Bạn có đang tìm kiếm địa chỉ đăng ký SSL miễn phí chất lượng? Vậy thì chắc chắn rằng bài viết dưới đây sẽ là gợi ý hay ho cho bạn đấy.
Hướng dẫn cài đặt ssl trên directadmin cài đặt SSL miễn phí hosting
Hướng dẫn cài đặt ssl trên directadmin cài đặt SSL miễn phí hosting
Để cài đặt SSL bạn cần phải đăng ký dịch vụ chứng chỉ số tại THIẾT KẾ WEB CHUẨN SEO hoặc tại nhà cung cấp dịch vụ khác. Để hiểu hơn về chứng chỉ SSL, cách tạo mã CSR và đăng kí SSL bạn có thể tham khảo các bài viết sau:
Hướng dẫn cài đặt ssl trên cpanel Cài SSL trên hosting cpanel
Hướng dẫn cài đặt ssl trên cpanel Cài SSL trên hosting cpanel
Cài đặt SSL công cụ quản lý cPanel là việc khiến rất nhiều người gặp khó khăn. Trong bài viết này, THIẾT KẾ WEB CHUẨN SEO sẽ hướng dẫn cài đặt SSL trên hosting Cpanel
Có phải là thiết lập HTTPs gây ra những vấn đề SEO?
Có phải là thiết lập HTTPs gây ra những vấn đề SEO?
Mặc dù Google đã tuyên bố rằng các trang web sử dụng HTTPS sẽ có được một  chút lợi thế trên bảng xếp hạng, thì thực tế là nhiều trang web đã bị thua lỗ do thực hiện không đúng cách. Thiết kế web chuẩn SEO hôm nay thảo luận về các vấn đề thường gặp với HTTPS và cách khắc phục chúng.
Google bắt đầu index cho HTTPS trước HTTP khi có thể
Google bắt đầu index cho HTTPS trước HTTP khi có thể
Hôm nay chúng tôi muốn thông báo rằng chúng tôi đang điều chỉnh hệ thống index để tìm kiếm thêm trang HTTPS... Cụ thể, chúng tôi sẽ bắt đầu thu thập dữ liệu tương đương HTTPS của các trang HTTP, thậm chí các nhân viên trước cũng...
093.784.1299
Mục lục