Làm thế nào để giảm bớt HTTP requests cho website WordPress của bạn?
Một trong những điều tôi thường xuyên gặp phải khi thực hiện các bài test tốc độ website là những trang này tải quá nhiều tập tin từ máy chủ. Giảm số lượng các tập tin cần thiết phải tải hay làm giảm số lượng HTTP requests sẽ giúp cho website của bạn tải nhanh hơn. Và dĩ nhiên, website tải nhanh hơn sẽ mang lại trải nghiệm người dùng tốt hơn. Đây cũng là một trong những yếu tố quan trọng để Google xếp hạng các trang trên bảng kết quả tìm kiếm. Vì vậy, rõ ràng, ngay khi có thể, bạn nên tìm cách giảm số lượng HTTP requests.
Tham khảo thêm:
- Hướng dẫn vô hiệu hóa Embed Script trong WordPress
- Loại bỏ Emoji để tăng tốc độ load cho website WordPress
Nguyên lý của giảm bớt HTTP request
Để làm việc này, bạn sẽ thường cần phải giải quyết được 3 vấn đề:
- Giảm số lượng tập tin JavaScript (JS).
- Giảm số lượng tập tin CSS.
- Giảm số lượng hình ảnh.
May mắn thay, 2 trong số 3 vấn đề này, các bạn có thể giải quyết rất dễ dàng nhờ plugin W3 Total Cache (W3TC).
Giảm bớt HTTP requests trong WordPress
1. Cài đặt và kích hoạt plugin W3 Total Cache (download).
Giảm số tập tin JS và CSS
2. Sau đó, truy cập mục Minify trong phần cài đặt. Kéo xuống một chút và bạn sẽ thấy ngay mục JavaScript. Hãy kích hoạt tính năng minify JavaScript, nó sẽ trông giống như thế này:
W3TC sẽ gộp tất cả các tập tin JS thành một và minify chúng (giảm bớt). Có nghĩa là nó sẽ loại bỏ các comment, khoảng trống và những thứ không cần thiết khác trong file JS. Nhờ đó, nếu bạn có 5 tập tin JS và gộp chúng thành 1, bạn sẽ tiết kiệm được 4 HTTP requests. Như bạn thấy đấy, việc này vô cùng đơn giản. Vì vậy, thực sự không có lý do gì để không làm nó.
3. Mọi việc tương tự với mục CSS:
Giảm số lượng hình ảnh
Nếu bạn có một giao diện phức tạp, theme của bạn có thể sử dụng rất nhiều ảnh nền. Có một cách để gộp tất cả các hình ảnh thành 1 tập tin duy nhất, đó là thông qua một quá trình “CSS spriting”. Để giải thích cơ chế đầy đủ và lịch sử của nó thì thực sự là quá dài với bài viết này. Nếu bạn quan tâm, có thể tham khảo thêm ở đây.
Nói một cách ngắn gọn: tất cả những hình ảnh nền được kết hợp thành một ảnh nền. Trong ví dụ sau đây, tôi đã kết hợp tất cả các biểu tượng mạng xã hội thành một:
Đây thực sự không phải là một điều dễ dàng và nếu không có nhiều kiến thức, bạn nên thuê 1 lập trình viên WordPress. Nếu bạn có một chút kinh nghiệm về lập trình, bạn có thể tham khảo SpriteMe, một một công cụ rất hữu ích được phát triển bởi Steve Souders.
Một ý tưởng khác để giúp trang web của bạn tải nhanh hơn là ngăn cản việc tải đồng thời tất cả các hình ảnh cùng một lúc. Bạn di chuyển màn hình đến đâu, hình ảnh sẽ được tải đến đấy. Một jQuery plugin có tên là Lazy Load sẽ giúp bạn làm điều này, nó sẽ tự động tải hình ảnh khi khách truy cập cuộn trang.
Trên đây là một số phương pháp đơn giản mà các bạn có thể thực hiện để giảm số lượng HTTP requests từ website của mình. Nếu bạn biết bất cứ giải pháp nào hiệu quả hơn, hãy chia sẻ nó với chúng tôi trong khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Bài viết hay lắm. Test hệ thống comment mới :D
Đây là một comment test chức năng bình luận :v
Ko dùng W3T thì có cách làm nào ko nhỉ :D
Giờ thiếu gì plugin có tính năng hỗ trợ combine và minify CSS, JS bạn. WP Rocket và Autoptimize là những ví dụ. :P
Mình dùng WP Rocket nhưng số HTTP request khi check bằng gtmetrix cũng khá nhiều :(
Combine CSS và JS chưa? :P Tìm bài hướng dẫn cài đặt WP Rocket trên blog của mình mà đọc. :P
Combine có phải là gộp tất cả link css hay js lại thành 1 file đúng ko nhỉ. Nếu thế thì mình làm rồi :D
Nếu làm rồi mà vẫn nhiều request thì chứng tỏ theme sử dụng nhiều hình ảnh + site tải nhiều dữ liệu từ bên ngoài host. :P
Dối với aps thì sao bạn ơi. Cách xử lý có giống vậy không
Mình có một site bằng APS, không biết cách xử lý có khác với WP không nhỉ.
Mình chưa dùng APS bao giờ nên không rõ bạn ạ. :)
Trên web mình có xài w3 total cache nhưng khi dùng chức năng minify các file css và javacript thì làm mất hiển thị của plugin wp-pagenavi nghĩa là làm biến mất phân trang. Tắt đi thì lại được có phải 2 plugin này xung đột không nhỉ?
2 Plugins đó xung đột nhau bạn ạ. Bạn nên tắt chức năng minify đi. :)
Memcached của cloudflare hả bạn, mùnh tắt rồi. Nhân tiện cho hỏi bạn có biết cài openssl cho apache ko, hướng dẫn mình với, làm hoài ko dc
Memcached của VPS bạn ơi. Bạn đang dùng VPS của nhà cung cấp nào vậy? :P
Thuê của CMC, mình dùng host windows. Bạn đã cài chứng chỉ ssl cho website chưa
Với WordPress thì dùng VPS Linux tốt hơn bạn ạ. :) Mình vẫn chưa cài SSL. Đang phân vân vì cài vào thì site sẽ load chậm hơn. :D
Bài viết rất bổ ích, mình đang gặp vấn đề này với website của công ty dù đã dùng cloudlare và thuê vps nhưng ko cải thiện đc nhiều lắm về tốc độ load trang
Mình đang dùng VPS Thần tốc + CloudFlare đây. Bạn có bật Memcached chưa? :P