Vấn đề tốc độ luôn luôn là mối quan tâm hàng đầu khi google liên tục cập nhật các thuật toán ưu tiên các website có tốc độ tải trang nhanh. Dường như nó đã trở thành mối quan tâm đầu tiên của webmaster khi thiết kế website. Vâng, bài viết hôm nay mình sẽ hướng dẫn mọi người cách tăng tốc Genesis Framework theme.
Hướng dẫn tăng tốc Genesis Framework theme
Nén Javascript và đưa xuống dưới footer
Lưu ý: Bạn hãy tải về file fuction.php của child theme trước khi làm theo các bước hướng dẫn nhé! Nếu bị lỗi thì tải lên lại là được.
Genesis framework thường có tốc độ load rất nhanh (do đã được tối ưu sẵn) nhưng với mặc định cơ bản thì các file Javascript của theme sẽ được tải trước nhằm đảm bảo các chức năng hoạt động đúng như lập trình. Bạn cũng có thể dùng chức năng tải không đồng bộ async nhưng sẽ gây ra lỗi ở phần Menu trên điện thoại rất khó chịu. Cách tốt nhất là chúng ta dời các đoạn JS này xuống Footer luôn. Công việc khá đơn giản, bạn chỉ cần vào Cpanel > Public_html > wp-content > File childtheme > mở File Fuction.php lên và dán code sau vào và lưu lại.
//* Chuyen JS xuong footer
function remove_head_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );
Dùng Plugin cho nhanh gọn cũng không thành vấn đề
Hãy cài đặt Plugin Scripts To Footer với hơn 10,000+ lượt tải về sử dụng là được. Quá đơn giản phải không nào.!
Dùng Google CDN-hosted jQuery
Thay vì sử dụng jQuery mặc định của host thì bạn chỉ cần việc nhúng thẻ chèn jQuery từ file jQuery có sẵn trên máy chủ CDN của Google. Ưu điểm cách này là tiết kiệm băng thông và hạn chế việc xử lý jQuery. Tiếp tục mở file Fuction.php của childtheme và thêm đoạn code sau vào.
/** Remove jQuery and jQuery-ui scripts loading from header */
add_action('wp_enqueue_scripts', 'crunchify_script_remove_header');
function crunchify_script_remove_header() {
wp_deregister_script( 'jquery' );
wp_deregister_script( 'jquery-ui' );
}
/** Load jQuery and jQuery-ui script just before closing Body tag */
add_action('genesis_after_footer', 'crunchify_script_add_body');
function crunchify_script_add_body() {
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js' );
wp_register_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js' );
wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js', array( 'jquery' ), '4.0', false );
wp_enqueue_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array( 'jquery' ), '1.10.3' );
}
Tiếp theo bạn Save lại và kiểm tra em các đoạn JS đã được chuyển xuống chưa nhé.
Nếu thấy bài viết có ích bạn đừng ngần ngại chia sẻ hoặc đánh giá cho nó nhé, sẽ là nguồn động lực cho mình tìm hiểu sâu hơn về Framework này!
