Cách đây khoảng một năm, tôi có viết chi tiết về cách tăng tốc WordPress trên trang Kiến càng. Nó là bài viết đồ sộ với rất nhiều kỹ thuật có thể khiến bạn ngộp, nhất là với người mới.
Trong bài viết này, tôi hướng đến cách tiếp cận vừa đơn giản hơn, vừa ít tốn kém. Dĩ nhiên nó không hoàn hảo, nhưng chắc chắn sẽ phù hợp với nhiều người.
Xem video nếu bạn muốn:
OK, chúng ta bắt đầu luôn nhé.
#1. Chọn hosting
Yêu cầu:
- Không dùng shared hosting chất lượng thấp;
- Nếu vẫn dùng shared hosting chủ động tìm dịch vụ chất lượng cao;
- Lựa chọn tốt hơn là mua VPS;
- Chọn vị trí gần Việt Nam;
Ứng cử viên như thường lệ bao gồm:
Nhóm trên có chất lượng ổn định và đều có location tại Singapore, là nơi rất gần Việt Nam. Ngoài ra phải nói đến giá cả, phần lớn nằm trong tầm với của chúng ta, khi giá khởi điểm thường chỉ 5 – 6$/tháng.
Lựa chọn phổ biến ở thời điểm hiện tại là Vultr, bạn có thể dùng Plesk (bản miễn phí) hoặc CyberPanel làm control panel. Nếu biết các dòng lệnh, các lựa chọn sẽ đa dạng và tối ưu tốc độ hơn.
Xem kỹ hơn về cách chọn hosting cho WordPress ở đây.
#2. Loại bỏ CSS chặn hiển thị
Ưu tiên nội dung cho màn hình đầu tiên bắt đầu với việc loại bỏ CSS chặn hiển thị. Chỉ tải critical CSS, giúp tốc độ hiển thị website nhanh hơn với người dùng từ 50 – 80%. Nếu website của bạn càng đồ sộ, càng nhiều plugin, biện pháp này càng tỏ ra có hiệu quả.
Cách đơn giản, rẻ nhất để làm là sử dụng plugin Autoptimize (miễn phí/xem hướng dẫn sử dụng ở đây) + ứng dụng tạo critical CSS miễn phí là Pegasaas. Ở tùy chọn ở Autoptimze, bạn vào phần Inline and Defer CSS (Nội tuyến và Trì hoãn tải CSS), rồi paste đoạn mã critical CSS mà Pegasaas trích xuất ra:
Bản chất của việc này là nó sẽ tách CSS của bạn làm 2 phần:
- Critical CSS được nội tuyến (chèn mã trực tiếp vào thẻ <head> trong file HTML), chính là đoạn mã giống như trên, thường chỉ vài chục KB
- Trì hoãn phần lớn CSS còn lại (file CSS riêng) qua đó giúp tăng tốc Website nhờ trình duyệt không phải phân tích (parse) một khối lượng lớn CSS ngay lập tức
Để rõ ràng hơn, tôi sẽ chỉ luôn cho bạn cách trích xuất critical CSS ở trang pegasaas. Đầu tiên, bạn vào một bài post bất kỳ trên trang của bạn (tuy nhiên tốt nhất là nên chọn bài có định dạng phổ biến nhất trên trang, để mã CSS đó bộc lộ hiệu quả trên đa số các trang), rồi copy đường link, sau đó paste vào khung bên dưới, nhấn Generate CSS:
Đoạn mã critical CSS được tạo ra sau khoảng vài giây chờ đợi:
Cách này không hoàn hảo, nhưng sẽ thành công trong phần lớn trường hợp (nhất là với những trang có giao diện đồng đều cũng như không quá phức tạp). Sau khi làm, bạn xóa cache trình duyệt, rồi vào các trang kiểm tra lại (trang chủ, trang post, page, thư mục, vân vân), nếu thấy OK là được, nhớ kiểm tra cả trên desktop lẫn di động.
#3. Loại bỏ JS chặn hiển thị
Tương tự như CSS, thì JS cũng có khả năng chặn hiển thị, cách thường được dùng là trì hoàn tải JS. Phần lớn JS có thể được trì hoãn tải (hoặc tải không đồng bộ).
Cách làm đơn giản vẫn thông qua plugin như Autoptimze (đã đề cập ở trên) để gộp rồi trì hoãn tải JS:
jQuery thường không nên trì hoãn, tuy nhiên bạn có thể thử nếu không có vấn đề gì trên giao diện (bao gồm cả một số chức năng) thì có thể trì hoãn để tối ưu hơn nữa.
Cách trì hoãn jQuery là thông qua plugin Async Javascript (có nhiều plugin khác cũng làm được điều này).
Nếu trang của bạn phụ thuộc vào thứ tự các đoạn mã để thực thi, đặc biệt là phụ thuộc vào jQuery thì nên chọn defer hơn là chọn async, bởi vì với defer tất cả các đoạn mã đều được trì hoãn cho đến khi toàn trang phân tích xong, và sau đó nó được thực thi theo thứ tự như nó được gọi (trên mã của bạn).
#4. Lazy load ảnh
Nếu website của bạn không phải trang thương mại điện tử, lại có nhiều ảnh thì đây là biện pháp tăng tốc rất hiệu quả và miễn phí.
Lazy load ảnh sẽ không tải các ảnh mà nó chưa đi vào khung nhìn trình duyệt (viewport) do vậy sẽ giảm dung lượng phải tải lúc ban đầu (initial page load). Điều này rất có giá trị vì ảnh có thể chiếm đến 50% dung lượng website, đôi khi còn hơn.
P/S: Bạn nào muốn tìm hiểu sâu các kỹ thuật lazy load ảnh và video có thể tham khảo bài viết trong link tôi vừa dẫn.
Website của bạn đáng ra phải tải 1MB ảnh thì nó chỉ phải tải độ 200KB lúc ban đầu để hiển thị cho người dùng mà thôi, khi họ xem tiếp nội dung bên dưới, trình duyệt mới phải tải các ảnh đó.
Có nhiều plugin lazy load, chẳng hạn như a3 lazy load, Lazy load by WP-Rocket, tuy nhiên kiểu lazy load của chúng vẫn theo kiểu truyền thống, và có thể ảnh hưởng đến trải nghiệm người dùng (UX). Hiện có plugin hiệu quả hơn nhiều, giúp bạn hạn chế tối đa tác dụng phụ trên. Nó có tên Flying Images. Bạn có thể xem cách cài đặt nhanh plugin Flying Images này ở đây. Với plugin này nhiều khi bạn không nhận ra được trang đang sử dụng lazy load, trong khi các plugin lazy thông thường rất dễ nhận ra.
Ưu điểm của nó là:
- Tận dụng cơ chế native lazy-loading có sẵn trên trình duyệt Chrome với nhiều cải tiến về cách hiển thị và tốc độ
- Vẫn sử dụng JS trên các trình duyệt khác nhưng thực hiện biện pháp tải trước khi nó vào viewport (trong khi các plugin kiểu cũ chỉ tải ảnh khi nó đi vào khung nhìn, nên có thể gây ra hiện tượng giật cục, không tải kịp khi đường truyền internet yếu/không ổn định)
- Nhỏ gọn, chỉ 1KB
Cảm nhận của tôi sau khi sử dụng lazy load ảnh một thời gian tương đối dài là bạn chỉ nên sử dụng nó trên máy bàn – cái vốn có tốc độ đường truyền ổn định. Sử dụng trên điện thoại di động trong không ít trường hợp vẫn có độ trễ đáng kể ngay cả khi áp dụng các biện pháp lazy load kiểu mới (như tải trước ảnh khi cách khung hình 1000px thay vì chỉ tải khi ảnh đi vào khung hình). Bạn có thể đọc bài viết này để biết tại sao lazy load ảnh lại không hấp dẫn như chúng ta nghĩ.
#5. Sử dụng plugin cache miễn phí
Cache là biện pháp tăng tốc plugin đáng giá. Có nhiều plugin cache có phí chất lượng cao như WP-Rocket hay Swift Performance. Tuy nhiên nếu chưa mua được bạn có thể sử dụng các plugin miễn phí sau có chất lượng ổn, như:
Riêng với trường hợp LiteSpeed Cache, bạn nào không quen dòng lệnh thì nên sử dụng app trên DigitalOcean để cài CyberPanel.
Ngoài ra các bạn có thể sử dụng cache phía máy chủ (server site cache / xem thêm các cấp độ cache trong WordPress). Tuy nhiên cách này thường chỉ có khả năng nếu nó được cài đặt sẵn trên hosting vì việc tùy chỉnh thủ công đòi hỏi bạn phải có kỹ năng cao (tôi cũng không thuộc nhóm này). Một ví dụ về việc ăn sẵn tính năng này là GridPane (bản miễn phí), họ có Redis cache kết hợp với Nginx, cho tốc độ tốt:
Trong hình trên vì tôi đang dùng bản có phí nên bật được FastCGI caching, bản free sẽ chỉ có tùy chọn Redis cache, tuy nhiên nó không chênh lệch nhau nhiều. Tôi dùng bản có phí để sử dụng các tính năng khác của GridPane như nhiều máy chủ hơn, có backup. Về mặt tốc độ, bạn dùng bản free là ổn.
Bonus: Hiện có kiểu tăng tốc mới thú vị thông qua plugin có tên WP2Static. Nó biến trang web của bạn thành trang tĩnh hoàn toàn. Nó sẽ làm tăng tốc lẫn hiệu suất của website tốt hơn nữa, nhưng không phải website nào cũng phù hợp (ví dụ trang thương mại điện tử – vốn là trang có tính động cao).
Đi kèm với kiểu website tĩnh là hosting tĩnh. Hosting tĩnh có nhiều dịch vụ miễn phí như Netlify, GitHub, vân vân. Ngay cả với bản có phí nó cũng có giả thành rẻ hơn nhiều vì không yêu cầu công nghệ cao, và không tốn kém tài nguyên cho MySQL hay PHP (hay bất cứ ngôn ngữ lập trình nào) như các loại host thông thường. Phần này là tôi nhiều lời, vì triển khai WP2Static chuẩn chỉnh không phải là chuyện dễ dàng.
Cập nhật: Tôi vừa phát hiện plugin Simply Static miễn phí có khả năng xuất trang tĩnh rất tốt, kết hợp nó với store của BunnyCDN sẽ giúp chi phí của bạn giảm xuống tối đa còn tốc độ sẽ rất cao.
#6. Tối ưu hóa dung lượng ảnh
Có nhiều ảnh không những nên lazy load, mà còn nên tối ưu hóa dung lượng file theo kiểu không mất chất lượng (lossless).
Nó sẽ giúp bạn giảm từ 5 – 20% dung lượng qua đó giảm đáng kể thời gian tải trang, băng thông & các chi phí liên quan khác (ví dụ CDN). Có rất nhiều plugin tốt trong mảng này. Bao gồm cả miễn phí và trả phí. Bạn có thể tham khảo đánh giá khái quát ở đây.
Nếu bạn muốn một câu trả lời nhanh về plugin nén ảnh đủ tốt và free, thì đó là EWWW.
Trong trường hợp có thể đầu tư 10$. ShortPixel là lựa chọn tốt hơn, nó giúp bạn tối ưu hóa 5000 bức ảnh (thực tế sẽ vào khoảng 1000 vì mặc định WordPress sẽ tạo ra nhiều ảnh con dựa vào ảnh gốc bạn up lên để sử dụng cho các màn hình có kích cỡ khác nhau. Cho nên 1000 ảnh ban đầu có thể tạo thêm 4000 ảnh nhỏ nữa).
Mẹo:
- Chỉ nên tối ưu hóa ảnh không mất chất lượng vì tối ưu mất chất lượng chứa nhiều rủi ro, cụ thể là có khả năng ảnh sẽ xấu đi rất nhiều.
- Nếu muốn tối ưu mất chất lượng, bạn nên chọn plugin nén ảnh có tính năng backup để thử trên website, nếu không ưng chất lượng cuối cùng thì có thể lấy lại ảnh gốc ở thư mục backup.
Cập nhật: nhiều plugin cache tích hợp tính năng tối ưu hóa ảnh, một trong các plugin ưa thích của tôi là LiteSpeed cache.
#7. Chọn theme
Theme tối ưu cho tốc độ đang rất phát triển, có lẽ xuất phát từ việc tốc độ trở thành một trong các yếu tố xếp hạng trên máy tìm kiếm. Và theme thì tác động không nhỏ đến tốc độ.
Một trong các theme miễn phí tối ưu hóa cho tốc độ tốt là Astra, nếu trang của bạn là dạng blog đơn giản, nó có khả năng thích hợp. Astra cũng có phiên bản trả phí với nhiều tùy chỉnh hơn.
Ngoài ra, bạn có thể cân nhắc sử dụng GeneratePress, cũng là theme có cả bản miễn phí & trả phí. Một số người đánh giá nó là theme tốt nhất cho những ai không phải coder.
Tối ưu cho tốc độ không phải là xu hướng một sớm một chiều, và nó cũng là tính năng quan trọng căn bản với giao diện. Điều đó có nghĩa là bạn sẽ có rất nhiều cơ hội chọn cho bản thân được theme chất lượng tốt ngay cả khi nó free.
Mảng theme cho WooCommerce tôi còn trống, thời gian tới tìm hiểu ổn thỏa sẽ chia sẻ với các bạn sau.
Mẹo: Kinh nghiệm chọn theme là bạn nên chọn theme từ những nhà cung cấp uy tín, số lượng tải lớn, và đánh giá sao nói chung trên 4. Thao khảo thêm kinh nghiệm của các anh em khác trong nghề thường giúp bạn có nhiều ý kiến đa dạng và chính xác hơn.
#8. Sử dụng CDN miễn phí
Ở thời điểm hiện tại có một số dịch vụ CDN miễn phí có chất lượng tương đối tốt, điển hình như CloudFlare, JetPack, jsDelivr, Statically.
Mặc dù khó có thể so sánh với các dịch vụ CDN trả phí, nó chắc chắn sẽ giúp bạn giảm tải cho máy chủ gốc đi rất nhiều.
Tuy nhiên ở khía cạnh tăng tốc, CDN miễn phí chỉ giúp tăng tốc nếu nó áp dụng trên các website mà hosting vốn đang chịu áp lực truy cập.
Còn nếu hosting đang gánh website thuận lợi, vị trí của máy chủ gốc lại gần đa số người dùng truy cập vào website thì việc sử dụng CDN miễn phí hầu như không có tác dụng gì về cải thiện tốc độ, thậm chí nó còn chậm hơn trong một số trường hợp.
Riêng về khía cạnh giảm tải cho hosting gốc, CDN miễn phí hoàn thành nhiệm vụ tròn vai.
#9. Preconnect đến tài nguyên của bên thứ ba
Preconnect giúp thực hiện trước kết nối đến tài nguyên gốc của bên thứ ba, và bằng cách thực hiện song song nhiều kết nối thay vì thực hiện lần lượt đã giúp cải thiện tốc độ website ít nhiều, và trong một số trường hợp có thể lên đến 0,5s.
Điều quan trọng cần lưu ý ở đây là: không phải bạn preconnect đến tất cả tài nguyên của bên thứ ba là sẽ làm website nhanh hơn, bạn chỉ nên preconnect đến các tài nguyên quan trọng mà thôi. Rồi sau đó nên kiểm tra lại kết quả trên thực tế để đảm bảo chắc chắn các thay đổi đem lại hiệu quả.
#10. Kết luận
Tất cả những cách ở trên đều không tốn kém, tương đối dễ làm và nếu được triển khai đúng nó sẽ làm tốc độ website của bạn tăng lên rất nhiều (các biện pháp trên đều thuộc về nhóm 5 yêu cầu quan trọng nhất khi tăng tốc WordPress).
Để tránh những tác dụng phụ không mong muốn, sau khi kích hoạt tối ưu bạn nên kiểm tra kỹ lại website, còn trước đấy bạn nên backup toàn bộ trang bằng công cụ kiểu như UpdraftPlus, làm thế giúp bạn khôi phục lại trang nguyên vẹn nếu như chẳng may làm sai lệch điều gì.
