Lê Hoài Thương
Tích Cực
Themes flatsome là một trong những themes mà mình thấy được sử dụng rất nhiều ở Việt Nam (mình làm dịch vụ tăng tốc WordPress thì 50% khách hàng của mình sử dụng lựa chọn themes này). Trên toàn thế giới thì themes này vẫn liên tục đứng top 1 trong nhiều năm về doanh số bán hàng.
Flatsome được nhiều người Việt Nam yêu thích sử dụng mình cũng rất thích đem themes này đi chia sẻ thị phạm trên youtube. Ưu điểm có nó rất lớn tốc độ khá nhanh và đặc biệt quan trọng là cực kì dễ sử dụng, vì có tính hợp ux builder độc quyền của flatsome tuỳ biến giao diện thần thánh cho dù bạn không biết gì code vẫn dễ dàng làm được, có nhiều tính tăng tuỳ biến giao diện cực kì dễ dàng.
Đây theo cá nhân mình là themes tốt nhất dành cho những người mới bắt đầu muốn tạo một website bán hàng thương mai điện tử và cũng có nhiều người đem themes này làm trang giới thiệu vì page builder nó dễ dùng và tận chí ăn chơi còn đem nó đi viết blog.
Tốc độ của themes flatsome thì cá nhân mình đánh giá mặc định thì cũng chỉ ở mức trung bình khá nhanh (6 điểm / 10 điểm), chứ không phải là nhanh lắm, mà themes này mà nó nhanh lắm rồi thì chắc chắc bài viết này sẽ không ra đời để giúp các bạn tăng tốc độ themes flatsome một cách tốt hơn nữa.
tăng-tốc-themes-flatsome
Tất cả những thủ thuật mình chia sẻ tại WP Tăng Tốc đều có thể áp dụng được nhé bạn cũng có thể tham khảo các bài viết tại WP Tăng Tốc.
Trước khi vào quá trình tối ưu thì lời khuyên của mình là bạn nên sử dụng child themes nhé để tránh những đoạn code mã bạn gắn tối ưu mà sau này bạn cập nhật themes thì sẽ bị mất.
Nếu bạn chưa chuyển đổi bạn có thể tham khảo mình có video youtube hướng dẫn chuyển đổi child themes nếu như bạn chưa sử dụng thì bạn cũng có thể tham khảo video này.
Khi bạn đã chuyển đổi sang child themes rồi thì giờ chúng mình cũng nhau bắt đầu.
Flatsome tích hợp sẵn cho chúng ta một rất nhiều tính năng ở trong đó, trong đó có cả lazy load flatsome.
thì mình trải nghiệm thì lazy load ảnh flatsome khá tệ.
Huỷ kích hoạt bằng cách: Lazy Loading trong Advanced> Tối ưu hóa (tắt cả lazy load và lazy load banner đi nhé)
Bạn hãy thay thế bằng những plugin lazy load khác bên thứ 3 trên thị trường.
Lưu ý: ghi bạn sử dụng lazy load bên thứ 3, có thể dễ lỗi banner hãy chọn cho một một plugin lazy load chất lượng tương thích tốt.
Còn cái nào phù hợp với bạn thì bạn tự trải nghiệm nhé.
Trong phần flatsome có cho bạn những tuỳ biến sửa lại size ảnh một cách dễ dàng, nhưng không phải ai cũng biết nhập liệu một con số nào đó chuẩn xác đúng nhu cầu của mình thì.
Tối ưu cơ bản thumbnail shop, mặc định thì flatsome sẽ lấy size ảnh shop cho vào thumbnail rất lãng phí tốc độ mình sẽ tối ưu lại:
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) { return array( 'width' => 125, 'height' => 125, 'crop' => 1, ); } );
Đoạn code này bạn cho vào file functions.php
Chọn size ảnh phù hợp thì cái này quyết định phụ thuộc vào layout trang sản phẩm bạn sử dụng.
ở mức phổ biến bạn chọn layout số 5 của flatsome thì bạn hãy chọn size ảnh là 470px, nếu layout số 6 hay 7 thì sẽ to hơn, nếu mình rảnh rỗi sẽ làm một video clip chia sẻ về chủ đề này.
Còn kích thước ảnh shop thì phụ thuộc vào số hàng hiển thị và bạn có sử dụng sidebar cho trang shop của hàng không, mình không có con số chính xác ở đây mỗi một website flatsome thì mọi người có cách tuy biến khác nhau, nếu bạn cần thì có thể liên hệ với mình để mình check qua tư vấn cho.
sau đó bạn có thể dụng ux builder sửa lại đúng kích thước ảnh.
Đúng kích thước ảnh là gì?
đúng kích thước là kích thước hiển thị hình ảnh của css sẽ bằng hoặc gần bằng kích thước nội tại của hình ảnh.
Khi bạn đã lựa chọn kích thước chất sáng, thì bạn hãy dũng plugin Regenerate Thumbnails hoặc nếu bạn quá nhiều ảnh và biết sử dụng thumbnail thì có thể render lại bằng wp cli.
đây là phần cơ bản và vấn đề của trang chủ, khi bạn sử dụng phần bố cục layout cho banner của trang chủ thì đồng nghĩa với việc flatsome thì tải một file javascirpts rất lớn (33kb).
để tối ưu bạn hãy dùng tính tăng row để tự phân bố cục layout cho bạn thay vì dùng tính năng grid của flatsome.
Với themes flatsome khi bạn kích hoạt plguin plugin woocommerce thì nó sẽ tự động tải một file flatsome-shop.css (dung lượng nặng 22,3 kb)
Việc bạn cần làm là tải điều kiện nó.
Tải điều kiện file này không phải là cơ bản, vì nó không khai báo đăng ký. (mục đích của flatsome yêu cầu đừng tác động đến file này)
Việc mình tác động thì cứ tác động giờ mình sẽ chia sẻ hướng dẫn tải điều kiện file này nhé.
add_action('wp_enqueue_scripts', 'wptangtoc_clear_remove_shop', 999); function wptangtoc_clear_remove_shop() { wp_dequeue_style('flatsome-shop'); } function wp_tang_toc_shop_styles() { if(is_woocommerce() || is_cart() || is_checkout() || is_account_page() || is_product() || is_product_category() || is_shop()) { wp_register_style( 'shop-giatuan', get_stylesheet_directory_uri() . '/shop-wptangtoc.css', 'all' ); wp_enqueue_style( 'shop-giatuan' ); } } add_action( 'wp_enqueue_scripts', 'wp_tang_toc_shop_styles',999 );
Bạn đưa đoạn code này vào file functions.php của bạn
Bước tiếp theo bạn chỉ cần lấy file flatsome-shop.css (trong đường dẫn themes cha – /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-wptangtoc.css
Như vậy là tải điều kiện hoàn tất.
Hướng dẫn thêm một chút tải điều kiện cho những bạn nào đang sử dụng bật tính năng kéo cuộn vô hạn trong trang cửa hàng có thể thêm đoạn code này vào functions.php để tăng tốc độ load hơn.
add_action( 'wp_enqueue_scripts', 'wptangtoc_deregister_dieu_kien_plugin_scroll', 100 ); function wptangtoc_deregister_dieu_kien_plugin_scroll() { if(!is_product_category() && !is_shop()){ wp_deregister_script( 'flatsome-infinite-scroll-js' ); wp_deregister_script( 'flatsome-infinite-scroll' ); } }
Với font icon thì tốt nhất bạn hãy lên preload nâng cao thử tự tải ưu tiên, để 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 này vào file functions.php của bạn.
như vậy là xong.
Mình có chia sẻ một bài viết về chủ đề thứ tự tải và tối ưu font bạn cũng có thể tham khảo.
À bạn có cũng thể tiển khai font chữ mặc định của trình duyệt, mình có cũng một video hướng dẫn chuyển đổi font chữ mặc định thị phạm trực tiếp trên flatsome nếu bạn có nhu cầu tăng tốc hơn nữa bạn hãy tham khảo bài viết này:
Mình gặp rất là nhiều trường hợp, còn tận dụng cả ux builder làm block footer, header… thực sự mình thấy như vậy thì là cực lãng phí tốc độ load.
cho dù là ux builder nó chất lượng khá tốt nhưng dù cũng không nên sử dụng lạm dùng quá nhiều ux builder như vậy.
Bạn tận dụng ux builder thì cũng chỉ lên sử dụng ở phần body như trang chủ, còn các phần khác footer, header, sidebar và tận chí là dùng luôn cho cả trang cửa hàng… thì không nên dùng ux builder, nếu có khả năng hãy recode cứng.
Tác hại của trình tạo trang nói chúng là giảm tốc độ ux builder thì cũng không ngoại, page builder càng chất lượng thì càng giảm tốc độ càng ít ngược và ngược lại.
Mình biết là các bạn cứ nghĩ có ux builder có trong tay là bạn có thể mọi thứ, nhưng trên hiện thị là như vậy nhưng phần tốc độ thì?? cũng hạn chế custom bằng ux builder chỉ sử dụng nó khi cần thiết.
Mình biết vì nhiều thích flatsome chỉ vì có ux builder.
Hãy cẩn thận khi sử dụng công cụ này.
Cài này chỉ phục vụ những bạn sử dụng flatsome và có dùng thêm plugin contact form 7.
Theo mặc định Flatsome có tích hợp sẵn nền tải để chạy được contact form 7.
Flatsome tích hợp có đầy đủ tất cả các code để phục vụ dành riêng cho contact form 7 mặc định có sẵn.
add_filter( 'wpcf7_load_css', '__return_false' );
Việc bạn cần làm là đưa đoạn này vào file functions.php đi, mục đích là xoá gọi file css của plugin contact form 7, mình sẽ dùng các đoạn css của themes flatsome.
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; }
Đoạn này là đoạn css, cần có bạn có thể đưa nó vào file style.css của themes hoặc đưa vào bổ sung css cũng được.
Đây là một số tip thủ thuật nho nhỏ cơ bản để tăng tốc website đang sử dụng themes flatsome, hy vọng bài viết này sẽ giúp ích được cho bạn khi bạn đang sử dụng themes flatsome, còn có rất rất nhiều kỹ thuật khác bạn cũng có thể áp dụng tăng tốc cho themes flatsome ngay trong Blog này.
Nguồn: Hướng dẫn tăng tốc themes Flatsome
Xem tiếp...
Flatsome được nhiều người Việt Nam yêu thích sử dụng mình cũng rất thích đem themes này đi chia sẻ thị phạm trên youtube. Ưu điểm có nó rất lớn tốc độ khá nhanh và đặc biệt quan trọng là cực kì dễ sử dụng, vì có tính hợp ux builder độc quyền của flatsome tuỳ biến giao diện thần thánh cho dù bạn không biết gì code vẫn dễ dàng làm được, có nhiều tính tăng tuỳ biến giao diện cực kì dễ dàng.
Đây theo cá nhân mình là themes tốt nhất dành cho những người mới bắt đầu muốn tạo một website bán hàng thương mai điện tử và cũng có nhiều người đem themes này làm trang giới thiệu vì page builder nó dễ dùng và tận chí ăn chơi còn đem nó đi viết blog.
Tốc độ của themes flatsome thì cá nhân mình đánh giá mặc định thì cũng chỉ ở mức trung bình khá nhanh (6 điểm / 10 điểm), chứ không phải là nhanh lắm, mà themes này mà nó nhanh lắm rồi thì chắc chắc bài viết này sẽ không ra đời để giúp các bạn tăng tốc độ themes flatsome một cách tốt hơn nữa.
Tất cả những thủ thuật mình chia sẻ tại WP Tăng Tốc đều có thể áp dụng được nhé bạn cũng có thể tham khảo các bài viết tại WP Tăng Tốc.
Trước khi vào quá trình tối ưu thì lời khuyên của mình là bạn nên sử dụng child themes nhé để tránh những đoạn code mã bạn gắn tối ưu mà sau này bạn cập nhật themes thì sẽ bị mất.
Nếu bạn chưa chuyển đổi bạn có thể tham khảo mình có video youtube hướng dẫn chuyển đổi child themes nếu như bạn chưa sử dụng thì bạn cũng có thể tham khảo video này.
Khi bạn đã chuyển đổi sang child themes rồi thì giờ chúng mình cũng nhau bắt đầu.
lazy load ảnh Flatsome
Flatsome tích hợp sẵn cho chúng ta một rất nhiều tính năng ở trong đó, trong đó có cả lazy load flatsome.
thì mình trải nghiệm thì lazy load ảnh flatsome khá tệ.
Huỷ kích hoạt bằng cách: Lazy Loading trong Advanced> Tối ưu hóa (tắt cả lazy load và lazy load banner đi nhé)
Bạn hãy thay thế bằng những plugin lazy load khác bên thứ 3 trên thị trường.
Lưu ý: ghi bạn sử dụng lazy load bên thứ 3, có thể dễ lỗi banner hãy chọn cho một một plugin lazy load chất lượng tương thích tốt.
Còn cái nào phù hợp với bạn thì bạn tự trải nghiệm nhé.
Tối ưu Size ảnh thumbnail adaptive image
Trong phần flatsome có cho bạn những tuỳ biến sửa lại size ảnh một cách dễ dàng, nhưng không phải ai cũng biết nhập liệu một con số nào đó chuẩn xác đúng nhu cầu của mình thì.
Tối ưu cơ bản thumbnail shop, mặc định thì flatsome sẽ lấy size ảnh shop cho vào thumbnail rất lãng phí tốc độ mình sẽ tối ưu lại:
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) { return array( 'width' => 125, 'height' => 125, 'crop' => 1, ); } );
Đoạn code này bạn cho vào file functions.php
Chọn size ảnh phù hợp thì cái này quyết định phụ thuộc vào layout trang sản phẩm bạn sử dụng.
ở mức phổ biến bạn chọn layout số 5 của flatsome thì bạn hãy chọn size ảnh là 470px, nếu layout số 6 hay 7 thì sẽ to hơn, nếu mình rảnh rỗi sẽ làm một video clip chia sẻ về chủ đề này.
Còn kích thước ảnh shop thì phụ thuộc vào số hàng hiển thị và bạn có sử dụng sidebar cho trang shop của hàng không, mình không có con số chính xác ở đây mỗi một website flatsome thì mọi người có cách tuy biến khác nhau, nếu bạn cần thì có thể liên hệ với mình để mình check qua tư vấn cho.
sau đó bạn có thể dụng ux builder sửa lại đúng kích thước ảnh.
Đúng kích thước ảnh là gì?
đúng kích thước là kích thước hiển thị hình ảnh của css sẽ bằng hoặc gần bằng kích thước nội tại của hình ảnh.
Khi bạn đã lựa chọn kích thước chất sáng, thì bạn hãy dũng plugin Regenerate Thumbnails hoặc nếu bạn quá nhiều ảnh và biết sử dụng thumbnail thì có thể render lại bằng wp cli.
Sử dụng ROW thay vì packery grid
đây là phần cơ bản và vấn đề của trang chủ, khi bạn sử dụng phần bố cục layout cho banner của trang chủ thì đồng nghĩa với việc flatsome thì tải một file javascirpts rất lớn (33kb).
để tối ưu bạn hãy dùng tính tăng row để tự phân bố cục layout cho bạn thay vì dùng tính năng grid của flatsome.
Tải điều kiện Flatsome cơ bản
Với themes flatsome khi bạn kích hoạt plguin plugin woocommerce thì nó sẽ tự động tải một file flatsome-shop.css (dung lượng nặng 22,3 kb)
Việc bạn cần làm là tải điều kiện nó.
Tải điều kiện file này không phải là cơ bản, vì nó không khai báo đăng ký. (mục đích của flatsome yêu cầu đừng tác động đến file này)
Việc mình tác động thì cứ tác động giờ mình sẽ chia sẻ hướng dẫn tải điều kiện file này nhé.
add_action('wp_enqueue_scripts', 'wptangtoc_clear_remove_shop', 999); function wptangtoc_clear_remove_shop() { wp_dequeue_style('flatsome-shop'); } function wp_tang_toc_shop_styles() { if(is_woocommerce() || is_cart() || is_checkout() || is_account_page() || is_product() || is_product_category() || is_shop()) { wp_register_style( 'shop-giatuan', get_stylesheet_directory_uri() . '/shop-wptangtoc.css', 'all' ); wp_enqueue_style( 'shop-giatuan' ); } } add_action( 'wp_enqueue_scripts', 'wp_tang_toc_shop_styles',999 );
Bạn đưa đoạn code này vào file functions.php của bạn
Bước tiếp theo bạn chỉ cần lấy file flatsome-shop.css (trong đường dẫn themes cha – /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-wptangtoc.css
Như vậy là tải điều kiện hoàn tất.
Hướng dẫn thêm một chút tải điều kiện cho những bạn nào đang sử dụng bật tính năng kéo cuộn vô hạn trong trang cửa hàng có thể thêm đoạn code này vào functions.php để tăng tốc độ load hơn.
add_action( 'wp_enqueue_scripts', 'wptangtoc_deregister_dieu_kien_plugin_scroll', 100 ); function wptangtoc_deregister_dieu_kien_plugin_scroll() { if(!is_product_category() && !is_shop()){ wp_deregister_script( 'flatsome-infinite-scroll-js' ); wp_deregister_script( 'flatsome-infinite-scroll' ); } }
Tối ưu font flatsome
Với font icon thì tốt nhất bạn hãy lên preload nâng cao thử tự tải ưu tiên, để 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 này vào file functions.php của bạn.
như vậy là xong.
Mình có chia sẻ một bài viết về chủ đề thứ tự tải và tối ưu font bạn cũng có thể tham khảo.
À bạn có cũng thể tiển khai font chữ mặc định của trình duyệt, mình có cũng một video hướng dẫn chuyển đổi font chữ mặc định thị phạm trực tiếp trên flatsome nếu bạn có nhu cầu tăng tốc hơn nữa bạn hãy tham khảo bài viết này:
Bớt lạm dụng ux builder
Mình gặp rất là nhiều trường hợp, còn tận dụng cả ux builder làm block footer, header… thực sự mình thấy như vậy thì là cực lãng phí tốc độ load.
cho dù là ux builder nó chất lượng khá tốt nhưng dù cũng không nên sử dụng lạm dùng quá nhiều ux builder như vậy.
Bạn tận dụng ux builder thì cũng chỉ lên sử dụng ở phần body như trang chủ, còn các phần khác footer, header, sidebar và tận chí là dùng luôn cho cả trang cửa hàng… thì không nên dùng ux builder, nếu có khả năng hãy recode cứng.
Tác hại của trình tạo trang nói chúng là giảm tốc độ ux builder thì cũng không ngoại, page builder càng chất lượng thì càng giảm tốc độ càng ít ngược và ngược lại.
Mình biết là các bạn cứ nghĩ có ux builder có trong tay là bạn có thể mọi thứ, nhưng trên hiện thị là như vậy nhưng phần tốc độ thì?? cũng hạn chế custom bằng ux builder chỉ sử dụng nó khi cần thiết.
Mình biết vì nhiều thích flatsome chỉ vì có ux builder.
Hãy cẩn thận khi sử dụng công cụ này.
Cài này chỉ phục vụ những bạn sử dụng flatsome và có dùng thêm plugin contact form 7.
Theo mặc định Flatsome có tích hợp sẵn nền tải để chạy được contact form 7.
Flatsome tích hợp có đầy đủ tất cả các code để phục vụ dành riêng cho contact form 7 mặc định có sẵn.
add_filter( 'wpcf7_load_css', '__return_false' );
Việc bạn cần làm là đưa đoạn này vào file functions.php đi, mục đích là xoá gọi file css của plugin contact form 7, mình sẽ dùng các đoạn css của themes flatsome.
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; }
Đoạn này là đoạn css, cần có bạn có thể đưa nó vào file style.css của themes hoặc đưa vào bổ sung css cũng được.
Kết luận
Đây là một số tip thủ thuật nho nhỏ cơ bản để tăng tốc website đang sử dụng themes flatsome, hy vọng bài viết này sẽ giúp ích được cho bạn khi bạn đang sử dụng themes flatsome, còn có rất rất nhiều kỹ thuật khác bạn cũng có thể áp dụng tăng tốc cho themes flatsome ngay trong Blog này.
Nguồn: Hướng dẫn tăng tốc themes Flatsome
Xem tiếp...