Tối ưu 100/100 điểm PageSpeed Insights, tăng tốc độ tải dành riêng cho WordPress

Tối ưu 100/100 điểm PageSpeed Insights, tăng tốc độ tải dành riêng cho WordPress
5 (100%) 10 votes

Vâng, vấn đề tôi nói đến trong bài viết này sẽ là việc tối ưu đủ 100 điểm Google PageSpeed Insights giúp cho Website WordPress của bạn tăng tốc độ đáng kể (nếu không muốn nói là rất nhanh).

Nhưng trước khi đọc bài viết này các bạn cần lưu ý những điều như sau.

  • Hướng dẫn này chỉ dành cho WordPress, đương nhiên vẫn có thể áp dụng cho các mã nguồn khác nếu như bạn có thể ứng dụng được. Nhưng tôi không quan tâm đến điều đó.
  • Mỗi người đều dùng các Theme khác nhau, mỗi theme lại có những phần phải chỉnh để cho phù hợp với PageSpeed Insights nên không thể đảm bảo 100% các đoạn chỉnh sửa của tôi đưa ra đều áp dụng được. Trong bài viết tôi sẽ sử dụng theme MyBlog của Mythemeshop. Nhưng theo tôi theme wordpress hầu như là tương tự nhau, bạn chỉ cần làm được một cái những cái khác chắc chắn sẽ làm được.
  • Bạn có thể liên hệ với tôi nếu muốn thuê tôi tối ưu cho bạn =))
100 điểm không phải là điều khó khăn gì.

100 điểm không phải là điều khó khăn gì.

Vậy chúng ta bắt đầu cài đặt, lời khuyên hay nhất dành cho các bạn là hãy bắt đầu với Website mới thì sẽ đỡ được nhiều thời gian hơn. Còn website cũ thì việc nén lại ảnh và chỉnh sửa các phần cần tối ưu cũng sẽ nhiều hơn. Trong bài này tôi sẽ đưa ra các trường hợp thường gặp phải. Nếu chẳng may gặp các trường hợp khác không có ở bài viết này bạn có thể liên hệ với tôi để tôi giúp bạn.

Demo trong bài này của tôi sẽ là:

Chuẩn bị VPS và cài đặt VPS.

Bạn có thể chọn lựa một VPS có Local ở đâu đó phù hợp với người dùng của bạn. Tuy nhiên để hợp với thang điểm PageSpeed Insights nhất thì bạn cần một VPS có Local ở US sẽ tốt hơn. Ở đây do du cầu dành cho người Việt Nam truy cập nên tôi đành lựa chọn Local Singapore cho tốc độ về Việt Nam tốt một chút.

Xem thêm bài viết danh sách những nhà cung cấp VPS giá rẻ tốt nhất 2017.

Bạn sẽ phải cài đặt HọcVPS Script (LEMP server) có rất nhiều Script giúp bạn cấu hình VPS khác nhau, nhưng tôi kiến nghị các bạn nên dùng cái này, nhẹ nhàng và đơn giản. Việc cài đặt như thế nào cũng có trong hướng dẫn luôn rồi.

Nhớ trước đó phải tạo Swap và sau khi cài xong script cũng phải cài luôn Memcache.

Phần chuẩn bị VPS này không cần nói quá nhiều, các bạn đọc kỹ hướng dẫn tại hocvps là làm được thôi.

Tối ưu WordPress của bạn.

Sau khi đã cài đặt xong Website cùng như Plugin cần thiết tôi bắt đầu vác Website vào trang PageSpeed Insights để kiểm tra.

Hơi tồi tệ một chút.

Hơi tồi tệ một chút.

Tối ưu lại phần JavaScript và CSS.

Với phần này thì không có gì khó khăn, chúng ta sẽ sử dụng một plugin miễn phí và vô cùng hiệu quả Autoptimize. Các bạn tải về, cài đặt và kích hoạt sau đó cấu hình như sau.

Phần này các bạn chọn như trong ảnh.

Phần này các bạn chọn như trong ảnh.

Phần này các bạn chú ý chỗ Google Font nhé. Tôi sẽ nói chi tiết ở bên dưới.

Phần này các bạn chú ý chỗ Google Font nhé. Tôi sẽ nói chi tiết ở bên dưới.

Các phần còn lại các bạn để mặc định.

Vấn đề Google Font ta giải quyết như sau.

Hầu hết các theme wordpress bây giờ đều sử dụng Google Font API nhằm tăng tính thẩm mỹ và sự lựa chọn đa dạng tiện lợi cho chúng ta. Nhưng thường thì thằng PageSpeed Insights sẽ chấm điểm cái Google Font rất là tệ.

Google Font

Google Font

Khi vấn đề này xảy ra bạn hãy coppy nguyên đoạn URL có chứa Google Font, rồi xem trong đó có gì? Ví dụ.

Nó sẽ có định dạng như thế này.

Nó sẽ có định dạng như thế này.

Nhưng trước đó bạn phải bỏ chọn phần TẮT Google Font ở Autoptimize đi thì bạn mới nhìn được link nhé. Sau đó bạn coppy toàn bộ .CSS có trong file này và tạo một file .CSS mới. Ở đây tôi tạo thành font-google.css

Bạn upload file mới này lên thư mục Website của bạn, ở đâu cũng được miễn là dẫn link trực tiếp đến.

Bạn tích chọn lại phần TẮT Google Font ở Autoptimize để  Plugin giúp chúng ta bỏ đi link google font cũ. Tiếp đó bạn Import file .CSS mới tạo vào phần </body> của Theme. Mặc định phần này hay ở file footer.php

Nó sẽ như thế này.

Nó sẽ như thế này.

Như vậy là xong phần Google Font.

Xử lí phần Font Awesome.

Việc dùng Font Awesome để trang trí cho menu hoặc danh sách trong bài viết là điều hay dùng bây giờ rồi, sẽ thật tệ nếu cái này nó cũng bị PageSpeed Insights tính điểm thấp xuống.

Như này này.

Như này này.

Cái này hay bị lỗi ở mấy bản Font Awesome 4.5.0 trở xuống. Bạn chỉ cần Update phiên bản Font Awesome lên cao hơn là được (phiên bản hiện tại đang là 4.7.0). Việc Update cũng rất đơn giản. Bạn chỉ cần xem theme của bạn đang Import cái Font Awesome này kiểu gì là được.

Hầu hết MyThemeShop sẽ tải sẵn thư mục Font Awesome bên trong theme của họ, bạn tải bản mới của Font Awesome tại trang chủ của nó rồi Upload đè lên. Trong trường hợp theme khác không có sẵn mà dùng 1 link bên ngoài thì bạn chỉ việc Upload Font Awesome lên Website của bạn rồi đổi link Import là xong.

Xử lí phần Google Analytics.

Cái của nợ này là do Google sinh ra giúp chúng ta thống kê lưu lượng truy cập Website, nhưng chính nó lại không được Google PageSpeed Insights thừa nhận. Cho nên để xử lí được nó tôi cũng mất công mày mò ít nhiều.

Google Analytics

Google Analytics

Phương án giải quyết là bạn tắt xừ cái mã script mặc định của Google đi và thay bằng đoạn script xử lí khác như sau.

Bạn coppy đoạn mã trên và cho vào thẻ </body> trong đó XXX là mã Google Analytics của bạn.

Như thế này.

Như thế này.

Vậy là chúng ta sẽ xong xuôi cho tất cả các vấn đề JSCSS. Nhưng nên chú ý là với những ai chèn mã quảng cáo như Google Adsense chẳng hạn thì hiện tại tôi không tìm ra được biện pháp để giải quyết. Nếu bạn nào có thể giải quyết vấn đề đó nhớ cho tôi biết với 😀

Đoạn JS không thể giải quyết của Google Adsense

Đoạn JS không thể giải quyết của Google Adsense

Tối ưu hình ảnh, giai đoạn cực kỳ quan trọng.

Hình ảnh luôn là thứ khiến Website nặng tải và nó cũng là vấn đề rất nan giải, nhưng giờ tôi đã giải quyết được nó triệt để với Plugin nén ảnh quá ngon Optimus.

Vì sao tôi lại chọn Optimus mà không phải những loại khác?

  • Nhẹ, chạy ổn định.
  • Nén ảnh cực tốt chuẩn PageSpeed Insights.
  • Tự động điều chế thêm ảnh .WEBP
  • Giá rẻ hợp lí. Lưu ý là bạn hoàn toàn có thể mua bản quyền Plugin này từ tôi với giá 100k cho bản update trọn đời.

Các bạn có thể tải Plugin về cài đặt tại wordpress.org

Phần Setting của Plugin.

Phần Setting của Plugin.

Các bạn cài đặt như trong hình để quá trình nén ảnh được tự động cũng như giảm kích thước ảnh tới mức thấp nhất mà vẫn giữ được chất lượng tốt. Với những bạn mới cài xong thì hãy nhấn vào Optimus Bulk Optimizer để tiến hành nén toàn bộ ảnh đã upload trước đó lên website.

Tôi sẽ nói rõ hơn về định dạng .WebP

.WebP là một định dạng ảnh mới được Google phát triển, mà đã là do Google công nhận thì tôi nghĩ nó sẽ rất tốt cho SEO và tương lai sẽ được phổ biến rộng rãi. Hiện tại một số Website tin tức lớn ở nước ngoài đã chuyển dần sang sử dụng định dạng ảnh .WebP rồi. Bạn có thể xem bài viết của Google nói về định dạng ảnh này tại đây.

Lợi ích .WebP mang lại.

  • Hình ảnh nén tốt hơn và vẫn giữ được chất lượng cực kỳ tốt.
  • Nén hiệu quả đến 26% cho ảnh .PNG25%34% cho ảnh .JPG
  • Tốt cho SEO, theo đánh giá cá nhân tôi.
  • Được Google phát triển, định hướng tương lai tốt.
  • Nhẹ tải VPS đi rất nhiều do xử lí .WebP nhẹ hơn.

Nhược điểm đang có.

  • Không phải trình duyệt website nào cũng hỗ trợ.
  • Hiện tại chỉ ChromeOpera là hỗ trợ hiển thị.
Các trình duyệt hiện tại hỗ trợ hiển thị .WebP

Các trình duyệt hiện tại hỗ trợ hiển thị .WebP

Tuy nhiên do không thể chống lại sự hấp dẫn mà định dạng .WebP mang lại nên tôi đã sử dụng phương án trên cái nào hỗ trợ thì tôi cho hiển thị và cái nào không hỗ trợ tôi vẫn cho hiển thị định dạng ảnh bình thường. Để làm được điều đó tôi sử dụng Plugin miễn phí Cache Enabler.

Cấu hình Cache Enabler như trong ảnh.

Cấu hình Cache Enabler như trong ảnh.

Trong trường hợp Website của bạn không dùng Comment mặc định của WordPress thì không cần chọn “Clear the complete cache if a new comment has been posted (instead of only the page specific cache)“.

Ảnh sẽ tự động hiển thị dạng .WebP và ngược lại.

Ảnh sẽ tự động hiển thị dạng .WebP và ngược lại.

Xử lí ảnh của Plugin sinh ra.

Trong một số trường hợp sẽ có một vài ảnh của Plugin sinh ra mà bạn cũng bắt buộc phải xử lí. Như ở đây tôi dùng Plugin kk Star Ratings chẳng hạn.

Mấy ảnh icon thôi cũng bắt lỗi :))

Mấy ảnh icon thôi cũng bắt lỗi :))

Để xử lí mấy vấn đề này rất đơn giản, bạn vào thư mục của Plugin tải cái ảnh cần giải quyết về, upload lên thư viện ảnh trong wordpress để Optimus nó tự động nén cho bạn, sau đó bạn tải hình ảnh đã nén về và upload đè nên ảnh đang có trong thư mục Plugin. Thế là xong.

Kết nối Memcached.

Để tiến hành tối ưu tốc độ tải trang ở mức cao nhất chúng ta tiến hành Cache toàn bộ Website với Memcached đã cài đặt từ phần đầu tiên. Plugin để hỗ trợ chạy Memcache thì rất nhiều, nhưng sau khi thử nghiệm các loại khác nhau tôi cảm thấy tốt nhất trong trường hợp này chính là WP-FFPC.

Các bạn tiến hành cài đặt sau đó cấu hình như sau. Bình thường Plugin sẽ tự thêm đoạn define(‘WP_CACHE’, true); vào file wp-config.php tuy nhiên nếu nó không tự thêm thì bạn bật file lên và thêm vào. Nếu nó chưa nhận hãy xóa cache tại OpCache (cache PHP có sẵn trong họcvps script).

Nên cấu hình như thế này tránh gặp lỗi.

Nên cấu hình như thế này tránh gặp lỗi.

Cái có cũng được không có cũng không sao.

Cái có cũng được không có cũng không sao.

Nên để Cache tự động xóa mỗi ngày.

Nên để Cache tự động xóa mỗi ngày.

Tiếp đến bạn tìm file php.ini trên VPS của bạn, thường thì nó sẽ nằm trong /etc/php.ini còn nếu bạn không thấy thì có thể vào SSH gõ php -i | grep php.ini để tìm.

Mở file php.ini lên mục [PHP] thêm vào memcached.use_sasl=1 rồi lưu lại.

  • Đến bước này xong xuôi các bạn vào SSH của VPS gõ lệnh reboot để VPS khởi động lại đồng thời load toàn bộ Cache mới cho Website và bạn hãy check thử PageSpeed Insights xem đã ưng ý chưa???

Một vài phần tối ưu khác nếu bạn muốn Website tải nhanh hơn.

  • Nén ảnh trước khi Upload lên bằng Photoshop, kích cỡ lí tưởng là dưới 800px và chế độ nén JPG Medium của Photoshop.
  • Sử dụng CDN để tải file tĩnh nếu Server bạn đặt ở US và phục vụ người dùng tại Việt Nam.
  • Tối giản hóa Plugin cũng như các đoạn mã JS, CSS không cần thiết.
  • Nâng cấp Server lên cấu hình cao hơn nếu điều đó là cần thiết khi lượng truy cập Website của bạn đã lên cao.
  • Sử dụng HTTPS/ HTTP2 (rất quan trọng) khi cài đặt HTTPS bạn sẽ cấu hình được giao thức HTTP/2. Tại sao phải cài HTTP/2 thì bạn đọc bài này và hướng dẫn cài HTTPS cũng đã có trong bài này.
  • Xong xuôi bạn sẽ thấy tốc độ Website của bạn đã vượt trội đáng kể, ít nhất là nhanh hơn trước đó gấp đôi. Trước đây tôi nghĩ với W3 Total Cache đã là đủ nhưng giờ không phải thế, bạn phải tối ưu nhiều hơn nữa mới có thể nhanh được. Và hiện tại với bài viết này là toàn bộ kinh nghiệm đúc kết từ quá trình tìm hiểu của tôi. Sẽ nhanh hơn rất nhiều và tôi mong tương lai sẽ tìm ra cách tối ưu tốt hơn nữa.

Như vậy là tôi đã hướng dẫn các bạn xong rồi, đã cố gắng nói ít đi nhưng vẫn hơi nhiều vì cái này nó lắng nhằng nhiều công đoạn quá. Trong quá trình làm khả năng cao là vẫn xảy ra một vài lỗi không giúp các bạn tối ưu đến 100 điểm được, khi đó hãy liên hệ với tôi để tôi giúp bạn khắc phục (nếu có thể). Cảm ơn đã quan tâm đến bài viết của tôi và hãy chia sẻ nó nếu bạn cảm thấy có ích.

2017 Thích Viết. Sử dụng quản lí máy chủ HọcVPS Script. Máy chủ lưu trữ tại Vultr.
Made with in Money