Kỹ thuật tải điều kiện website wordpess

Kỹ thuật tải điều kiện là một trong những kỹ thuật mình rất thích, nó giúp website của bạn cảm thiện rất nhiều khả năng tốc độ load website, rất nhiều.

Tất cả các website WordPress thì không hề nhẹ nhàng, những website WordPress muốn tốc độ website WordPress load nhanh hơn cần phải áp dụng kỹ thuật này.

Đây là kỹ thuật tủ của mình, gần là kỹ thuật tác động rất lớn đến tốc độ load website, nếu bạn làm tốt tải điều kiện giúp website của bạn cải thiện 100% hay đến 200% tốc độ load là một điều bình thường.

Mình sẽ hướng dẫn các bạn từ a đến z sử dụng kỹ thuật này không cần biết gì về code lập trình vẫn làm được và những cách dành cho người đam mê tốc độ load.

Và chia sẻ những phương pháp xác định file nào không sử dụng và sử dụng như thế nào thì tối ưu luôn.

Tải điều kiện website WordPress là gì

Tải điều kiện hiểu đơn giản trang web bạn cần gì thì mới tải cái đó, không cần thì loại bỏ như vậy tốc độ sẽ cải thiện rất nhiều.

Giả sử ví dụ: bạn sử dụng plugin contact form 7, bạn chỉ sử dụng plugin tạo form này chỉ cho mỗi trang giới thiệu. nhưng khi bạn sử dụng plugin contact form 7 thì những file javascript và css nó load ở khắp mọi nơi từ trang chủ, blog, bài viết…

Thứ chúng ta cần phải làm tối ưu đó chính là làm sao cho plugin contact form 7 chỉ load ở mỗi một trang giới thiệu như nhau cầu của bạn, và nó không tải những file cho những trang khác mà bạn không sử dụng đó, đó chính là sử dụng kỹ thuật tải điều kiện.

Đây là ví dụ, mỗi một website thì sẽ có cấu trúc file khác nhau, trong bài viết này mình sẽ hướng dẫn xác định và sử dụng luôn.

Tải điều kiện WordPress thường chỉ áp dụng cho 2 loại file là file css và file javascript.

Làm như thế nào để tải điều kiện cho website WordPress

Có 2 cách tải điều kiện cho website WordPress:

1. Sử dụng Plugin: Asset CleanUp Pro, PerfMatters , WP Gonzalez
2. Lập trình: code php (tôi sẽ hướng dẫn, không biết về lập trình mình hướng dẫn vẫn làm được bình thường chỉ cần bạn có đủ đam mê về tốc độ load website, bảo là đơn giản dễ làm thì không không đúng cho lắm.)

Ưu điểm và nhược điểm khi sử dụng tải điện kiện bằng plugin

Đây là phương pháp mình rất ít khi sử dụng nhưng nó sẽ hữu ích với những anh em muốn tăng tốc website nhưng không có nhiều kỹ năng về lập trình.

Ưu điểm sử dụng tải điều kiện bằng plugin:

Giao điện trực quan, dễ sử dụng không cần biết về lập trình vẫn làm được.
Được hỗ trợ từ nhà cung cấp plugin, hướng dẫn từ a đến á

Nhược điểm sử dụng tải điều kiện bằng plugin:

• Các plugin tải điều kiện thực sự chất lượng thì đều phải trả phí, một cái phí không hề rẻ chút nào.
• Các plugin tải điều kiện đều cho dữ liệu vào cơ sở dữ liệu.
• Tải rất nhiều code và cồng kềnh.
• nặng nề của plugin nhưng không sao hiệu quả mang lại thì vẫn rất đáng để thực hiện.

Ưu điểm và nhược điểm khi sử dụng tải điện kiện bằng phương pháp lập trình

Đây là phương pháp mình rất yêu thích và sử dụng rất là thường xuyên.

ưu điểm: sử dụng tải điều kiện bằng lập trình

• Load nhanh, rất ít code.
• Không mất một đồng nào mua plugin cả.
• Không thêm, nạp thêm một truy vấn cơ sở dữ liệu nào cả.

Nhược điểm: sử dụng tải điều kiện bằng lập trình

• Giao diện không trực quan.
• khó khăn cho những người không đủ đam mê về tốc độ load, quy trình sử lý phức tạp hơn.

Mỗi một phương pháp thì sẽ có ưu điểm và nhược điểm riêng phù hợp cho nhu cầu mỗi người, và và kỹ năng và đam mê trình độ mỗi người.

Tuy nhiên tiền mua plugin tải điều kiện ( giá plugin tải điều kiện giá khá chát) thì cũng cân nhắc thuê một đó nào đó làm dịch vụ tải điều kiện cho mình thì có vẻ hợp lý ( nói trên góc độ không chơi plugin null nhé).

trong 3 plugin tải điều kiện mình đề cử ở trên thì mình cảm thấy hài lòng nhất là PerfMatters (code nhẹ nhàng và giá cả hợp lý nhất).

Kinh nghiệm của mình thấy rằng những trường hợp điều kiện cơ bản thì plugin tải điều kiện vẫn làm tốt nhưng một số trường hợp phức tạp (dù có sử dụng regex) thì plugin tải điều kiện không thể làm được mà code lập trình thì lại làm được.

Trong bài viết này mình sẽ tập trung chia sẻ nhiều hơn về phương pháp lập trình đây là phương pháp mình thường xuyên sử dụng và vẫn đang sử dụng. Nếu bạn phù hợp với tải điều kiện bằng plugin thì bạn hãy lên mạng tìm hiểu nó có rất là nhiều hướng dẫn ở trên internet.

Còn phần tiếp theo thì mình sẽ hướng dẫn tải điều kiện theo cách lập trình. vì đơn giản là mình những tín đồ tăng tốc độ load website WordPress.

Hướng dẫn tải điều kiện WordPress

Tải điều kiện thì mình sẽ chia làm 2 bước quy trình:

Bước 1: là xác định file nào dư thừa không sử dụng trên một trang nào đó.
Bước 2: Thiết lập code để tải điều kiện.

Ghi chú mình nói như vậy thì rất khó cho các bạn để làm theo mình sẽ sớm làm video hướng dẫn để các bạn dễ hình dung

Xác định file dư thừa cần tải điều kiện

Mình sẽ sử dụng công cụ yêu thích nhất của mình về tối ưu hóa tốc độ, Chrome Dev Tool.

Bây giờ bạn truy cập vào bất cứ trình duyệt nào mà sử dụng lõi nhân chrome cũng được, nhưng để tiện lợi thì dùng trình duyệt chrome đi mình sẽ hướng dẫn cho bạn nó đỡ khác giao diện cho bạn dễ dàng thực hiện hơn.

ấn nút F12 => ấn vào dấu 3 chấm => more tool => coverage

Mình sẽ ví dụ về file dashicons.min.css

Càng màu đỏ thì tức không sử dụng

Màu xanh tức là đang sử dụng.

Chrome dev tool họ hiện thị % cho mình về tính năng này rất là tiện lợi để xác định.

Ví dụ trên ảnh : file dashicons.min.css 99,3% không sử dụng tức bạn có thể xóa nó, hoặc tải điều kiện => suy ra trang này không cần file này thì vẫn hiển thị và sử dụng được bình thường.

Bài tập này mình hướng dẫn về file dashicons chỉ tải điều kiện ở trang chủ nhé, mọi trang khác sẽ không load file này. ( vì tôi không biết chính xác nhu cầu của mọi người là gì như thế nào nên mình chỉ làm ví dụ sơ sơ thôi, nếu muốn biết chính xác thì cần liên hệ đặt dịch vụ tối ưu website để mình làm cho)

Nếu muốn cực kì dễ làm thì hãy sử dụng plugin tải điều kiện thì không phải suy nghĩ gì hết ấn ấn mấy cái là xong ngay.

Hoặc kinh nghiệm cơ bản bạn nhiều plugin thấy bạn đang ở trang blog mà tự nhiên nó load file của woocommerce là cần phải xem xét ngay.

Nếu bạn đam mê tốc độ load như mình thì hãy chọn con đường giống mình thì chúng ta cùng tiếp tục nhé.

Lập trình code để tải điều kiện

Mình biết là nhiều bạn chưa bao giờ đụng vào code php, hay ngôn ngữ lập trình nào đó cũng ngán ngẩm nhưng không sao cứ yên tâm có mình sẽ cố gắng giải thích đơn giản hết mức, không đơn giản hơn nữa được thì thôi mọi người thông cảm.

Khi bạn xác định được file nào bạn cần tải điều kiện thì bây giờ bạn cần phải xác định được id của file đó.

Có 2 cách để xác định file id của file đó mình thường dùng là

Cách 1: xem view-source trang web của bạn, bạn vào chrome rồi CTRL + U xem tìm đến file đường link tải file đó trong html nó sẽ ghi id, nếu là file file javascript thì bạn loại bỏ chữ -js hay nếu là file css thì bạn cần loại bỏ -css đi.

Ví dụ đây là view-source trang web của mình
<link rel='stylesheet' id='wp-tang-toc-css' href='https://wptangtoc.com/wp-content/themes/GiaTuan/style.css?ver=3.3.8' type='text/css' media='all' />

Mình ví dụ là file css, bạn nhìn chữ id='wp-tang-toc-css' bạn loại bỏ -css đi, tức id tên file này là wp-tang-toc.

Cách 2: là dùng hàm php để xác định id

add_action( 'wp_print_scripts', 'wptangtoc_xac_dich_id' );
function wptangtoc_xac_dich_id() {
    global $wp_scripts;
    foreach( $wp_scripts->queue as $handle ) :
        echo $handle . ' | ';
    endforeach;
}

xem view-source trang web của bạn, bạn vào chrome rồi CTRL + U xem tìm đến file đường link tải file đó trong html nó sẽ ghi id trong ở ngay phần head hoặc bạn đang trong quản trị website thì nó sẽ hiển thị chèn nên trên header của trang quản trị viên.

Bạn cần xác định id thì mới phục vụ được công việc ở phía dưới.

mình thường làm thì thích phương án cách 1, khi xác định gặp trường hợp khoai quá thì mới dùng phương án 2.

Giờ đến phần tiếp theo:

Chúng ta cần sử dụng hàm if – if trong ngôn ngữ php : tức là nếu

Hàm điều kiện if WordPress đây là danh sách các hàm mình thường dùng bạn chỉ cần copy và paste là làm được.

Giá trị này đúng thì mới chạy câu lệnh này.

Chia sẻ chút về chương trình hướng dẫn lập trình php cơ bản:

Ví dụ về hàm if cơ bản:

if (3 > 2){
    echo 'Xin chào các bạn, Mình là Gia Tuấn';
}

nếu 3 > 2 thì sẽ hiển thị Xin chào các bạn, Mình là Gia Tuấn

Không phải lúc nào chúng ta chỉ cần điều kiện một một hàm if chúng ta cũng có thể sử giả sự thêm file này điều kiện tải không chỉ tải trang giới thiệu và cần phải tải thêm trang liên hệ nữa chứ.

Ví dụ 2 nâng cao điều kiện cùng một lúc:

if (3 > 2 && 5 > 6 ){
    echo 'Xin chào các bạn, Mình là Gia Tuấn';
}

Hàm này sẽ không chạy vì: && nghĩa là cần phải đúng cả 2 điều kiện thì nó mới chạy

if (3 > 2 || 5 > 6 ){
    echo 'Xin chào các bạn, Mình là Gia Tuấn';
}

Hàm này sẽ chạy vì: || nghĩa là chỉ cần đúng ít nhất 1 điều kiện là chạy được rồi.

khi bạn sử dụng kỹ thuật tải điều kiện bạn cần phải để ý && và || nhé, || thường được dùng cho hàm điều kiện hơn còn && vẫn sử dụng nhưng sử dụng một số trường hợp nhất định nào đó.

Ngược giá trị: thêm đấu !

Nguyên tắc của hàm điều kiện là giá trị trả về đúng thì mới thực hiện mệnh lệnh.

ví dụ:

if ( is_checkout() ) {
 echo "Chào mừng các bạn đến với trang thanh toán";
}

hàm này là khi ai đó đến trang thanh toán thì mới hiển thị “Chào mừng các bạn đến với trang thanh toán”

hoặc sử dụng cách đảo ngược.

if ( ! is_checkout() ) {
 echo "Chào mừng các bạn đến với trang thanh toán";
}

hàm này là khi ai đó đến không phải trang thanh toán thì mới hiển thị “Chào mừng các bạn đến với trang thanh toán”

Điểm khác biệt giữa 2 cái này là thêm dấu ! ( dấu chấm than).

Dấu chấm ! trong hàm điều kiện nghĩa là ngược lại.

Mình vừa giới thiệu 3 toán tử logic của php thường được dùng cho công việc tải điều kiện cho WordPress.

Chắc mình ra một số ví dụ thì các bạn cũng đã hiểu được về hàm if rồi nhỉ.

Giờ để tải điều kiện được thì bây giờ mới chính thức bắt đầu đấy, kiến thức trước để bạn tiền đề để có thể làm được và hiểu được hàm điều kiện.

Để tải điều kiện chúng ta sẽ sử dụng thường xuyên:

hook wp_enqueue_scripts của WordPress
callback wp_deregister_script hoặc wp_dequeue_script: để hủy bỏ file javascript.
callback wp_deregister_style hoặc wp_dequeue_style: để hủy bỏ file css.

Về wp_deregister và wp_dequeue thì một cái là hủy đăng ký và hủy bỏ thì tính năng cũng như nhau, nhưng cá nhân mình sử dụng thì vẫn thói quen và thích sử dụng wp_deregister hơn là wp_dequeue vì nó an toàn hơn, để bài viết này đơn giản hơn thì mình sẽ không giải thích sự khác nhau về cái này hẹn lại các bạn vào một bài viết chia sẻ khác nếu như có nhiều người yêu cầu mình chia sẻ.

Bạn thích sử dụng cái nào thì cũng được nhưng mình thường xuyên sử dụng là wp_deregister.

Mình sẽ ví dụ như bài tập mình đã đề ra nhé tải điều kiện file css là dashicons và chỉ cho load ở trang chủ.

add_action( 'wp_enqueue_scripts', 'wptangtoc_deregister_dashicons', 100 );
function wptangtoc_deregister_dashicons() {
if( !is_front_page()){
wp_deregister_style( 'dashicons' );
}
}

Rồi bạn cho đoạn code này vào file functions.php như vậy là xong.

Mình sẽ giải thích về đoạn code trên một chút:

is_front_page là hàm điều kiện trong bài viết mình chia sẻ đường dẫn bạn có thể tham khảo thêm, danh sách hàm điều kiện WordPress. hàm này nghĩa là trang chủ.

wp_deregister_style là hủy bỏ file css

hàm điều kiện !is_front_page mình cho thêm dấu ! tức là ngược lại. ( vì mục đích là mình muốn chỉ loại ở trang chủ thôi mà).

dashicons là id của file css ( bạn xác định bằng cách xem view source như bên trên mình có hướng dẫn).

wp_enqueue_scripts là hook thường dùng đề tải điều kiện.

wptangtoc_deregister_dashicons là hàm mình mới tạo, cái này chắc bạn cần có một chút về php căn bản thì sẽ dễ hiểu hơn.

Mình sẽ thêm một ví dụ bài tập nữa, mình sẽ tải điều kiện 2 lệnh if cùng lúc.

Bài tập là tải file css dashicons tải điều kiện trang chủ và cả trang liên hệ.

add_action( 'wp_enqueue_scripts', 'wptangtoc_deregister_dashicons_x', 100 );
function wptangtoc_deregister_dashicons_x() {
if( !is_front_page() && ! is_page( 'lien-he' ){
wp_deregister_style( 'dashicons' );
}
}

cho vào file functions.php như vậy là xong.

giải thích một chút: ! is_page( ‘lien-he’ ) : lien-he là id xác định của trang page với WordPress là url.

Khi hủy file điều kiện thì sẽ dùng && còn khi nhúng file điều kiện sẽ dùng || (cái này thuộc phạm trù toán tự logic php), nếu bạn muốn cho thêm nhiều điều kiện cùng một lúc. (vì deregister là hàm hủy và dùng kèm thêm dấu ! ngược điều kiện vì vậy dấu cùng điều kiện && hay || thì tuần tự như vậy cái này thì bạn phải có chút kiến thức về php thì ngẫm nghĩ sẽ dễ hiểu hơn, nhưng bạn không có biết kiến thức về lập trình php thì moden cứ hiểu câu thần chú như mình nói: Khi hủy file điều kiện thì sẽ dùng && còn khi nhúng file điều kiện sẽ dùng ||

Tóm tắt:

Đây là một theo mình là một kỹ thuật rất hay và thường xuyên mình sử dụng đặc biệt là những website có nhiều trang web hay cấu trúc phức tạp thì cần phải áp dụng cái này các sớm càng tốt.

Lời khuyên của mình thủ thuật nhỏ: truy cập vào google analytic xem trang web một page nào đó thấy trang nào nhiều traffic nhất tập trung tải điều kiện (thông thường sẽ là trang chủ) rồi kết hợp sức mạnh của trình duyệt cache thì tốc độ của bạn sẽ nhanh hơn rất nhiều. ( đây được mình gọi là chia đều gánh nặng thời gian tải cho truy cập vòng lần thứ 2, không phải dồn tải hết sức lên lập truy cập đầu tiên ý là ý nghĩa lớn nhất của tải điều kiện là như vậy)

Nếu người dùng không truy cập lần thứ 2 thì cũng vẫn tăng tốc hơn. có truy cập lần thứ 2 thì vẫn cực kì tăng tốc.

Khi bạn đã thành thạo và hiểu cách thức của kỹ thuật tải điều kiện: thì bạn cố gắng viết code trong một hàm functions và nếu cùng giá trị điều kiện thì hãy sử dụng biến mảng array Ví dụ wp_deregister_script( array('id-tuan','id-tuan2') );

Chúc bạn thành công!!

nếu như chỗ nào mình giải thích hơi khó hiểu thì bạn thông cảm vì mình không phải làm nghề sư phạm, chỗ nào cần giải đáp thắc mắc thì cứ liên hệ trực tiếp với mình, mình sẽ giải thích.