Hướng dẫn tăng tốc themes Flatsome

Flatsome là một trong những giao diện được sử dụng phổ biến tại Việt Nam. Trong lĩnh vực cung cấp dịch vụ tăng tốc WordPress, tới 50% khách hàng đã lựa chọn sử dụng giao diện này. Trên phạm vi toàn cầu, Flatsome liên tục giữ vị trí hàng đầu trong nhiều năm liên tiếp về doanh số bán hàng.

Sơ lược về Theme Flatsome

Flatsome được ưa chuộng rộng rãi tại Việt Nam và tôi cũng thấy rất hứng thú khi chia sẻ về giao diện này trên nền tảng YouTube.

Một trong những điểm mạnh của Flatsome là tốc độ nhanh, đặc biệt là tính đơn giản và dễ sử dụng. Được trang bị với trình tạo giao diện UX Builder độc quyền của Flatsome, cho phép người dùng tùy chỉnh giao diện một cách trực quan, ngay cả khi không có kiến thức về mã lập trình. Giao diện này cũng cung cấp nhiều tùy chọn tùy biến giao diện một cách dễ dàng.

Theo quan điểm cá nhân, đây là giao diện tốt nhất dành cho người mới bắt đầu muốn xây dựng một trang web thương mại điện tử. Ngoài ra, nhiều người cũng sử dụng Flatsome để tạo trang giới thiệu vì tính linh hoạt và dễ dàng sử dụng của trình tạo trang.

Tốc độ của giao diện Flatsome theo đánh giá cá nhân của tôi đạt mức trung bình khá nhanh (6/10), tuy nhiên không phải là cực kỳ nhanh. Nếu giao diện này được cải thiện về tốc độ, có thể sẽ không có bài viết này nhằm hỗ trợ việc tối ưu hóa tốc độ cho giao diện Flatsome.

Tất cả các cách mà tôi chia sẻ trên Pika đều có thể áp dụng được. Bạn cũng có thể tham khảo thêm các bài viết khác tại Pika.

Trước khi bắt đầu quá trình tối ưu, lời khuyên của tôi là bạn nên sử dụng child themes để tránh việc mất các điều chỉnh mã code tối ưu khi bạn cập nhật giao diện.

Nếu bạn chưa làm việc này, tôi đã có video hướng dẫn về cách chuyển đổi sang child themes. Nếu bạn cần, bạn có thể tham khảo video này.

Khi bạn đã hoàn thành việc chuyển đổi sang child themes, chúng ta có thể bắt đầu quá trình tối ưu hóa cùng nhau.

Dưới đây là cách tối ưu hóa Flatsome mà bạn có thể áp dụng:

Tắt Lazy Load ảnh Flatsome

Flatsome cung cấp tính năng Lazy Load ảnh, tuy nhiên theo trải nghiệm cá nhân của tôi, Lazy Load ảnh Flatsome hoạt động không hiệu quả. Bạn có thể tắt tính năng này trong phần Advanced > Optimization (vui lòng tắt cả Lazy Load và Lazy Load Banner).

Thay vào đó, bạn nên xem xét sử dụng các plugin Lazy Load ảnh từ bên thứ 3 có uy tín trên thị trường. Dưới đây là danh sách 6 plugin Lazy Load ảnh tốt nhất. Lưu ý rằng việc sử dụng plugin Lazy Load từ bên thứ 3 có thể gây lỗi banner, hãy chọn một plugin có chất lượng và tương thích tốt.

Tối ưu Size ảnh thumbnail adaptive image

Mặc định, Flatsome cung cấp khả năng tùy chỉnh kích thước ảnh một cách dễ dàng, nhưng việc nhập liệu các số liệu chuẩn xác cho nhu cầu cụ thể không phải lúc nào cũng dễ dàng.

Bạn có thể tối ưu lại kích thước ảnh thumbnail shop bằng cách thêm đoạn code sau vào file functions.php:

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 125,
'height' => 125,
'crop' => 1,
);
} );

Sử dụng ROW thay vì packery grid

Đối với trang chủ, việc sử dụng layout cho banner sẽ tải một file JavaScript lớn từ Flatsome (33kb). Thay vì sử dụng tính năng grid của Flatsome, bạn có thể sử dụng tính tăng ROW để tự phân bố layout. Điều này sẽ giúp tối ưu hóa tốc độ tải trang.

Tải điều kiện Flatsome cơ bản

Khi kích hoạt plugin WooCommerce với Flatsome, nó sẽ tải một file flatsome-shop.css (22,3 kb) một cách tự động. Để tối ưu hóa, bạn có thể tải điều kiện file này bằng cách thêm đoạn mã sau vào file functions.php:

add_action('wp_enqueue_scripts', 'wptangtoc_clear_remove_shop', 999);
function wptangtoc_clear_remove_shop() {
wp_dequeue_style('flatsome-shop');
}

Tối ưu font Flatsome

Đối với font icon, bạn nên sử dụng preload để tải trước, cải thiện trải nghiệm người dùng:

function preload_font_wptangtoc() {
?>
<link rel="preload" href="/wp-content/themes/flatsome/assets/css/icons/fl-icons.woff2" as="font" type="font/woff2" crossorigin>
<?php
}
add_action('wp_head', 'preload_font_wptangtoc', 1);

Nhớ rằng việc tối ưu hóa tùy chỉnh kích thước ảnh và file CSS có thể phụ thuộc vào layout và thiết kế của trang web. Nếu cần thêm hỗ trợ hoặc tư vấn cụ thể, vui lòng liên hệ để được hỗ trợ chi tiết.

P/s: Bài viết được viết tham khảo từ website wptangtoc của bạn Hoàng Gia Tuấn, Người sáng lập WP Tăng Tốc.