Hướng dẫn tối ưu hóa Google Pagespeed Insights cho WordPress

Hướng dẫn tối ưu hóa Google Pagespeed Insights cho WordPress

Google Pagespeed Insights là một tiêu chuẩn do Google đưa ra để đánh giá tốc độ tải trang và sự thân thiên với người dùng của website. Nếu bạn đạt được càng nhiều điểm đồng nghĩa với việc trang của bạn đáp ứng được những tiêu chí do Google đưa ra.

Trong thực tế thì không nhất thiết bạn phải đạt được số điểm cao của Google Pagespeed Insights. Theo kinh nghiệm của mình thì với một website bạn chỉ cần đạt số điểm từ mức 70 trở lên là được rồi.

Google Pagespeed Insights đưa ra khá nhiều nguyên tắc như:

  • Tối ưu hóa hình ảnh.
  • Nâng cao lưu vào bộ nhớ cache trong trình duyệt.
  • Giảm thời gian phản hồi của máy chủ.
  • Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên.
  • Bật nén.
  • Giảm bớt CSS.
  • Giảm bớt HTML.
  • Giảm bớt JavaScript.
  • Tránh các chuyển hướng trang đích.
  • Ưu tiên nội dung hiển thị.

Trong bài viết này mình chỉ hướng dẫn tối ưu hóa Google Pagespeed Insights cho WordPress nên nếu bạn đang sử dụng mã nguồn khác hãy tìm những phương án tương tự nhé.

Lưu ý: Khi bạn quá quan tâm đến điểm số của Google Pagespeed Insights có thể dẫn đến lỗi giao diện, tải chậm hơn. Vì vậy, bạn có thể bỏ qua một số tiêu chuẩn nếu không đạt được.

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

Đây là một trong những nguyên nhân chính làm cho website của bạn tải chậm. Nếu bạn có lượng truy cập chủ yếu từ quốc gia nào hãy mua dịch vụ hosting, VPS tại có máy chủ đặt tại quốc gia đó hoặc những khu vụ gần kề.

Điển hình tại Việt Nam, mình khuyên các bạn nên dùng các dịch vụ trong nước để cho tốc độ tốt nhất. Nếu bạn muốn tiết kiệm chi phí có thể tham khảo dịch vụ của Hawk Host hay DigitalOcean vì những nhà cung cấp này có máy chủ đặt gần Việt Nam.

Khi đăng kí các dịch vụ hosting thì bạn nên kiểm tra xem có tối ưu với WordPress hay không và nếu bạn đăng kí VPS thì nên sử dụng 1 trong 3 script là Eass Engine, VPSSim hoặc HocVPS.

Kích hoạt bật nén gzip

Bật nén gzip là phương thức nén và làm giảm dung lượng dữ liệu ở máy chủ trước khi gửi tới trình duyệt. Nếu bạn bật tính năng này cho website thì tốc độ sẽ tăng lên đáng kể và giảm được băng thông.

Bật nén gzip

Nếu bạn đang sử dụng 1 trong 2 plugin WP Super Cache hoặc W3 Total Cache thì làm như sau:

  • Đối với plugin WP Super Cach bạn truy cập Settings -> WP Super Cache -> Advanced và đánh dấu vào tùy chọn “Compress pages so they’re served more quickly to visitors. (Recommended)“.
  • Đối với plugin W3 Total Cache bạn truy cập Performance -> General Settings -> Browser Cache và đánh dấu vào Enable.

Nếu bạn không sử dụng 2 plugin trên thì có thể dùng mã để nén gzip:

Đối với Apache bạn dán đoạn mã bên dưới vào file .htaccess:

Đối với Nginx thì bạn dán mã bên dưới vào tập tin nginx.conf:

Để kiểm tra trang của bạn đã bật gzip hay chưa thì có thể truy cập:

Và đây là kết quả khi trang của mình kích hoạt gzip. Không thể tin được là nó nén tới 81%

Kết quả nén gzip
Kết quả nén gzip

Nâng cao lưu bộ nhớ cache trong trình duyệt

Mặc định thì các trình duyệt web đều có tính năng lưu cache các tập tin như hình ánh, css và nội dung. Nhưng nếu bạn không bật tính năng này thì cache trong trình duyệt sẽ mất đi rất nhanh, vì thế bạn hãy cấu hình cho nó lưu lâu một chút.

Nếu bạn đang sử dụng 1 trong 2 plugin WP Super Cache hoặc W3 Total Cache thì mặc định sẽ được tự động thêm thời gian rồi tuy nhiên nếu bạn dùng plugin W3 Total Cache truy cập Performance -> Browser Cache và đánh dấu chọn “Set entity tag (eTag)“ và “Set cache control header“.

Nếu bạn không dùng 2 plugin trên thì có thể dùng mã để kích hoạt chức năng này:

Đối với Apache bạn dán mã bên dưới vào tập tin .htaccess:

Đối với Nginx bạn dán mã bên dưới vào tập tin nginx.conf:

Ngoài ra, nếu bạn đang sử dụng Cloudflare thì có thể sử dụng tính năng thêm thời gian hết hạn tập tin trong trình duyệt bằng cách vào Cache -> Browser Cache Expiration và lựa chọn số ngày phù hợp. Theo mình nên trên 1 tháng.

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

Hình ảnh nặng nề sẽ làm cho website tải rất chậm, đây là một trong những lỗi rất dễ mắc phải. Muốn tối ưu hóa Google Pagespeed Insights cho WordPress thì bạn cần làm tốt công việc này.

Nén/giảm dung lượng hình ảnh
Nén/giảm dung lượng hình ảnh

Cách đây không lâu mình đã có một bài hướng dẫn tối ưu hình ảnh trước khi đăng lên website khá chi tiết. Nội dung chính là hướng dẫn bạn cách chọn đinh dạng ảnh và kích thước tối ưu, nén ảnh trước khi upload.

Đó là với tập tin gốc thôi, thường thì các theme WordPress sẽ cắt các hình ảnh ra để làm thumbnail. Tuy nhiên có những ảnh được cắt lớn hơn thumbnail rất nhiều, bạn cần phải chỉnh sửa kích thước này sao cho phù hợp.

Ví dụ thumnail trong blog của mình đang dùng có kích thước là 260×170 nhưng trong functions.php lại thiết lập để cắt ra kích thước là 350×220 chẳng hạn. Công việc của bạn là sửa lại cho đúng.

Ngoài ra, trong tập tin functions.php bạn có thể xóa các hàm cắt kích thước không cần thiết (nếu bạn không dùng tới nó) để tiết kiệm dung lượng. Sau đó resize lại thumbnail để bỏ những kích thước dư thừa đã cắt trước đó.

Bạn nên sử dụng các plugin nén ảnh để ảnh sau khi upload và những ảnh thumbnail được cắt tự động được nén tới mức tối ưu nhất. Sau khi nén thì chất lượng sẽ không ảnh hưởng nhiều lắm.

Tham khảo: 4 Plugin tối ưu hóa hình ảnh tốt nhất cho WordPress

Giảm bớt HTML, CSS, Javascript

Một trang khi tải sẽ theo thứ tự từ trên xuống nên nếu website của bạn có nhiều tập tin .css và .js thì trình duyệt sẽ gửi nhiều yêu cầu tới máy chủ hơn. Bạn có thể khắc phục việc này bằng cách nén các tập tin .CSS và .JS nhỏ thành một tập tin duy nhất, việc này giúp cho tốc độ tải trang nhanh hơn.

Minify

Bên cạnh đó bạn có thể nén HTML bằng cách xóa bỏ những khoảng trắng thừa trong mã HTML. Tất cả những phương thức nén trên bạn có thể tham khảo bài Minify HTML, CSS và JavaScript trong WordPress với Autoptimize mà mình đã viết trước đó.

Có nhiều plugin có thể làm việc này nhưng theo kinh nghiệm của mình thì plugin bên trên dùng tốt hơn hẳn.

Tránh chuyển hướng trang đích

Đây là tình trạng người dùng sử dụng www trước tên miền, khi bạn truy cập tên miền thì máy chủ sẽ điều hướng đến đến tên miền có www nên sẽ làm chậm tốc độ tải trang.

Thường thì những trang blogspot mới bị lỗi này, WordPress mình thấy có rất ít người sử dụng www trước tên miền. Cái tiền tố www nó vừa gây lỗi vừa làm dài tên miền của bạn nên mình khuyên bạn tốt nhất khong nên dùng, để như https://namngo.net có phải đẹp không.

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

Đây là tiêu chí Google đưa ra để ưu tiên những nội dung cần thiết hiển thị trước sau đó mới tới những thành phần không cần thiết khác như .js chẳng hạn.

Bạn có thể sử dụng plugin Autoptimize mà mình đã nói trong phần nén HTML, CSS, JS để đưa tệp tin .JS sau khi nén xuống footer. Các tập tin .JS chủ yếu là các hiểu ứng nên mình cho nó tải cuối cùng cũng không sao, miễn là nội dung và giao diện hiển thị đầy đủ.

Tải không đồng bộ Javascript

Sử dụng tải không đồng bộ (còn gọi là async) có nghĩa là khi trình duyệt gặp đoạn javascript của bạn thì mã HTML bên dưới nó sẽ tiếp tục tải và đồng thời đoạn Javascript sẽ được tải cùng lúc cho đến khi toàn bộ nội dung của Javascript đó được tait xong thì Javascript đó được thực thi. Như vậy chúng ta sẽ không phải chờ tải Javascript nên tiết kiệm rất nhiều thời gian.

Sử dụng async trong trường hợp script đó chạy độc lập một mình nó và không sử dụng bất kì script nào khác. Nghe có vẻ khá phức tạp nhỉ, để biết được chuyện này thì bạn cần có kiến thức về Javascript.

Nếu bạn không dùng plugin thì có thể dán đoạn mã bên dưới vào cuối tập tin functions.php:

Mã async toàn bộ javascript:

Nếu bạn muốn loại trừ tập tin javascript nào đó không muốn async thì dùng:

Thay thế các tập tin script-name1.js bằng tập tin .js của bạn, nếu ít hơn thì xóa đi, nhiều thì thêm vào. Thường thì khi async tập tin js/jquery/jquery.js dễ gây lỗi nên tốt nhất bạn lên loại trừ ra.

JS view source

Nếu bạn muốn dùng plugin để làm chuyện này thì mình đề xuất:

  1. Async JavaScript
  2. Async JS and CSS

Ngoài ra, nếu bạn sử dụng Cloudflare thì có thể bật chức năng Rocket Loader lên.

Tối ưu hóa phân phối CSS

Các tập tin .CSS trong WordPress đều được chèn bằng thẻ <link> mà đây là loại thẻ chặn hiển thị (render-blocking). Cái này hiểu đơn giản thì Google muốn trong trang sẽ tải các nội dung cần thiết trước, bao gồm cả CSS  và JS, sau đó mới tải những cái còn lại.

Phương án đưa ra là sử dụng kỹ thuật tải inline những CSS cần thiết (tức là chèn những đoạn css cần thiết để tải chung với HTML) cho đến khi nội dung được tải xong thì mới cho tải không đồng bộ những tập tin CSS đó

Để làm được việc này bạn truy cập vào trang Critical Path CSS Generator để tìm được những CSS cần thiết để tải inline.

Critical Path CSS Generator

Sau đó bạn có thể lấy đoạn CSS đó chèn inline vào HTML, nếu bạn không rành chuyện này thì tiếp tục sử dụng plugin Autoptimze mình giới thiệu bên trên chọn phần Advanced Settings và đánh dấu vào Inline and Defer CSS? rồi điền CSS mà bạn lấy được từ trang Critical Path CSS Generator.

Cuối cùng nhìn lại kết quả đạt được:

Kết quả PageSpeed Insights

Tuy nhiên, các các tối ưu liên quan tới JS và CSS thường gây lỗi giao diện trên các trình duyệt Firefox, IE nên nếu bạn không muốn hiện tượng này xả ra thì hãy bỏ qua tiêu chí “Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên“.

Kết luận

Như vậy, trong bài này mình đã hướng dẫn bạn cách tối ưu hóa Google Pagespeed Insights cho WordPress. Bạn có thể kiểm tra tốc độ của Nam Ngô Blog thì thấy nó rất nhanh và kiểm tra thì đã tối ưu rồi. Nếu bạn còn thắc mắc gì hãy để bình luận bên dưới

Hướng dẫn tối ưu hóa Google Pagespeed Insights cho WordPress
4.64 (11 votes)

18 Bình luận

    1. Cơ bản WordPress muốn nhanh phải lựa chọn hosting hoặc VPS, cho tốc độ phản hồi nhanh, theme tối ưu ít hiệu ứng, giảm thiểu plugin, banner, script từ bên ngoài

      Reply

Post Comment

Đăng kí BẢN TIN

Đăng kí BẢN TIN

Đăng kí bản tin to cập nhật bài viết nhanh nhất and receive the following phần quà hấp dẫn từ Nam Ngô Blog.

Bạn đã đăng kí thành công!