Cách tối ưu điểm hiệu xuất GOOGLE LIGHTHOUSE cho WordPress
Thang điểm: Điểm số này từ 0-49 là điểm kém màu đỏ không tốt, điểm từ 50-89 là điểm trung bình màu vàng và điểm từ 89-100 là điểm tốt màu xanh, các bạn cố gắng đạt điểm trên 90.
CÁCH TỐI ƯU ELIMINATE RENDER-BLOCKING RESOURCES
Thông thường các thông báo này là các file JS và CSS, các bạn cố gắng làm theo cách sau
- Gom tất cả các file CSS lại thành 1 file
- Tối ưu chúng bằng cách nén chúng lại, có thể dùng tool có sẵn trong các phần mềm code như sublimetext
- Load nó lên trên đầu trang web
- Inline nó trong phần head
- Gom tất cả các file JS lại và đưa nó xuống footer để nó tải sau, có thể phải trừ JQuery
- Nén các file JS này lại
Như vậy trang của bạn sẽ chỉ còn lại 1 file JS và Css đã được inline vào HTML
Plugin bạn cần cài đặt đó là Autoptimize CriticalCSS.com Power-Up Plugin thứ 2 bạn cần cài để tối ưu Google lighthouse đó là Autoptimize
Cách tối ưu Google Lighthouse Core Web Vitals chi tiết cho WordPress 2021 Autoptimize-WordPress_plugin
Bạn nhớ active 2 plugin này và mở nó ra để cài đặt, bật các thông số JavaScript Options và CSS Options của nó lên và click save.
Cách tối ưu Google Lighthouse Core Web Vitals chi tiết cho WordPress 2021 Autoptimize_Options
CÁCH TỐI ƯU EFFICIENTLY ENCODE IMAGES
Các ảnh bạn sử dụng cần được tối ưu trước khi upload, đưa về định dạng Google khuyên dùng đó là Webp, hoặc bạn có thể tải các ảnh này xuống để tối ưu lại nó cho dung lượng nhỏ nhất.
Phần này các bạn vào mục như hình sau và bật Lazyload lên rồi click Save
Cách tối ưu Google Lighthouse Core Web Vitals chi tiết cho WordPress 2021 Autoptimize__Images
CÁCH TỐI ƯU SERVE IMAGES IN NEXT-GEN FORMATS
Phần này là định dạng web của bạn, bạn có thể tìm plugin nào đó cho riêng mình nhưng ở đây mình dùng WebP Express WordPress plugin
Webp là định dạng mới do Google phát triển và nó còn nhẹ hơn cả JPG
Cách tối ưu Google Lighthouse Core Web Vitals chi tiết cho WordPress 2021 WebP_Express–WordPress_plugin
CÁCH REDUCE INITIAL SERVER RESPONSE TIME
Bạn bật phần nén HTML trong plugin Autoptimize đồng thời có thể cài thêm plugin Cache, ở đây mình dùng LiteSpeed Cache các bạn nhớ bật Cache lên và setup cho nó nhé
Cách tối ưu Google Lighthouse Core Web Vitals chi tiết cho WordPress 2021 LiteSpeed_Cache
CÁCH FIX MINIFY JAVASCRIPT GOOGLE LIGHTHOUSE
Ở phần này các file JS các bạn nên tối ưu nó, với WordPress các bạn bật trong plugin Autoptimize phần Javascript Options là đã được rồi, tùy nếu bạn là coder thì có thể tùy chính nó theo ý mình.
Trên đây là các phần mà các bạn bình thường có thể tối ưu được cho WordPress bằng plugin
Tuy nhiên ngoài điểm Google Performace thì còn các điểm khách như:
GOOGLE LIGHTHOUSE ACCESSIBILITY
Phần này liên quan nhiều đến UX- UI
- Background and foreground colors do not have a sufficient contrast ratio:bạn phải xem xét lại màu chữ, cỡ chữ và màu nền của nội dung mà Google lighthouse chỉ ra cụ thể thực tế trên trang web của bạn, lời khuyên chân thành là dùng cỡ chữ, font chữ và màu sắc thông thường đen trắng để dễ phản hổi
- Heading elements are not in a sequentially-descending orde: Cái phần này liên quan đến các thẻ H – heading (h1-h2-h3-h4-h5-h6) trên trang web của bạn, thông thường các ông coder mà không rõ về SEO thì họ sẽ dùng các thẻ này loạn lên cho các phần trong Sidebar hoặc Footer, bạn cần kiểm tra và xắp xếp nó lại theo thứ tự.
- Và ở phần này sẽ có nhiều báo cáo cụ thể về các lỗi khác ví dụ <html> element does not have a [lang] attribute, Image elements do not have [alt] attributes, Form elements do not have associated labels, Links do not have a discernible name, <object> elements do not have [alt] text
Ghi chú phần này cần coder hiểu về SEO để làm cho bạn
GOOLE LIGHTHOUSE BEST PRACTICES
Các trải nghiệm người dùng này thì quan trọng các yếu tốt sau
- Độ tin cậy và bảo mật Trust and Safety hay bao gồm các lỗi thiếu HTTPS, bạn nên lên hệ công ty cung cấp host để cài SSL, Links to cross-origin destinations are unsafe: Liên kết ra ngoài thiếu an toàn, bạn nên cho thêm thẻ rel=”nofollow noopener” vào là được.
- User Experience, trải nghiệm người dùng đa số thông báo các ảnh bạn dùng chưa đúng kích thước, bạn cần chỉnh lại kích thước và tỷ lệ hợp lý, các lỗi này thường do designer và coder thiết kế web
- Các bạn nên chú ý tới cái này là hay gặp: Browser errors were logged to the console đây là lỗi code thường là do Javascript, bạn đề nghị coder fix hết cho bạn
GOOGLE LIGHTHOUSE SEO
Điểm số này rất quan trọng cho trang web của bạn vì vậy cần nghiêm túc sửa chữa cho hết lỗi thông báo
- Document does not have a meta description, cái này thiếu thẻ Meta Description vì vậy bạn nên cần cài Yoast SEO để sửa nó cho đúng.
- Image elements do not have [alt] attributes: thiếu thẻ alt vì vậy bạn xem lại nội dung content hoặc phần code của web để bổ xung nó
- txt is not valid Request for robots.txt returned HTTP status: 500 thiếu file Robots.txt các bạn cũng có thể cài thêm plugin SEO để kiểm tra và bổ xung nó
- Document uses plugin: nhiều web cổ vấn dùng Fash nên sẽ bị báo lỗi này, vì vậy bạn nên gỡ bỏ nó
Ngoài ra còn tùy vào từng web cụ thể mà Google sẽ báo các lỗi này, do đó không thể load hết các trường hợp được, vì vậy mình xin dừng bài viết tại đây. Chúc các bạn Giáng Sinh An Lành Năm Mới Vui Vẻ
Làm thế nào để sử dụng Google Lighthouse
Trong Công cụ dành cho nhà phát triển của Google Chrome (trình duyệt web)
- Mở trang web mục tiêu cmà bạn muốn nhắm tới trong Google Chrome.
- Nhấp vào F12 hoặc Ctrl + Shift + J đối với Windows và Shift + Cmnd + I trên Mac để mở Bảng kiểm tra công cụ dành cho nhà phát triển.
- Từ các tab ở trên cùng, hãy chọn hai mũi tên để mở rộng menu.
- Nhấp vào biểu tượng “Ngọn hải đăng” từ menu thả xuống.
- Chọn xem bạn muốn phân tích hiệu suất thiết bị di động hay máy tính để bàn
- Nhấp vào “Tạo Báo cáo”.
Nguồn: LamVT – Nghiện SEO