Google Pagespeed Insights là gì? Cách tối ưu
Ngọc Thanh - 281
- 12/11/2024
Ngọc Thanh Google Pagespeed Insights là gì? Đó là công cụ của Google dùng để đánh giá tốc độ tải trang của website và đưa ra các kiến nghị để cải thiện hiệu suất trang web, chi tiết như nào hãy cùng chúng tôi phân tích:
Google Pagespeed Insights là gì? Cách tối ưu
Mục Lục [Ẩn]
Google Pagespeed Insights là gì?
Google Pagespeed Insights là công cụ của Google dùng để đánh giá tốc độ tải trang của website và đưa ra các kiến nghị để cải thiện hiệu suất trang web. Các tiêu chí để đánh giá hiệu suất bao gồm: tốc độ tải trang, tốc độ phản hồi của máy chủ, tối ưu hình ảnh, css, js, html, trải nghiệm giao diện của người dùng,....
Cách tối ưu điểm Google Pagespeed Insights
Để vào trang pagespeed bạn hãy truy cập tại đây, sau đó nhập URL cần kiểm tra rồi nhấn phân tích hoặc nhấn enter:
Sẽ có 2 hình thức kiểm tra, đó là di động và máy tính, nhưng cả 2 đều có các điểm chung về cách tối ưu, dưới đây là các vấn đề Google cần mình chỉnh sửa để tối ưu website:
Hiệu suất
Hiệu suất
Phân phối hình ảnh ở định dạng mới và hiệu quả hơn: Chuyển file hình ảnh về định dạng WebP hoặc AVIF sẽ nén tốt hơn và tốc độ tải ảnh xuống sẽ nhanh và ít tốn dữ liệu hơn các định dạng JPG, PNG, JPEG. Lúc này bạn dùng chức năng thumb hình để chuyển các định dạng hình ảnh bình thường sang WebP hoặc AVIF, khi chuyển xong bạn ra ngoài web lưu ảnh về có định dạng WebP là được.
Tránh các thay đổi lớn về bố cục: Nguyên nhân chính làm thay đổi bố cục chính là CLS quá chậm làm quá trình load trang chậm. Để cải thiện vấn đề này bạn cần nén js, css lại và đưa ra trang chủ hết, không bỏ trong file rồi nhúng vào web nữa mà nén xong nội dung trong file rồi đưa trực tiếp code ra ngoài file index.php luôn, css thì để trong thẻ <style></style> và để trên thẻ head. JavaScript thì nén lại các nội dung trong file rồi đưa ra ngoài ở dưới cùng trong thẻ body và nằm trong thẻ <script></script>. Để nén js, css bạn lên google gõ từ khóa nén js, css online, nén xong lấy code đã nén về.
Trì hoãn tải các hình ảnh ngoài màn hình: Kích thước ảnh bạn nên thumb đúng với kích thước hiển thị, không nên để to quá.
Thành phần Thời gian hiển thị nội dung lớn nhất: Nói về một phần tử hiển thị chiếm màn hình quá nhiều.
Thay đổi kích thước hình ảnh cho phù hợp: Tùy vào màn hình lớn nhỏ bạn có thể cho hiện hình ảnh với kích thước khác nhau.
Giảm JavaScript không dùng đến: Bạn kiểm tra nếu JS nào trong web hoặc bên thứ 3 có thể bỏ đi hoặc tối ưu code thừa thì hãy làm.
Các phần tử hình ảnh không có width và height rõ ràng: Hình ảnh cần phải có đầy đủ thẻ width=" " , height=" ".
Rút gọn CSS: Nếu Css ở trang con thì vô trang con hãy dùng, tránh trường hợp chạy code css không cần đến.
Phân phối các nội dung tĩnh bằng chính sách bộ nhớ đệm hiệu quả: Bạn nên cấu hình bộ nhớ đệm cho các file hình, js, css, font chữ,.... trong file .htaccess.
Tránh kích thước DOM quá lớn: Hạn chế dùng thẻ HTML quá nhiều lớp để chứa một phần tử.
Hỗ trợ tiếp cận
Hỗ trợ tiếp cận
Các nút không có tên có thể tiếp cận được: Các nút button phải có tên thì trình đọc màn hình mới đọc được, cụ thể là các nút phải có chữ hoặc value bằng chữ.
Phần tử hình ảnh không có thuộc tính ALT: Bất cứ hình ảnh nào bạn cần phải có nội dung cho thuộc tính ALT của hình đó.
Màu nền trước và nền sau không có đủ tỷ lệ tương phản: Background và màu chữ phải chỉnh cho người dùng dễ đọc nhất.
Phần tử <html> chưa có thuộc tính [lang]: Trong thẻ HTML bạn cần để ngôn ngữ dành cho khách hàng người nước nào, ví dụ website mình dành cho người Việt Nam thì mình để <html lang="vi-VN" ></html>.
Đích chạm có kích thước hoặc khoảng giãn cách chưa phù hợp: Các phần tử được gắn liên kết thì nên có khoảng cách với nhau để dễ dàng click.
Phương pháp hay nhất
Phương pháp hay nhất
Hiển thị hình ảnh có tỷ lệ khung hình không chính xác: Những hình ảnh có kích thước lớn khi vào màn hình nhỏ ta nên có chức năng cho kích thước hình nhỏ lại tương ứng từng phạm vi màn hình.
Phân phối hình ảnh có độ phân giải thấp: Kích thước hình ảnh không được nhỏ hơn kích thước mà hình đó hiển thị lên màn hình, như vậy sẽ làm mờ ảnh.
SEO
SEO
Các đường liên kết không thể thu thập thông tin: Bất cứ thẻ a trên website bắt buộc phải có thuộc tính ahref, ahref phải có URL. Còn thẻ a nào không có Ahref thì bạn dùng thẻ khác thay thế chứ không nên dùng thẻ a.
Phần tử hình ảnh không có thuộc tính [alt]: Có nói ở trên là thẻ img phải có thuộc tính ALT vào.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Google Pagespeed Insights là gì?
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
