Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách làm nổi bật các bình luận trong WordPress bằng code giúp bạn dễ dàng chỉnh sửa các giao diện bình luận nhằm phân biệt giữa người dùng và tác giải trực quan hơn tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tăng tốc trang Web bằng cách di chuyển Javascript xuống Footer.

Tăng tốc trang Web bằng cách di chuyển Javascript xuống Footer

Để tăng tốc trang Web ngoài yếu tố hosting, Server, đường truyền có cấu hình cao thì việc tối ưu trang Web để giúp tải nhanh trang Web là điều rất cần thiết nếu bạn sử dụng WordPress có rất nhiều Plugin giúp bạn tối ưu vấn đề này một trong những Plugin mình đang sử dụng để tạo Cache đó là Plugin WP Fastest Cache dễ dàng cấu hình và sử dụng. Ngoài ra bạn có thể sử dụng một số thủ thuật nhằm đẩy nhanh tốc độ tải trang như chuyển Javascript xuống Footer.

Phương pháp 1: Sử dụng Plugin CDN jsDelivr

jsDelivr là một dịch vụ CDN công cộng miễn phí với các thư viện javascript và jQuery, bao gồm tất cả các tập tin mà các bạn cần để làm việc (css / png). Ngoài ra nó còn tích hợp các tập tin javascript sử dụng cho các plugin WordPress phổ biến, như WP SlimStat. Với plugin này, bạn có thể tự động tích hợp CDN siêu nhanh vào trang web của bạn mà không có những rắc rối của việc chỉnh sửa mã của bạn và nó sẽ tự động tìm kiếm các URL chính xác.

Lợi ích mà Plugin mang lại

Tăng tốc độ trang web của bạn.

Giảm bớt lưu lượng băng thông.

Giảm tải máy chủ.

Các tính năng chính của Plugin

Di chuyển các tập tin được lựa chọn tới chân trang.

Áp dụng Async / Trì hoãn để tải javascripts.

Tương thích với W3 Total Cache và WP Super Cache.

Tự động đồng bộ hóa với dữ liệu của nhà cung cấp.

Cho phép bạn chọn các tập tin bạn muốn tải từ CDN.

Hỗ trợ giao thức HTTPS.

Sử dụng Google CDN để tải jQuery để tận dụng lợi thế của bộ nhớ cache của trình duyệt.

Cài đặt và cấu hình Plugin

Giống như mọi Plugin khác đầu tiên bạn cần cài đặt Plugin CDN jsDelivr và kích hoạt nó để sử dụng (tham khảo bài viết hướng dẫn cài đặt Plugin WordPress với các phương pháp rất đơn giản). Sau khi cài đặt bạn kích hoạt Plugin, khi kích hoạt plugin xong bạn sẽ thấy xuất hiện thêm một Menu trong Menu “Cài đặt” với tên là “JsDelivr CDN”. Hãy kích vô Menu này để tiến hành cài đặt và sử dụng Plugin. Đầu tiên bạn cần nhấn “update CDN data” để Plugin quét các dữ liệu cần để sử dụng trong website của bạn.

Sau khi quét CDN xong bạn tiếp tục nhấn “Scan website” sau đó bạn sẽ thấy một danh sách các JS hiện ra và bạn chỉ cần chọn những file JS cần sau đó di chuyển chúng xuống chân trang.

Sau khi thực hiện các cài đặt bạn nhớ lưu lại nhé và bây giờ tốc độ website của bạn đã được cải thiện đáng kể rồi đấy.

Lưu ý: Plugin đã không được cập nhật phát triển cách đây hơn 3 năm rồi, có thể sẽ không còn tương thích với phiên bản WordPress hiện tại nếu bạn cảm thấy không an toàn có thể sử dụng phương pháp số 2.

Phương pháp 2: Sử dụng Plugin Scripts To Footer

Một Plugin nhỏ gọn giúp bạn di chuyển các kịch bản đến chân trang để giúp tăng tốc tải trang và cải thiện trải nghiệm người dùng. Giống như mọi Plugin khác đầu tiên bạn cần cài đặt Plugin Scripts To Footer và kích hoạt nó để sử dụng (tham khảo bài viết hướng dẫn cài đặt Plugin WordPress với các phương pháp rất đơn giản).

Sau khi cài đặt và kích hoạt xong bạn sẽ thấy xuất hiện một Menu có tên “Scripts to Footer” trong Menu Cài đặt > Kích chọn Menu “Scripts to Footer” để cấu hình!

Cấu hình Plugin

Về cơ bản bạn không cần phải cấu hình gì cả vì khi kích hoạt Plugin sẽ tự động chuyển các “JavaScripts” xuống chân trang rồi ở đây bạn chỉ có cấu hình loại bỏ chuyển “JavaScripts” xuống chân trang.

Nếu sau khi kích hoạt Plugin bạn thấy một số thành phần bị lỗi ở vị nào thì bạn có thể loại bỏ bằng cách vào trong phần cấu hình Plugin trong mục “Exclude Options” hãy tích vào các thuộc tính cần loại bỏ bao gồm (trang, bài viết, chuyên mục, thẻ….).

Tuy nhiên bạn thể khắc phục bằng cách tích chọn vào thuộc tính “Keep jQuery in the Header”. Ngoài ra bạn có thể tham khảo một số cách loại trừ “JavaScripts” trong phần hướng dẫn của Plugin. Quá đơn giản để bạn có thể tăng tốc trang Web phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách tăng tốc trang Web bằng cách di chuyển Javascript xuống Footer giúp bạn có thể tối ưu tốc độ tải trang Web đơn giản nhất tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách cải thiện tốc độ tải trang web bằng plugin đơn giản nhất.

Cải thiện tốc độ tải trang web bằng plugin đơn giản nhất

Nếu bạn đang sử dụng mã nguồn wordpress để xây dựng website cho mình thì may mắn cho bạn đối với mã nguồn này có rất nhiều Plugin hỗ trợ bạn việc tối ưu trang web giúp website của bạn chạy nhanh hơn. Tuy nhiên việc kết hợp các Plugin sao cho đúng để giúp website của bạn tối ưu nhất là một vấn đề mà không ai cũng làm được. Plugin WP Performance Score Booster sẽ giúp tối ưu website của bạn và giúp website của bạn nâng cao điểm số trên các công cụ đo lường tốc độ tải trang web. Nếu bạn đang sử dụng một số Plugin cache thì bạn cũng có thể kết hợp Plugin này mà không xảy ra xung đột.

Plugin này sẽ giảm thời gian tải trang và tăng tốc trang web của bạn đồng thời cải thiện điểm số trang web trong các dịch vụ như PageSpeed, YSlow, Pingdom và GTmetrix.

Các tính năng chính của Plugin

Hủy bỏ bất kỳ chuỗi truy vấn từ các tài nguyên tĩnh như CSS & JS

Kích hoạt tính năng nén GZIP (nén text, html, javascript, css, xml, vv)

Thêm Vary: Accept-Encoding header

Đặt hết hạn bộ nhớ đệm

Giống như mọi Plugin khác đầu tiên bạn cần cài đặt Plugin Performance Score Booster và kích hoạt nó để sử dụng (tham khảo bài viết hướng dẫn cài đặt Plugin WordPress với các phương pháp rất đơn giản). Sau khi cài đặt xong bạn kích hoạt plugin, khi kích hoạt xong bạn sẽ thấy xuất hiện thêm một Menu có tên là WP Performance Score Booster trong Menu Cài đặt (Settings).

Kích chọn vô Menu này để cấu hình Plugin.

Giao diện cài đặt của Plugin khá đơn giản chỉ có 3 tính năng chính được kích hoạt sẵn.

Remove query strings from static content: Hủy bỏ các truy vấn từ nội dung tĩnh.

Enable GZIP compression (compress text, html, javascript, css, xml and so on): Kích hoạt tính năng nén GZIP ( nén text , html , javascript , css , xml , vv ).

Set expire caching (Leverage Browser Caching): Đặt hết hạn bộ nhớ đệm.

Bạn có thể để mặc định, sau khi thực hiện xong bạn hãy vào các trang kiểm tra tốc độ trang web để kiểm nghiệm, quá đơn giản để bạn có thể cải thiện tốc độ tải trang web bằng plugin phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Theo như họ quảng cáo thì tính năng này có thể giúp giảm khoảng 72% Time to First Byte (TTFB), 23% First Contentful Paint (FCP) và 13% Speed Index đối với người dùng desktop. Tuy nhiên bạn nên kiếm nghiệm theo thực tế trang Web của mình nhé.

Tác dụng của Automatic Platform Optimization?

Giúp các bạn Cache toàn bộ dữ liệu website của bạn lên máy chủ CDN của họ (bao gồm cảm HTML lẫn Google Fonts). Điều này sẽ giúp website của bạn load nhanh hơn và giảm tải được rất nhiều tài nguyên cho máy chủ gốc. Nó cũng là một cách tuyệt vời để chống lại các cuộc tấn công từ chối dịch vụ (DDoS).

Không dừng lại ở đó tính năng đáng đồng tiền của nó chính là nó cho phép bạn bypass cookie – tính năng vốn chỉ có trên CloudFlare Business (giá từ $200/tháng) trở lên. Nghĩa là sẽ có các phiên bản cache khác nhau dành cho người dùng đăng nhập và không đăng nhập website.

Tóm lại nếu bạn có một Web site nặng với lượng khách truy cập nhiều thì không ngại gì sử dụng tính năng tuyệt vời này. Với mức giá chỉ 5$/ tháng cũng không phải là thực sự quá đắt để sử dụng tính năng này.

Đăng ký Automatic Platform Optimization?

Đầu tiên bạn hãy vào tài khoản CloudFlare của bạn > chọn đúng tên miền muốn sử dụng > chọn tab Speed > Optimization > kéo xuống mục Automatic Platform Optimization for WordPress và click vào nút Purchase để đặt mua.

Bạn có thể thay toán bằng Visa hoặc Paypal, theo mình bạn nên sử dụng Paypal cho tiện, khỏi cần phải xác minh phiền phức.

Okey! Sau khi bạn thanh toán xong hãy cài đặt và cấu hình Plugin chính chủ từ CloudFlare.

Cài đặt Plugin CloudFlare

Truy cập vào trang WordPress và tiến hành cài đặt Plugin chính chủ từ CloudFlare (download).

Sau khi cài đặt xong plugin sẽ yêu cầu bạn kết nối với tài khoản CloudFlare bằng email và API Key.

Lúc này bạn hãy truy cập địa chỉ này > click vào nút View tương với với mục Global API Key.

Điền mật khẩu đăng nhập và xác nhận reCAPTCHA.

Sau khi có được API Key hãy sao chép rồi paste vào trang cài đặt plugin CloudFlare.

Cấu hình Plugin CloudFlare

Khi kết nối thành công, bạn sẽ thấy giao diện Plugin như bên dưới.

Đầu tiên hãy nhấn nút Apply trên mục Apply Recommended Cloudflare Settings for WordPress để CloudFlare tự động tối ưu. Đồng thời bạn hãy kiểm tra xem tính năng Automatic Platform Optimization đã được kích hoạt hay chưa? nếu chưa bạn hãy chuyển sang chế độ On nhé.

Chuyển qua tab Settings, tắt tính năng Auto Purge Content On Update đi (nếu nó đang bật). Hai tính năng này xung đột và không thể hoạt động cùng nhau.

Quay trở lại trang quản trị của CloudFlare, nếu bạn thấy tính năng APO đã ở trạng thái On và dòng chữ WordPress plugin successfully detected on… thì có nghĩa là mọi thứ đã hoàn tất.

Quá đơn giản để có thể bạn tăng tốc cho WordPress phải không nào? bạn có cảm nhận gì khi sử dụng tính năng này của CloudFlare?

Hãy đợi chút: WordPress của bạn đang gặp vấn đê khi nâng cấp lên phiên bản mới, bạn muốn quay về phiên bản cũ vậy làm sao? hãy tham khảo bài viết cách hạ cấp phiên bản WordPress an toàn nhất.

Kết luận

Nhìn chung với giá 5$/ tháng mà bạn nhận được những lợi ích khá tốt thì ngại gì bạn không dùng thử tính năng này? nó sẽ giúp trang Web của bạn cải thiện được rất nhiều vấn đề đó? bạn có thể sử dụng tính năng này song song với một Plugin tạo Cache để có được tốc độ tải trang tốt nhất.