Tối ưu 100/100 PageSpeed Insights, tăng tốc độ tải trang cho WordPress

Miễn phí bộ video giúp bạn kiếm tiền online Youtube
Tối ưu 100/100 PageSpeed Insights, tăng tốc độ tải trang cho WordPress
4.8 (95.29%) 34 votes

Tối ưu Website hay đúng hơn là tối ưu tốc độ tải của một trang WordPress trở lên nhanh hơn, nhẹ hơn, mượt hơn là điều mà bất cứ người quản trị nào cũng muốn làm. Và ở trong bài viết này mình sẽ chia sẻ cách để tối ưu để bạn có thể tự làm được một cách dễ dàng.

Lưu ý quan trọng.

  • Hướng dẫn này chỉ dành cho WordPress chạy trên VPS riêng cấu hình Nginx, đương nhiên vẫn có thể áp dụng cho các mã nguồn khác và trường hợp khác, nhưng để áp dụng được thì bạn cần có những người có chuyên môn trong lĩnh vực mã nguồn đó hỗ trợ.
  • Mỗi theme wordpress khác nhau đều có cách xử lí khác nhau, việc thang điểm PageSpeed Insights tăng cao không có nghĩa là website của bạn sẽ nhanh hơn, PageSpeed Insights chỉ là một trong số các yếu tố khiến website của bạn trở lên nhanh hơn thôi.
  • Điểm PageSpeed Insights đạt được bao nhiêu là tùy vào việc website của bạn có bao nhiêu vấn đề cần phải xử lí, có những nguyên nhân khiến điểm PageSpeed Insights không được cao mà chúng ta không thể giải quyết được, ví dụ như bạn có cài adsense trên website như thichviet.net chẳng hạn, sẽ chẳng thể nào tối ưu được những thứ từ bên ngoài như thế này.
  • Bạn có thể liên hệ với mình nếu muốn thuê mình tối ưu cho bạn =)) Ờ mục liên hệ thì ở đây nhé.
Tối ưu 100 điểm PageSpeed Insights không phải quá khó.

Tối ưu 100 điểm PageSpeed Insights không phải quá khó.

Hình ảnh trên là chụp website toidungchan.com thời kỳ bắt đầu của mình, hiện tại thì điểm đã thấp hơn bởi mình đã tập trung cho các tính năng khác của website nhằm mục đích tối ưu cho bán hàng. Tuy nhiên tốc độ thì không hề bị giảm.

1, 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 mình đành lựa chọn Local Việt Nam 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 2018.

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 mình 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 bên Học VPS luôn rồi.

Nhớ trước đó phải tạo Swap nhưng nếu bạn mua tại Hosting Việt thì họ đã tạo sẵn Swap cho bạn rồi. Và sau khi cài xong script cũng phải cài luôn Memcached.

Nói chung là VPS cần đạt những tiêu chí sau:

  • Hệ điều hành CentOS 6.x
  • Chạy môi trường LEMP Server (NGINX + PHP-FPM + MariaDB). Cái này cài HọcVPS Script xong là có.
  • Chạy PHP 7.1 trở lên cho nhanh (tốt nhất là 7.1).
  • Có OP Cache.
  • Có Memcached.
  • Phục vụ truy cập ở đâu thì VPS sử dụng đặt ở gần đấy.
  • Cấu hình đương nhiên càng cao càng tốt, sao cho phù hợp với túi tiền.

Đây cũng là cấu hình chuẩn mà mình đúc kết trong quá trình sử dụng nhiều lần và nhiều phiên bản khác nhau.

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

Trước tiên bạn cần vào PageSpeed Insights kiểm tra xem website của bạn bị trừ điểm vì những phần nào? Ở trong bài viết này mình sẽ nêu ra các vấn đề thường xuyên gặp phải và phương án xử lí.

Tối ưu 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ấu hình Autoptimize của thích viết blog.

Cấu hình Autoptimize của thích viết blog.

HTML Options (Phần này để tối ưu HTML).

Optimize HTML Code: Thu gọn lại HTML của từng trang, tức là nén toàn bộ HTML thành một dòng code, giúp HTML tải nhanh hơn, lược bỏ được các phần thừa.

Keep HTML comments: Loại bỏ các đoạn comment trong HTML. Đây chỉ là các đoạn comment đánh dấu tính năng từng đoạn code khi người lập trình xây dựng code mà thôi, không ảnh hưởng gì đến hoạt động của website cả.

JavaScript Options (Tối ưu JavaScript của website).

Optimize JavaScript Code: Tùy chọn bật tắt tối ưu Javascript.

Force JavaScript in <head>: Đưa toàn bộ Javascript đã tối ưu lên thẻ <head>.

Also aggregate inline JS: Tối ưu Javascript cho từng trang, việc này sẽ khiến bộ nhớ cache trở lên nhiều hơn, cũng không cần băn khoăn khi bạn dùng VPS.

Exclude scripts from Autoptimize: Nếu file Javascript nào bị lỗi khi bạn tối ưu thì có thể loại file đó ra khỏi danh mục tối ưu bằng cách cho tên file đó vào đây.

Add try-catch wrapping: Trong trường hợp bạn vẫn muốn nén hết Javascript trên website nhưng vẫn cứ bị lỗi thì có thể chọn cái này xem lỗi có còn không.

Cấu hình Autoptimize của thích viết blog.

Cấu hình Autoptimize của thích viết blog.

Extra Auto-Optimizations (Đây là phần tối ưu những thứ còn lại).

Remove emojis: Từ phiên bản 4 chấm mấy của wordpress thì chúng ta đã có thể sử dụng emojis đẹp hơn, sang chảnh hơn, nhưng đi kèm đó sẽ là 1 tập tin javascript khá nặng nữa, đấy là còn chưa nói link ảnh emojis sẽ sử dụng server của wordpress, vậy nên bạn nào không thường xuyên dùng emojis này thì có thể chọn cái này để chặn nó đi.

Remove query strings from static resources: Loại bỏ ver=??? của các tập tin javascript và css.

Google Fonts: Mặc định hầu hết các theme wordpress bây giờ đều hỗ trợ lấy font từ google để dùng cho đẹp hơn, cá nhân mình không thích font google lắm vì nó là một trong những nguyên nhân lớn dẫn đến website bị tải chậm đi, bạn nên dùng về các font mặc định để đỡ phụ thuộc vào nó. Còn trong trường hợp bạn vẫn muốn dùng google font mà lại muốn điểm page speed cao hơn thì có thể chọn Combine and link in head.

Preconnect to 3rd party domains (advanced users): Thêm tên miền thứ 3 mà bạn muốn ưu tiên tải trước, phần này khá hay nếu bạn dùng CDN.

Async Javascript-files (advanced users): Tải không đồng bộ file javascript.

Mình khuyến khích các bạn cấu hình như hình ảnh mình đưa ra, như thế sẽ đạt được mức độ tối ưu tốt nhất theo cá nhân mình sử dụng cho thấy như thế.

Tối ưu 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. Việc Update cũng rất đơn giản. Bạn chỉ cần F12 lên xem theme mà bạn đang dùng import file của Font Awesome ở đâu thì tải bản mới về up đè lên file cũ là được.

Tối ưu 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 PageSpeed Insights thừa nhận.

Phương án giải quyết là bạn tắt cái mã script mặc định của Analytics đ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 trước thẻ </body> trong đó XXX là mã Google Analytics của bạn.

Hoặc bạn có thể sử dụng Plugin Complete Analytics Optimization Suite (CAOS) để thay thế cho đoạn code này nếu bạn không thích phải sửa code.

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

Hình ảnh luôn là phần khiến website của bạn bị nặng tải nhất. Để giải quyết vấn đề đó chúng ta cần một plugin đủ mạnh, và khá may mắn là có một plugin miễn phí làm được điều đó.

EWWW Image Optimizer.

  • Nhẹ, chạy ổn định.
  • Nén ảnh cực tốt với nhiều tính năng khác nhau, chuẩn PageSpeed Insights.
  • Tự động điều chế thêm ảnh .WEBP
  • Vô vàn các tùy chọn khác.

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

Cấu hình EWWW Image Optimizer của thích viết blog.

Cấu hình EWWW Image Optimizer của thích viết blog.

Cloud optimization API Key: Dành cho bạn nào mua bản trả phí của plugin này, nhưng theo mình thì chưa cần thiết, bản miễn phí khá đầy đủ rồi.

Debugging: Chọn phần này nếu bạn muốn xem lỗi phát sinh từ plugin để sửa, nếu mọi thứ đều chạy ổn thì không cần.

Remove metadata: Bất kì hình ảnh nào khi được chụp đều có các thông tin xuất xứ như thiết bị nào chụp, ngày tháng bao nhiêu, blah blah. Và việc chọn tùy chọn này cũng sẽ khiến cho toàn bộ dữ liệu đó sẽ bị xóa, giúp hình ảnh của bạn giảm dung lượng.

JPG Optimization Level: Cách thức nén dành cho định dạng ảnh .JPG

PNG Optimization Level: Cách thức nén dành cho định dạng ảnh .PNG

GIF Optimization Level: Cách thức nén dành cho định dạng ảnh .GIF

PDF Optimization Level: Cách thức nén dành cho định dạng file .PDF, tính năng này bản trả phí mới dùng được.

Backup Originals: Lưu trữ bản gốc của hình ảnh trên server riêng của EWWW Image Optimizer trong 30 ngày trước khi bị xóa hoàn toàn. Chức năng này bản trả phí mới dùng được.

Cấu hình EWWW Image Optimizer của thích viết blog.

Cấu hình EWWW Image Optimizer của thích viết blog.

JPG quality level: Mức độ nén của file ảnh .JPG, mặc định wordpress vẫn sẽ giúp bạn nén ở mức 82. Nhưng để tối ưu nhất thì mình để là 80. Cái này tùy ở bạn.

Parallel optimization: Khi bạn tải ảnh lên thì toàn bộ ảnh sẽ được tối ưu hóa cùng lúc luôn. Cái này sẽ giúp nhanh hơn trong quá trình nén, nhưng sẽ ảnh hưởng đến cấu hình VPS, nếu VPS yếu quá thì không nên dùng cái này. Nhưng thường thì nhưng VPS mình đã giới thiệu trong bài này thì đều chơi được hết không phải xoắn =)).

Scheduled optimization: Tự động kiểm tra xem có ảnh nào chưa tối ưu thì tối ưu, cái này thì không cần thiết phải bật cho lắm.

Include Media Library Folders: Tự động tìm các hình ảnh trong mục media để tối ưu.

Folders to optimize: Ngoài thư mục media mặc định của wordpress ra, nếu bạn có những thư mục chứa ảnh khác thì có thể thêm đường dẫn vào đây để plugin nó biết đường tối ưu.

Folders to ignore: Cũng có những trường hợp bạn không muốn hình ảnh ở thư mục nào đó bị tối ưu thì có thể thêm đường dẫn thư mục đó vào đây để plugin nó biết đường bỏ qua.

Enable Embedded Help: Bật thông tin hỗ trợ từ nhóm phát triển plugin ở ngay trang tin của wordpress.

Allow Usage Tracking: Cho phép plugin theo dõi website bạn một cách ẩn danh nhằm có thông tin giúp phát triển plugin tốt hơn, và bạn sẽ nhận được 500 credit để dùng dịch vụ trả phí của họ.

Cấu hình EWWW Image Optimizer của thích viết blog.

Cấu hình EWWW Image Optimizer của thích viết blog.

ExactDN: Tự động điều chỉnh kích cỡ ảnh của bạn thông qua server của EWWW Image Optimizer, tuy nhiên bạn cần mua bản trả phí.

Resize Detection: Thông báo cho quản trị viên biết hình ảnh nào cần điều chỉnh kích thước.

Resize Media Images: Tùy chỉnh kích thước ảnh sẽ được thay đổi khi bạn đưa ảnh lên thư mục media của wordpress.

Resize Other Images: Tùy chỉnh kích thước ảnh khi tải lên ở các thư mục khác.

Resize Existing Images: Cho phép thay đổi toàn bộ kích thước các hình ảnh hiện đang có.

Disable Resizes: Một tính năng khá hay, ở đây plugin thống kê ra các trường ảnh mà website bạn tạo ra. Bạn có thể tùy chọn không tối ưu hoặc không tạo ra các trường ảnh khác nhau.

Cấu hình EWWW Image Optimizer của thích viết blog.

Cấu hình EWWW Image Optimizer của thích viết blog.

Hide Conversion Links: Ẩn link chuyển đổi, mình không hiểu cái này lắm.

Delete originals: Xóa bản gốc của hình ảnh sau khi tối ưu xong.

enable JPG to PNG conversion: Tự động chuyển đổi định dạng ảnh từ .JPG sang .PNG

enable PNG to JPG conversion: Tự động chuyển đổi hình ảnh từ .PNG sang . JPG

enable GIF to PNG conversion: Tự động chuyển đổi hình ảnh .GIF sang .PNG

Cấu hình EWWW Image Optimizer của thích viết blog.

Cấu hình EWWW Image Optimizer của thích viết blog.

JPG/PNG to WebP: Tạo thêm định dạng ảnh .WebP cho file ảnh .JPG và .PNG

Force WebP: Buộc chuyển đổi và sử dụng hình ảnh .WebP

Như vậy nếu bạn nào không cần nghiên cứu sâu thì có thể cấu hình như hình ảnh mình đã đưa ra. Sau khi đã lưu lại cài đặt xong bạn có thể vào phần Media của WordPress và chọn tối ưu đồng loạt những hình ảnh cũ.

Mình 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ì mình 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

Lưu ý, vì phát sinh định dạng ảnh .WebP nên bạn sẽ có 2 sự lựa chọn như sau:

1, Có sử dụng định dạng ảnh .WebP (nhớ kích hoạt ở phần WebP Settings trong plugin EWWW Image Optimizer).

Sau khi bạn tối ưu hình ảnh hàng loạt với plugin EWWW Image Optimizer thì định dạng .WebP sẽ tự động được sinh ra, nhiệm vụ của chúng ta là cấu hình để những trình duyệt chấp nhận định dạng ảnh .WebP hiển thị ảnh này. Để làm được điều này bạn sẽ phải sử dụng plugin Cache Enabler.

Tải về cài đặt, rồi cấu hình như sau:

Cấu hình Cache Enabler của thích viết blog.

Cấu hình Cache Enabler của thích viết blog.

Cache Expiry: Thời gian hết hạn của cache, đặt là 0 thì không bao giờ hết hạn.

Cache Behavior: Tùy chọn hành vi Cache, bạn có thể chọn full nếu như blog của bạn dùng cả comment mặc định cho bài viết, trong trường hợp không dùng comment mặc định thì bạn có thể chọn như trong ảnh.

Cache Exclusions: Không cache một bài viết hoặc một page nào đó theo ID.

Cache Minification: Tối ưu HTML, chúng ta không cần bật cái này vì ở plugin Autoptimize đã có chức năng này rồi.

Chỉnh sửa file wp-config.php thêm define(‘WP_CACHE’, true); vào.

Tối ưu wpconfig

Chỉnh sửa file mime.types trong /etc/nginx thêm vào image/webp webp;

Tối ưu WebP trên Nginx

Chỉnh sửa file nginx.conf trong /etc/nginx thêm vào

Thêm ngay dưới cùng của block http.

Tối ưu WebP trên Nginx

Chỉnh sửa file cấu hình của domain nằm tại /etc/nginx/conf.d có định dạng domain.conf

Thêm đoạn trên vào ngay dưới cùng của block Server

Tối ưu WebP trên Nginx

Như vậy là xong, từ nay website của bạn sẽ sử dụng định dạng ảnh .WebP trên các trình duyệt được hỗ trợ, trình duyệt nào không hỗ trợ thì vẫn sẽ hiển thị định dạng ảnh bình thường.

Ưu điểm.

  • Định dạng .WebP tải rất nhanh, kể các ảnh nặng cũng tải rất nhanh.
  • Chuẩn hóa của google, google khuyến khích các website sử dụng định dạng ảnh này.
  • Tốc độ website tăng lên đáng kể.

Nhược điểm.

  • Không sử dụng được memcached, do plugin Cache Enabler sẽ cache trên ổ cứng thay vì RAM, tuy nhiên bạn hãy an tâm là tốc độ vẫn rất nhanh vì các VPS bây giờ đều sử dụng ổ SSD. Thích Viết Blog cũng đang dùng phương pháp này.

2, Không sử dụng định dạng ảnh .WebP (bỏ kích hoạt ở phần WebP Settings trong plugin EWWW Image Optimizer).

Trong trường hợp không sử dụng ảnh .WebP thì bạn có thể sử dụng W3 Total Cache để dùng Memcached.

Bạn có thể tải file cấu hình sẵn của W3 Total Cache về tại đây.

Ưu điểm

  • Có rất nhiều kết nối tùy chọn khác nhau bởi W3 Total Cache có rất nhiều chức năng.
  • Tốc độ tải nhanh.

Nhược điểm.

  • Không hỗ trợ cache định dạng ảnh .WebP

Cả 2 plugin cache đều hoạt động tốt khi kết hợp với Plugin Autoptimize.

Các phần tối ưu tốc độ quan trọng khác.

  • Sử dụng HTTPS/ HTTP2 (rất quan trọng), xem hướng dẫn tại bài viết này.
  • Sử dụng chức năng Lazy Load cho ảnh. Tham khảo plugin Lazy Load by WP Rocket. Đối với Lazy Load ảnh thì chỉ có tác dụng với ảnh bình thường còn .WebP thì không nhé.

Kết quả.

Kết quả kiểm tra GTmetrix

Kết quả kiểm tra GTmetrix

Kết quả kiểm tra PageSpeed Insights

Kết quả kiểm tra PageSpeed Insights

Kết quả kiểm tra Think With Google

Kết quả kiểm tra Think With Google

Kết quả kiểm tra Tools Ping Dom

Kết quả kiểm tra Tools Ping Dom

Vậy là xong tương đối rồi đấy, ở bài viết này mình chỉ nêu ra các yếu tố chính để tối ưu thôi. Những vấn đề khác còn tùy vào trường hợp từng Website. Nếu có bất cứ câu hỏi nào hãy gửi cho mình ở mục liên hệ nhé.

Mọi câu hỏi hoặc các vấn đề liên quan xin gửi về mục Liên Hệ.