Tối ưu điểm số Google PageSpeed Insights 90+ cho wordpress

Bài này thuộc phần 1 nằm trong tổng 2 phần của serie Tăng tốc wordpress

PageSpeed Insights là một công cụ tập hợp các tiêu chí đánh giá của google về độ phản hồi và tốc độ load website, nhằm giúp bạn có một cái nhìn và phương pháp tối ưu tốt hơn cho website của mình. Công cụ này đánh giá trang web của bạn theo tỷ lệ từ 1 đến 100 cho khả năng sử dụng di động, tốc độ di động và tốc độ máy tính để bàn.

Tối ưu hóa trang web là một công việc rất quan trọng. Một website có tốc độ tải trang nhanh đem lại cảm giác trải nghiệm của người dùng trở lên tốt hơn và đồng thời nó cũng là một trong hàng trăm tiêu chí xếp hạng website của bạn trên công cụ tìm kiếm của Google.

toi-ưu-hoa-diem-so-tai-trang
Điểm số của Bảo Nguyễn Blog ở thời điểm hiện tại viết bài này

Thực sự mà nói tối ưu hóa tốc độ tải trang nó rất mơ hồ, đôi khi bạn phải ngồi chỉnh sửa rất lâu mới đem lại điểm số như mong muốn, đôi khi sau quá trình vận hành một thời gian điểm số này sẽ bị tụt vì nhiều nguyên nhân từ phía google đánh giá. Có thể bạn chưa biết trước kia khi mới lập Blog mình đã có thời gian ngồi cả ngày để tối ưu và kết quả đạt được chỉ là 98 – 98 điểm dành cho cả thiết bị di động lẫn máy tính để bàn.

Ở đây mình sẽ đưa ra cho bạn một số hướng dẫn giúp bạn cải thiện điểm số của Google PageSpeed Insights dành cho wordpress. Nhưng mình khuyên các bạn là không lên quá chú trọng vào điểm số này quá mức, tầm trên 65 điểm cho mobile và 70 điểm cho máy tính là ổn.

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

Có một điều đó là nếu website wordpress của bạn chưa bật tính năng nén chắc chắn google sẽ thông báo và điểm số sẽ bị giảm. Để bật tính năng nén đơn giản nhất là bạn mở tệp tin .htaccess lên và thêm đoạn code bên dưới vào.

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Tận dụng bộ nhớ đệm trình duyệt

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>

Bộ nhớ cache của trình duyệt sẽ lưu một bản sao trang web của bạn vào trình duyệt của người dùng để nó không phải tải nhiều lần cùng một nội dung khi xem lại trang web của bạn. Việc này bạn có thể được thực hiện bằng cách thêm một đoạn code bên dưới vào tập tin .htacess của bạn:

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

Một việc đau đầu nhất đó chính là tối ưu hình ảnh tức là bạn phải giảm dung lượng hình ảnh xuống mức thấp nhất thì mới được điểm cao trong công cụ Google PageSpeed Insights. Đôi khi những bài viết về sau mà bạn nén ảnh không tốt có nghĩa là điểm số của bạn sẽ bị giảm ngay. Cho lên đó là một trong số những lý do bạn không lên quá tập trung vào thang điểm 100 này.

Ưu tiên nội dung hiển thị đầu tiên

Nội dung trên đầu màn hình là một phần của trang mà bạn có thể thấy mà không cần cuộn xuống. Bạn có thể tăng hiệu suất trang bằng cách bao gồm các đoạn code cần thiết để hiển thị chính xác nội dung trên cùng một trang. Ví dụ: nếu bạn có tiêu đề ở trên màn hình và cần một kiểu cụ thể, hãy thử thêm CSS bên trong phần <head> của trang đó hoặc bên trong đoạn code đó cho đến khi đủ chỉ tiêu của google.

Hiện tại Blog của mình đang bị hạ điểm xuống còn 90-95 là do không đáp ứng đủ số % này của google.

Giảm thời gian phản hồi của máy chủ

Bạn có thể cải thiện thời phản hồi máy chủ bằng cách đảm bảo máy chủ của bạn nhận được càng ít yêu cầu càng tốt. Bằng cách giảm số lượng tệp CSS và JS cho trang của web bạn và các hình ảnh trên website, bên cạnh đó cấu trúc code của theme cũng là nguyên nhân dẫn đến tình trạng phản hồi máy chủ bị kém đi hoặc do bạn sử dụng quá nhiều plugin.

Ngoài ra yếu tố máy chủ bạn đặt ở đâu, nhà cung cấp máy chủ đó có uy tín không cũng là nguyên nhân quan trọng nhất. Hiện tại Bảo Nguyễn vẫn đang sử dụng sharehost cho lên kết quả sẽ không bao giờ được như mong muốn.

Giảm bớt JavaScript, CSS và HTML

Như mình đã nói ở trên việc sử dụng nhiều plugin sẽ tự động sinh ra nhiều file JS và CSS khác nhau, mỗi khi load trang trình duyệt sẽ tự động load kèm theo thông tin của những tệp tin này.

Bạn không nên đặt nhiều đoạn script lên phần header của website, thay vì đó bạn có thể đặt chúng cuống phần footer. Ngoài ra việc nén CSS và JS giúp bạn giảm kích thước của tệp tin xuống. Để nén bạn hãy truy cập tại đây.

Đồng thời có thể sử dụng cấu trúc tải không đồng bộ theo như google đề xuất bằng cách sử dụng plugin này.

Sử dụng plugin cache

Hiện tại mình đang sử dụng plugin tạo cache cho website wordpress, và thấy nó hoạt động rất tốt, bạn có thể sử dụng plugin W3 Total Cache để cải thiện điểm số.

Như vậy là mình đã hướng dẫn cho bạn các phương pháp cơ bản nhất để tối ưu điểm số của bạn trên công cụ PageSpeed Insights của google. Nhưng mình thấy nó không cần thiết cho lắm vì những tiêu chí của google đưa ra là quá kho khăn ngay cả khi những đọan mã nhúng của Google Analytics, YouTube đều được tải từ bên ngoài và sẽ bị PageSpeed Insights hạ điểm.

Bài viết khác cùng serie

Hướng dẫn tối ưu css, javascript cho wordpress

Bảo Nguyễn

Đam mê dòng nhạc Bolero, thích con gái phong cách công sở và thích bàn luận quân sự. Đã từng học tại HaUI khóa K16.

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of

Create Account



Log In Your Account



Bảo Nguyễn chỉ hỗ trợ khách hàng qua Email, zalo và hotline ( 0169.865.5334 ).Xem chi tiết