Kể từ khi WPML chuyển sang thương mại, wpml.org đang phải xử lý lượng truy cập nhiều hơn đáng kể. Hai tuần trước, máy chủ của chúng tôi chạy ở mức tải 95% và thời gian phản hồi là hơn 10 giây. Với W3TC, mức tải của chúng tôi đã trở lại 5% và thời gian phản hồi là khoảng 300 ms.
Nếu bạn chưa quen với nó, W3TC là một plugin hiệu suất trang web. Nó bao gồm bộ nhớ cache trang nhưng đó mới chỉ là khởi đầu. Ngoài việc lưu cache trang cơ bản, nó còn thu nhỏ các tệp JS và CSS, nén mọi thứ và chạy CDN (mạng phân phối nội dung). Khi kết hợp lại, các chức năng này có thể tăng tốc độ trang web lên rất nhiều, cho phép các trang web WordPress phức tạp đối phó với lưu lượng truy cập lớn.
Tại sao nó lại quan trọng đối với các trang web WordPress?
Một bức ảnh đáng giá ngàn lời nói. Đây là cách trang web của chúng tôi tải mà không có bất kỳ bộ nhớ cache nào (được tạo bởi Pingdom Tools):
Nếu bạn nghĩ điều này đáng sợ, hãy nhớ rằng thực tế còn tệ hơn thế. Biểu đồ thời gian tải này được lấy khi máy chủ của chúng tôi thực sự đang chạy ở mức tải 5%. Khi nó thực sự chạy mà không có bộ nhớ cache, máy chủ đã phải hoạt động hết công suất ở mức tải 95% và thời gian xử lý lâu hơn nhiều. Byte đầu tiên mất 5 giây để xuất hiện chứ không phải 1/2 giây như bạn thấy trong biểu đồ này.
Để hiển thị đầy đủ trang chủ của chúng tôi, máy chủ phải gửi 77 tệp. Ngay cả biểu đồ này, chạy ở mức tải máy chủ 5%, cũng kết thúc bằng thời gian chờ là 30 giây (xem các đường màu đỏ).
Có phải do lập trình cẩu thả và thực hành thiết kế tồi không? Không.
Sức mạnh của WordPress đến từ tính mô-đun. Bạn có thể chọn bất kỳ giao diện nào bạn thích, với bất kỳ sự kết hợp nào của các plugin. Điều đó có nghĩa là mỗi thành phần này được phát triển độc lập và chạy với các tài nguyên riêng. Hầu hết các plugin mà bạn bật đều bao gồm một số tệp CSS và Javascript và đóng góp vào nỗ lực xử lý PHP và MySQL. Bạn có thể tối ưu hóa nó theo cách thủ công, nhưng khi đó bạn sẽ mất đi tất cả tính mô-đun tuyệt vời này và chúng ta lại quay về vạch xuất phát.
Hãy chạy trang web của bạn qua các công cụ của Pingdom hoặc các công cụ đo thời gian tải trang khác (có một tiện ích bổ sung của Firefox cho việc này). Xem các tệp nào tải và thứ tự của chúng. Bạn sẽ nhận thấy rằng các tệp CSS tải hình ảnh và các CSS khác, đồng thời có rất nhiều tệp Javascript được tải cho mỗi trang.
Để kích thích sự hứng thú của bạn, đây là những gì chúng tôi đạt được khi sử dụng tất cả các tính năng từ W3TC:
Các con số bạn đang thấy ở đây là chính xác. Tổng cộng có 28 tệp được lấy về để hiển thị trang. 5 tệp đến từ wpml.org (máy chủ của riêng chúng tôi) và phần còn lại đến từ CDN (mạng phân phối nội dung). PHP hầu như không cần làm gì để phục vụ trang này, ngoại trừ việc kiểm tra xem nó có trong bộ nhớ cache hay không và một vài kiểm tra nhỏ khác.
Toàn bộ trang tải trong vòng chưa đầy 2 giây và gây ra mức tải mà chúng tôi khó có thể đo được trên máy chủ. Chúng tôi hài lòng, khách truy cập hài lòng và ngay cả Google cũng hài lòng.
Bước 1) Bộ nhớ cache trang
Điều đầu tiên và cơ bản nhất bạn muốn làm là bật bộ nhớ cache trang. Truy cập Performance, bật W3TC và định cấu hình phần Page Caching.
Đối với bộ nhớ cache trang, chúng tôi giữ nguyên các cài đặt cơ bản. Một điều mà chúng tôi đã thêm vào là loại trừ tài khoản khách hàng và các phần tải xuống khỏi bộ nhớ cache trang, để W3TC không can thiệp vào tài khoản khách hàng WPML và các bản tải xuống của WPML.
Nếu bạn đang sử dụng bộ nhớ cache opcode, W3TC sẽ tận dụng điều này để tăng tốc độ trang web của bạn hơn nữa. Chúng tôi không sử dụng nó, nhưng nó rất đáng giá nếu bạn đang chạy quá trình xử lý PHP phức tạp chưa được lưu vào bộ nhớ cache.
Bước 2) Thu nhỏ – đóng gói và nén CSS và JavaScript
Bạn còn nhớ tất cả các tệp CSS và JS mà giao diện và các plugin thêm vào không? Bây giờ là lúc để khắc phục mức tải mà chúng đang gây ra.
Tính năng thu nhỏ (Minify) sẽ thu thập nhiều tệp tài nguyên, đóng gói chúng thành một tệp duy nhất và nén lại. Kết quả là một tệp lớn hơn thay vì hàng chục tệp nhỏ.
Mặc dù tổng kích thước có thể chỉ giảm 50%, nhưng mức tải mà nó tiết kiệm được là rất lớn. Thay vì trình duyệt phải đưa ra nhiều yêu cầu HTTP và nhận nhiều tệp nhỏ, nó đưa ra một yêu cầu duy nhất và nhận tất cả chúng cùng nhau. Thay đổi này có lẽ là yếu tố đóng góp lớn nhất vào việc cải thiện khả năng phản hồi của trang web của bạn – đặc biệt là đối với những khách truy cập mới (những người chưa có CSS và JS của bạn trong bộ nhớ cache).
Nhấp vào nút Help ở đầu trang. W3TC sẽ chạy qua toàn bộ trang web của bạn và tìm kiếm các tệp tài nguyên. Sau đó, nó cho phép bạn chọn những tệp nào cần kết hợp. Thông thường, bạn có thể chọn tất cả, nhưng bạn cần chú ý một chút đến những gì mình đang làm, vì điều này có thể thay đổi thứ tự tải.
Khi bạn đã chọn các tệp CSS và JS để thu nhỏ, bạn cần đảm bảo rằng thứ tự của chúng là chính xác.
Đối với các tệp CSS, hãy kéo các tệp lên và xuống trong danh sách.
Thứ tự bạn thấy trong danh sách này phải khớp với thứ tự các tệp CSS được tải khi không có Minify. Bạn có thể thấy điều đó trong mã nguồn trang HTML của mình.
Các tệp Javascript thì phức tạp hơn một chút. Ở đây, thứ tự tải thậm chí còn quan trọng hơn vì thứ tự sai sẽ dẫn đến lỗi JS và chức năng bị hỏng.
W3TC cho phép bạn chọn tệp JS nào đi vào phần header và tệp nào đi vào phần body. Ví dụ: các tập lệnh Google Analytics sẽ đi ngay trước , trong khi jQuery đi vào header, vì nó cần chạy trước (và nằm ngoài danh sách thu nhỏ).
Bước 3) Mạng phân phối nội dung (CDN)
Đối với chúng tôi, phần tuyệt vời nhất là một CDN hoạt động hoàn hảo.
Việc định cấu hình và chạy CDN nằm ngoài phạm vi của bài viết này, vì nó yêu cầu thiết lập và có tài khoản trong dịch vụ của bên thứ 3.
Đối với các trang web của riêng chúng tôi, chúng tôi sử dụng Amazon S3 để lưu trữ và CloudFront để phân phối. Có những tùy chọn tốt khác mà bạn có thể khám phá và so sánh.
Khi tài khoản CDN của bạn được thiết lập, W3TC sẽ gửi các tệp cục bộ của bạn đến CDN và thay thế các liên kết từ máy chủ của bạn thành các tệp trong CDN. Sau đó, máy chủ của bạn chỉ gửi các tệp HTML và CDN sẽ lo phần còn lại.
Trong khi máy chủ của bạn là một máy duy nhất, CDN thực chất là một mạng lưới các máy chủ. Nó sẽ gửi các tệp từ máy chủ gần nhất đến từng khách truy cập. CDN có thể phục vụ các tệp tĩnh nhanh hơn nhiều so với bất kỳ máy chủ đơn lẻ nào. Bằng cách sử dụng CDN, bạn cải thiện trải nghiệm của khách truy cập và giảm đáng kể băng thông cũng như mức sử dụng mạng của máy chủ.
Bạn nên làm theo trình hướng dẫn thiết lập CDN trong W3TC. Nó sẽ giúp bạn chuyển thư viện phương tiện, giao diện và các tài nguyên plugin sang CDN.
Bạn cảm thấy thú vị với việc tối ưu hóa hiệu suất trang web? Hãy cho chúng tôi biết bằng cách để lại bình luận tại đây!
