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

Nếu đang tìm cách tăng tốc độ trang WordPress chậm chạp của mình.

Chắc chắn bạn đã nghe đến vài cái tên như Google Page Speed, GTmetrix, Pingdom

Chúng là những 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 website.

Và sẽ có một list danh sách các gợi ý giúp bạn cải thiện hiệu năng website.

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

  • Những 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 trên đầ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à FAQ về GTmetrix

Trước khi bắt đầu, Diều Hâu sẽ giải thích cách hoạt động của GTmetrix

GTmetrix là gì

GTmetrix nó là công cụ đánh giá hiệu suất website theo nhiều cách khác nhau, hay tóm lại là kiểm tra tốc độ website.

Nó cho bạn biết mất bao nhiêu thời gian để tải xong website.

Ngoài ra nó cũng phân tích những thứ đang load trên site và cách cải thiện chúng.

  • Kết quả ở trên GTmetrix sẽ theo 2 điểm số khác nhau – Google Page Speed và YSlow.
  • Cung cấp biểu đồ dạng thác nước và phân tích thời gian – Giúp bạn xem mỗi request tải mất bao thời gian.
  • Thực hiện bản ghi video – Bạn sẽ thấy website được load như thế nào 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 được tốc độ thay đổi như nào theo thời gian.

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

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

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

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

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

Có là vì:

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

Có thể website bạn chưa đạt được những yêu cầu mà các công cụ đề ra.

Còn Không là vì:

Với vai trò là một người truy cập, họ sẽ không bao giờ quan tâm đến điểm số GTmetrix.

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

Tôi mất bao lâu để load webiste này, mọi thao tác có mượt mà không.

Bạn có một website load ~ 2s nhưng điểm số chỉ 70 điểm.

Sẽ tốt hơn nhiều là có 100 điểm mà load tận 4s đúng không nào.

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

Nhưng cũng đừng ám ảnh về điểm số quá, chúng ta không chạy thi với ai cả.

Cuối cùng bạn chỉ cần quan tâm đến mất bao thời gian để website bạn tải xong.

Vậy điểm GTmetrix thấp website vẫn có thể load nhanh được không

Có chắc chắn rồi.

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

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

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

Như hình ảnh của bạn có được tối ưu không, hay code của bạn trông như nào?

Tuy nhiên, phần back-end cũng quan trọng không kém, hay mình muốn nó là quan trọng hơn.

Như hosting bạn đang dùng, web server là Apache hay Ngnix….

Cho nên nếu phần back-end bạn làm không tốt, website bạn sẽ load chậm mặc dù điểm số khác cao.

Và ngược lại nếu về phía server bạn tối ưu tốt bạn vẫn có thể load nhanh.

Tôi có thể chạy GTmetrix test cho thiết bị di động chứ?

Có điều này hoàn toàn được.

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

Nếu user của bạn tập trung cho yếu trên mobile thì nó lại càng quan trọng hơn.

Thiết bị di động cũng có nhiều mẫu khác nhau.

Như một chiếc di động cấu hình thấp, sẽ mất nhiều thời gian để hiện thị JavaScript hơn là PC.

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

Để sử dụng tính năng GTmetrix mobile speed test, bạn sẽ cần đăng ký toàn khoản (Free nhé).

Hướng dẫn sử dụng GTmetrix speed test

Rất đơn giản bạn chỉ cần truy cập vào trang chủ GTmetrix, điền url website và click Test your site:

GTmetrix-homepage

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

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

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

  • Location kiểm tra sẽ 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í, là có thể thay đổi các thông số trên.

Giúp thử nghiệm phù hợp với website bạn nhất, ví dụ thay về Canada bạn có thể chuyển về Asia.

Hay chạy trên các thiết bị di động hoặc thay đổi tốc độ kết nối (ví dụ: mô phỏng kết nối 3G).

Cho nên chỉ cần mất thêm vài phút, là sẽ có thêm tính năng Analysis Options.

GTmetrix-Analysis-Options

Sau khi chọn đầy đủ các option theo điều kiện của bạn bấm Analyze.

GTmetrix-resulted

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

  • Phần đầu sẽ là điểm số tổng quát của webiste, thông tin về thời gian load, size..
  • Dưới sẽ chia thành 6 tab thông tin chi tiết.

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


1. PageSpeed

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

Nó chấm điểm trang web của bạn theo các quy tắc Google PageSpeed.

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

Sau đó, GTmetrix cộng các điểm số đó để tạo điểm số PageSpeed tổng thể của bạn.

Trong 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 các quy tắc khác.

Bạn có thể nhấp vào mũi tên để xem chi tiết trong các quy tắc đó ghi gì.

pagespeed-detail-tab

Nó sẽ gợi ý những điểm cần cải thiện trên website của bạn.

Không cần nhất thiết phải 90 – 100 điểm tất cả các thang điểm.

Hãy tối ưu những cái quan trọng và cần thiết là được.

Dưới đây sẽ là một số cách tối ưu tốt nhất mà theo mình bạn nên thực hiện.

Tối ưu hình ảnh

Shortpixel-plugin-nen-anh-tot-nhat

Vấn đề này luôn được mình nhắc khá nhiều trong các bài tối ưu tốc độ.

Hình ảnh chiếm đến 50% dung lượng website, cho nên càng nhẹ càng tốt.

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

  • Hãy chọn ảnh có kích cỡ phù hợp với website ( không phải cứ lấy ảnh fullHD cho lên là tốt đâu nhé)
  • Chọn định dạng phù hợp ví dụ như JPG sẽ nhẹ hơn PNG.
  • Nén ảnh trước khi upload lên ( mình hay dùng tinypng.com để nén)
  • Sử dụng plugin nén ảnh tự động như shortpixel.com (mình đang dùng rất ngon nhé)

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

browser-cache-va-cookies

Bộ nhớ đệm trình duyệt cũng rất có í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, giúp lần truy cập sau không cần load lại.

Rất nhiều cache plugin có tính năng browser caching như: WP Super Cache, WP RocketWP Fastest Cache.

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

Thuật ngữ hay gọi là scaled image

Scaled image là ảnh mà kích thước khớp với kích thước được định nghĩa trong CSS hoặc HTML

Mỗi hình ảnh phải khớ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ể tự resize các hình ảnh trước khi upload lên.

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

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

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

Nếu bạn muốn chỉ định kích thước của khi nhúng vào website, 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">

Mặc định WordPress sẽ thực hiện điều này khi bạn chèn hình ảnh.

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

Ví dụ như trên sidebar hoặc widget…

Nén HTML, CSS và JavaScript

Về mặt kỹ thuật thì đây ba quy tắc riêng biệt khác nhau.

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

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

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

Hiện nay đa số các cache plugin đều có tính năng này (wp rocket, swift performance…)

Hoặc bạn có thể dùng plugin miễn phí như Autoptimize.

Nhưng bạn cần lưu ý trước khi sử dụng nén CSS và JavaScript. Nó có thể phá vỡ cấu trúc website của bạn, như các cột bị xô lệch mất hết các style.

Hạn chế tối đa việc chuyển hướng

Tác dụng của việc chuyển hướng là để điều hướng traffic.

Nhưng cũng không nên quá làm dụng nó ( chính xác là càng ít dùng càng tốt).

Bởi vì mỗi lần chuyển hướng sẽ làm website bạn chậm đi tương đối.

Tất cả các liên kết nội bộ nên được được đến trực tiếp URL đích (thay vì chuyển hướng lòng vòng qua vài URL khác).

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

Thì hãy đảm bảo luôn link với https để tránh các chuyển hướng ko cần thiết.

Trì hoãn Javascript

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

Tốc độ website bạn hiển thị nhanh như thế nào với người truy cập.

Hay tóm lại là mất bao nhiêu thời gian để hiển thị toàn bộ website.

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

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

Đó là lý do vì sao khi anh em check Google PageSpeed hay gặp “render-blocking JavaScript

Để khắc phục điều này bạn có thể defer parsing JavaScript (trì hoãn JavaScript)

Có nghĩa là nó sẽ chỉ xử lý JavaScript, sau khi đã hiển thị xong website.

Hiện rất nhiều plugin có hỗ trợ điều này ví dụ như WP Rocket, Async JavaScript…..

Kích hoạt compression

Phía trên mình đã nói về việc nén tối ưu hình ảnh ( nén ảnh).

Còn “compression” này là nén tất cả các file trên server bằng một thứ gọi là Gzip.

Trung bình Gzip compression có thể giảm kích thước các file trên site khoảng 70%.

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

Kết hợp các hình ảnh bằng CSS sprites

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

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

Nó giúp tăng tốc trang WordPress bằng cách giảm số lượng request để 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ả hình ảnh.

Nó không tối ưu SEO (ko thể thêm được image alt text).

Thay vào đó thì bạn chỉ nên sử dụng CSS sprites cho các hình ảnh trang trí, logo…

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

Mình 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ẽ update dần nhé :D.
5 1 vote
Article Rating
Đăng ký
Thông báo về
guest
2 Bình Luận
Inline Feedbacks
View all comments

Cổ Học
Cổ Học
13/06/2020 1:56 sáng

Hay quá, cảm ơn ad ạ, tối ưu tốc độ luôn là vấn đề đau đầu của anh em amarter ạ

Đăng
Đăng
14/06/2020 7:47 chiều

Bài viết rất hay. Mong ad tiếp tục bài sau

Pin It on Pinterest

Shares