13 bước tăng tốc độ Website WordPress theo chuẩn Google

duongtran
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 VitalsLighthouse:

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

    Tối ưu hóa website wordpress lighthose core web vitals 1

    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ốc độ Website WordPress theo chuẩn Google

    Tỉ trọng điểm của từng chỉ số được phân bổ như sau:

    tốc độ Website WordPress theo chuẩn Google - Lighthouse
    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%
    LCPTBT 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.

    Khi CLS là 0,31s. Điểm CLS chỉ đạt 38, do đó tổng điểm Performance chỉ đạt 96 điểm.
    Tối ưu hóa website wordpress lighthose core web vitals 2
    Khi CLS được giảm xuống 0,06s. Điểm CLS tăng lên 98, do đó tổng điểm Performance tăng lên 99 điểm. Đây là các tiêu chuẩn mà tôi đã vượt qua trong bài đánh giá hiệu suất của Google:
    Tối ưu hóa website wordpress lighthose core web vitals 3
    30 tiêu chuẩn đã được vượt qua.

    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ể:

    Tối ưu hóa website wordpress lighthose core web vitals 4
    Tăng tốc độ website wordpress lighthose core web vitals

    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:
      1. Ổ 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.
      2. Số nhân CPU: Càng cao càng tốt
      3. Dung lượng Ram: Lớn và thế hệ mới nhất DDR4 hoặc DDR3.
      4. Number of Processes: Số tiến trình có thể sử lý đồng thời, càng lớn càng tốt.
      5. 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 →):

    Tối ưu hóa website wordpress lighthose core web vitals 5
    Hello Theme + Elementor Pro với 100 điểm trên Desktop và 67 điểm trên Mobile
    13 bước tối ưu tốc độ Website WordPress theo tiêu chuẩn Google Lighthouse Web Vitals
    100/100 với GeneratePress trên máy tính bàn
    13 bước tối ưu tốc độ Website WordPress theo tiêu chuẩn Google Lighthouse Web Vitals 2
    98/100 với GeneratePress trên mobile
    Tối ưu hóa website wordpress lighthose core web vitals 6
    Tăng tốc độ Website WordPress 100/100

    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:

    1. Đầ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 7.4, 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.

    Chọn PHP Version
    Chọn tab Extensions, chuyển sang version 7.4 nhé. Trong hình này là 8.0
    Bật Imagick và Opcache
    Sau đó quay lại MutilPHP Manager, chọn website cần chỉnh sửa. Chọn PHP Version 7.4, rồi Apply

    3. Nâng cấp ngay version PHP lên bản 8.0 khi có thể (hiện tại PHP 8.0 đang thiếu function Imagick nên mình chưa nâng cấp). 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.

    Trình tạo khối Guitenberg
    Trình tạo khối Guitenberg
    Trình tạo trang Elementor

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

    Cài đặt LiteSpeedCache
    Tăng tốc độ website WordPress - Tối ưu hóa LiteSpeed Cache - Tổng quan
    Kết quả thu được sau khì cài đặt LiteSpeed Cache, tăng tốc độ tải trang thêm 59% và cải thiện 1 chút điểm PageSpeed

    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:

    Tăng tốc độ website WordPress - Tối ưu hóa LiteSpeed Cache
    Tăng tốc độ website WordPress – Tối ưu hóa LiteSpeed Cache – Tổng quan
    Tăng tốc độ website WordPress - Tối ưu hóa LiteSpeed Cache - Cache
    Tăng tốc độ website WordPress – Tối ưu hóa LiteSpeed Cache – Cache
    Tăng tốc độ website WordPress - Tối ưu hóa LiteSpeed Cache - TTL
    Tăng tốc độ website WordPress – Tối ưu hóa LiteSpeed Cache – TTL
    Tăng tốc độ website WordPress - Tối ưu hóa LiteSpeed Cache - dọn dẹp
    Tăng tốc độ website WordPress – Tối ưu hóa LiteSpeed Cache
    Tăng tốc độ website WordPress - Tối ưu hóa LiteSpeed Cache
    Tăng tốc độ website WordPress – Tối ưu hóa LiteSpeed Cache
    Tăng tốc độ website WordPress - Tối ưu hóa LiteSpeed Cache - Object
    Tăng tốc độ website WordPress – Tối ưu hóa LiteSpeed Cache – Object
    Tăng tốc độ website WordPress - Tối ưu hóa LiteSpeed Cache - Trình duyệt
    Tăng tốc độ website WordPress – Tối ưu hóa LiteSpeed Cache
    Tăng tốc độ website WordPress - Tối ưu hóa LiteSpeed Cache - Instant Click
    Tăng tốc độ website WordPress – Tối ưu hóa LiteSpeed Cache – Instant Click, cực mạnh
    Tăng tốc độ website WordPress - Tối ưu hóa LiteSpeed Cache - WooCommerce
    Tăng tốc độ website WordPress – Tối ưu hóa LiteSpeed Cache – Woocomerce

    Bước 7: Sử dụng Module Smush Pro để tối ưu hình ảnh và tạo ra ảnh WebP:

    Tăng tốc website WordPress bằng Smush Pro
    Tăng tốc độ website WordPress bằng Smush Pro
    Tăng tốc website WordPress bằng Smush Pro
    Tăng tốc độ website WordPress bằng Smush Pro

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

    Bước 8: Sử dụng Module Perfmatters để cắt giảm toàn bộ JS và CSS không cần thiết:

    Tăng tốc độ website WordPress bằng cách tắt các yếu tố không cần thiết
    Tăng tốc độ website WordPress bằng cách tắt các yếu tố không cần thiết
    Bật Script Manager để kiểm soát JS và CSS trên Admin Bar
    Kết nối trước với tài nguyên của bên thứ 3
    DNS Prefetch
    Không bật Lazy Loading, để Smush Pro làm việc này
    Nếu bạn dùng Google Font thì cần bật Local Google Fonts
    Không cần bật CDN nếu bạn không có hoặc khách hàng của bạn chỉ ở trong lãnh thổ Việt Nam
    Bật Enable Local Analytics, kiểm tra mã này có đang ở đâu đó không? Nếu có thì tắt các chỗ khác đó đi
    Kiểm soát các mã JS và CSS thừa (yêu cầu phải bật Script Manager ở bước trước đó)

    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

    Nếu bạn dùng Google Font thì cần bật Local Google Fonts

    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

    Kết nối trước với tài nguyên của bên thứ 3
    DNS Prefetch

    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

    Tăng tốc độ website WordPress - Tối ưu hóa LiteSpeed Cache - Instant Click
    Tăng tốc độ website WordPress – Tối ưu hóa LiteSpeed Cache – Instant Click, cực mạnh

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

    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!

    Viết một bình luận