Hồi cuối năm 2021, mình đã hoàn thành việc tối tốc độ và Core Web Vitals cho website Lành Kitchen và Keeb VN. Cả hai trang web đều load nhanh hơn hẳn. Đồng thời điểm điểm Core Web Vital từ Google Pagespeed đều đươc chuyển từ Đỏ (Fail) qua Xanh lá (Pass)
Core Web Vitals là gì?
Web Vitals tập hợp 7 chỉ số thiết yếu của website bao gồm các khía cạnh liên quan đến trải nghiệm người dùng trên trang, được đo bởi Chrome UX Report và Google Search Console nhằm đánh giá performance của website và xếp hạng điểm SEO.
Trong đó, 03 tiêu chí mà Google xem là quan trọng cốt lõi (Core Web Vitals) ảnh hưởng nhiều nhất đến trải nghiệm người dùng trên trang web là:
- Loading – Largest Contentful Paint (LCP): Tốc độ tải trang
- Interactivity- First Input Delay (FID): Khả năng tương tác
- Visual stability – Cumulative Layout Shift (CLS): Tính ổn định của trang web.
Kết quả test Pagespeed của Lành Kitchen (https://lanhkitchen.com)
Kết quả test Pagespeed của Keeb VN (https://keeb.vn)
Các bạn có thể xem lại Case Study mình đã chia sẻ dưới đây
Sau khi hoàn thành việc tối ưu cho 2 website trên, mình bắt tay tiếp vào việc cải tạo cho website YCB – trang bán hàng chạy bộ / ba môn phối hợp.
So với 2 web đã thực hiện trước đó, YCB có quy mô lớn hơn nhiều, cả về số lượng sản phẩm, số đơn hàng và các tính năng được tích hợp. Công việc tối ưu vì thế sẽ gặp nhiều khó khăn hơn hẳn, cần phải kiểm tra rất kỹ từng thay đổi trên trang web để tránh xảy ra tình trạng các plugins đụng chạm nhau gây lỗi không thể tải trang.
Công việc được bắt đầu từ giữa tháng 01/2022 trên trang web nháp Staging thử nghiệm , sao chép từ trang chính. Đến giữa tháng 02/2022, các thay đổi được áp dụng lên trang web chính. Tốn thêm 3 tháng nữa để mình theo dõi và tối ưu, website YCB.vn đã và đang hoạt động ngon lành. Mọi thông số đều được cải thiện rõ rệt so với thời điểm tước khi được cải tạo.
Dưới đây là tóm tắt lại quá trình thực hiện tối ưu website YCB.vn
Mục Lục
I. Trước khi tối ưu
Dưới đây là các thông số của website YCB.vn trước khi được tối ưu để có cơ sở đối chiếu với kết quả sau khi hoàn thành công việc.
1. Thông tin VPS
Website YCB được cài đặt trên VPS KVM SSD của AZDigi, đặt tại TP.HCM. Cấu hình 3 vCPU, 4GB RAM.
Chi tiết bench YABS như sau
# ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## #
# Yet-Another-Bench-Script #
# v2022-05-06 #
# https://github.com/masonr/yet-another-bench-script #
# ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## #
Thu 26 May 2022 06:43:22 PM +07
Basic System Information:
---------------------------------
Uptime : 308 days, 8 hours, 35 minutes
Processor : QEMU Virtual CPU version 2.5+
CPU cores : 3 @ 2399.996 MHz
AES-NI : ❌ Disabled
VM-x/AMD-V : ❌ Disabled
RAM : 3.9 GiB
Swap : 3.9 GiB
Disk : 32.9 GiB
Distro : Ubuntu 20.04.2 LTS
Kernel : 5.4.0-80-generic
fio Disk Speed Tests (Mixed R/W 50/50):
---------------------------------
Block Size | 4k (IOPS) | 64k (IOPS)
------ | --- ---- | ---- ----
Read | 33.63 MB/s (8.4k) | 383.43 MB/s (5.9k)
Write | 33.72 MB/s (8.4k) | 385.45 MB/s (6.0k)
Total | 67.35 MB/s (16.8k) | 768.89 MB/s (12.0k)
| |
Block Size | 512k (IOPS) | 1m (IOPS)
------ | --- ---- | ---- ----
Read | 497.89 MB/s (972) | 497.44 MB/s (485)
Write | 524.35 MB/s (1.0k) | 530.57 MB/s (518)
Total | 1.02 GB/s (1.9k) | 1.02 GB/s (1.0k)
iperf3 Network Speed Tests (IPv4):
---------------------------------
Provider | Location (Link) | Send Speed | Recv Speed
| | |
Clouvider | London, UK (10G) | 63.2 Mbits/sec | 58.9 Mbits/sec
Online.net | Paris, FR (10G) | 47.5 Mbits/sec | 70.5 Mbits/sec
Hybula | The Netherlands (40G) | 70.4 Mbits/sec | 70.6 Mbits/sec
Clouvider | NYC, NY, US (10G) | 65.3 Mbits/sec | 67.4 Mbits/sec
Velocity Online | Tallahassee, FL, US (10G) | busy | busy
Clouvider | Los Angeles, CA, US (10G) | 85.6 Mbits/sec | 71.7 Mbits/sec
Geekbench 5 Benchmark Test:
---------------------------------
Test | Value
|
Single Core | 480
Multi Core | 1091
Full Test | https://browser.geekbench.com/v5/cpu/15131764Code language: YAML (yaml)Trước khi thực hiện tối ưu, website thường xuyên bị đơ đơ mỗi khi mình thực hiện các thao tác Bulk Edit (chỉnh sửa cùng lúc nhiều sản phẩm). Nhiều khả năng là do VPS hiệu năng kém, không đủ lực đảm đang các tác vụ nặng.
2. Web Server, theme và plugins đang dùng
- Webserver: OpenLiteSpeed kết hợp cùng plugin LiteSpeed Cache.
- Theme: Astra Pro
- Plugin: Danh sách hơn 100 plugin đang được kích hoạt dưới đây. (Bạn không nhìn lầm đâu, mình sử dụng đến 109 plugins trên website YCB.vn)
+----------------------------------------------------------+--------+-----------+------------+
| name | status | update | version |
+----------------------------------------------------------+--------+-----------+------------+
| advanced-custom-fields-pro | active | none | 5.11.4 |
| ascendoor-metadata-manager | active | none | 1.0.0 |
| astra-addon | active | none | 3.6.5 |
| wp-marketing-automations-connectors | active | none | 2.0.5 |
| wp-marketing-automations | active | none | 2.0.8 |
| wp-marketing-automations-pro | active | none | 2.0.7 |
| back-in-stock-notifier-for-woocommerce | active | none | 2.6.1 |
| blocks-css | active | none | 1.7.4 |
| woocommerce-jetpack | active | available | 5.5.0 |
| booster-plus-for-woocommerce | active | available | 5.5.0 |
| breadcrumb-navxt | active | none | 7.0.2 |
| Breadcrumb-NavXT-Schema-master | active | none | 1.0.0 |
| cart-notices-for-woocommerce | active | available | 3.5.7.2 |
| code-snippets | active | none | 2.14.3 |
| conditional-payments-for-woocommerce | active | none | 2.2.4 |
| devvn-woo-ghn | active | none | 3.0.1 |
| disable-cart-fragments | active | none | 2.0 |
| woo-discount-price | active | none | 1.3.2 |
| elementor | active | available | 3.5.3 |
| block-builder | active | none | 1.0.1 |
| elementor-pro | active | none | 3.5.2 |
| enable-media-replace | active | none | 3.6.3 |
| fancy-product-designer | active | none | 4.5.4 |
| finale-woocommerce-sales-countdown-timer-discount-plugin | active | none | 2.18.0 |
| finale-woocommerce-deal-pages | active | none | 1.4.1 |
| fluentform | active | none | 4.3.0 |
| fluent-smtp | active | none | 2.1.0 |
| flying-pages | active | none | 2.4.2 |
| formidable | active | none | 5.1 |
| formidable-pro | active | none | 5.1 |
| free-shipping-label | active | available | 2.1.1 |
| fr-multi-bank-transfer-payment-gateways-for-woocommerce | active | none | 1.1.0 |
| full-screen-morphing-search | active | none | 3.5 |
| google-language-translator | active | none | 6.0.13 |
| kadence-blocks | active | none | 2.2.3 |
| layout-grid | active | none | 1.8 |
| litespeed-cache | active | none | 4.4.7 |
| loco-translate | active | none | 2.5.8 |
| onepay-payment-gateway-for-woocommerce-tragop | active | none | 1.4.2 |
| onepay-payment-gateway-for-woocommerce-paygate | active | none | 1.4.3 |
| mtekk-Order-Bender-9147199 | active | none | 0.7.2 |
| plugin-toggle | active | none | 1.3.1 |
| seo-by-rank-math | active | none | 1.0.81.1 |
| redirection | active | none | 5.2.2 |
| remove-widget-titles | active | none | 1.0 |
| replyme | active | none | 1.0.5 |
| safe-svg | active | none | 1.9.9 |
| wp-schema-pro | active | none | 2.7.2 |
| simple-image-sizes | active | none | 3.2.1 |
| simple-social-icons | active | none | 3.0.2 |
| slash-edit | active | none | 1.1.1 |
| smntcs-woocommerce-quantity-buttons | active | available | 1.25 |
| tablepress | active | none | 1.14 |
| tablepress-responsive-tables | active | none | 1.8 |
| twenty20 | active | none | 1.5.7 |
| ultimate-elementor | active | available | 1.35.3 |
| ultimate-addons-for-gutenberg | active | available | 1.25.2 |
| updraftplus | active | available | 2.16.69.25 |
| user-menus | active | none | 1.2.7 |
| user-role-editor | active | available | 4.61 |
| VNPAYWoocommerce | active | none | 1.0.2 |
| webp-express | active | none | 0.25.0 |
| widget-options | active | none | 3.7.10 |
| woocommerce | active | available | 5.9.0 |
| woocommerce-advanced-bulk-edit | active | none | 4.6.2.3 |
| iconic-woo-attribute-swatches-premium | active | none | 1.3.4 |
| woocommerce-google-analytics-integration | active | available | 1.5.5 |
| iconic-woo-linked-variations-premium | active | none | 1.0.11 |
| woocommerce-pdf-invoices-packing-slips | active | available | 2.11.1 |
| woocommerce-points-and-rewards | active | available | 1.7.3 |
| woocommerce-product-sku-generator | active | none | 2.4.5 |
| woocommerce-sequential-order-numbers | active | none | 1.9.5 |
| woocommerce-shopee-integration | active | none | 1.0.0 |
| thank-you-page-for-woocommerce-nextmove | active | none | 1.15.1 |
| nextmove-power-pack | active | none | 1.2.0 |
| woo-discount-rules | active | none | 2.3.12 |
| woo-discount-rules-pro | active | none | 2.3.12 |
| funnel-builder | active | available | 2.0.0 |
| funnel-builder-pro | active | available | 2.0.0 |
| woothumbs-premium | active | none | 4.8.4 |
| wp-add-custom-css | active | none | 1.1.6 |
| goodbye-captcha | active | none | 3.1.43 |
| wp-bruiser-woocommerce | active | none | 3.1.39 |
| wpc-ajax-add-to-cart | active | none | 1.4.0 |
| wpc-composite-products | active | available | 4.1.0 |
| woo-fly-cart-premium | active | available | 4.2.2 |
| woo-bought-together-premium | active | available | 4.0.1 |
| woo-product-bundle-premium | active | available | 6.0.2 |
| wpc-variations-radio-buttons | active | available | 2.5.6 |
| wp-grid-builder | active | none | 1.6.2 |
| wp-grid-builder-caching | active | none | 1.0.7 |
| wp-search-with-algolia | active | available | 1.8.0 |
| wp-sitemap-page | active | none | 1.9.1 |
| google-sitemap-generator | active | none | 4.1.1 |
| yith-point-of-sale-for-woocommerce-premium | active | none | 1.0.5 |
| yith-woocommerce-best-sellers-premium | active | none | 1.1.14 |
| yith-woocommerce-brands-add-on-premium | active | none | 1.3.8 |
| yith-woocommerce-tab-manager-premium | active | none | 1.2.28 |
| yith-woocommerce-wishlist-premium | active | none | 3.0.17 |
+----------------------------------------------------------+--------+-----------+------------+Code language: Dockerfile (dockerfile)3. Kết quả Pagespeed
Thực hiện test thử Core Web Vitals với Page Speed, Google báo ngay kết quả: Failed (điểm Core Web Vital quá kém).
Kết quả chi tiết của trang chủ https://ycb.vn:
Còn đây là kết quả của trang Shop (https://ycb.vn/shop):
Có thể thấy rõ là kết quả rất tệ, từ Mobile qua Desktop điểm đều kém cần phải khắc phục càng sớm càng tốt.
II. Tối ưu tốc độ
Mình thực hiện các bước như sau để cải tạo lại website
1. Đổi VPS xịn hơn
Việc đầu tiên mình làm là chuyển nhà cho website qua VPS xịn hơn. Mình đổi qua dùng VPS của GreenCloudVPS, server đặt tại HongKong, cấu hình 2 Cores Ryzen CPU + 50 GB SSD NVMe 4.0
# ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## #
# Yet-Another-Bench-Script #
# v2022-02-18 #
# https://github.com/masonr/yet-another-bench-script #
# ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## #
Fri 25 Feb 2022 02:20:49 AM GMT
Basic System Information:
---------------------------------
Processor : AMD Ryzen 9 5950X 16-Core Processor
CPU cores : 2 @ 3393.624 MHz
AES-NI : ✔ Enabled
VM-x/AMD-V : ✔ Enabled
RAM : 3.8 GiB
Swap : 4.0 GiB
Disk : 46.7 GiB
fio Disk Speed Tests (Mixed R/W 50/50):
---------------------------------
Block Size | 4k (IOPS) | 64k (IOPS)
------ | --- ---- | ---- ----
Read | 522.42 MB/s (130.6k) | 3.43 GB/s (53.6k)
Write | 523.80 MB/s (130.9k) | 3.45 GB/s (53.9k)
Total | 1.04 GB/s (261.5k) | 6.88 GB/s (107.6k)
| |
Block Size | 512k (IOPS) | 1m (IOPS)
------ | --- ---- | ---- ----
Read | 3.78 GB/s (7.3k) | 3.83 GB/s (3.7k)
Write | 3.98 GB/s (7.7k) | 4.09 GB/s (3.9k)
Total | 7.76 GB/s (15.1k) | 7.92 GB/s (7.7k)
iperf3 Network Speed Tests (IPv4):
---------------------------------
Provider | Location (Link) | Send Speed | Recv Speed
| | |
Clouvider | London, UK (10G) | 94.1 Mbits/sec | 25.0 Mbits/sec
Online.net | Paris, FR (10G) | busy | 135 Mbits/sec
WorldStream | The Netherlands (10G) | 69.2 Mbits/sec | 75.7 Mbits/sec
WebHorizon | Singapore (400M) | busy | busy
Clouvider | NYC, NY, US (10G) | 76.4 Mbits/sec | 74.1 Mbits/sec
Velocity Online | Tallahassee, FL, US (10G) | 187 Mbits/sec | 188 Mbits/sec
Clouvider | Los Angeles, CA, US (10G) | 84.6 Mbits/sec | 93.4 Mbits/sec
Iveloz Telecom | Sao Paulo, BR (2G) | 101 Mbits/sec | 73.6 Mbits/sec
Geekbench 5 Benchmark Test:
---------------------------------
Test | Value
|
Single Core | 1404
Multi Core | 2510
Full Test | https://browser.geekbench.com/v5/cpu/12999109Code language: YAML (yaml)VPS mới chỉ có 2 Core vCPU nhưng đây là core xịn của CPU AMD Ryzen 5950X đời mới nhất. Điểm Geekbench Multicore đạt 2510, nhanh hơn gấp đôi so với điểm Multicore của cái VPS 3 Core của AZDigi – 1091. Ngoài ra, tốc độ ổ cứng NVMe 4.0 của bên GreenCloudVPS nhanh hơn gần gấp 10 so với bên AZDigi.
Chỉ với việc thay thế VPS mới xịn hơn, mình đã có thể cảm nhận được ngay sự khác biệt trong tốc độ tải trang và các thao tác thực hiện trong Dashboard. Mọi thứ chạy nhanh hơn hẳn.
2. Đổi qua theme Kadence
Theme Kadence hiện tại là lựa chọn hàng đầu của mình cho các trang web sử dụng Woocommerce. Nó được tích hợp rất nhiều tính năng giúp việc tuỳ biến website trở nên dễ dàng, linh hoaojt hơn.
Quan trọng nhất tốc độ tải trang của Kadence nhanh hơn rất nhiều so với theme Astra. Cả hai website Lành Kitchen và Keeb VN trước đây cũng đã được đổi từ theme Astra qua Kadence.
2. Thay Elementor bằng Gutenberg
Gutenberg giờ là lựa chọn ưu tiên của mình để xây dựng Landing Page. Plugin Elementor được loại bỏ và thay bằng Gutenberg để tối ưu tốc độ tải trang.
Kết hợp thêm plugin Kadence Blocks, mình có thể xây dựng bất kỳ Landing Page nào bằng Gutenberg, không cần dùng đến Elementor nữa.
3. Tắt bớt plugin không cần thiết
Nhờ việc đổi qua theme Kadence và loại bỏ Elementor, mình đã dẹp bỏ được ít nhất 5 plugins không còn liên quan. Ngoài ra, mình đã tắt thêm ít nhất 10 plugins khác không còn nhu cầu sử dụng.
Số lượng plugins đang dùng hiện tại trên website Ycb.vn là 99 plugin. Số lượng nhiều nhưng hoàn toàn không ảnh hưởng đến hiệu năng hoạt động.
4. Tối ưu thiết lập Litespeed Cache
Mình điều chỉnh lại các thiết lập Litespeed Cache cho phù hợp với cấu trúc mới của website. Tóm tắt thông số như sau:
Trang General:
- Guest Mode: On
- Guest Optimization: On
Trang Cache:
- Cache: On
- Object Cache: On (Redis)
- ESI: Off
- Browser Cache: On
Trang Page Optimization: (Off hết)
- CSS Minify: Off
- CSS Combine: Off
- JS Minify: Off
- JS Combine: Off
- HTML Minify: Off
- Lazy Load Images: Off
- Gravatar Cache: Off
Phần thiết lập trên là tuỳ theo mỗi trang web. Cần phải thử nghiệm mới tìm ra thiết lập phù hợp nhất. Không nên copy y hệt nhé.
5. Cài đặt plugin Perfmatters
Vũ khí bí mật của mình khi tối ưu lần này là sử dụng plugin Perfmatters (trả phí) để tối ưu JS / CSS cho Front-end. Hai tính năng giúp cải thiện Core Web Vitals rõ rệt là Delay Javascript và Remove Unused CSS.
III. Thành quả sau khi tối ưu
Trước khi kiểm tra điểm số Pagespeed, mình xoá hết cache của LiteSpeed – Purge All để hệ thống tạo ra cache mới nhất. Sau đó truy cập https://pagespeed.web.dev/ để check
1. Trang chủ Ycb.vn
Thông số Core Web Vitals (CWV) giờ đã được chuyển thành Xanh lá: Đã đạt (Passed)
Kết quả đo hiệu suất nhận được điểm gần như tuyệt đối: 99 (Mobile) và 100 (Desktop)
2. Trang Shop Page
Kiểm tra tiếp trang shop page, đạt được 93 (Mobile) và 100 (Desktop)
3. Trang sản phẩm
Thử test thêm 1 trang sản phẩm bất kỳ. Kết quả cũng ngon lành: 97 (Mobile) và 100 (Desktop)
Công việc tối ưu website YCB.vn đã thành công vượt ngoài mong đợi. Website không chỉ load nhanh như bay mà còn đáp ứng tốt yêu cầu Core Web Vitals từ Google, không lo bị đánh tụt hạng SEO.
Nếu bài viết của mình mang đến thông tin, kiến thức hữu ích cho bạn, đừng ngại mời mình ly bia để có thêm động lực chia sẻ nhiều hơn nữa. Cám ơn bạn!
Bài viết liên quan
7 trả lời trong “[Case Study] Tối ưu tốc độ và Core Web Vitals website YCB.vn đạt 99 (Mobile) – 100 (Desktop)”
Anh thuận đánh giá sao về Blocksy so với Kadence?
Mình chưa dùng qua Blocksy. Chỉ mới dùng Kadence và thấy nó nhanh và tiện hơn rất nhiều so với Astra và Genesis Framework.
Cám ơn anh đã chia sẻ, Em cũng đang tìm hiểu WooFunnels anh cho em xin chút đánh giá được không ạ?
WooFunnels có vô số tính năng mà mình chưa mò hết. Nói chung là hoàn toàn hài lòng, mình mua luôn tài khoản Lifetime cho khỏi quan tâm renew mỗi năm.
Dạ, Tuyệt quá ạ.
Em muốn thêm:
1- Giữa giải pháp WP so với dùng các nên tảng khác như Sapo, hay Haravan thì điều gì là khác biệt (Bởi em thấy về giá thì nó tương đương nhau)?
2- Anh Thuận có dùng thêm thằng Autonami (Tiện ích mở rộng của WooFunnels, em tham khảo thấy có tính năng Abandoned Cart Recovery và Dynamic Coupons rất hay) cho giải pháp Email marketing không? hay dùng giải pháp Email Marketing nào?
1. Mình chọn WP vì có thể tùy biến mọi thứ theo ý của mình, và quan trọng hơn là không bị phụ thuộc vào bên thứ 3. Lỡ 1 ngày đẹp trời nó tăng giá gấp 3 hoặc nó bị phá sản thì coi như đi toi cái shop online của mình
2. Mình dùng Autonami luôn, chung nhà với WooFunnel.
Dạ, Em cám ơn anh Thuận nhiều nha.