Tối ưu website là một quá trình nâng cấp, sửa chữa những thiếu sót của trang web cho phù hợp với yêu cầu của google nói riêng và các công cụ tìm kiếm khác nói chung. Bài viết này sẽ giúp mọi người hiểu hơn về việc tối ưu website và dịch vụ tối ưu website chuyên nghiệp, chúng ta hãy cùng tham khảo nhé.

Xem thêm: Hướng dẫn 5 kỹ thuật tối ưu website hiệu quả nhất 2023

Dịch vụ tối ưu website chuyên nghiệp

Tại sao chúng ta cần tối ưu website?

Tối ưu website là quá trình nâng cấp, sửa chữa, điều chỉnh các yếu tố trên trang web nhằm đảm bảo những yêu cầu mà công cụ tìm kiếm Google đưa ra. Mục đích của việc tối ưu hóa website là để nâng cao thứ hạng của trang web trên công cụ tìm kiếm của Google, nhằm đưa website tiếp cận đến nhiều người dùng hơn.

Việc tối ưu website thường được áp dụng khi website xây dựng chưa hoàn hảo, muốn tăng sự cạnh tranh với website đối thủ hoặc các thuật toán của Google thay đổi. Những lợi ích mà tối ưu website mang lại như:

• Giúp tăng thứ hạng của website trên kết quả tìm kiếm, tăng độ uy tín, tạo lòng tin với người dùng, đồng thời tăng khả năng nhận diện thương hiệu trên thị trường.
• Tăng traffic cho website từ đó tăng tỷ lệ chuyển đổi cho web.
• Website khi tối ưu hóa sẽ giúp giảm bớt chi phí chạy quảng cáo cũng như phí đầu tư cho các dịch vụ marketing.

Dịch vụ tối ưu website thương mại

Dịch vụ sẽ tối ưu hóa giúp bạn các yếu tố quan trọng mà bạn không thể bỏ qua để website của bạn nhanh chóng lên TOP Google, cụ thể như sau:

• Kiểm tra giỏ hàng
• Kiểm tra chức năng thanh toán.
• Check thiết kế giao diện website.
• Tốc độ tải website nhanh ổn định.
• Tính bảo mật.
• Dễ dàng thao tác điều hướng.
• Thân thiện với các thiết bị (gồm thiết bị di động).
• Thân thiện với các trình duyệt.
• Tối ưu hóa chuẩn SEO.
• Dễ dàng quản trị và thao tác.
• Chuẩn hóa code đạt không.
• Nâng cấp code mới mang tính bảo mật và chuẩn seo.
• Kiểm tra web có mã độc hoặc dư thừa dữ liệu bên ngoài.

Dịch vụ tối ưu website bán hàng

Công việc tối ưu website bán hàng sẽ tối ưu hóa giúp bạn các yếu tố quan trọng mà bạn không thể bỏ qua để website của bạn nhanh chóng lên TOP công cụ tìm kiếm, các công việc thực hiện như sau:

• Check thiết kế giao diện website.
• Tốc độ tải website nhanh ổn định.
• Tính bảo mật.
• Dễ dàng thao tác điều hướng.
• Thân thiện với các thiết bị (gồm thiết bị di động).
• Thân thiện với các trình duyệt.
• Tối ưu hóa chuẩn SEO.
• Dễ dàng quản trị và thao tác.
• Chuẩn hóa code đạt không.
• Nâng cấp code mới mang tính bảo mật và chuẩn seo.
• Kiểm tra web có mã độc hoặc dư thừa dữ liệu bên ngoài.

Để website của bạn có thể hoạt động hiệu quả và thúc đẩy hoạt động kinh doanh thì tối ưu website là công việc làm vô cùng cần thiết. Nếu bạn không có kinh nghiệm và không muốn tốn nhiều công sức để mày mò tối ưu trang web, hãy để chúng tôi giúp bạn nhé.

Thông tin liên hệ dịch vụ tối ưu website

• Điện thoại: 0877.223.223
• Email: info.seotop@gmail.com

Các nghiên cứu cho thấy rằng người ta thường không có kiên nhẫn khi viếng thăm các trang web. Khoảng 25% người bỏ trang web đó nếu nó không được tải trong 4 giây hoặc ít hơn. Điều này có vẻ như rất khó khăn nhưng may mắn thay, bạn có thể tăng tốc WordPress với thời gian tải trang web của mình xuống còn 2,9 giây. Tốc độ website đạt mức đó sẽ nhanh hơn một nửa số trang web hiện có.

Vận hành một website thành công đòi hỏi developer phải đi trước nhiều bước so với đối thủ. Một cách để làm việc này là không ngừng cải thiện tốc độ website để đạt hiệu năng cao. Thời gian tải trang phải nhanh bất kể khách truy cập từ đâu.

Điều này có nghĩa là ngay cả những cải tiến nhỏ cho tốc độ trang web cũng có thể dẫn đến lợi ích lớn hơn đối với hoạt động kinh doanh của bạn. Và như bạn đã biết, WordPress chiếm gần như một phần tư số lượng trang web, vì vậy các chủ sở hữu muốn tăng tốc WordPress không phải là một điều ngạc nhiên.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tăng tốc WordPress trong 9 bước dễ dàng. Bạn không cần phải là một lập trình viên ở mức chuyên gia để hiểu làm được. Bài này dành cho tất cả những ai muốn cải thiện tốc độ website WordPress theo phương pháp mới nhất 2022. Tất cả các cách đã kiểm thử và áp dụng thành công bằng các gói WordPress hosting tốt nhất của chúng tôi.

Giờ, hãy bắt đầu thôi, bạn không chỉ tăng cường người dùng mà còn cải thiện SEO cho trang web nữa nếu tốc độ của nó tăng lên!

Vì sao tốc độ website quan trọng hơn bao giờ hết trong năm 2022?

Người dùng web ngày nay đang mong đợi website chạy càng ngày càng nhanh, vì tốc độ internet đã trở nên rất nhanh. Khi bàn đến việc thu hút người dùng mới, từng mili giây đều đáng giá. Chính vì vậy bạn sẽ cần chú ý đến từng khía cạnh một ảnh hưởng đến tốc độ website hay khả năng phản hồi ngay khi người dùng tương tác. Có thể bạn đã nghe đến các phương pháp thống kê hiệu năng, đây là những điểm chính chúng tôi cần nhắc lại cho bạn:

• Một giây bị trễ khi phản hồi trang sẽ làm giảm 7% lượt chuyển đổi.
• Hơn phân nửa người dùng di động sẽ bỏ website nếu tải lâu hơn 3 giây.
• BBC vừa thông báo rằng họ mất đến 10% khách truy cập cho mỗi giây nếu trang chủ không load
• AliExpress ghi nhận 10.5 phần trăm lượt tăng đơn hàng và 27 phần trăm chuyển đổi sau khi giảm thời gian tải trang xuống 36 phần trăm.

Trước khi bắt đầu thực hiện các biện pháp tăng tốc WordPress, bạn nên cân nhắc áp dụng càng nhiều biện pháp càng tốt để tốc độ website thật sự cải thiện được. Hãy cùng đi qua toàn bộ các bước thôi.

9 bước tăng tốc WordPress nhanh hơn

Chỉ trong 9 bước và dùng các thủ thủ thuật quan trọng, đảm bảo bạn sẽ thấy tốc độ website WordPress tăng lên.

Bước 1: Kiểm tra tốc độ website WordPress

Trước khi bắt tay vào việc tăng tốc WordPress bạn cần biết về hiện trạng tốc độ website. Kiểm tra tốc độ trang web của bạn không chỉ là một hình thức mà nó còn có thể giúp tiết kiệm thời gian nếu thấy website đã nhanh và tối ưu. Có rất nhiều công cụ hữu ích cho phép bạn đánh giá tốc độ website. Bạn có thể dùng GTMetrix, so sánh kết quả thêm với Google Page Speed Insights và YSlow. Cuối cùng, nếu bạn muốn kiểm tra trang web của mình với các trang web khác hãy dùng Pingdom.

Bước 2: Xóa các plugins/themes không cần thiết

Thêm các tính năng mới vào trang web để giữ cho nó hiện đại và thích hợp là một việc làm thông thường của các webmaster. Trên WordPress, điều này được thực hiện thông qua việc cài đặt thêm các plugins và theme. Đôi khi, các plugins mới có các tính năng thay thế các plugin khác, theo thời gian làm cho một số plugins không còn thật sự cần thiết nữa.

Một số lượng quá nhiều các plugin, đặc biệt là các phiên bản lỗi thời, có thể làm chậm tốc độ website WordPress. Vậy, để tăng tốc WordPress site, điều bạn cần làm là xóa hoặc ít nhất vô hiệu các plugin không cần thiết đó. Lý tưởng nhất là trang web của bạn chỉ nên có các plugin quan trọng nhất để đáp ứng đủ tính năng mà thôi. Nếu không biết xóa hay cài plugin, bạn có thể tham khảo bài hướng dẫn việc cài đặt và xóa các plugins.

Xem thêm: Hướng dẫn tăng tốc Themes Flatsome nhanh nhất có thể

Bước 3: Minify CSS, HTML và JavaScript

Giảm thiểu (Minification) là một trong những kỹ thuật hữu ích nhất nếu bạn muốn tăng tốc WordPress. Nó giảm bớt kích thước của các file script cũng như các file HTML, CSS, JS bằng cách xóa các ký tự không cần thiết, chẳng hạn như các khoảng trắng và comments. Các files đó sẽ nhẹ đi và chức năng vẫn không thay đổi.

Một số plugins giúp bạn thực hiện việc này như Autoptimize, W3 Total Cache. Để hiểu sâu hơn về việc cải thiện tốc độ website bằng minification, hãy xem bài hướng dẫn chi tiết này.

Bước 4: Bật nén Brotli của Google

Ngoài cách giảm thiểu kích thước các files, bạn cũng có thể hưởng lợi từ một dạng nén đặc biệt gọi là Gzip hay Brotli. Về cơ bản, bất cứ khi nào ai đó truy cập trang web của bạn, các tài nguyên (files) từ máy chủ của bạn sẽ được tìm và tải về. Các tài nguyên càng lớn thì càng có nhiều thời gian để tải về máy người truy cập. Bằng cách kích hoạt nén Gzip hoặc Brotli, bạn có thể giảm đáng kể kích thước của các tài nguyên này và đẩy nhanh quá trình tải của WordPress, từ có cũng giúp ích cho việc tăng tốc WordPress.

Thuật toán nén Brotli của Google dường như hiệu quả hơn hẳn Gzip về kích thước

Để sử dụng Brotli, server gốc của bạn cần phải kích hoạt nó lên. Vì Brotli rất mới nên không phải mọi trình duyệt đều hỗ trợ. Tuy nhiên, bạn có thể thiết lập phương pháp trả về để khi gặp trình duyệt hỗ trợ nó sẽ dùng Brotli. Nếu không hõ trợ, nó sẽ truy xuất tài nguyên của Gzip.

Giống với GZIP, Brotli chỉ có thể dùng để nén HTML, CSS, JavaScript và những file nền text khác. Nếu cố gắng nén binary files, như JPEGs và MP4s, bạn sẽ gặp tình trang file bị tăng kích thước. Sitepoint có một bài viết chuyên sâu về cách triển khai Brotli trên server và đánh giá ảnh hưởng của phương pháp nén Brotli compression trên WordPress site.

Để kiểm tra xem website của bạn đã được bật nén Gzip hay chưa hãy dùng checkgzipcompression.com. Nếu chưa được bật, bạn hãy thêm đoạn code sau vào file .htaccess để bật tính năng này nhé:

<IfModule mod_deflate.c>

  AddOutputFilterByType DEFLATE text/html

  AddOutputFilterByType DEFLATE text/css

  AddOutputFilterByType DEFLATE text/javascript

  AddOutputFilterByType DEFLATE text/xml

  AddOutputFilterByType DEFLATE text/plain

  AddOutputFilterByType DEFLATE image/x-icon

  AddOutputFilterByType DEFLATE image/svg+xml

  AddOutputFilterByType DEFLATE application/rss+xml

  AddOutputFilterByType DEFLATE application/javascript

  AddOutputFilterByType DEFLATE application/x-javascript

  AddOutputFilterByType DEFLATE application/xml

  AddOutputFilterByType DEFLATE application/xhtml+xml

  AddOutputFilterByType DEFLATE application/x-font  

  AddOutputFilterByType DEFLATE application/x-font-truetype  

  AddOutputFilterByType DEFLATE application/x-font-ttf  

  AddOutputFilterByType DEFLATE application/x-font-otf

  AddOutputFilterByType DEFLATE application/x-font-opentype

  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

  AddOutputFilterByType DEFLATE font/ttf

  AddOutputFilterByType DEFLATE font/otf

  AddOutputFilterByType DEFLATE font/opentype

# For Older Browsers Which Can't Handle Compression

  BrowserMatch ^Mozilla/4 gzip-only-text/html

  BrowserMatch ^Mozilla/4\.0[678] no-gzip

  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

</IfModule>

Bạn cũng có thể tham khảo bài hướng dẫn chi tiết về nén Gzip của chúng tôi tại liên kết này. Các plugins như WP-Rocket cũng có thể tự động bật nén Gzip trên website của bạn.

Bước 5: Tối ưu hóa hình ảnh bằng phương pháp nén hay dùng công nghệ ảnh mới nhất WebP

Do tính chất “tĩnh” của hình ảnh nên việc sử dụng các hình ảnh có độ phân giải cao ảnh hưởng rất nhiều đến băng thông và tốc độ website. Các định dạng ảnh như JPEGs và GIFs cũng gây chậm website do độ lớn của nó. Hiện nay với định dạng mới như FLIF, WebP và HEIF đã sử dụng công nghệ nén mới nhất giúp dùng được ảnh chất lượng cao với kích thước nhỏ hơn. Vì vậy, nếu được hãy chuyển đổi ảnh sang các định dạng này sẽ cải thiện ngay tốc độ website của bạn.

Có một vấn đề là hiện nay không phải trình duyệt nào cũng hỗ trợ chúng, vì vậy bản phải cung cấp định dạng thay thế cho một số người dùng. Nhưng WebP thực tế đã được rất nhiều trình duyệt hỗ trợ và các trình duyệt khác cũng hứa sẽ hỗ trợ nó trong tương lại.  Nếu bạn muốn kiểm thử trình duyệt nào đang hỗ trợ những định dạng ảnh này, tham khảo ngay công cụ Can I Use.

Nếu bạn chưa sẵn sàng để dùng định dạng mới, vậy hãy chắc rằng khi dùng định dạng cũ, đừng quên nén ảnh sao cho tối ưu.

 

Điều này không có nghĩa là bạn bắt buộc phải bỏ các hình ảnh chất lượng cao để thay thế bằng các hình ảnh chất lượng thấp để tăng tốc website. Có nhiều cách để tối ưu hóa các hình trên trang web của bạn. Plugins Smush Image Compression and Optimization có giải pháp thuận tiện để tối ưu ảnh mà không làm mất chất lượng hình ảnh.

Bước 6: Chia bài viết dài thành các trang

Một thuật ngữ thông dụng khác mà bạn có thể gặp phải khi tìm kiếm cách để tối ưu hóa WordPress là phân trang. Đơn giản là chia các nội dung lớn thành các phần nhỏ hơn. Những phần này sau đó có thể được hiển thị thành từng trang một như các trang riêng biệt.

Phân trang thường được sử dụng cho phần comments của trang web, nơi mà có thể chứa hàng ngàn comments đồng thời làm kẹt băng thông. Bạn có thể dễ dàng cho phép phân trang trong phần comments của WordPress – chỉ cần điều hướng đến phần Settings > Discussions. Ở đây, bạn có thể xác định số lượng comment tối đa trên mỗi trang. Hãy cân chỉnh sao cho phù hợp vì khách truy cập sẽ không muốn liên tục nhấn vào để đi đến trang tiếp theo.

 

Ngoài phần comments ra, việc phân trang cũng có thể giúp bạn tách một bài viết/trang thành các trang web riêng biệt. Điều này có thể rất hữu ích cho các bài viết dài bởi vì người dùng sẽ không bị choáng ngợp ngay khi truy cập. Việc phân trang trên bài viết có thể kích hoạt bằng cách thêm <!-nextpage-> vào phiên bản text của bài viết. Lúc này, WordPress sẽ tự động phát hiện và kích hoạt nó cho bạn.

Bước 7: Nâng cấp phiên bản PHP để tăng tốc WordPress

Đây là một trong những thủ thuật ít được biết đến. Tuy nhiên, nó có những tác động mạnh mẽ nhất. Chuyển từ PHP 5 sang PHP 7 mang lại nhiều lợi ích thực tế. WordPress tăng hiệu suất gấp 2 lần trên PHP 7 so với PHP 5, có thể xử lý 112% yêu cầu/giây. Hơn nữa, WordPress cũng sẽ được hưởng lợi từ việc tối ưu hóa bộ nhớ của PHP 7 dẫn đến tăng tốc WordPress lên 30-50%. Đó là lý do tại sao PHP 7 được đặt mặc định trên tất cả các gói Shared Hosting và giúp tăng hiệu suất lên hơn 5 lần cho WordPress.

 

Tuy nhiên, điều quan trọng cần ghi nhớ là PHP 7 thiếu khả năng tương thích ngược. Điều này có nghĩa là bạn sẽ không thể sử dụng một số plugins/themes, bao gồm cả các plugin chạy tốt trên PHP 5. Để kiểm tra xem website của bạn hiện đang chứa các plugins/themes như vậy không hãy sử dụng công cụ kiểm tra tính tương thích (PHP Compatibility Checker) cho WordPress.

Bước 8: Sử dụng các Plugin về Caching

Caching là một cơ chế nổi tiếng để giảm tải một số gánh nặng cho máy chủ web. Về cơ bản, caching engines lưu trữ các thông tin được sử dụng thường xuyên trên máy của khách truy cập (trình duyệt, bộ nhớ) để trình duyệt không phải lấy thông tin này nhiều lần từ máy chủ.  Caching có thể cải thiện đáng kể hiệu năng trang web và do đó là một trong những kỹ thuật quan trọng nhất để thực hiện tăng tốc độ WordPress.

Có rất nhiều plugins cho WordPress thực hiện nhiều kiểu caching khác nhau trong đó có WP-Rocket và W3 Total Cache. Bạn cũng có thể tham khảo bài hướng dẫn sử dụng WP Super Cache để bật caching cho WordPress.

Bước 9: Sử dụng CDN (Content Delivery Network)

Với tốc độ internet ngày một nhanh, đôi khi bạn rất dễ quên rằng các trang web nằm trên máy chủ vật lý cách rất xa vị trí của bạn. Lúc này, khoảng cách có thể lớn đến mức nó làm ảnh hưởng xấu đến thời gian đáp ứng. Hầu hết các trang web giải quyết vấn đề này thông qua mạng lưới phân phối nội dung (CDN).

Khi bạn bật CDN trên trang web, trình duyệt của khách truy cập không còn phải tải lại tất cả các trang từ máy chủ web, thay vào đó, một số trang tĩnh bị buộc phải lưu trữ tại các trung tâm dữ liệu gần vị trí của khách truy cập hơn. Điều này làm giảm tổng số yêu cầu xử lý bởi máy chủ web, do đó tối ưu tốc độ WordPress thành công.

CDNs cũng có thể giảm tải cho CPU và tài nguyên từ server gốc để server đó không bị ảnh hưởng khi có gặp tình trạng “spike load”. Vì vậy, có một CDN giúp bảo vệ bạn khỏi trường hợp băng thông cao, làm tăng trải nghiệm mượt mà cho từng khách truy cập một. Nếu một server bị down, CDN sẽ tự động chuyển hướng traffic tới điểm POP khác. POP là viết tắt của chữ Point of Presences, điểm chứa tài nguyên được cached của website, được đặt rải rắc khắp nơi, nhằm đưa tài nguyên tới người dùng gần đó.

Sử dụng CDN cũng là lợi thế của SEO. Google và những bộ máy khác xem trọng tốc độ website để tính thứ hạng. Vì vậy, nếu website của bạn nhanh hơn, đồng nghĩa thứ hạng của bạn sẽ gần hơn trên đầu trang tìm kiếm. Ngoài ra, CDNs cũng khiến cho ảnh và file media của bạn dễ được quét hơn và xuất hiện được trên Google Image nhiều hơn.

Nếu cài CDN ngay từ đâu, website của bạn sẽ có thể mở rộng quy mơ dễ hơn. Vì CDNs bản thương mại lấy tốc độ làm đầu. CDN provider đáng tin cậy sẽ khiến bạn không phải lo lắng về tối ưu wesbite nữa. Ngoài ra, CDN cũng khiến việc triển khai HTTP/2 dễ dàng hơn và truyền đưa nội dung trên HTTPS. Tóm lại, chọn CDN để dùng là một bước quan trọng cải thiện, tối ưu WordPress website.

Có nhiều sự lựa chọn cho một CDN. Phổ biến nhất bao gồm CloudFlare và MaxCDN. Chúng tôi cũng đã cung cấp hướng dẫn chi tiết về thiết lập CloudFlare cho trang web WordPress của bạn.

Tiến đến tương lai với WordPress

Websites có khả năng thích ứng với những công nghệ mới nhất thường sẽ tồn tại lâu trong thập kỷ tiếp theo. Vì vậy, những developer thành công thường là những người trân trọng sự thay đổi.

Luôn lưu ý tới những bản cập nhật WordPress mới, cập nhật plugin và xu hướng tôi ưu hóa website để luôn đón đầu cuộc chơi. Tối ưu tốc độ WordPress có thể khó ban đầu nhưng với 9 bước khá đơn giản ở trên, bạn đã có ngay lợi thế cạnh tranh với đối thủ.

Để biết thêm các mẹo và thủ thuật WordPress cũng như các hướng dẫn chuyên sâu về tăng tốc WordPress, hãy truy cập vào mục hướng dẫn sử dụng WordPress của chúng tôi.

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ấ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.

Tối ưu hoá Contact form 7

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: https://wptangtoc.com/tang-toc-themes-flatsome/

Tính năng LiteSpeed Cache có một module hỗ trợ đi kèm mà rất ít khi các dịch vụ Shared Hosting được bật lên, đó là tính năng Crawler (Trình thu thập nội dung).

Hiện tại tất cả các gói dịch vụ Hosting của AZDIGI đều đã được bật tính năng này để hỗ trợ khách hàng tối ưu website tốt hơn. Hãy cùng AZDIGI điểm qua Crawler có công dụng gì nhé.

LiteSpeed Cache Crawler là gì?

Cơ chế lưu cache của LiteSpeed Cache hầu như giống với tất cả các cơ chế lưu cache khác, đó là khi nhận được request từ người dùng trên trình duyệt, máy chủ sẽ đối chiếu xem nội dung mà khách request đã có cache chưa, nếu có cache mà còn thời gian tồn tại thì sẽ sử dụng nội dung đã lưu cache để tăng tốc thời gian tải nội dung đến người dùng.

Trường hợp nội dung đó chưa có cache, thì chính request của người dùng đó sẽ tạo ra một bản cache lưu trên máy chủ.

Nhưng tính năng LiteSpeed Cache Crawler sẽ giúp website luôn luôn có bản cache được lưu trữ nhờ vào cơ chế dò tìm và lưu cache liên tục sau một chu kỳ thời gian nhất định. Như vậy người dùng sẽ 100% có trải nghiệm vào website có cache và tiết kiệm thời gian cũng như băng thông lên tối đa.

Cách bật LiteSpeed Cache Crawler trên WordPress

Bạn tiến hành cài đặt plugin LiteSpeed Cache nếu chưa cài. Lưu ý là khi sử dụng plugin này, bạn phải tắt hết các plugin cache khác như WP Rocket, WP Super Cache, W3 Total Cache.

Sau đó bạn bật LiteSpeed Cache Crawler lên bằng cách truy cập vào LiteSpeed Cache => Crawler (Trình thu thập thông tin).

Sau đó bạn bật tính năng Crawler lên.

Lúc này Crawler sẽ tự hoạt động mà bạn không cần thao tác gì. Bạn có thể nhấp vào nút Hiển thị trạng thái sẽ thấy crawler hoạt động.

Nếu website bạn có tập tin XML Sitemap (với plugin Yoast SEO thì tập tin là domain.ltd/sitemap_index.xml), thì có thể khai báo với Crawler để bot dò tìm chính xác các nội dung trên website để lưu cache hơn.

Bạn khai báo bằng cách vào LiteSpeed Cache => Settings (Thiết lập) => Crawler (Trình thu thập thông tin) và điền đường dẫn sitemap vào phần Custom Sitemap (Sơ đồ trang web tùy chỉnh).

Vậy là bạn đã hoàn tất việc thiết lập LiteSpeed Cache Crawler rồi đó. Hãy thử trải nghiệm bằng cách truy cập vào website trên trình duyệt khác hoặc logout ra nhé.

Chúc bạn thành công.

Như các bạn cũng đã biết AZDIGI chỉ sử dụng LiteSpeed Webserver Enterprise trên mọi máy chủ Hosting bao gồm gói Tiêu Chuẩn (Linux Standard Hosting) và gói Doanh Nghiệp (Linux Business Hosting/sắp ra mắt). Việc sử dụng LiteSpeed Webserver sẽ giúp website tải nhanh hơn và tiết kiệm tài nguyên hơn Apache Webserver truyền thống.

Không chỉ dừng lại ở đó, mới đây tất cả các gói host tại AZDIGI đều đã hỗ trợ LSCache giúp website lưu bộ nhớ đệm tối ưu hơn, tải nhanh hơn nữa và tiết kiệm tài nguyên tối đa như giảm thiểu mức sử dụng CPU, Physical Memory, IOPS. Trong bài này AZDIGI sẽ mô tả qua LSCache là gì và cách kích hoạt tính năng này trên host.

LSCache là gì?

LSCache là viết tắt của cụm từ LiteSpeed Cache, là một tính năng lưu bộ nhớ đệm cho website được tích hợp sẵn vào LiteSpeed Webserver Enterprise. Về cách hoạt động nó cũng giống như mod_cache của Apache nhưng lại có hiệu năng rất cao có thể so sánh được với một công nghệ cache nâng cao là Varnish. Nhưng khác với Varnish, LSCache đã được tích hợp vào LiteSpeed Webserver nên chúng ta không cần xây dựng một proxy phức tạp để xử lý cache tới webserver cũng như không cần cấu hình lượt bỏ cookie, chỉ cần bật lên là chạy.

Ngoài ra LSCache còn có một ưu điểm khác với cache truyền thống (ví dụ như các plugin cài cache cho WordPress như WP Super Cache, W3 Total Cache,..) là các dữ liệu cache luôn được cập nhật tự động sau khoảng một thời gian nhất định mà không cần phải xóa cache thủ công, các trang trên website cũng sẽ được tự động lưu cache thay vì phải chờ một truy vấn gửi tới mới được lưu cache và sử dụng lại cache đó cho các lượt truy cập khác.

Nói ngắn gọn, LSCache là một giải pháp lưu dữ liệu đệm cho website đang sử dụng LiteSpeed Webserver Enterprise tối ưu nhất mà lại rất đơn giản để sử dụng.

LSCache cải thiện hiệu suất thế nào?

Để nhận xét hiệu suất, chúng ta sẽ đo lường thông qua công cụ ApacheBench. Ở đây AZDIGI sẽ đo lường với 1000 lượt kết nối với 20 kết nối cùng một thời điểm trên một website WordPress mới được cài đặt ở gói AZH-1.

Thông số khi chưa có cache:

Time taken for tests: 121.341 seconds
Complete requests: 1000
Failed requests: 8
 (Connect: 0, Receive: 0, Length: 8, Exceptions: 0)
Total transferred: 51387968 bytes
HTML transferred: 51132640 bytes
Requests per second: 8.24 [#/sec] (mean)
Time per request: 2426.818 [ms] (mean)
Time per request: 121.341 [ms] (mean, across all concurrent requests)
Transfer rate: 413.58 [Kbytes/sec] received

Thông số trên nghĩa là sẽ mất 121 giây để gửi 1000 lượt truy cập với 20 kết nối cùng lúc, điều đó tương đương mỗi giây sẽ xử lý được 8.24 truy cập và mỗi truy cập sẽ mất 2.4 giây để tải.

Bây giờ hãy xem thông số khi bật LSCache nào:

Time taken for tests: 3.288 seconds
Complete requests: 1000
Failed requests: 0
Total transferred: 51869517 bytes
HTML transferred: 51545000 bytes
Requests per second: 304.14 [#/sec] (mean)
Time per request: 65.760 [ms] (mean)
Time per request: 3.288 [ms] (mean, across all concurrent requests)
Transfer rate: 15405.70 [Kbytes/sec] received

Wow, chỉ mất 3 giây để gửi 1000 lượt truy cập với 20 kết nối cùng lúc. Mỗi giây xử lý được 304 kết nối và mỗi kết nối chỉ mất 0.065 giây mà thôi.

Bây giờ hãy thử tăng lên 10.000 kết nối với 50 kết nối cùng lúc nhé.

Time taken for tests: 8.275 seconds
Complete requests: 10000
Failed requests: 0
Total transferred: 518680000 bytes
HTML transferred: 515450000 bytes
Requests per second: 1208.42 [#/sec] (mean)
Time per request: 41.376 [ms] (mean)
Time per request: 0.828 [ms] (mean, across all concurrent requests)
Transfer rate: 61209.32 [Kbytes/sec] received

Không khác là bao cả, như vậy website của bạn sẽ chịu được nhiều truy cập hơn khi sử dụng LSCache.

Cách cài đặt LSCache trên host

Đối với website dùng WordPress

Nếu bạn đang sử dụng WordPress, hãy tắt toàn bộ các plugin tạo cache như WP Super Cache, W3 Total Cache, WP Rocket,…

Sau đó bạn hãy cài plugin LiteSpeed Cache vào là bạn đã kích hoạt thành công mà không cần tùy chỉnh gì thêm. Nếu bạn cần tùy chỉnh thêm thì có thể xem qua các thiết lập tại phần Settings -> LiteSpeed Cache.

Để kiểm tra website đã được bật LSCache chưa, bạn hãy truy cập http://www.webconfs.com/http-header-check.php và gõ tên miền của website vào rồi ấn Submit để kiểm tra HTTP Header, nếu có dòng X-LiteSpeed-Cache là thành công, nó có hai giá trị là miss và hit. Nếu miss có nghĩa là trang chưa được lưu cache nhưng bạn submit lại lần nữa sẽ ra hit tức là trang đã được lưu cache.

Đối với website dùng Xenforo

Nếu bạn dùng Xenforo thì chỉ cần cài LiteSpeed Cache Add-on và khi kích hoạt là bạn đã bật cache thành công.

Đối với website dùng Joomla

Nếu bạn đang dùng mã nguồn Joomla thì hãy chèn đoạn sau vào tập tin .htaccess của thư mục gốc website. Thay domain.com thành tên miền của bạn.

########## Begin - Litespeed cache
<IfModule LiteSpeed>
  CacheEnable public
  RewriteEngine On
  RewriteCond %{REQUEST_METHOD} ^HEAD|GET$
  RewriteCond %{HTTP_HOST} ^domain.com [NC]
  RewriteCond %{HTTP_COOKIE} !loginuser
  RewriteCond %{ORG_REQ_URI} !^/index.php$
  RewriteCond %{ORG_REQ_URI} !administrator
  RewriteCond %{ORG_REQ_URI} (\.php|\.html|\.htm|\.feed|\.pdf|\.raw|/[^.]*)$  [NC]
  RewriteRule .* - [E=Cache-Control:max-age=300]
</IfModule>
########## End - Litespeed cache

Đối với website dùng PrestaShop

Bạn cũng chỉ cần chèn đoạn sau vào tập tin .htaccess của thư mục gốc website.

########## Begin - Litespeed cache
<IfModule LiteSpeed>
  CacheEnable public
  RewriteEngine On
  RewriteCond %{REQUEST_METHOD} ^GET|HEAD|PURGE$
  RewriteCond %{HTTP_HOST} ^your_domain_name.com [NC]
  RewriteCond %{REQUEST_URI} !admin_folder|404|address|authentication|best-sales|cart|contact|discount|guest-tracking|history|identity|order|password|products-comparison|search|account|friend|login|logout|addresses|contact-us|order-history|my-account|order-confirmation|order-follow|quick-order|credit-slip|password-recovery [NC]
  RewriteCond %{HTTP_COOKIE} !logged|cart [NC]
  RewriteCond %{QUERY_STRING} !nocache [NC]
  RewriteRule .* - [E=Cache-Control:max-age=900]
</IfModule>
########## End - Litespeed cache

Với các website dùng ngôn ngữ PHP khác

Nếu website bạn là tự code bằng ngôn ngữ PHP hay bất kỳ mã nguồn mở bằng PHP nào, bạn cũng có thể bật LSCache bằng cách chèn đoạn sau vào .htaccess và sửa lại tên các đường dẫn không muốn lưu cache vào (ví dụ như trang admin).

<IfModule LiteSpeed>
CacheLookup Public on
RewriteEngine On
## Lưu cache vào hai phương thức HEAD và GET
RewriteCond %{REQUEST_METHOD} ^HEAD|GET$

# loại trừ một số trang không lưu cache
RewriteCond %{REQUEST_URI} !/(login|register|administrator|cron|admin)\.php$


RewriteRule .* - [E=Cache-Control:max-age=120]
</IfModule>

Như vậy là bạn đã vừa hoàn tất kích hoạt LSCache rồi đó. Nếu bạn gặp khó khăn trong việc thiết lập LSCache trên website, hãy liên hệ với phòng kỹ thuật thông qua ticket hoặc support@azdigi.com để được hỗ trợ.

Nguồn: azdigi.com