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

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.

​

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.

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.

Bạn có thể xem danh sách VPS giá rẻ tốt nhất do tôi đánh giá thichviet.net để lựa chọn VPS nếu bạn đang có ý định dùng và chưa biết chọn loại nào.

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.

​

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.

​

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ệ.

​

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ụ.

​

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

​

HTML:

<link href="https://toidungchan.com/wp-content/themes/mts_myblog/css/font-google.css" rel="stylesheet" type="text/css">

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.

​

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 fontawesome.io 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.

​

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.

HTML:

<script src="https://toidungchan.com/wp-content/uploads/ga-lite.min.js" async></script> <script> var galite = galite || {}; galite.UA = 'XXX'; // Đoạn code cho Google Analytics </script>

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

​

Vậy là chúng ta sẽ xong xuôi cho tất cả các vấn đề JS và CSS. 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

​

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

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

​

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

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 .PNG và 25%–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ỉ Chrome và Opera là hỗ trợ hiển thị.

​

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.

​

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)“.



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.

​

Để 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).

​

​

​

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

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.


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à đã xong. Trong quá trình làm mỗi web có thể phát sinh ngoài ý muốn khá nhiều thứ, bạn có thể comment lỗi tại đây và tôi sẽ giúp bạn xử lí nếu có thể.

Demo vài Website tôi đã tối ưu:

toidungchan.com(đã xong)
dulichhanquocgiare.info (nén nốt ảnh nữa là xong).

Nguồn bài viết: thichviet.net​

 

Về cơ bản thì đây là bài viết khá hay nhưng chắc chắn không phải website nào cũng đạt được chỉ số như website của bạn vì web của bạn sử dụng ít plugins + theme khá đơn giản. Hơn nữa bạn lại dùng VPS thì đương nhiên khả năng tùy chỉnh sẽ cao hơn rất nhiều so với những ai dùng Shared host (việc cài đặt và sử dụng VPS cũng sẽ gây khó khăn cho nhiều người không am hiểu nên đây cũng là 1 hạn chế)
Ngoài ra một số bất cập khác:
1. Về việc upload đè ảnh do plugin sinh ra thì sau này mỗi lần update plugin lại phải làm lại bước này.
2. Plugin Optimus nếu dùng bản miễn phí thì chỉ nén được dung lượng file tối đa 100Kb.

 

rất hay thanks kiu bạn, mình áp dụng thử xem sao, quả này chắc lên 90% rồi.Site mình dạo này chạy chậm quá, seo mãi không lên, chán thật

 

Tuyệt vời cơ mà chỉ áp dụng được tốt với các website Wordpress còn mấy site làm bằng ngôn ngữ khác thì không sẵn có được thế này.
May mà mình có thể học hỏi để áp dụng một tí trên web nhỏ.

 

Nếu nhiều plugin mà chỉ liên quan đến JS hoặc CSS thì nhiều bao nhiêu cũng vẫn Ok bạn ạ. Vấn đề share hosting với VPS cũng không liên quan vì 2 cái này đều có thể làm 100 điểm được, nhưng VPS sẽ giúp tốc độ load site nhanh hơn vì nó sẽ tùy chỉnh được các loại cache khác như memcache hoặc Opcache. Hơn nữa tốc độ xử lí của VPS cũng cao hơn.

- Việc up đè ảnh cho plugin sinh ra thì đúng là mỗi lần update lại phải up đè hơi tốn công, nhưng số lượng đó cũng ít mà, hiện tại mình chỉ thấy mỗi cái kk plugin rating là dính, còn mấy cái khác chưa thấy gì, thiết nghĩ 1, 2 plugin chắc vẫn có thể tranh thủ 1, 2 phút up đè cái ảnh lên ok mà bạn ơi.

- Chính vì bản free của nó mình thấy ko ngon nên trong bài viết mình đã nhấn vào luôn vấn đề là các bạn nên mua bản trả phí của plugin này, nó cũng ko đắt nếu không muốn nói là rẻ.

Nếu site bác ko có quá nhiều thứ phức tạp thì 100 điểm là chuyện thường bác ạ

Áp dụng đi bấy bì

 

nói thật là cái này làm cho blog thì có thể đc chứ mà muốn làm site thương mại 100/100 là khó trừ những người họ code web không cần đến plugin chứ giờ muốn site đẹp đc nhiều người chú ý thì phải sử dụng nhiều plugin xử lý. dù sao cũng thank b đã chia sẻ nhé.

 

Mình chỉ đưa ra giải pháp, ông nào thương mại mà muốn áp dụng thì bắt buộc phải code tốn công thôi

 

Tuyệt vời ông mặt trời... Nhìn thấy 100 đã quá, về kêu Anh Code tối ưu theo coi có được không... Cảm ơn Bác.

 

Rất cám ơn bác. Site của em dạo này chậm quá vô check thì chỉ được 62. Không biết sửa lên nổi 100 ko. em nghĩ hơi khó nhưng vẫn phải thử

 

Nếu là wordpress thì ko cần phải quá giỏi về code, hiểu 1 chút là làm theo hướng dẫn của em sẽ ok rồi.

Nếu bác làm y nguyên theo hướng dẫn của em thì khả năng 100 điểm không có quá khó, miễn là site wordpress của bác không quá "đặc biệt".