Xin chào các bạn đến với Alowebtot. Trong bài viết này mình xin hướng dẫn các bạn cách hướng dẫn tăng tốc theme Flatsome tốt nhất.
Như chúng ta đã biết theme Flatsome được sử dụng rất nhiều tại Việt Nam nói riêng và trên thế giới nói chung. Khi thiết kế website cho khách hàng mình cũng đang sử dụng theme này vì tính tiện lợi và tốc độ cao của theme Flatsome này.
Đây là theme cho thiết kế website bán hàng nhưng lại được sử dụng vào nhiều mục đích thiết kế website khác nhau.
Do mình có nhiều kinh nghiệm về theme này nên mình sẽ dễ dàng chia sẻ cho các bạn hơn.
Hầu như khi bắt đầu sử dụng và tìm hiểu thiết kế website wordpress thì đây cũng là một trong những theme được nhiều người tìm hiểu nhất. Nhiều tính năng tùy biến và giao diện cực kì dễ dàng sử dụng.
Tốc độ vào dạng nhanh thuộc vào loại khá. Nên mình sẽ tìm tòi và giúp nó có tốc độ nhanh hơn.
1. Lazy load ảnh
Tăng tốc Theme Flatsome bằng lazy load mặc định của Flatsome còn khá tệ, vì vậy các bạn tắt phần này đi nhé.
Bạn có thể thay thế bằng các plugin lazy load bên thứ 3 khác trên thị trường.
2. Tối ưu size ảnh thumnail
Tùy biến ảnh có lẽ khá dễ dàng nhưng để tối ưu và có con số chính xác thì có thể chưa biết.
Vậy nên chúng ta sẽ tối ưu ảnh thumbnail shop mặc định của theme flatsome tránh lãng phí tốc độ. Bằng cách dán đoạn code trên vào file function.php
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 125,
'height' => 125,
'crop' => 1,
);
} );
Các bạn sẽ chọn size ảnh phù hợp với layout của website của bạn. Còn ảnh cửa hàng thì tùy vào số cột vào sản phẩm trên 1 dòng của các bạn.
Sau đó các bạn có thể sử dụng uxbuider để chỉnh đúng kích thước ảnh.
3. Sử dụng Row thay cho Packery Grid
Khi sử dụng phần bố cục layout cho banner của trang chủ thì đồng nghĩa việc flatsome tải một file javascript lớn.
Vì vậy chúng ta nên sử dụng tính năng Rơ để tự phân bố cục layout thay cho grid của Flatsome.
4. Tải điều kiện Flatsome
Khi sử dụng plugin Woocommerce thì flatsome tự động tải một file flatsome-shop.css vì vậy việc của chúng ta là đi tải điều kiện cho nó.
add_action('wp_enqueue_scripts', 'alowebtot_clear_remove_shop', 999);
function alowebtot_clear_remove_shop() {
wp_dequeue_style('flatsome-shop');
}
function alowebtot_shop_styles() {
if(is_woocommerce() || is_cart() || is_checkout() || is_account_page() || is_product() || is_product_category() || is_shop()) {
wp_register_style( 'shop-alowebtot', get_stylesheet_directory_uri() . '/shop-alowebtot.css', 'all' );
wp_enqueue_style( 'shop-alowebtot' );
}
}
add_action( 'wp_enqueue_scripts', 'alowebtot_shop_styles',999 );
Bạn đưa đoạn code này vào file function.php nhé.
Tiếp theo các bạn lấy file flatsome-shop.css ( /wp-content/themes/flatsome/assets/css/flatsome-shop.css) lấy file đó chuyển vào thư mục root của themes ngang hàng với file functions.php bạn đặt code bên trên rồi bạn đổi tên file css đó thành shop-alowebtot.css
5. Tối ưu font Flatsome
Bạn lên Preload font icon để nâng cao trải nghiệm người dùng hơn.
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);
Bạn đưa đoạn code này vào functions.php
6. Bớt lạm dụng UX builder
Các bạn chỉ sử dụng UxBuilder cho các trang như body trang chủ còn các phần footer hay header thì không nên dùng. Những page builder càng chất lượng thì gián tiếp làm giảm tốc độ và ngược lại.
Chính vì vậy đừng lạm dụng nhiều uxbuilder.
7. Tối ưu hóa Contact form 7
Phần này hỗ trợ các bạn có sử dụng Plugin CF7. Flatsome tích hợp các tính năng đầy đủ để phục vụ cho CF7
Bạn dán đoạn code này vào functions.php.
add_filter( 'wpcf7_load_css', '__return_false' );
Bạn dán đoạn code này vào style.css
div.wpcf7-mail-sent-ok {
border: 2px solid #fef83e;
}
div.wpcf7-response-output {
margin: 2em .5em 1em;
padding: .2em 1em;
}
.wpcf7-display-none {
display: none;
}
Đây là một số tip thủ thuật để tăng tốc website wordpress sử dụng theme flatsome. Hy vọng nếu các bạn dang sử dụng Flatsome sẽ cải thiện phần nào tốc độ và còn nhiều kỹ thuật hay ho khác trong Blog này của Alowebtot nữa
Chúc các bạn thành công!
Cảm ơn các bạn đã ghé thăm Alowebtot. Chúc một ngày tốt lành.
