Bạn đã bao giờ tự hỏi các plugin WordPress ảnh hưởng đến thời gian tải trang web của bạn như thế nào chưa? Plugin WordPress cho phép bạn mở rộng nhiều tính năng mới vào trang web của mình, nhưng chúng cũng có thể ảnh hưởng đến tốc độ tải trang. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách mà các plugin WordPress ảnh hưởng đến thời gian tải trang web của bạn và làm thế nào bạn có thể kiểm soát chúng hiệu quả hơn.
Các plugin WordPress hoạt động như thế nào?
Plugin WordPress giống như các ứng dụng cho trang WordPress của bạn. Bạn có thể cài đặt chúng để mở rộng thêm nhiều tính năng hơn vào trang web của mình như contact form , photo gallery (album ảnh) hoặc cửa hàng online .
Khi ai đó truy cập trang web của bạn, trước tiên WordPress sẽ tải các file ở phần lõi của nó, sau đó mới đến các plugin đã được kích hoạt.
Để biết thêm chi tiết, hãy xem bài viết của chúng tôi về plugin WordPress là gì?Chúng làm việc như thế nào?.
Làm thế nào các plugin có thể ảnh hưởng đến thời gian tải trang?
Mỗi plugin WordPress có các chức năng và tính năng khác nhau. Để thực hiện nhiệm vụ của mình, một số plugin gọi đến cơ sở dữ liệu ở backend, trong khi một số khác load thêm các file trên frontend như css, javascript, hình ảnh,…
Thực hiện các truy vấn trên cơ sở dữ liệu và tải thêm các file như trên sẽ cộng thêm công việc mà website của bạn phải xử lý. Hầu hết các plugin đều tạo thêm các HTTP request mới để tải các dữ liệu javascript, css, … của mình về. Mỗi request đó cũng có độ trễ nhất định, góp phần tăng thời gian tải trang của bạn.
Khi được thiết kế đúng cách, các tác động đến hiệu suất thường không quá đáng kể.
Tuy nhiên, nếu các plugin của bạn thực hiện quá nhiều HTTP request, nó sẽ ảnh hưởng đến hiệu suất và trải nghiệm người dùng trên trang web của bạn.
Làm cách nào để kiểm tra tập tin nào được tải bởi WordPress Plugin?
Để xem các plugin ảnh hưởng đến thời gian tải trang của bạn như thế nào, bạn cần kiểm tra xem file nào được tải bởi các plugin WordPress.
Có rất nhiều công cụ mà bạn có thể sử dụng để thực hiện việc này.
Bạn có thể sử dụng các công cụ dành cho nhà phát triển (DevTools) trên trình duyệt của mình (Inspect trong Google Chrome và Inspect Element trong Firefox).
Chỉ cần truy cập trang web của bạn và nhấp chuột phải rồi chọn Inspect, bảng công cụ hỗ trợ nhà phát triển DevTools sẽ hiện ra.
Bạn cần nhấp vào tab Network và sau đó nhấn Ctrl + R để refresh lại trang.Sau khi trang được reload, bạn sẽ có thể xem từng bước trình duyệt của mình tải từng file như thế nào.
Bạn cũng có thể sử dụng các công cụ của bên thứ ba như Pingdom và GTmetrix để thấy điều này. Bên cạnh những thông tin hữu ích mà chúng cung cấp, các công cụ này cũng sẽ hiển thị cho bạn tất cả các file được tải và thời gian để chúng tải xong.
Bao nhiêu plugin là quá nhiều?
Trong khi bạn xem quá trình tải từng file, bạn có thể bắt đầu tự hỏi : tôi nên sử dụng bao nhiêu plugin trên trang web của mình? Bao nhiêu plugin thì gọi là quá nhiều?
Câu trả lời thực sự phụ thuộc vào bộ plugin bạn đang sử dụng trên trang web của mình.
Một plugin tồi có thể tải đến 12 file trong khi nhiều plugin tốt sẽ chỉ tải thêm một vài file.
Tất cả các plugin được lập trình tốt đều cố gắng giữ các file mà chúng phải tải thêm ở mức tối thiểu. Tuy nhiên, không phải tất cả các nhà phát triển plugin đều cẩn thận đến thế. Một số plugin sẽ tải thêm các file phụ mỗi khi tải trang, ngay cả khi chúng không cần các file đó.
Nếu bạn đang sử dụng quá nhiều plugin như vậy, thì chúng sẽ bắt đầu ảnh hưởng đến hiệu suất trang web của bạn.
Làm thế nào để kiểm soát plugin?
Điều tốt nhất nhất bạn có thể làm cho trang WordPress của mình là chỉ sử dụng các plugin được lập trình tốt, có lượng đánh giá tốt và được các nguồn đáng tin cậy khuyên dùng.
Hãy xem hướng dẫn của chúng tôi về cách tìm plugin WordPress.
Nếu bạn thấy rằng một plugin WordPress đang ảnh hưởng đến tốc độ tải trang, thì hãy tìm một plugin khác có cùng một chức năng nhưng thực hiện công việc của mình tốt hơn.
Tiếp theo, bạn cần bắt đầu sử dụng caching và CDN để cải thiện hơn nữa hiệu suất và tốc độ trang web của mình.
Một yếu tố khác bạn nên xem xét là hosting mình đang dùng. Nếu hosting của bạn không được tối ưu hóa đúng cách, thì nó sẽ làm tăng thời gian phản hồi (response time) của trang web.
Điều này có nghĩa là không chỉ các plugin làm trang web chậm, mà hiệu suất tổng thể của trang web cũng sẽ chậm hơn. Vì vậy hãy chắc chắn rằng bạn đang sử dụng một trong những dịch vụ hosting WordPress tốt nhất .
Trong trường hợp cuối cùng, bạn có thể gỡ cài đặt các plugin không quá quan trọng đến sự sống còn của website. Hãy xem xét cẩn thận các plugin đã cài đặt trên trang web của mình và xem liệu bạn có thể gỡ cài đặt một số trong số chúng không. Đây không phải là một giải pháp hoàn hảo, bạn sẽ phải thỏa hiệp bằng cách đổi tính năng lấy tốc độ.
Tối ưu hóa Plugin WordPress theo cách thủ công
Người dùng WordPress am hiểu về kỹ thuật có thể tự quản lý cách các plugin WordPress load các file một cách thủ công. Làm như vậy đòi hỏi một số kiến thức về lập trình và kỹ năng debug.
Cách để tải các đoạn mã và css trong WordPress đúng theo tài liệu chính thức là sử dụng các hàm wp_enqueue_style và wp_enqueue_script.
Hầu hết các nhà phát triển plugin WordPress sử dụng chúng để load các file. WordPress cũng đi kèm với các chức năng dễ dàng để “deregister” các file và css đó.
Tuy nhiên, nếu bạn chỉ đơn giản vô hiệu hóa việc tải các đoạn mã và file css đó thì các plugin của bạn sẽ không thể hoạt động một cách bình thường nữa. Để khắc phục điều đó, bạn sẽ cần sao chép và dán các đoạn mã và file css đó vào file css và file JavaScript của theme đang dùng.
Bằng cách này, bạn sẽ có thể tải tất cả chúng cùng một lúc, giảm thiểu các HTTP request và từ đó giảm thời gian tải trang.
Chúng ta hãy xem cách dễ dàng “deregister” file css và file JavaScript trong WordPress.
Tắt các file css của Plugin trong WordPress
Trước tiên, bạn sẽ cần tìm tên hoặc handle của file css mà bạn muốn deregister. Bạn có thể xác định vị trí của nó bằng công cụ inspect (DevTools) trên trình duyệt của bạn.
Sau khi tìm thấy handle, bạn có thể deregister nó bằng cách thêm đoạn mã sau vào file functions.php của theme đang dùng hoặc một plugin cho riêng website .
add_action( 'wp_print_styles', 'my_deregister_styles', 100 ); function my_deregister_styles() { wp_deregister_style( 'gdwpm_styles-css' ); }
Bạn có thể deregister nhiều handle tùy ý. Ví dụ: nếu bạn có nhiều hơn một plugin, thì bạn sẽ làm như thế này:
add_action( 'wp_print_styles', 'my_deregister_styles', 100 ); function my_deregister_styles() { wp_deregister_style( 'gdwpm_styles-css' ); wp_deregister_style( 'bfa-font-awesome-css' ); wp_deregister_style( 'some-other-stylesheet-handle' ); }
Hãy nhớ rằng, việc deregister các file css này sẽ ảnh hưởng đến các tính năng của plugin trên trang web của bạn. Bạn cần sao chép nội dung của từng file css mà bạn deregister và dán chúng vào file css của theme WordPress bạn đang dùng hoặc biến chúng thành custom CSS.
Vô hiệu hóa JavaScript của Plugin trong WordPress
Giống như CSS, bạn sẽ cần tìm ra các handle được sử dụng bởi file JavaScript để deregister chúng. Tuy nhiên, bạn sẽ không thể tìm thấy handle bằng công cụ DevTools.
Vì vậy, bạn sẽ cần đào sâu hơn vào các file của plugin để tìm ra cách load file javascript của plugin đó.
Một cách khác để tìm ra tất cả các handle được sử dụng bởi các plugin là thêm đoạn mã sau vào file functions.php của theme đang dùng :
function wpb_display_pluginhandles() {
$wp_scripts = wp_scripts(); $handlename .= "<ul>"; foreach( $wp_scripts->queue as $handle ) : $handlename .= '<li>' . $handle .'</li>'; endforeach; $handlename .= "</ul>"; return $handlename; } add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles');
Sau khi thêm đoạn mã mã này, bạn có thể sử dụng shortcode [pluginhandles] để hiển thị danh sách tất cả các handle cho file javascript.
Có tên các handle trong tay, bạn có thể dễ dàng deregister chúng bằng đoạn mã bên dưới:
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 ); function my_deregister_javascript() { wp_deregister_script( 'contact-form-7' ); }
Bạn cũng có thể sử dụng đoạn mã này để vô hiệu hóa nhiều file javascript như sau:
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 ); function my_deregister_javascript() { wp_deregister_script( 'contact-form-7' ); wp_deregister_script( 'gdwpm_lightbox-script' ); wp_deregister_script( 'another-plugin-script' ); }
Như chúng tôi đã đề cập trước đó, việc vô hiệu hóa các file javascript này sẽ khiến các plugin của bạn hoạt động không bình thường.
Để tránh điều này, bạn sẽ cần kết hợp các file JavaScript với nhau, nhưng thỉnh thoảng điều này cũng không đơn giản, do đó bạn cần có kiến thức về những điều mình đang làm. Bạn có thể học hỏi từ các thử nghiệm và quan sát các lỗi có thể xảy ra, tuy nhiên chúng tôi khuyên bạn không nên làm điều đó trực tiếp trên trang web đang chạy.
Hãy thực hiện các thử nghiệm ở môi trường WordPress ở máy cục bộ hoặc trên trang staging với các nhà cung cấp dịch vụ managed web hosting cho WordPress.
Chỉ tải file trên các trang cụ thể
Nếu bạn biết mình chỉ cần sử dụng plugin trên một trang nào đó trên website của mình, bạn có thể chỉ cho phép plugin đó hoạt động trên chính trang đó.
Bằng cách này, plugin vẫn bị vô hiệu hóa trên tất cả các trang khác và chỉ được tải khi cần.
Đây là cách bạn thiết lập chỉ load các file javascript có tên cụ thể (contact-form-7) trên một trang nào đó.
|
1 2 3 4 5 6 7 |
add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );
function my_deregister_javascript() { if ( !is_page(‘Contact’) ) { wp_deregister_script( ‘contact-form-7’ ); } } |
Đoạn mã này cho phép vô hiệu hóa file javascript contact-form-7 trên tất cả các trang trừ trang “Contact”.
Chúng tôi hy vọng bài viết này đã giúp bạn hiểu được cách các plugin WordPress ảnh hưởng đến thời gian tải trang. Bạn cũng có thể tham khảo hướng dẫn chi tiết của chúng tôi về cải thiện tốc độ và hiệu suất WordPress .