Hướng dẫn cách tăng tốc website khi sử dụng plugin Elementor

Có Phải Elementor Làm Chậm Website

Hiện tại số lượng người dùng sử dụng plugin builder Elementor ở Việt Nam tăng đột biến trong 1 năm trở lại đây, plugin này trở thành người dẫn đầu thị trường khi liên tục đưa ra các cải tiến mới và được nhiều lập trình viên phát triển các add-on hỗ trợ nhiều hơn bất cứ trình builder nào khác trên thị trường.

Tuy nhiên, Elementor tích hợp quá nhiều thứ vào trong nó nên sẽ dẫn đến rất nhiều trang web có thể tải chậm hoặc chưa biết cách để tối ưu website nên trong bài viết này Vũ Trụ Số sẽ chia sẽ đến bạn một số giải pháp giúp tăng tốc website khi sử dụng plugin Elementor.

Elementor làm chậm trang web?

Tất cả chúng ta đều hiểu rõ một điều là Elementor rất dễ sử dụng, triển khai nhanh và hữu ích để tạo ra bất kỳ kiểu thiết kế nào. Tuy nhiên, về mặt hiệu suất tổng thể thì rất khó nói Elementor gây chậm trang web hay không, mà bạn phải xem xét tổng thể xem website của bạn đang gặp sự cố nào đó, có thể là do Hosting, hình ảnh lớn, sử dụng quá nhiều tệp lệnh bên ngoài, sử dụng quá nhiều plugin khác đi kèm với Elementor hoặc có thể do theme của bạn xung đột với Elementor ….

Elementor Slows Down Website

Elementor làm website tải chậm?

Một số đề xuất giúp website của bạn tải nhanh hơn

Elementor cung cấp nhiều tùy chọn và khả năng chỉnh sửa linh hoạt. Mặc dù thiết kế web bằng Elementor thực sự rất dễ dàng và nhanh chóng, nhưng nếu bạn muốn tăng tốc trang web của mình thì hãy xem các tiêu chí dưới đây.

#1 – Không sử dụng hosting miễn phí

Trong mọi trường hợp sử dụng 1 hosting mạnh với công nghệ web server mới sẽ giúp website của bạn nhanh hơn rất nhiều.

Công nghệ web mới mà bạn nên tham khảo đó là:

  • Web server: Litespeed hoặc Nginx
  • Ổ cứng lưu trữ: SSD hoặc NVMe
  • Phiên bản PHP: 7x
  • Sử dụng oject cache: Redis hoặc Memcache
  • Sử dụng giao thức kết nối mới (HTTP/2 hoặc QUIC)

#2 – Thay đổi kích thước (Hình ảnh, Video hoặc tệp GIF)

Khi upload các hình ảnh mà bạn không chú ý đến kích thước hoặc không nén các tệp đa phương tiện sẽ làm ảnh hưởng khá lớn đến website, trang web tải chậm hơn, tăng tỷ lệ thoát…

Để loại bỏ điều đó, bạn có thể sử dụng Shortpixel để nén hình ảnh không làm thay đổi chất lượng một cách hiệu quả nhất. Bạn có thể sử dụng plugin được Shortpixel cung cấp hoặc có thể nén thủ công qua website mà họ hỗ trợ.

Shortpixel

#3 – Hạn chế sử dụng tập lệnh bên ngoài

Đôi khi chúng ta cần thêm một số tập lệnh bên ngoài như Google Maps, Facebook share count, Instagram hoặc nhiều file js khác được nhúng vào website của bạn. Nếu không thực sự cần thiết bạn hãy loại bỏ bớt các thành phần như này sẽ giúp website của bạn đạt hiệu suất tốt nhất.

Khi kích hoạt plugin Elementor thì một số thành phần sẽ được tải cùng trang web đó là Google Fonts, Font Awesome và EIcons, bạn có thể dễ dàng loại bỏ Google Fonts, Font Awesome và EIcons bằng cách thêm đoạn code sau vào file functions.php

1 – Loại bỏ Google Fonts

/*--- Xóa Google Fonts ---*/
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Đây là một ví dụ về phông chữ google được tải cục bộ và từ một yêu cầu bên ngoài khi sử dụng plugin Elementor

Google Font Elementor

2 – Loại bỏ Font Awesome

Theo mặc định, Elementor sẽ load Font Awesome, nếu bạn không sử dụng Font Awesome hoặc theme của bạn đã hỗ trợ thì có thể tắt chúng bằng cách thêm đoạn code dưới đây vào file functions.php

/*--- Remove Font Awesome ---*/
add_action( 'elementor/frontend/after_register_styles',function() {
    foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
        wp_deregister_style( 'elementor-icons-fa-' . $style );
    }
}, 20 );

3 – Loại bỏ Eicons (Elementor icons)

add_action( 'elementor/frontend/after_enqueue_styles', 'vutruso_js_dequeue_eicons' );
function vutruso_js_dequeue_eicons() {
 
  // Don't remove it in the backend
  if ( is_admin() || current_user_can( 'manage_options' ) ) {
        return;
  }
  wp_dequeue_style( 'elementor-icons' );
}

Ngoài ra nếu sử dụng Elementor thì bạn cũng nên xóa Gutenberg CSS bằng cách thêm đoạn code này vào file functions.php luôn.

//Remove Gutenberg Block Library CSS from loading on the frontend
function vutruso_remove_wp_block_library_css(){
 wp_dequeue_style( 'wp-block-library' );
 wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'vutruso_remove_wp_block_library_css' );

#4 – Đừng sử dụng quá nhiều plugin trên website của bạn

Hệ sinh thái WordPress đang thống trị 34% web toàn thế giới. Để quản lý nền tảng khổng lồ này, có rất nhiều plugin có sẵn trong WordPress. Nên nhớ không phải tất cả plugin sẽ giúp ích cho bạn.

Việc sử dụng quá nhiều plugin trên trang web khiến trang web tải chậm. Vì vậy, bạn nên suy nghĩ kỹ trước khi sử dụng bất kỳ plugin nào.

Website Tải Chậm

#5 – Chọn chủ đề (WordPress theme) phù hợp

Một chủ đề tốt sẽ không làm chậm một trang web, nhưng tiếc là rất nhiều chủ đề làm chậm Elementor, hiện tại có rất nhiều theme tương thích tốt với Elementor mà bạn có thể tìm trên themeforest hoặc có thể liên hệ với chúng tôi để được tư vấn cụ thể hơn.

Kết luận

Ở trên là một số lời khuyên để bạn tăng tốc website khi sử dụng Elementor, để tối ưu website toàn diện bạn cần sử dụng đến nhiều mẹo khác như

  • Plugin tối ưu cho website
  • Tải file js, css có điều kiện
  • Tối ưu database cho website
  • Tối ưu js, css và nén html

và còn rất nhiều kỹ thuật khác mà bạn có thể sử dụng dịch vụ tăng tốc website của chúng tôi để được trải nghiệm hoặc bạn cũng có thể đọc bài viết chi tiết về cách tăng tốc WordPress tại đây

Nếu có bất cứ câu hỏi thắc mắc nào bạn có thể gửi email cho chúng tôi hoặc comment để được trợ giúp. Xin cảm ơn.

Viết nhận xét