sunzhongwei - bd truc tuyen

/imgposts/zajlsroy.jpg

Sau khi cài đặt và sử dụng plugin lưu trữ đám mây Qiniu cho WordPress, tôi nhận thấy rằng hình ảnh banner trên trang chủ và banner bài viết tải rất chậm. Tuy nhiên, các hình ảnh sản phẩm cũng như hình ảnh trong bài viết lại tải nhanh chóng. Khi kiểm tra thông qua phần network của trình duyệt Chrome, có thể thấy một số tài nguyên đã sử dụng CDN nhưng một số khác thì không.

Kiểm tra trực tiếp mã nguồn của plugin:

1vim wp-content/plugins/wpjam-basic/wpjam-cdn.php

Từ đây, chúng ta có thể thấy rằng cơ chế hoạt động của plugin Qiniu là thay thế địa chỉ nguồn gốc của hình ảnh bằng địa chỉ CDN khi tạo mã HTML của trang. Cụ thể hơn, plugin sẽ tìm kiếm thẻ img trong mã nguồn và thực hiện thay thế đường dẫn tương ứng.

Tuy nhiên, với theme Hestia, nhiều yếu tố sử dụng CSS inline với thuộc tính background-image, điều này khiến plugin không thể tự động thay thế đường dẫn sang CDN. Kết quả cách chơi tài xỉu md5 là, các banner không được tăng tốc bởi CDN.

Ví dụ điển hình:

1<div class="header-filter" style="background-image: url(...">

Do không muốn chỉnh sửa trực tiếp mã nguồn của plugin (vì có khả năng bị ghi đè khi cập nhật), tôi bd truc tuyen quyết định chỉnh sửa mã nguồn của theme Hestia. Đây là cách làm so keo cụ thể:

Chỉnh sửa tệp sau:

1vim ./wp-content/themes/hestia/inc/sections/hestia-big-title-section.php

Thêm dòng mã sau để thay thế URL nguồn gốc bằng URL CDN:

1$hestia_big_title_background = str_replace("www.sunzhongwei.com", "cdn.sunzhongwei.com", $hestia_big_title_background);

Tiếp tục chỉnh sửa tệp:

1vim ./wp-content/themes/hestia/inc/template-tags.php

Thêm dòng mã tương tự:

1$background_image = str_replace("www.sunzhongwei.com", "cdn.sunzhongwei.com", $background_image);

Bằng cách này, tất cả hình ảnh banner trên trang chủ và bài viết đều sẽ được chuyển sang sử dụng CDN, giúp tăng tốc độ tải trang đáng kể. Lưu ý rằng bạn cần thay thế www.sunzhongwei.comcdn.sunzhongwei.com bằng domain và domain CDN tương ứng của riêng mình.