Preload là một kỹ thuật khai báo cho trình duyệt biết rằng đây là một file rất quan trọng, cần phải được tải sớm.
Preload là mỹ thuật mình rất thích thú, thường được sử dụng để thay đổi thứ tự tải cho website tối ưu hơn.
đây là sơ đồ mà theo mình nó là tối ưu tải nhất cho website WordPress.
Để thay đổi thứ tự tải thì có rất nhiều kỹ thuật nhưng preload là kỹ thuật mạnh nhất tuy nhiên lại là dễ làm nhất.
Bài viết này tôi sẽ hướng dẫn bạn cách sử dụng preload trong WordPress và những lợi ích mà nó mang lại trong tốc độ load website
và đặc biệt là những lưu ý gì khi preload cách preload không bị lỗi (lỗi ở đây là trình duyệt tải 2 file mà bạn ý định preload file đó)?
preload thì nên preload file nào thì giúp tăng tốc độ load website WordPress?
preload file mà không đúng kỹ thuật thì tác hại ngược lại chính website của bạn, sẽ gây làm chậm website của bạn, mình sẽ ở đây và hướng dẫn bạn một cách chính xác để giúp bạn tăng tốc độ load website của bạn.
Preload là gì
Preload là một thẻ element link và thuộc tính preload.
Sẽ được khai báo vào trong thẻ <head></head> của website của bạn. (cách khai báo như thế nào trong bài viết này mình sẽ hướng dẫn cụ thể dành cho WordPress, không biết gì về lập trình code vẫn làm được bình thường)
preload mục đích được ra đời là để giúp nhà phát triển, quản trị viên website có thể thay đổi thứ tự tải sao cho tối ưu nhất, còn công thức cách làm thứ tự tải như thế nào thì tối ưu thì bạn có thể tham khảo bài viết thay đổi thứ tự tải của mình nhé.
preload để các trình duyệt có thể nhận được thông báo để tải trước (ưu tiên tải) tài nguyên nào đó mà không cần phải thực thi chúng, cho phép kiểm soát chi tiết thời điểm và cách thức tải của tài nguyên.
Quy tắc mặc định của trình duyệt sẽ phân tích đọc file html của bạn, từ trên xuống dưới và từ trái qua phải, khi gặp một được dẫn file nào đó thì nó sẽ dừng lại phân tích quá trình phân tích html quay sang tải và phân tích file kia.
Nhưng với preload thì không thích kiểu cứ phải đợi xếp hàng html từ trên xuống dưới và từ trái quan phải kéo đến lượt mình mà khai báo cho trình duyệt tải sớm file này trước đi.
Thời điểm hiện tại bài viết này cập nhật thì mới có 89,39% các trình duyệt hỗ trợ preload (con số này khá là nhiều rồi), mình tin chắc rằng nó vẫn tiếp tục tăng trưởng trong tương lai.
Trong trường hợp trình duyệt không hỗ trợ preload thì cũng không có vấn đề lỗi gì xảy ra cả chỉ đơn giản là bạn không thể sử dụng preload để tối ưu thế thôi. Cũng không sợ rủi ro ngược gì hết.
ví dụ về một đường link preload mà tôi muốn file load file font của mình để làm ví dụ:
<head> ... <link rel="preload" href="/wp-content/themes/GiaTuan/fonts/giatuan.woff2" as="font" type="font/woff2" crossorigin> ... </head>
Cần Preload như thế nào thì tối ưu
Để hiểu hơn về cần preload file nào, như thế nào thì mình sẽ giải thích về chuỗi tải một chút.
Giả sử chuỗi tải như thế này.
index.html |--wptangtoc.js |--giatuan.jpg |--style.css |--giatuan.js |--roboto.woff2
Trình duyệt sẽ không hiển thị bất cứ thứ gì nếu chưa tải và phân tích xong file css (ví dụ ở đây là style.css) và mặc định không hiển thị chữ khi không có font chữ (ví dụ ở đây là roboto.woff2)
Nếu chưa tải và phân tích xong css thì người dùng chỉ nhìn thấy màn hình trắng không có gì hết, chưa sử lý xong file font (roboto.woff2) thì sẽ bị ẩn chữ không hiển thị mà các công cụ speed test về tốc độ load vấn khuyên bạn sử dụng font-display: swap; bài viết này cũng giúp bạn tối ưu hóa font chữ luôn đó.
Nếu trong trường hợp ví dụ này file javascript (wptangtoc.js) tải trước file css thì đó cũng là một thứ không hề ổn chút nào, vì nó tải xong javascript nó mới lượt tải css. Làm xong css thì mới hiển thị.
Ví dụ nếu file javascript đó mất một giây mới tải và phân tích xong thì mới đến lượt file css thì người dùng sẽ ngồi ngắm màn hình trắng trắng thêm một giây.
Hay nếu bạn còn chơi trội theo kiểu cho file ảnh như ví dụ này load trước css và load trước file font ngang với file wptangtoc.js, file ảnh đó mất một giây để tải và phân tích thì suy ra trường hợp này người dùng phải mất tổng là 2 giây ngồi ngắm màn hình trắng ( 1 giây làm file ảnh giatuan.jpg + 1 giây làm file javascript wptangtoc.js).
Để thay đổi thứ tự tải thì bạn có thể sử code trong html nhưng nhiều bạn thì không biết về lập trình php vấn đề này cực kì là khó, dù cả bạn biết về lập trình trong một số trường hợp nhất định thì bạn bắt buộc phải sử dụng preload ví dụ như file font là điển hình nhất.
Thay đổi giá trị chuỗi tải tối ưu nhất là sẽ như thế này.
index.html |--style.css |--roboto.woff2 |--wptangtoc.js |--giatuan.js |--giatuan.jpg
như thế này là thực sự rất tốt ưu các chỉ số FCP sẽ cải thiện rất nhiều, nâng cao trải nghiệm người dùng…
Để thay đổi thứ tự tải, cách thay đổi thì đơn giản và dễ dàng nhất là dùng preload.
Kinh nghiệm mình làm việc và như mình đã chia sẻ bên trên nguyên tắc của trình duyệt: Trình duyệt sẽ không hiển thị bất cứ thứ gì nếu chưa tải và phân tích xong file css và mặc định không hiển thị chữ khi không có font chữ
Vì vậy mình cần phải preload file css và file font chữ.
Có nhiều tình huống đặc biệt khác thì nên preload kiểu này kiểu kia thì tốt hơn, nhưng theo mình thì với website WordPress thì 90% bạn chỉ cần preload 2 file này thôi là tuyệt vời lắm rồi.
Mình chỉ đặt trường hợp chung chung đa phần của mọi người thôi nhé preload file css và file font, trường hợp cụ thể đặc biệt thì hãy liên hệ riêng với mình.
Giờ chúng mình cùng nhau bắt đầu preload cho WordPress mình sẽ hướng dẫn preload cụ thể cho từng file css và file font chữ.
Làm như thế nào để preload cho WordPress
Mình sẽ hướng dẫn preload file css dành cho WordPress trước nhé.
Để có thể preload được file css thì bạn cần loại query strings của WordPress thì mới có thể preload được và bạn đừng sử dụng nén file css nhé thì mới có thể sử dụng được để không bị lỗi (lỗi ở đây thì là tải 2 lần như vậy nếu bạn preload không cẩn thận làm như vậy gây tiêu tốn tài nguyên và làm chậm website của bạn).
Hướng dẫn loại bỏ query strings của WordPress
Mình sẽ hướng dẫn luôn để loại bỏ query strings file css luôn.
add_action('init', 'wptangtoc_remove_query_strings_css');
function wptangtoc_remove_query_strings_css() {
if(!is_admin()) {
add_filter('style_loader_src', 'wptangtoc_remove_query_strings_wp_css', 15);
}
}
function wptangtoc_remove_query_strings_wp_css($src) {
$output = preg_split("/(&ver|\?ver)/", $src);
return $output[0];
}
Đoạn code này bạn hãy cho vào file functions.phpđể loại bỏ query strings cho file css của WordPress nhé.
function add_preload_file_css() {
?>
<link rel='preload' href='/wp-content/themes/GiaTuan/style.css' as='style'>
<?php
}
add_action('wp_head', 'add_preload_file_css',1);
đoạn code này bạn hãy cho vào file functions.php hãy thay /wp-content/themes/GiaTuan/style.css bằng url đường dẫn file css của bạn, lời khuyên của tôi là hãy sử dụng url tương đối thay vì dùng url tuyệt tối nhé. (url tương đối và url tuyệt đối là gì)
Còn một số tình huống nâng cao website của bạn có nhiều file css ví dụ là có 4 file css thì hãy lựa chọn file css chính main mà phục trách hiển thị giao diện chính để preload nhé. Cái nào file css không quan trọng thì không cần phải preload.
Như vậy là bạn đã hoàn tất xong file preload xong file css cho website WordPress rồi.
Giờ bây giờ mình sẽ chia sẻ hướng dẫn preload file font chữ cho WordPress.
function add_preload_font_WordPress() {
?>
<link rel="preload" href="/wp-content/themes/GiaTuan/fonts/giatuan.woff2" as="font" type="font/woff2" crossorigin>
<?php
}
add_action('wp_head', 'add_preload_font_WordPress',2);
Đoạn code này bạn hãy cho vào file functions.php hãy thay /wp-content/themes/GiaTuan/fonts/giatuan.woff2 bằng url đường dẫn file font của bạn, hãy sử dụng url tương đối thay vì tuyệt đổi, trong trường hợp preload file font thì bạn cần phải có crossorigin không thì file font của bạn sẽ load tải 2 lần đó.
Mình giải thích thêm một chút: Tại sao mình khuyên bạn cần phải dùng url tương đối thay vì url tuyệt đối trong kỹ thuật preload để đảm bảo sự tương thích ngược tốt nhất và giúp load nhanh hơn một chút (nhanh ở đây thì không thực sự nhiều) nhưng điều quan trọng là tương thích ngược.
Về kỹ thuật preload file font: Mình không thích sử dụng kỹ thuật font-display: swap; cho lắm làm giảm trải nghiệm người dùng mà font-display: swap; được cái hack điểm google page speed cũng ok phết.
Cá nhân mình file font nào quan trọng thì mới preload, không quan trọng thì để mặc định hoặc là xóa luôn, không có font-display làm gì.
Nếu bạn là một đơn giản không hiểu nhiều về font chữ thì mình khuyên bạn hãy sử dụng font chữ mặc định của trình duyệt không nên dùng font chữ tùy chỉnh, nếu bạn là chuyên gia marketing thấu hiểu font chữ thì là câu chuyển khác, bạn chỉ là một người đơn giản không hiểu nhiều về font chữ thì hãy sử dụng font chữ mặc định sẽ giúp website của bạn tăng tốc độ load rất đang kể. Hướng dẫn sử dụng font chữ mặc định của trình duyệt
Preload thì bạn có thể preload tất cả các file nếu như bạn muốn nhưng thì kinh nghiệm của mình thì 90% các website WordPress chỉ cần lên preload file css và file font là quá đủ rồi.
Đừng preload ưu tiên vô tội vạ, cái nào cũng ưu tiên thì chung quy là không ưu tiên cái nào cả.
để có thể sử dụng được preload một cách chính xác nhất thì bạn cần tìm hiểu về thứ tự tải tối ưu cho website WordPress
bạn có thể xem thứ tự tải khi đã preload và khi không preload làm tham khảo nhé.
Tóm tắt:
preload giúp khai báo cho trình duyệt tải sớm một tài nguyên file nào đó nó còn có thể áp dụng làm ngược lại điều đó đó chính là trì hoãn.
Mình sẽ gợi ý nếu bạn muốn trì hoãn file nào đó hãy dùng preload và dùng dom event trong javascript ( dùng onload). Giả sự bạn preload trì hoãn file css bạn chỉ cần cho thêm onload="this.onload=null;this.rel='stylesheet'" vào, mình sẽ không chia sẻ nhiều preload trì hoãn nếu bạn có nhu cầu thì hãy tự tìm hiểu hoặc nếu nhiều người muốn tìm hiểu về kỹ thuật này thêm mình sẽ chia sẻ sau.
preload để trì hoãn thì không được sử dụng phổ biến trong WordPress cho lắm chỉ sử dụng được một số trường hợp đặc biệt rất nâng cao và hiếm thấy nên mình sẽ không chia sẻ nhiều về vấn đề này.
Trong WP Tăng Tốc
Cảm ơn bạn đã chia sẻ, bài viết này rất giá trị và hay
Trong WP Tăng Tốc
cảm ơn bạn!!