Hướng dẫn sử dụng GTmetrix Speed + Cách cải thiện điểm số [NEW]

Nếu bạn đang muốn tăng tốc trang web WordPress chậm chạp của mình.

Chắc chắn bạn đã từng nghe đến những cái tên như Tốc độ trang Google, GTmetrix, Pingdom

Chúng là công cụ kiểm tra tốc độ website rất nổi tiếng hiện nay.

Cách sử dụng cũng rất đơn giản, chỉ cần nhập URL của trang web.

Và sẽ có một danh sách các gợi ý giúp bạn cải thiện hiệu suất trang web.

Trong bài viết này, mình sẽ hướng dẫn các bạn sử dụng GTmetrix bao gồm:

  • Các thông tin và chỉ số cơ bản trên GTmetrix cung cấp.
  • Gợi ý cách cải thiện điểm số (những yếu tố quan trọng sẽ được ưu tiên lên hàng đầu).
  • Một số công cụ phân tích chuyên sâu.

Huong-dan-su-dung-GTmetrix-speed

Một số thông tin cơ bản và Câu hỏi thường gặp về GTmetrix

Trước khi chúng ta bắt đầu, Hawk sẽ giải thích cách GTmetrix hoạt động

GTmetrix là gì?

GTmetrix nó là một công cụ để đánh giá hiệu suất của trang web theo nhiều cách khác nhau, hay nói ngắn gọn là để kiểm tra tốc độ trang web.

Nó cho bạn biết mất bao lâu để tải trang web.

Ngoài ra, nó cũng phân tích những gì đang tải trên trang web và cách cải thiện chúng.

  • Kết quả trên GTmetrix sẽ theo 2 điểm số khác nhau – Tốc độ trang của Google và YSlow.
  • Cung cấp biểu đồ thác nước và phân tích thời gian – Giúp bạn xem mỗi yêu cầu mất bao lâu để tải.
  • Quay video – Bạn sẽ thấy trang web đang tải như thế nào đối với người dùng
  • Ghi lại kết quả nhật ký trong 30 ngày Giúp bạn phân tích tốc độ thay đổi theo thời gian như thế nào.

Điểm trên GTmetrix dựa trên công thức nào?

GTmetrix không có thuật toán hoặc cơ chế tính điểm riêng mà dựa vào các bên thứ 3 như:

  • Google PageSpeed: Gồm 26 quy tắc khác nhau, mỗi quy tắc có một số điểm riêng biệt và tổng hợp.
  • YSlow: Đây là một dự án mã nguồn của Yahoo với 19 quy tắc khác nhau.

Điểm GTmextrix có quan trọng không?

Câu trả lời là Không.

Vâng, bởi vì:

Bạn nên quan tâm đến điểm GTmetrix nếu bạn đang có điểm thấp.

Có thể website của bạn chưa đáp ứng được các yêu cầu mà các công cụ đưa ra.

Ngược lại, vì:

Là một khách truy cập, họ sẽ không bao giờ quan tâm đến điểm GTmetrix.

Họ chỉ quan tâm đến một vấn đề duy nhất là trải nghiệm người dùng.

Tôi mất bao lâu để tải trang web này, mọi thứ có suôn sẻ không?

Bạn có một trang web tải ~ 2s nhưng số điểm chỉ là 70 điểm.

Sẽ tốt hơn nhiều nếu có 100 điểm và tải trong 4 giây.

Về cơ bản bạn nên để ý đến điểm số này, họ sẽ đưa ra ước tính nhanh về mức độ tối ưu của webiste.

Nhưng đừng ám ảnh về tỷ số quá nhiều, chúng tôi không đấu với ai cả.

Cuối cùng, bạn chỉ cần quan tâm đến thời gian tải trang web của bạn là bao lâu.

Vì vậy, một trang web có điểm GTmetrix thấp vẫn có thể tải nhanh?

Có chắc chắn.

Đây là một trong những lý do tại sao:

Hai điểm trên GTmetrix là Google PageSpeed ​​và YSlow.

Chủ yếu tính toán về mặt tối ưu hóa trên giao diện người dùng (giao diện người dùng).

Như hình ảnh của bạn đã được tối ưu hóa chưa, hay mã của bạn trông như thế nào?

Tuy nhiên, back-end cũng quan trọng như vậy, hay tôi muốn nó quan trọng hơn.

Giống như máy chủ bạn đang sử dụng, máy chủ web là Apache hoặc Ngnix….

Vì vậy, nếu back-end của bạn hoạt động không tốt, trang web của bạn sẽ tải chậm mặc dù điểm số cao.

Và ngược lại, nếu ở phía máy chủ bạn tối ưu hóa tốt thì vẫn có thể load nhanh chóng.

Tôi có thể chạy thử nghiệm GTmetrix cho thiết bị di động không?

Vâng, điều này là hoàn toàn ổn.

Số lượng người sử dụng điện thoại thông minh và các thiết bị di động khá phổ biến.

Nếu người dùng của bạn tập trung vào thiết bị di động, điều đó thậm chí còn quan trọng hơn.

Các thiết bị di động cũng có nhiều kiểu khác nhau.

Là một thiết bị di động cấp thấp, sẽ mất nhiều thời gian để hiển thị JavaScript hơn PC.

Vì vậy, nếu website của bạn chứa nhiều JavaScript nặng, rất có thể sẽ ảnh hưởng đến tốc độ trên Mobile.

Để sử dụng tính năng kiểm tra tốc độ di động GTmetrix, bạn sẽ cần có tài khoản đầy đủ (Miễn phí).

Hướng dẫn sử dụng kiểm tra tốc độ GTmetrix

Rất đơn giản, bạn chỉ cần truy cập trang chủ GTmetrix, nhập url trang web và nhấp vào Kiểm tra trang web của bạn:

GTmetrix-trang chủ

Tuy nhiên, thay vì nhấn kiểm tra ngay lập tức, tôi khuyên bạn nên tạo một tài khoản GTmetrix miễn phí.

Tại sao tôi lại nói như vậy, vì lý do sau đây.

Cấu hình thử nghiệm sẽ chạy theo mặc định như:

  • Kiểm tra vị trí sẽ đến từ Vancouver, Canada
  • Trình duyệt Chrome trên máy tính để bàn
  • Kết nối không hợp lệ

Nhưng nếu bạn đăng ký tài khoản miễn phí, bạn có thể thay đổi các thông số trên.

Giúp kiểm tra phù hợp nhất cho trang web của bạn, ví dụ: thay vì Canada, bạn có thể chuyển sang Châu Á.

Chạy trên thiết bị di động hoặc thay đổi tốc độ kết nối (ví dụ: giả lập kết nối 3G).

Vì vậy, chỉ mất vài phút nữa, và sẽ có nhiều tính năng hơn Tùy chọn phân tích.

GTmetrix-Phân tích-Tùy chọn

Sau khi chọn tất cả các tùy chọn theo điều kiện của bạn, hãy nhấp vào Phân tích.

GTmetrix do kết quả

Bảng kết quả sẽ được chia thành 2 phần:

  • Phần đầu tiên sẽ là điểm tổng thể của trang web, thông tin về thời gian tải, kích thước ..
  • Dưới đây sẽ được chia thành 6 tab thông tin chi tiết.

Bây giờ chúng ta sẽ đi tìm hiểu về 6 tab này.


1. Tốc độ trang

Tab Tốc độ trang là tab mặc định khi bạn chạy thử nghiệm GTmetrix.

Nó cho điểm trang web của bạn theo quy tắc Tốc độ trang của Google.

Với tất cả 26 quy tắc, trang web của bạn sẽ nhận được điểm từ 0-100 (càng cao càng tốt).

GTmetrix sau đó thêm các điểm số đó để tạo ra điểm Tốc độ trang tổng thể của bạn.

26 quy tắc không có trọng số đồng đều, vì vậy một số quy tắc sẽ có ảnh hưởng lớn hơn đến điểm tổng thể của bạn so với những quy tắc khác.

Bạn có thể nhấp vào mũi tên để xem nội dung chi tiết của các quy tắc đó.

pagepeed-detail-tab

Nó sẽ đề xuất các lĩnh vực cần cải thiện trên trang web của bạn.

Không nhất thiết phải đạt 90-100 điểm trên tất cả các thang điểm.

Hãy tối ưu hóa những cái quan trọng và cần thiết.

Dưới đây là một số cách tối ưu hóa tốt nhất mà bạn nên làm.

Tối ưu hóa hình ảnh

Shortpixel-plugin-en-Engage-tot-nhat

Vấn đề này luôn được đề cập nhiều trong các bài viết về tối ưu hóa tốc độ.

Hình ảnh lên 50% Kích thước trang web, vì vậy càng nhẹ càng tốt.

Một số mẹo để tối ưu hóa hình ảnh trước và sau khi tải lên WordPress.

  • Vui lòng chọn hình ảnh có kích thước phù hợp với trang web (sẽ không tốt nếu chỉ lấy hình ảnh full HD)
  • Chọn định dạng phù hợp, ví dụ JPG sẽ nhẹ hơn PNG.
  • Nén hình ảnh trước khi tải lên (tôi thường sử dụng tinypng.com để nén)
  • Sử dụng một plugin nén hình ảnh tự động như shortpixel.com (Tôi đang sử dụng nó rất tốt)

Sử dụng bộ nhớ đệm của trình duyệt

browser-cache-va-cookies

Bộ nhớ đệm của trình duyệt cũng rất hữu ích trong việc tăng tốc độ tải trang.

Nó sẽ lưu một số tài nguyên tĩnh trong trình duyệt của người dùng, để lần truy cập tiếp theo không cần tải lại.

Nhiều plugin bộ nhớ đệm có các tính năng lưu vào bộ nhớ đệm của trình duyệt như: WP Super Cache, WP Rocket và WP Fastest Cache.

Hình ảnh có kích thước phù hợp

Thuật ngữ này được gọi là hình ảnh được chia tỷ lệ

Hình ảnh được chia tỷ lệ là hình ảnh có kích thước khớp với kích thước được xác định trong CSS hoặc HTML

Mỗi hình ảnh phải phù hợp với kích thước màn hình hiển thị (trên PC, trên laptop, trên điện thoại).

Bạn có thể thay đổi kích thước hình ảnh theo cách thủ công trước khi tải lên.

Hoặc sử dụng các plugin như Optimole hoặc Shortpixel để chúng tự động chia tỷ lệ hình ảnh.

Xác định kích thước hình ảnh

Cái này liên quan đến một chút HTML.

Nếu bạn muốn chỉ định kích thước khi nhúng trên một trang web, nó thường sẽ như sau:

Không tối ưu

<<img src = "https://yoursite.com/wp-content/uploads/dieuhau.jpg">

Tối ưu

<img src = "https://yoursite.com/wp-content/uploads/dieuhau.jpg" width = "500" height = "200">

Theo mặc định, WordPress sẽ thực hiện việc này khi bạn chèn một hình ảnh.

Nhưng trong một số trường hợp đặc biệt bạn có thể sử dụng phương pháp này.

Ví dụ: trên thanh bên hoặc tiện ích con…

Nén HTML, CSS và JavaScript

so sanh wp rocket vs swift performance 1

Về mặt kỹ thuật, đây là ba quy tắc riêng biệt.

Nhưng tôi sẽ tóm tắt lại vì khái niệm cơ bản là như nhau.

Tóm lại, nén HTML, CSS và JavaScript là:

Loại bỏ các khoảng trắng, ngắt dòng và ký tự không cần thiết trong mã mà không ảnh hưởng đến chức năng.

Hiện tại, hầu hết các plugin bộ nhớ đệm đều có tính năng này (tên lửa wp, hiệu suất nhanh …)

Hoặc bạn có thể sử dụng một plugin miễn phí như Autoptimize.

Nhưng bạn cần lưu ý trước khi sử dụng CSS và JavaScript nén. Nó có thể phá vỡ cấu trúc trang web của bạn, vì các cột bị lệch và mất tất cả các kiểu.

Giảm thiểu chuyển hướng

Tác dụng của chuyển hướng là định hướng lưu lượng truy cập.

Nhưng đừng lạm dụng nó (chính xác là càng ít càng tốt).

Vì mỗi lần chuyển hướng sẽ làm chậm trang web của bạn một cách tương đối.

Tất cả các liên kết nội bộ phải được chuyển hướng đến URL đích (thay vì chuyển hướng xung quanh một số URL khác).

Ví dụ: nếu bạn chuyển hướng từ https://dieuhau.com sang trọng https://dieuhau.com (để sử dụng SSL).

Sau đó, hãy đảm bảo luôn liên kết đến https để tránh chuyển hướng không cần thiết.

Trì hoãn Javascript

Khi chúng ta nói về thời gian tải trang, điều đó có nghĩa là.

Trang web của bạn hiển thị với khách truy cập nhanh như thế nào.

Hay nói ngắn gọn là cần bao nhiêu thời gian để hiển thị toàn bộ trang web.

Javascript có thể làm chậm quá trình của bạn.

Nó sẽ buộc các trình duyệt tạm dừng hiển thị để xử lý Javascript.

Đó là lý do tại sao khi bạn kiểm tra Google PageSpeed ​​thường xuyên “JavaScript chặn hiển thị

Để khắc phục điều này, bạn có thể hoãn phân tích cú pháp JavaScript (hoãn JavaScript)

Điều đó có nghĩa là nó sẽ chỉ xử lý JavaScript, sau khi kết xuất trang web.

Có rất nhiều plugin hỗ trợ điều này, chẳng hạn như WP Rocket, Async JavaScript, v.v.

Bật tính năng nén

Ở trên mình đã nói về tính năng nén ảnh (nén ảnh) tối ưu.

Và “nén” này là nén tất cả các tệp trên máy chủ bằng một thứ gọi là Gzip.

Trung bình, nén Gzip có thể giảm kích thước tệp trên trang web khoảng 70%.

Hãy yên tâm, cũng có rất nhiều plugin hỗ trợ vấn đề này.

Kết hợp hình ảnh với CSS sprites

Có thể đây là lần đầu tiên bạn nghe đến tên (kỹ thuật hơi nâng cao).

Nhưng đây là một thủ thuật khá phổ biến, để kết hợp hình ảnh với CSS.

Nó giúp tăng tốc trang web WordPress của bạn bằng cách giảm số lượng yêu cầu tải hình ảnh.

Bạn cũng không nên áp dụng phương pháp này cho tất cả các hình ảnh.

Nó không được tối ưu hóa SEO (không thể thêm văn bản thay thế hình ảnh).

Thay vào đó, bạn chỉ nên sử dụng CSS sprites cho hình ảnh trang trí, biểu trưng, ​​v.v.

Cách tốt nhất là khá mất thời gian và không có plugin nào hỗ trợ việc này.

Tôi sẽ giải thích trong một bài viết sắp tới.

Vì bài khá dài nên mình sẽ cập nhật dần dần: D.