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.
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
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:
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.
Sau khi chọn đầy đủ các option theo điều kiện của bạn bấm Analyze.
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ì.
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
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
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 Rocket và WP 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à:
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.
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ừ https://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.