Làm thế nào để thêm bộ nhớ đệm trình duyệt Leverage cho CDN trong .htaccess?

Question

tôi có dưới đây mã trong tôi .htaccess

ExpiresActive On 
ExpiresByType image/jpg "access 1 year" 
ExpiresByType image/jpeg "access 1 year" 
ExpiresByType image/gif "access 1 year" 
ExpiresByType image/png "access 1 year" 
ExpiresByType text/css "access 1 month" 
ExpiresByType application/pdf "access 1 month" 
ExpiresByType application/x-javascript "access 1 month" 
ExpiresByType application/x-shockwave-flash "access 1 month" 
ExpiresByType image/x-icon "access 1 year" 
ExpiresDefault "access 2 days" 

trên

cdn.domain.com/abc.jpg (expiration not specified) 
cdn.domain.com/abc.png (expiration not specified) 

Cùng một vấn đề đối với JS, CSS & khác là tốt.

Những gì tôi cần phải đặt trong .htaccess vì vậy, chủ yếu đạt được điểm A trong đó.

Answer 1

Nếu bạn muốn sử dụng bộ nhớ đệm của trình duyệt Leverage cho CDN, bạn nên lưu các tệp bộ nhớ cache bằng cách thêm một số tiêu đề bộ nhớ đệm như Cache-Control, Expires và Last-Modified.

Đòn bẩy Trình duyệt Caching sử dụng mod_headers

Nếu bạn đang ở trên một máy chủ chia sẻ và máy của bạn sẽ không cho phép mod_expires, bạn vẫn có thể tận dụng bộ nhớ đệm trình duyệt bằng cách sử dụng mod_headers, mà sẽ có sẵn.

# Leverage browser caching using mod_headers # 
<IfModule mod_headers.c> 
    <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> 
     Header set Expires "Wed, 15 Apr 2020 20:00:00 GMT" 
     Header set Cache-Control "public" 
    </FilesMatch> 
</IfModule> 
# End of Leverage browser caching using mod_headers # 

bên dưới ví dụ để thử nghiệm:

# 1 YEAR 
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$"> 
Header set Cache-Control "max-age=31536000, public" 
</FilesMatch> 

# 1 WEEK 
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$"> 
Header set Cache-Control "max-age=604800, public" 
</FilesMatch> 

# 3 HOUR 
<FilesMatch "\.(txt|xml|js|css)$"> 
Header set Cache-Control "max-age=10800" 
</FilesMatch> 

# NEVER CACHE - notice the extra directives 
<FilesMatch "\.(html|htm|php|cgi|pl)$"> 
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate" 
</FilesMatch> 

Testing Các Headers

Bạn có thể xác minh nếu Cache-Control: max-age được đặt ra trên các tập tin của bạn bằng cách chạy một lệnh “curl” như:

curl -I http://foo.bar.netdna-cdn.com/file.ext 

HTTP/1.1 200 OK 
Date: Fri, 16 Sep 2014 14:12:20 GMT 
Content-Type: text/css 
Connection: keep-alive 
Cache-Control: max-age=604800, public ← 1 Week caching time 
Expires: Thu, 21 May 2015 20:00:00 GMT 
Vary: Accept-Encoding 
Last-Modified: Thu, 24 Jan 2013 20:00:00 GMT 
GMT; path=/; domain=.domain.com 
Server: NetDNA-cache/2.2 
X-Cache: HIT 

bạn đã sử dụng mã dưới đây:

Trình duyệt Caching sử dụng mod_expires
Cách phổ biến nhất để tận dụng bộ nhớ đệm trình duyệt là sử dụng mod_expires. Bạn có thể thêm mã sau vào .htaccess của mình và sẽ tự động kích hoạt bộ nhớ đệm của trình duyệt cho tất cả người dùng.

# Leverage browser caching using mod_expires # 
<IfModule mod_expires.c> 
    ExpiresActive On 
    ExpiresByType image/jpg "access plus 1 year" 
    ExpiresByType image/jpeg "access plus 1 year" 
    ExpiresByType image/gif "access plus 1 year" 
    ExpiresByType image/png "access plus 1 year" 
    ExpiresByType text/css "access plus 1 month" 
    ExpiresByType application/pdf "access plus 1 month" 
    ExpiresByType text/x-javascript "access plus 1 month" 
    ExpiresByType application/x-shockwave-flash "access plus 1 month" 
    ExpiresByType image/x-icon "access plus 1 year" 
    ExpiresDefault "access plus 2 days" 
</IfModule> 
# End of Leverage browser caching using mod_expires # 

Answer 2

Có lẽ, không phải là ý tưởng tốt nhất để lưu các tệp CDN trên máy chủ của bạn. Nếu bạn có thể sử dụng CDN trên máy chủ lưu trữ của bạn tốt hơn là hãy thêm một số tiêu đề bộ nhớ đệm vào đó bằng cách thêm một số tiêu đề bộ nhớ đệm như Cache-Control, Hết hạn, Sửa đổi lần cuối v.v.

Tốt hơn vì bạn chỉ thêm tiêu đề bộ nhớ cache vào một nơi - CDN của bạn, thay vì thêm quy tắc lưu vào bộ nhớ cache vào mọi trang web sử dụng CDN của bạn.

Answer 3

Trình duyệt bộ nhớ đệm là gì?

Bộ nhớ cache của trình duyệt là quá trình lưu trữ các tệp được yêu cầu trước đó trong bộ nhớ cache cục bộ của trình duyệt để giúp giảm thời gian tải. Khi tệp được lưu trữ cục bộ, yêu cầu ít hơn được yêu cầu phải được gửi đến máy chủ và ít dữ liệu hơn được yêu cầu tải xuống.

Có một số thành phần mà phải được kích hoạt để tận dụng đúng bộ nhớ đệm của trình duyệt. Ví dụ, bạn phải đảm bảo rằng bạn chỉ định trình xác thực bộ nhớ cache để giúp trình duyệt xác định xem tệp vẫn có thể được truy lục từ bộ nhớ cache cục bộ hoặc nếu yêu cầu phải được thực hiện cho máy chủ. Ngoài ra, bạn phải đặt đúng tiêu đề Hết hạn hoặc Bộ nhớ cache-Kiểm soát cho nội dung của bạn. Sử dụng cả hai sẽ là dư thừa. Hơn nữa, Gtmetrix thích Hết hạn hơn Cache-Control vì nó được hỗ trợ rộng rãi hơn. Do đó bài viết này sẽ tập trung vào việc sử dụng các tiêu đề Hết hạn khi trình diễn cách tận dụng bộ nhớ đệm của trình duyệt.

Cache-Control
Cache-Control cho phép chúng ta có quyền kiểm soát nhiều hơn một chút của bộ nhớ đệm trình duyệt của chúng tôi và nhiều người tìm thấy nó dễ dàng hơn để sử dụng một lần thiết lập.

# 1 Year for most static assets 
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"> 
Header set Cache-Control "max-age=31536000, public" 
</filesMatch> 

Gzip Comporession (Vary hữu ích cho Magento)

<ifModule mod_gzip.c> 
    mod_gzip_on Yes 
    mod_gzip_dechunk Yes 
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl|asp|html)$ 
    mod_gzip_item_include handler ^cgi-script$ 
    mod_gzip_item_include mime ^text/.* 
    mod_gzip_item_include mime ^application/x-javascript.* 
    mod_gzip_item_exclude mime ^image/.* 
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* 
</ifModule> 

<ifmodule mod_deflate.c> 
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript 
</ifmodule> 

Tùy thuộc vào các file của trang web của bạn, bạn có thể thiết lập thời gian hết hạn khác nhau.
Nếu một số loại tệp nhất định được cập nhật thường xuyên hơn, bạn sẽ đặt thời gian hết hạn trước đó cho chúng (ví dụ: tệp CSS).

Mở tệp .htaccess của bạn. (hãy thông minh: tạo bản sao tệp .htaccess gốc của bạn, trong trường hợp bạn vô tình mắc lỗi và cần phải hoàn nguyên).

Bây giờ là lúc để cho phép các Expires tiêu đề module trong Apache (thiết lập 'ExpiresActive' thành 'On'), vì vậy thêm video này vào tập tin .htaccess của bạn:

<IfModule mod_expires.c> 

# Enable expirations 
ExpiresActive On 

</IfModule> 

Nó có thể là hữu ích để thêm một “mặc định thị” cho một thời hạn sử dụng mặc định, vì vậy đó là 2 hàng bạn sẽ thêm tại:

<IfModule mod_expires.c> 

# Enable expirations 
ExpiresActive On 

# Default directive 
ExpiresDefault "access plus 1 month" 

</IfModule> 

Đó là cơ sở. Bây giờ thêm tất cả các dòng cho mỗi loại tập tin của bạn (bạn đã biết, những người bạn đã tạo trước đó cho bạn favicon, hình ảnh, CSS và Javascript). Bạn sẽ kết thúc với một đoạn mã mà trông giống như sau:

<IfModule mod_expires.c> 

# Enable expirations 
ExpiresActive On 

# Default directive 
ExpiresDefault "access plus 1 month" 

# My favicon 
ExpiresByType image/x-icon "access plus 1 year” 

# Images 
ExpiresByType image/gif "access plus 1 month" 
ExpiresByType image/png "access plus 1 month" 
ExpiresByType image/jpg "access plus 1 month" 
ExpiresByType image/jpeg "access plus 1 month" 

# CSS 
ExpiresByType text/css "access 1 month” 

# Javascript 
ExpiresByType application/javascript "access plus 1 year" 

</IfModule> 

Bây giờ chạy thử nghiệm khác với GTmetrix và so sánh kết quả.Đây là kết quả cho trang web thử nghiệm của tôi, sau khi thực hiện Expires tiêu đề:

Khuyến nghị

• Hãy tích cực với bộ nhớ đệm của bạn cho tất cả các tài nguyên tĩnh
• Hạn sử dụng ở mức tối thiểu của một tháng (khuyến cáo: truy cập cộng 1 năm)
• Không đặt bộ nhớ đệm của bạn trước một năm!

Trình duyệt Caching sử dụng WordPress Plugin

W3 Total Cache: Một trong các plugin bộ nhớ đệm tốt nhất với nhiều tính năng như bộ nhớ đệm, CDN hội nhập (như MaxCDN) mà sẽ tăng tốc độ hiệu suất trang web của bạn.

Note

1. Hãy chắc chắn rằng mod_rewrite được kích hoạt trên máy chủ web Apache của bạn, nếu không thì liên hệ với đội ngũ kỹ thuật máy chủ web của bạn để làm cho nó kích hoạt như là mô-đun rewrite sẽ là cần thiết để hoàn thành bộ nhớ đệm hành động .
2. Cảnh báo! Nếu bạn đặt ngày hết hạn trong tương lai cho một cái gì đó và sau đó cập nhật một trong các tệp đó, bạn phải thay đổi tên của tệp để trình duyệt tìm nạp lại nó.
   Ví dụ: nếu bạn đặt javascript của mình thành 1 năm và bạn cập nhật một trong các tệp javascript của mình, bạn phải đổi tên tệp thực. Cách tốt nhất để làm điều này là bằng cách tạo phiên bản, tức là myfile_v1.2.js, nhưng cách dễ dàng hơn là phải cẩn thận với tiêu đề Hết hạn của bạn (thiết lập từ 10 năm trở lên không bao giờ là tùy chọn tốt IMO).

Bạn có nhận thấy bất kỳ cải tiến nào cho trang web của mình không? Các điều trên đã xử lý tất cả các tệp của bạn được liệt kê trong “Tận dụng bộ nhớ đệm của trình duyệt” và “Thêm tiêu đề hết hạn”? Hãy cho tôi biết trong phần bình luận bên dưới.