Các nội dung chính
Tại sao tăng tốc độ Website WordPress lại quan trọng?
Đối với những ai làm SEO hay các chủ doanh nghiệp, việc có được thứ hạng cao trong kết quả tìm kiếm Google là vô cùng quan trọng. Nó ảnh hưởng trực tiếp đến khả năng thu hút traffic, từ đó mở ra cơ hội tiếp cận thêm nhiều khách hàng tiềm năng. Lượng traffic thấp cũng có nghĩa là bạn có ít cơ hội bán hàng hơn. Để có được lượng traffic cao phụ thuộc vào rất nhiều yếu tố, trong đó tốc độ website là một trong những yếu tố quan trọng nhất bởi vì nó ảnh hưởng trực tiếp đến trải nghiệm người dùng cũng như khả năng đề xuất kết quả tìm kiếm của Google.
Từ tháng 5/2020, Google giới thiệu 2 công cụ để tối ưu hóa trải nghiệm người dùng là Core Web Vitals và Lighthouse:
Core Web Vitals bao gồm 3 yếu tố LCP (Largest Contentful Paint – Thời gian kết xuất của phần tử có nội dung lớn nhất), FID (First Input Display – Hiển thị đầu vào đầu tiên), CLS (Cumulative Layout Shift – Sự thay đổi bố cục tích lũy).
Google Lighthouse bao gồm 3 yếu tố, trong đó có 2 yếu tố giống với Core Web Vitals là LCP (Largest Contentful Paint – Thời gian kết xuất của phần tử có nội dung lớn nhất), CLS (Cumulative Layout Shift – Sự thay đổi bố cục tích lũy), và TBT (Total Blocking Time – Tổng thời gian chặn khiến người dùng không tương tác được với website).
Sau khi phân tích và tổng hợp, Google đưa ra bảng đánh giá hiệu suất (Performance) thông qua 6 yếu tố như hình dưới đây:
Tỉ trọng điểm của từng chỉ số được phân bổ như sau:
| FCP (Thời gian kết xuất của phần tử đầu tiên) | 15% |
| SI (Thời gian nội dung trang web được hiển thị) | 15% |
| LCP (Thời gian kết xuất của phần tử có nội dung lớn nhất) | 25% |
| TTI (Thời điểm có khả năng tương tác với website) | 15% |
| TBT (Tổng thời gian chặn) | 25% |
| CLS (Sự thay đổi bố cục tích lũy) | 5% |
LCP và TBT là 2 chỉ số chiếm trọng số lớn nhất – 25%.
Do đó tăng tốc độ Website WordPress, tăng trải nghiệm người dùng bạn cần phải có chiến lược cải thiện cải thiện 6 chỉ số trên trên cả 2 thiết bị: Máy tính bàn (dễ), và thiết bị di động (khó hơn). Dưới đây là ví dụ hiệu suất của bạn sẽ tăng như thế nào khi bạn cải thiện được chỉ số CLS. Các chỉ số khác cũng tương tự như vậy.
Google cũng chỉ cho tôi các tiêu chuẩn tôi cần khắc phục để đạt được hiệu suất cao hơn, rất chi tiết và cụ thể:
Sau 3 tuần nghiên cứu, Kim Quy đã đạt được kết quả 100/100 trên cả Desktop và Mobile
- Giảm bớt JavaScript không dùng tới sẽ giúp tôi tiết kiệm thêm 0,3s.
- Giảm bớt kích thước ảnh sẽ giúp tôi tiết kiệm được 0,15s.
- Kích thước DOM được cảnh báo là 903 phần tử, nên giảm kích thước DOM để tăng tốc độ website WordPress.
- Số lượng Request được gửi là 43, với dung lượng 333KiB (KiB là kibiBytes, 1 KiB = 1024 Bytes). Số lượng Request và dung lượng là rất nhỏ, chỉ tương đương với 1 file excel. Để dễ hình dung, nếu so với dung lượng của toàn bộ website với 1 bức ảnh được chụp bằng Iphone 12 Pro Max, nó chỉ bằng 1/2000 lần. Google khuyên nên tiếp tục giảm Request và dung lượng, chỉ số này gần như đã tiệm cận mức tối ưu.
- Có 1 phần tử làm thay đổi bố cục tích lũy nhiều.
- Có 6 phần tử có kích thước lớn trên màn hình.
- Có 8 tác cụ gây kéo dài thời gian.
Càng giảm bớt được các yếu tố gây chậm website ở trên thì website của bạn càng chạy nhanh. Các yếu tố cấu thành lên website lại là các yếu tố gây chậm website: Các yếu tố này bao gồm:
- HTML
- CSS
- JavaScript
- Mã nhúng của bên thứ 3
Kết hợp giảm thiểu các yếu tố làm chậm này cùng với việc kích hoạt các yếu tố tăng tốc độ website WordPress thông qua các Module tăng tốc sẽ giúp cho bạn có một website đem đến trải nghiệm cực tốt cho khách hàng của mình. Sau đây là 13 bước tăng tốc độ website WordPress. Bạn có thể xem lại cách tạo website WordPress bán hàng hiệu quả tại đây →
Bước 1: Lựa chọn nhà cung cấp dịch vụ WordPress Hosting tốt:
Có nhiều công ty cung cấp Hosting và Domain tại Việt Nam như Nhân Hòa, Mắt Bão, Ten Ten, AZdigi, Hostinger, Inet… Do đó bạn cần phải có những tiêu chí để lựa chọn nhà cung cấp Hosting phù hợp. Các tiêu chí để lựa chọn một nhà cung cấp dịch vụ Hosting tốt gồm có:
- Cấu hình máy chủ mạnh:
- Ổ cứng tiêu chuẩn tốt nhất hiện nay là SSD chuẩn NVMe, cho tốc độ đọc ghi dữ liệu nhanh gấp 6 lần ổ SSD chuẩn SATA.
- Số nhân CPU: Càng cao càng tốt
- Dung lượng Ram: Lớn và thế hệ mới nhất DDR4 hoặc DDR3.
- Number of Processes: Số tiến trình có thể sử lý đồng thời, càng lớn càng tốt.
- MySQL max user connections: Số lượng User có thể kết nối với cơ sở dữ liệu, càng lớn càng tốt.
- Khả năng hỗ trợ 24/24. Ngay khi nào máy chủ của bạn gặp sự cố, đều có nhân viên kỹ thuật hỗ trợ.
- Khả năng hỗ trợ tăng tốc độ website WordPress: Bạn sẽ cần các máy chủ sử dụng công nghệ LiteSpeed Cache thay cho các máy chủ Nghinx hay Linus. Các Module tối ưu có sẵn như: LiteSpeed Cache, Smush Pro, Rank Math SEO Pro sẽ giúp bạn có được website chất lượng và tốn ít chi phí đầu tư.
Một sự lựa chọn tốt để tăng tốc độ website WordPress cho bạn là sử dụng hosting của AZdigi. Bạn có thể tham khảo giá và thông số Hosting của họ tại đây →
Bước 2: Sử dụng Theme nhẹ nhất và những Plugin tốt nhất để tăng tốc độ Website WordPress:
Các Theme không tốt là các Theme có chứa quá nhiều mã thừa không cần thiết. Trong khi các Theme nhẹ nhất sẽ mang đến tăng tốc độ website WordPress lên đáng kể. 3 mẫu Theme bạn nên tham khảo như: GeneratePress Pro , Astra Pro, Hello Theme + Elementor Pro.
Hello Theme + Elementor Pro ưu điểm là tạo website nhanh, tiết kiệm thời gian, kéo thả tiện lợi, ai cũng có thể làm được. Nhược điểm là phải mất nhiều công sức tối ưu để tăng tốc độ website WordPress, và dù đã tối ưu hết mức cũng khó thể sánh được với Astra Pro và GeneratePress.
Astra Pro được tích hợp nhiều tính năng tùy chỉnh trong Theme, tốc độ tải Theme cũng rất nhanh. Chỉ sau GeneratePress Pro. Nhược điểm của Astra Pro gần như không có, nhưng nếu bạn là 1 fan cuồng của hiệu năng thì GeneratePress nhỉnh hơn.
GeneratePress Pro: Đây là Theme số một về hiệu suất trên Wordpress. Có nó chắc chắn Website của bạn sẽ chạy nhanh và mượt mà hơn rất nhiều. Website Kim Quy được tạo trên nền tảng của Theme này. GeneratePress chỉ thực hiện khoảng 10 yêu cầu HTTP và tải dưới 10KiB dữ liệu. Không một Theme nào của WordPress nhỏ gọn như vậy. Tuy nhiên nhược điểm của Theme này là nó đòi hỏi bạn phải kiên nhẫn và mất nhiều thời gian để tìm hiểu hơn. Sẽ không vấn đề gì nếu như bạn là một người đam mê công nghệ.
Đây là điểm số của Kim Quy trước và sau khi dùng GeneratePress (Bạn có thể nhận được mã giảm giá và mua theme GeneratePress tại đây →):
Sau 3 tuần nghiên cứu, Kim Quy đã đạt được kết quả 100/100 trên cả Desktop và Mobile
Bước 3: Cấu hình Hosting chuẩn:
- Đầu tiên bạn cần cài LiteSpeed Cache trên máy chủ (Liên hệ nhà cung cấp dịch vụ Hosting để họ hỗ trợ bạn)
2. Cài bản PHP 8.1, bật module Imagick và opcache (Imagick để tối ưu ảnh còn opcache là điều kiện cần để kích hoạt tính năng tải trước dữ liệu trên website). Bạn có thể liên hệ đơn vị cung cấp dịch vụ Hosting hoặc đăng nhập Cpanel và tự làm theo hướng dẫn.
3. Nâng cấp ngay version PHP lên bản 8.1 khi có thể (hiện tại đã ra PHP 8.2 chưa thực sự ổn định với Woocommerce). Việc nâng cấp này có thể nhanh hơn 45% so với phiên bản 7.4
Bước 4: Giảm lượng DOM và giảm mã HTML không cần thiết:
Bạn có thể tiết kiệm được 20% – 30% DOM và giảm Mã HTML không cần thiết thông qua việc giảm bớt các thẻ HTML, optimize layout. Hãy nhớ, càng giảm được nhiều thẻ trong HTML, số lượng phần tử DOM càng giảm xuống, HTML cũng giảm và website của bạn càng được tăng tốc. Xem viddeo ví dụ sau đây:
Bước 5: Sử dụng trình tạo trang Guitenberg thay cho các Page Builder:
Những người làm Blogger chuyên nghiệp đều hiểu rằng, để tăng tốc độ website WordPress, họ cần phải rất hạn chế sử dụng các trình tạo trang như Elementor, Beaver, WPBakery, Thrive, Didi… Không thể phủ nhận tính thuận lợi mà các trình tạo trang mang đến cho bạn, tuy nhiên đổi lại, tốc độ website của bạn sẽ chậm hơn 1 chút so với sử dụng khối Guitenberg sẵn có của WordPress. Vì thế, hãy cân nhắc lựa chọn này.
Bước 6: Sử dụng Module LiteSpeed Cache để tăng tốc độ Website WordPress:
Cài đặt LiteSpeed Cache từ giao diện Plugin, Plugin này miễn phí nhưng nó yêu cầu máy chủ của bạn phải được cài LiteSpeed Cache. Nó sẽ giúp bạn tăng tốc độ website WordPress lên đáng kể.
Lưu ý, bạn chỉ bật tối ưu CSS, JS, tối ưu cơ sở dữ liệu. Không cần bật CDN nếu khách hàng của bạn chủ yếu là trong nước. Không bật tối ưu ảnh, vì nó sẽ bị xung đột với module Smush Pro mà chúng ta chuẩn bị sử dụng sau đây.
Tham khảo cấu hình LiteSpeed Cache sau:
Sử dụng CDN của QUIC vì tính tương thích của nó với LiteSpeed Cache, dễ cài đặt và vì hiện nay QUIC đã có POPs tại Việt Nam. Tham khảo bài viết của Kiến Càng nhé: Có 4 bài: https://kiencang.net/hd-plugin-litespeed-cache-p1/, https://kiencang.net/hd-plugin-litespeed-cache-p2/, https://kiencang.net/hd-plugin-litespeed-cache-p3/, https://kiencang.net/page-optimization-litespeed-cache/. Đây là kết quả tối ưu mình dễ dàng đạt được với GTMetrix, nhanh và giảm tải cho máy chủ khá nhiều để máy chủ tập trung vào xử lý các lệnh PHP:
Bước 7: Sử dụng Module Smush Pro để tối ưu hình ảnh và tạo ra ảnh WebP:
Module này rất dễ cấu hình và mang lại hiệu suất cũng thực sự đáng nể.
Update: Giờ bạn sẽ không cần dùng Module này nữa mà dùng LiteSpeed Cache + CDN QUIC để tối ưu. Ưu điểm là ảnh được tối ưu từ QUIC nên máy chủ nhẹ nhàng. Ngoài ra có những cài đặt để bạn giảm bớt dung lượng cho sự lưu trữ ảnh (xem video Kiến Càng ở trên)
Bước 8: Sử dụng Module Perfmatters để cắt giảm toàn bộ JS và CSS không cần thiết:
Bước 9: Tắt tất cả các Module không cần thiết:
Sau rất nhiều công sức để tối ưu. Bây giờ bạn cần tìm lại xem có module nào không dùng hoặc ít dùng? Themes nào không dùng đến? Cân nhắc tắt những lựa chọn đó, hoặc tốt nhất là xóa đi.
Bước 10: Lưu trữ cục bộ cho mã Google Analytics, Google Font:
Dùng Perfmatters để làm việc này
Bước 11: Bật tính năng tải trước cho các mã nhúng của bên thứ 3 như GTM, Remarketing Tag, HeatMap:
Một lần nữa bạn sử dụng Perfmatters để làm việc này
Bước 12: Bật tính năng tải trước cho website qua LiteSpeed Cache:
Sử dụng LiteSpeed Cache để bật Instant Click
Bước 13: Tối ưu cơ sở dữ liệu bằng LiteSpeed Cache và WP-Optimize – Clean, Compress, Cache:
Sử dụng LiteSpeed Cache để xóa sạch các bản ghi không cần thiết trong cơ sở dữ liệu.
Ngoài ra nếu bạn có phục vụ các khách hàng từ nhiều Quốc gia khách nhau trên thế giới, bạn cần mua và sử dụng CDN. LiteSpeed Cache cũng có cung cấp CDN, đó là https://quic.cloud/.
Big new Update:
Bước 14: Bật HPOS (High Performance Orders Storage):
Woo ra mắt High-Performance order storage (HPOS) (COT) và Use the WooCommerce orders tables để tăng tốc độ Website Wordpress, bạn nào muốn tìm hiểu bản nâng cấp này có gì có thể tìm hiểu tại đây: https://developer.woocommerce.com/…/performance…/
Tạo đơn hàng: Hiệu suất chèn theo thứ tự được cải thiện gấp 5 lần
Thanh toán: sự cải thiện khoảng 1,5 lần khi thanh toán
Việc thêm các chỉ mục sẽ tăng tốc độ tra cứu truy vấn meta, khoảng 10 lần trong mã đo điểm chuẩn bên dưới
Lọc theo cột được lập chỉ mục trong HPOS, truy vấn này để nhận tất cả các đơn đặt hàng cho khách hàng hiện nhanh hơn 40 lần
Tìm kiếm đơn hàng theo các cột không được lập chỉ mục điều này mang lại cho chúng tôi những cải tiến lên tới 3 lần
Woocommerce.com sẽ thấy dữ liệu bảng meta bài đăng giảm 97%
Update: Đã thao tác thành công. Các bước như sau
Bước 1: Vào Woo => Setting => Advance => Features, chọn High-Performance order storage (COT), chọn Enable.
Bước 2: Qua Woo => Setting => Advance => Custom data stores. Bật Keep the posts table and the orders tables synchronized để nó kéo đơn hàng về bảng mới, sau đó đợi kéo order. Lưu ý không bật: Use database transactions for the orders data synchronization nếu không order sẽ không kéo về được.
Bước 3: Sau khi kéo xong order, chọn Use the WooCommerce orders tables, bỏ tích Keep the posts table and the orders tables synchronized đi vì bây giờ không cần dùng bảng post để chứa order nữa.
Bước 4: Qua đặt hàng để kiểm tra lại.
Lưu ý quan trọng:
1. Nếu đang dùng LiteSpeed Cache để tăng tốc độ Website Wordpress, bật Object Cache sẽ gặp lỗi không đặt đơn hàng thành công và lỗi không xóa được đơn hàng trong Back-end. Nguyên nhân do LiteSpeed đang chưa theo kịp, vẫn coi products là post. Chỉ cần tắt Object Cache đi là được. Sau này LiteSpeed Cache update phiên bản mới thì mình bật lại.
2. Nếu thấy đơn hàng không chịu đồng bộ từ bảng cũ sang bảng mới (vào woo=> order không thấy đơn hàng), thì Vào Woo => Setting => Advance => Features, chọn High-Performance order storage (COT), tắt đi save(). Để cho chắc, Vào Woo => Status => Tool=> Delete the custom orders tables Delete đi xong. Sau đó Vào Woo => Setting => Advance => Features, chọn High-Performance order storage (COT), chọn Enable lại.
Sau khi đã làm theo tất cả các bước hướng dẫn trên, bạn hãy kiểm tra lại chỉ số website của mình trên Google Lighthouse và trải nghiệm nhé. Chúc bạn thành công!
