Gần đây, rất nhiều người hỏi tôi cách mà tôi tối ưu trang WordPress của mình để nó tải nhanh được như vậy.
Sự thực là với số lượng bài khổng lồ, CunghocWP tải nhanh hơn đa số các web tĩnh được tạo trên layout có sẵn và đôi khi còn nhanh hơn cả những trang chạy Google AMP.
Trong bài này tôi sẽ cho các bạn thấy làm sao chúng tôi làm trang WordPress của mình nhanh hơn các web tĩnh lẫn các CMS kiểu headless khác.
Lưu ý là bài này hơi mang thiên hướng kỹ thuật nên với các bạn mới tập thì tôi khuyên hãy từ từ mà đọc, trước hết cứ làm đúng quy trình tăng tốc WordPress mà chúng tôi giới thiệu trước đã.
HOÀN CẢNH:
Gần đây WordPress càng ngày càng có nhiều nhận xét tiêu cực từ các lập trình viên website mà phần nhiều trong số đó là nói về tốc độ càng ngày càng chậm.
Những nhận xét này thường kết hợp luôn lời khuyên là bạn nên dùng các hệ thống tạo web tĩnh như là GatsbyJS, số khác thì khuyên bạn nên chuyển hẳn sang hệ thống CMS kiểu headless khác như là Contentful.
Tất nhiên rất nhiều người bạn của tôi bắt đầu thắc mắc về thực hư của vấn đề.
Thậm chí một vài người trong số số họ còn chuyển thẳng sang các hệ thống CMS dạng headless , cũng bởi vì họ đọc quá nhiều những bài viết về cách mà nền tảng này đã vượt xa WordPress lẫn hệ thống cung cấp web tĩnh về khía cạnh tốc độ như thế nào.
Thật sự thì vấn đề này khá là mệt vì tôi biết chắc rằng họ đã tốn hàng chục ngàn đô chỉ để cho chuyển giao qua nền tảng này. Đó là còn chưa nói tới chi phí giải quyết hàng tấn những vấn đề sẽ xuất hiện sau này, khi mà toàn bộ dữ liệu đã được đưa lên nền tảng mới.
Vì vậy, tôi đã nhân cơ hội đó để chứng minh rằng một trang WordPress với nội dung dày đặc như WPBeginner có thể đạt tốc độ tải nhanh chẳng kém gì, thậm chí nhanh hơn cả các trang web tĩnh hiện nay cả.
KẾT QUẢ:
Trước khi tôi đi vào hướng dẫn chi tiết, thì tôi sẽ chia sẻ kết quả trước.
Đây là tốc độ truy cập trang chủ WPBeginner từ Pingdom tại DC, Hoa Kỳ.
400-700ms là tốc độ truy cập vào WPBeginner tùy vào thời gian và địa điểm mà bạn tiến hành truy cập, một tốc độ rất nhanh xét tới việc truy cập thẳng vào trang chủ WPBeginner
Đây là kết quả bài test tôi chạy cho một bài đăng với rất nhiều nội dung cả text lẫn hình ảnh
WPBeginner đạt tuyệt đối 100 điểm trong bài speed test của Google dành cho PC, và số điểm cũng rất cao trong bài test tương tự cho thiết bị di động (tuy nhiên chúng tôi vẫn còn phải tối ưu cho nền tảng này)
Kết quả trên là những gì người đọc trải nghiệm được khi họ truy cập WPBeginner, thời gian tải trang gần như là ngay tức thì.
Để bạn thấy rõ hơn, đây là kết quả cùng bài test cho trang chủ của Gatsby – một trang web tĩnh mà nhận được rất nhiều sự quan tâm của các lập trình viên trong thời gian gần đây.
Tương tự với kết quả của trang chủ Netlify – một trang web tĩnh khác chậm hơn WPBeginner tuy có lượng truy cập chỉ bằng một nửa và lượng nội dung chỉ bằng 30% web của tôi.
Tốc độ trang chủ của Contentful, một web dựa trên nền tảng CMS headless rất nổi tiếng thời gian gần đây, tuy nhiên lại cực kỳ thiếu tối ưu, kết quả cho thấy nó chậm nhất trong các website được test.
Tôi chia sẻ không nhằm mục đích bêu xấu mà để chỉ ra sự thực nghiệt ngã rằng không phải cái gì được quảng cáo đúng cũng là đúng, nếu tối ưu hóa tốt và hợp tác với đúng host thì WordPress nhanh chả thua gì các web tĩnh cả. Hơn thế nữa, không có nền tảng nào đưa lại được sự đa dụng mà WordPress đã và đang cung cấp cho các doanh nghiệp với hệ sinh thái khổng lồ của themes và plugins.
Hạ tầng hosting của WPBeginner
Hạ tầng hosting là khía cạnh quan trọng nhất khi xét tới tốc độ của web.
Tôi là khách hàng của Hostgator từ năm 2007, sau đó vào năm 2009 tôi bắt đầu sử dụng một shared hosting để viết blog dưới tên WPBeginner.
Sau đó khi WPBeginner phát triển hơn thì tôi nâng cấp lên hệ thống VPS của Hostgator và cuối cùng là dùng hẳn dedicated server của họ.
Khi tôi mở lời với HostGator về kế hoạch làm cho WPBeginner nhanh hơn cả các web tĩnh, ban quản lý của họ đã đề nghị xây dựng riêng cho chúng tôi hẳn một hệ thống enterprise hosting. Họ đã dùng tới đội ngũ kỹ thuật tốt nhất từ cả Bluehost và HostGator để làm việc sát sao với tôi trong quá trình cải tiến web này.
Đây là tổng quan hệ thống server của WPBeginner:
Như bạn có thể thấy, đây là hệ thống liên kết nhiều server trải đều ở 2 khu vực là 2 bang Texas và Utah. Có tổng cộng 9 server chưa kể tới hệ thống cân bằng tải. Mỗi server chạy một CPU Xeon-D 8 nhân 16 luồng với 32GB Ram và 2 TB SSD (Gọi là RAID setup).
Chúng tôi đang dùng hệ thống Cân Bằng tải của Google Cloud, do đó có khả năng mở rộng quy mô và cân bằng tải cho hệ thống toàn cầu.
Một khi phần cứng đã được tối ưu với data được sao lưu vào hệ thống, Bluehost và Hostgator bắt tay với nhau để làm việc chung, tối ưu tùy chỉnh server cho WordPress. Tôi mong rằng về sau quy trình này sẽ được áp dụng rộng rãi cho tất cả người thuê host.
Tổng quan tùy chỉnh server
Thật khó để tóm tắt quá trình phức tạp này bằng vài dòng chữ, nhưng tôi sẽ cố, nhìn chung thì chúng tôi dùng Apache vì chúng tôi quá quen với nó rồi, chứ không phải để so sánh giữa NGINX và Apache.
Chúng tôi dùng PHP 7.2 và PHP-FPM để quản lý dòng truy cập và lệnh của người dùng, bạn cũng nên dùng PHP 7+ để tối ưu tốc độ truy cập web của mình.
Chúng tôi dùng hệ lưu trữ đệm Opcode với tính năng cache warmer để đảm bảo là không người dùng nào phải trải qua hiện tượng uncached pageview cả.
Chúng tôi còn dùng Object cache với memcache để cải thiện tốc độ phản hồi với các web API. Người viết của chúng tôi có thể truy cập phần tùy chỉnh này ở admin area >> All Posts
Tốc độ của trang quản lý này hiện nay nhanh gấp đôi so với trước đây.
Để quản lý cơ sở dữ liệu, chúng tôi chuyển từ MySQL qua MariaDB – vốn cũng là MySQL nhưng mà nhanh và tốt hơn nhiều. Chúng tôi cũng chuyển từ HyperDB sang LudicrousDB vì nó giúp chúng tôi cải thiện việc cân bằng tải, tải lại trang, khả năng chịu lỗi và lặp lại cơ sở dữ liệu.
Ngoài ra còn rất nhiều các tùy chỉnh khác giúp cải thiện hiệu năng và khả năng mở rộng quy mô như dùng HTTP/2 và HSTS để tăng tốc độ kết nối và mã hóa cũng như khả năng xài ké server ở khu vực khác khi trung tâm quản lý dữ liệu bị mất điện.
CDN, WAF và DNS
Ngoài cơ sở hạ tầng hosting, thì có một số vấn đề khác cần quan tâm để tăng tốc độ truy cập cho web của bạn, điển hình là chọn nhà cung cấp DNS, CDN và tường lửa cho web (WAF).
WAF, DNS và CDN là 3 vấn đề mà khá nhiều công ty đang cung cấp giải pháp, ví dụ như Sucuri, CloudFlare hay MaxCDN. Vì tôi muốn quản lý toàn quyền và giảm rủi ro khi bỏ hết trứng vào một rổ nên tôi đã dùng 3 nhà cung cấp dịch vụ khác nhau cho 3 vấn đề này.
Tôi dùng DNS của DNS Made Eassy, nhà cung cấp dịch vụ DNS nhanh nhất thế giới. Khi dùng DNS của đơn vị này, tôi có thể định hướng traffic ở khắp nơi trên thế giới khi một trung tâm dữ liệu trên CDN hoặc WAF của mình gặp trục trặc, việc này giúp tối đa hóa uptime cho web.
CDN thì tôi dùng của MaxCDN, nó cho phép hệ thống tải lên những dữ liệu như hình ảnh, CSS file hay Javascripts từ các server trải khắp thế giới của họ.
Còn với tường lửa, chúng tôi dùng của Sucuri để chặn các đợt tất công mạng, ngoài ra nó cũng là một giải pháp dự phòng cho CDN. Tôi nghĩ rằng đây là hệ thống tường lửa tốt nhất trên thị trường hiện nay
Kết hợp cả 3 giải pháp trên với sự lựa chọn một nhà cung cấp hạ tầng hosting tốt, tốc độ truy cập vào web của bạn sẽ tăng lên đáng kể.
Biểu đồ Waterfall sau so sánh web của WPBeginner với Gatsbyjs.org và Cloudflare.com
Trong từng hạng mục (màu) so sánh, WPBeginner đều đứng đầu khi so sánh với 2 web còn lại, dẫn tới tốc độ truy cập web của WPBeginner tất nhiên là nhanh nhất.
Tải trang lập tức, tối ưu hình ảnh và một số ưu điểm nên có của web:
Ngoài các ưu điểm như đã đề cập ở trên, WPBeginner còn sử dụng một mẹo nhỏ đó là dùng instant.page để có thời gian tải trang gần như tức thì, gọi là JIT preloading, tức là khi người dùng chuẩn bị bấm vào link thì web đã được tải ngay lập tức (theo tính toán cứ 2 người giữ chuột trên link quá 65ms sẽ có 1 người bấm vào). Vì vậy khi vào tới site thì thường web site đã tải sẵn rồi.
Đơn giản chỉ cần dùng Instant Page WordPress plugin. Nó cực kỳ tốt và bạn còn có thể test để xem sự khác biệt khi sử dụng, chỉ cần click vào test your clicking speed là được.
Cập nhật lại là tôi đã không còn sử dụng instant.page mà thay vào đó là FlyingPages Plugin.
Tối ưu hình ảnh cho web
Dù rằng có rất nhiều ứng dụng format hình ảnh đang được phát triển, tôi lại dùng đang áp dụng hình thức khác, đó là yêu cầu người viết blog tối ưu hình mà họ post bằng công cụ TinyPNG. Ngoài ra bạn có thể dùng các công cụ tương tự như Optimole hoặc EWWW Image Optimizer.
Dù sao thì tôi cũng thích đội ngũ của mình thực hiện quy trình này thủ công hơn là dùng phần mềm format nên là chúng tôi không để lọt một file ảnh có dung lượng lớn nào lên server.
Chúng tôi cũng đang dự định sẽ thêm tính năng lazy loading trong tương lai gần vì Chrome 76 nay đã hỗ trợ lazy loading.
Một lúc sau khi tôi đăng bài thì Google cho ra mắt Native Lazy Load plugin dành cho WordPress.
Hạn chế query HTTP và một số mẹo.
Tùy vào việc bạn dùng plugin WordPress nào, một số plugin sẽ có tải kèm file CSS và Javascripts mỗi khi tải trang. Những lệnh HTTP tải phụ này có thể chiếm quá nhiều tài nguyên nếu bạn cài quá nhiều plugin mà không kiểm soát được như bài viết cách WordPress Plugins làm ảnh hưởng tới thời gian tải trang.
Nhưng nên nhớ rằng WPBeginner của chúng tôi cũng sử dụng tới 62 plugin chạy ngầm, liên tục. Điều bạn có thể làm để giảm thiểu băng thông khi tải trang là nén và gộp những file CSS và JavaScript bằng cách sử dung các plugin caching như WP Rocket. (xem bài viết sau để biết cách mà chúng tôi đã gộp những file code này một cách thủ công mà không dùng tới plugin)
Ngoài lệnh HTTP của plugin và theme, một số scripts hoặc tool mà bạn cài riêng từ bên thứ 3 có thể làm chậm tốc độ tải trang của bạn ví dụ như scripts quảng cáo hay scripts target khách hàng, nên hãy chú ý tới điều này và sử dụng công cụ như Google Tag Manager để tối ưu hóa, chỉ bất scripts lên khi cần.
Tuy nhiên nếu bạn có những trang web như TechCrunch hay TheNextWeb thì rất khó để bạn làm được gì vì không thể nào mà bạn tắt quảng cáo được cả (bạn kiếm tiền từ quảng cáo mới cài những cái scripts này chứ :D), rất may là WPBeginner không cần tới script quảng cáo bên thứ 3 vì chúng tôi kiếm tiền từ những nguồn khác, các bạn có thể xem bài viết sau về cách WPBeginner kiếm tiền.
Những bài học kinh nghiệm của tôi sau quá trình này.
Gần như là toàn bộ WPBeginner mà bạn đang coi là một website hoàn toàn khác vì nó đã được chuyển lên một hạ tầng host hoàn toàn mới, nó tăng thứ hạng SEO cho chúng tôi, và admin area thì nhanh hơn rất nhiều.
Với hệ thống liên server mới, chúng tôi thay thế hoàn toàn quy trình làm việc và viết bài, đưa WPBeginner ngang tầm với những web khác chung hệ thống với Awesome Motive.
Hiện tại thì chúng tôi có toàn quyền kiểm soát từng tùy chỉnh của web và cả những biện pháp phòng thủ, đề phòng việc tôi lỡ tay phá hoại cả hệ thống bằng việc thêm plugin một cách bừa bộn mà không test trước :D.
Từ khá lâu rồi tôi đã trì hoãn việc cải tiến không thể tránh khỏi này vì hệ thống mới này không dùng cPanel hay là WHM nên là tôi không có khả năng dùng lệnh nữa (vì tôi không biết chứ không phải nó không cho phép :D), tuy nhiên bây giờ sau khi hoàn thành nó, tôi muốn gửi lời cảm ơn tới đội ngũ phát triển của chúng tôi một cách sâu sắc.
Và ngoài ra chúng tôi cũng học được 2 bài học lớn.
Đầu tiên là nâng cấp WordPress không chỉ là copy paste data qua server mới. Khi chúng tôi nâng cấp blog cá nhân của tôi (Syedbalkhi.com) lên WordPress 5.2, những file update không sao lưu đầy đủ vì có lỗi xảy ra với giao điểm các web và để sửa lỗi tốn rất nhiều thời gian.
Thứ hai là phải để ý tới độ liên kết thông tin giữa các đội kỹ sư của cả hệ thống phần mềm và phần cứng vì chúng tôi đã từng có vấn đề với việc cân bằng tải bị các kỹ sư phần cứng tùy chỉnh sai và làm cho web tải rất chậm, xui cái là ngay lúc đó tôi đang trên máy bay và không vào được mạng, rất may là đội ngũ hosting đã giải quyết vấn đề rất nhanh, cũng nhờ vụ này mà họ đã dự phòng một vài quy trình quản lý khác để chúng tôi xử lý khi có vấn đề sau này.
Ngoài ra thì khônng còn vấn đề gì cả, tôi rất hài lòng với hệ thống web mới của mình, với công sức rất lớn là của đội ngũ HostGator và Bluehost.
Lưu ý là nếu bạn không quản lý một hệ thống chằng chịt dữ liệu và người dùng như WPBeginner thì bạn cũng chưa cần tới hệ thống server chuyên nghiệp cho doanh nghiệp đâu mà hãy cứ sử dụng shared hosting như tôi hồi đầu ấy, tuy vậy thì rất nhiều mẹo trong bài này có thể được dùng để tối ưu web của bạn.
Bluehost có những gói host có kèm plugin để bạn không bỡ ngỡ khi sử dụng, ngoài ra còn có thể dùng các gói bundle CDN + WAF của Sucuri hay Cloudflare để tăng tốc website.
Chúc bạn và website của bạn lướt nhanh như gió.