Nâng cao hiệu suất tải không đồng bộ CSS cho WordPress

Như đã biết, tốc độ tải trang là một-thứ-gì-đó nhiều anh em dev / customizer rất đam mê khi “vướng” phải cái vòng của Pagespeed Insight, của GTMetrix, của Tool Pingdom…

Sau quá trình tôi cũng như anh em tìm tòi và nghiên cứu, cũng nhiều người đã biết đến khái niệm “Tải không đồng bộ”, hãy cùng tìm hiểu sơ qua về nó 1 chút nhé

Tải không đồng bộ (Asynchronous) là gì?

Hiểu một cách đơn giản, kỹ thuật tải không đồng bộ sẽ yêu cầu trình duyệt hoàn tất việc tải phần text (chữ) trước khi tải JavaScript để bổ sung tính năng hoặc các hiệu ứng “hoa lá” đi kèm. Nó trái ngược với kỹ thuật tải đồng bộ (Synchronous) khi mà các thành phần của trang web được tải đồng thời.

Trong WordPress, các bạn có thể tải không đồng bộ JavaScript một cách đơn giản thông qua việc sử dụng plugin. Một số plugin hỗ trợ tải không đồng bộ JavaScript phổ biến mà các bạn có thể tham khảo bao gồm:

• Async JavaScript
• Async JS and CSS
• Async Javascript Optimizer

Nhiều plugin tạo cache như WP Rocket, W3 Total Cache… cũng hỗ trợ sẵn tính năng này.

Tuy nhiên, nếu bạn không phải là “tín đồ” của plugin thì bài viết này là dành cho bạn. Ngay bây giờ, tôi sẽ hướng dẫn cho các bạn cách thiết lập tải không đồng bộ JavaScript mà không cần sử dụng plugin.

Trích từ wpbeginner

Thôi vào vấn đề luôn, hiện tại mình đang sử dụng WordPress cho hầu hết các website bán hàng mình làm. Bỗng 1 ngày được chia sẻ và áp dụng thử thì thấy rất bất ngờ về chỉ số của Pagespeed Insight

Dưới đây là đoạn mã đó

##### Loại bỏ tài nguyên chặn hiển thị CSS 
function add_rel_preload($html, $handle, $href, $media) {
  if (is_admin()) return $html;
$html = <<<EOT
<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'" id='$handle' href='$href' type='text/css' media='all' />
EOT;
return $html;
}
add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );
//* Loại bỏ CSS Gutenberg stylesheet in front
function wps_deregister_styles() {
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_print_styles', 'wps_deregister_styles', 100 );

Cách sử dụng: Copy và paste thẳng vào file functions.php của theme ( khuyến khích vào child theme ) là xong.

Việc còn lại chỉ là clear cache ( trình duyệt, web, memcached/redis… ) là xong.

Ngoài ra, còn 1 đoạn mã này có thể giúp cải thiện thêm một chút về tốc độ.

//* Di chuyển Js head to the Footer
function footer_enqueue_scripts() {
  remove_action('wp_head', 'wp_print_scripts');
  remove_action('wp_head', 'wp_print_head_scripts', 9);
  add_action('wp_footer', 'wp_print_scripts', 5);
  add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');

Như dòng comment, mục đích đoạn code này là chuyển các file JS xuống footer.

Tại sao mình lại để nó riêng ra? Vì đơn giản là các plugin cache, từ free đến premium đều có tùy chọn này rồi. Bạn hoàn toàn có thể không cần thêm đoạn code này, chỉ dùng của plugin là đủ!

XONG!

Trải nghiệm thôi!