Cách ngăn bộ nhớ đệm trình duyệt của stylesheet CSS trong WordPress

0

Hướng dẫn nhanh về video và văn bản này giải thích cách ngăn bộ nhớ cache của trình duyệt các tệp CSS trong WordPress. Các thủ thuật phá vỡ bộ đệm CSS ở đây cũng sẽ hoạt động bên ngoài WordPress: bạn sẽ chỉ cần phương pháp thêm chuỗi truy vấn của riêng mình.

Tại sao trình duyệt Cache stylesheet CSS

Khi trình duyệt lưu trữ web stylesheet CSS, những gì nó đang làm là lấy css đó từ máy chủ một lần, lưu nó và sau đó phục vụ phiên bản đã lưu của style đó cho người dùng bất cứ khi nào trang được tải yêu cầu .

Các trình duyệt làm điều này để cải thiện hiệu suất trang web: họ không còn phải yêu cầu máy chủ của trang web về stylesheet trên mỗi lần tải trang và điều này có nghĩa là ít yêu cầu hơn, tải trang nhỏ hơn và thời gian tải nhanh hơn.

Tại sao bạn lại muốn ngăn chặn bộ nhớ cache của trình duyệt file CSS

Tuy nhiên, bộ nhớ đệm CSS cũng có thể gây ra sự cố cho cả người dùng và nhà phát triển. Nếu bạn thay đổi stylesheet, bất kỳ người dùng cụ thể nào của trang web của bạn có thể không thể thấy các thay đổi cho đến khi bộ nhớ cache của trình duyệt của họ xóa, đó là cho đến khi xóa phiên bản đã lưu và tìm lại stylesheet. Đó có thể là giờ hoặc ngày, trong thời gian đó người dùng của bạn đang thấy một phiên bản lỗi thời và có thể bị hỏng của các quy tắc CSS tren trang web.

wordpress css browser cache

Để tắt hành vi bộ đệm CSS cho stylesheet đã cho có nghĩa là trình duyệt mỗi người dùng phải tải tệp đó từ đầu, trên mỗi tải trang. Điều này loại bỏ các lợi ích tốc độ của bộ nhớ đệm trình duyệt, nhưng nó đảm bảo rằng mọi người dùng đều thấy phiên bản cập nhật nhất của stylesheet trên mỗi lần tải trang.

Cách vô hiệu hóa bộ đệm CSS trong WordPress: Thêm chuỗi truy vấn

Điểm chính là việc thêm chuỗi truy vấn vào stylesheet CSS sẽ xóa bộ nhớ cache của trình duyệt, bởi vì trình duyệt của bạn sẽ sửa lỗi hai tệp sau đây khác nhau:

mysite.com/style.css

mysite.com/style.css?anything=goeshere

Tuy nhiên, nó vẫn là cùng một tập tin! Không có gì về nội dung của nó phải thay đổi và chuỗi truy vấn ?anything=goeshere không phải làm bất cứ điều gì. Chỉ cần đặt chuỗi truy vấn ở đó buộc trình duyệt phải tôn trọng stylesheet “new“ và tải nó từ đầu.

Buộc cập nhật một lần với phiên bản CSS

Vì vậy, nếu bạn muốn xóa một trang web WordPress stylesheet CSS cho mỗi khách truy cập, nhưng chỉ một lần, thì bạn có thể thay đổi wp_enqueue_style() từ đây:

wp_enqueue_style( 'wpshout-style', get_stylesheet_uri() );

Về điều này:

wp_enqueue_style( 'wpshout-style', get_stylesheet_uri(), '', '1.0.0' );

Lưu ý rằng điều này chỉ vô hiệu hóa bộ đệm ẩn CSS nếu trình duyệt đã không thấy chuỗi truy vấn đó trước đó. Vì vậy, việc thêm chuỗi truy vấn này sẽ làm mới tất cả bộ nhớ cache của trình duyệt của người dùng một lần, nhưng một khi trình duyệt của họ đã tải mysite.com/style.css?anything=goeshere , họ sẽ giải phóng hosting stylesheet đó.

Sau đó, xuống dòng, nếu bạn muốn xóa một lần nữa mọi bộ nhớ cache CSS của khách truy cập, bạn chỉ cần thay đổi mã thành :

wp_enqueue_style( 'wpshout-style', get_stylesheet_uri(), '', '1.0.1' );

Vì vậy, đây là một giải pháp tốt cho versioning stylesheet của bạn: khi bạn thực hiện thay đổi, bạn có thể thay đổi chuỗi truy vấn và stylesheet mới sẽ phát trực tiếp cho tất cả người dùng của bạn. Phiên bản sạch nhất của điều này là sử dụng hệ thống tạo phiên bản có định dạng thông thường, nghĩa là chuỗi truy vấn của bạn sẽ trông giống như v=1.1.2 , thay vì số ngẫu nhiên bạn chọn mỗi lần.

chúng tôi đã đề cập đến việc buộc phải làm mới CSS một lần trong WordPress. Tuy nhiên, bạn có thể chỉ muốn không phải lo lắng về bộ nhớ đệm trình duyệt, để đảm bảo rằng stylesheet tải từ đầu trên mỗi lần tải trang, bất kể là gì. Chúng ta làm gì trong trường hợp đó?

WordPress CSS Cache Busting trên mỗi trang tải: Thêm ngẫu nhiên chuỗi truy vấn

Theo mặc định, WordPress thêm các chuỗi truy vấn, nhưng chúng không thay đổi nhiều lần. Tuy nhiên, video giải thích cách buộc chuỗi truy vấn thay đổi mỗi lần tải trang, bằng cách đặt chuỗi truy vấn thành một số ngẫu nhiên lớn. Bạn muốn thay đổi các lời gọi wp_enqueue_style():

wp_enqueue_style( 'wpshout-style', get_stylesheet_uri() );

thành:

$rand = rand( 1, 99999999999 );
wp_enqueue_style( 'wpshout-style', get_stylesheet_uri(), '', $rand );

nếu wp_enqueue_style() không có đối số thứ ba (thứ chúng ta đã điền vào '' ). Nếu nó có đối số thứ ba, hãy để nguyên đối số đó, vì nó có khả năng làm điều gì đó quan trọng.

Tác dụng của đoạn code này là permanently ngăn bộ nhớ đệm trình duyệt của stylesheet CSS bị mê hoặc, bằng cách thêm một chuỗi truy vấn ngẫu nhiên, khác nhau vào mỗi lần tải trang. Trình duyệt của bạn và người dùng của bạn Các trình duyệt của bạn sẽ bị buộc phải tải stylesheet từ đầu trên mỗi lần tải trang.

Thêm chuỗi truy vấn ngẫu nhiên vào stylesheet WordPress mà bạn không kiểm soát

Có một chút phức tạp hơn. Bạn sẽ phải dequeue style gốc và tự mình yêu cầu nó bằng chuỗi truy vấn. Bạn sẽ muốn viết thêm plugin wordpress, với nội dung như sau:

function wpshout_force_css_refresh() {
	wp_dequeue_style( '[STYLESHEET_SLUG]' );

	$rand = rand( 0, 999999999999 );
	wp_enqueue_style( '[STYLESHEET_SLUG]', [PERMALINK_TO_STYLESHEET], [STYLESHEET_DEPENDENCIES], $rand );
}
add_action( 'wp_enqueue_scripts', 'wpshout_force_css_refresh' );

Để tìm một slug stylesheet, “View Source“ và tìm id của stylesheet, sau đó xóa css . Ví dụ: id của hoangweb.com stylesheet chính là hoangweb.com-style-css , và do đó, slug của nó là hoangweb.com-style .

[STYLESHEET_DEPENDENCIES] phải là '' hoặc bất cứ điều gì phụ thuộc vào stylesheet được liệt kê trong code enqueue .

Cảm ơn vì đã đọc bài viết này!

Last modified: Tháng Tám 1, 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.