Categories Tối ưu thêm

5 yêu cầu quan trọng nhất trong tăng tốc WordPress

Tăng tốc WordPress là màn thi triển tổng lực bao gồm rất nhiều vấn đề cần làm. Tuy nhiên, như mọi thứ khác, nó cũng có những yêu cầu quan trọng hơn những cái khác rất nhiều.

Trong bài viết này tôi sẽ nêu 5 yêu cầu căn bản nhất, làm nó tốt là bạn đã giải quyết gần như 70 – 90% những thứ liên quan đến tốc độ rồi. Ngoài ra tôi cũng nêu những khó khăn có thể phát sinh trong mỗi yêu cầu.


1. Hosting cho website

Yêu cầu:

  • Phần cứng tốt bao gồm RAM, CPU, ổ SSD chất lượng, vân vân
  • Có vị trí gần người dùng của bạn (giúp giảm thiểu nhu cầu sử dụng CDN, cái thường không rẻ trên website có lưu lượng lớn)

Mọi vấn đề liên quan đến tăng tốc web mà bỏ qua hosting là thiếu sót rất lớn, vì hosting là nền tảng. Duy chỉ bản thân nó nếu tốt đã cải thiện tốc độ trang rất nhiều rồi, nhưng còn hơn thế, vì host tốt còn giúp việc triển khai các kỹ thuật tăng tốc khác dễ dàng hơn. Chẳng hạn như cache (mà tôi sẽ nói ở phần sau) sẽ không thể làm tốt nhất nếu thực thi trên host yếu. WP-Rocket một trong các plugin trả phí tốt nhất về mảng cache có tốc độ nạp lại cache mặc định là 10 tiếng, với trang có 1000 bài viết trên host không đủ mạnh, tốc độ nạp này có thể làm chậm trang thay vì tăng tốc!

Ngày nay việc có host chất lượng không khó, các công ty chuyên về mảng VPS như Vultr, DigitalOcean, UpCloud hay Linode cho bạn các gói với giá thành vừa phải trong khi phần cứng có chất lượng ổn định, đồng đều (nếu không muốn nói là rất ổn so với sharehost).

Khó khăn: Control Panel (để bạn điều khiển hosting) có thể trở thành vấn đề khó khăn với những ai mới làm quen với VPS, vì với VPS bạn phải tự cài đặt lấy chứ không có sẵn như bên sharehost. Tuy nhiên trở ngại này có thể dễ dàng giải quyết vì phần lớn các công ty kể trên đều có app cài đặt dạng 1-click, bạn chỉ phải nhấn và đợi vài phút để có được control panel tương tự. Rẻ nhất thì bạn chọn Plesk phiên bản miễn phí, các lựa chọn khác khả thi đó là CyberPanel với OpenLiteSpeed (cũng miễn phí và có thể nâng cấp lên bản trả phí) hoặc panel chuyên cho WordPress như GridPane (miễn phí và trả phí), SpinupWP (trả phí), SeverPilot (trả phí). Nếu chịu khó học thêm dòng lệnh, bạn có thể dùng HocVPS, VPSSIM, CentminMod, nó có hai ưu điểm lớn là miễn phí và không sử dụng nhiều tài nguyên máy chủ như các control panel có giao diện người dùng phức tạp, tất nhiên cái giá phải trả ở đây là bạn phải làm quen với màn hình đen xì.


2. Màn hình đầu tiên

Nếu bạn thường xuyên sử dụng công cụ phân tích tốc độ website như PageSpeed Insights của Google (xem hướng dẫn dùng ở đây) thì sẽ không lạ khái niệm “chặn hiển thị”. Về cơ bản chặn hiển thị có nghĩa là các đoạn mã CSS, ảnh hoặc JS làm cản trở tốc độ hiển thị (render) website của màn hình đầu tiên (above the fold).

Khắc phục chặn hiển thị người ta dùng cơ chế tải lười (lazy load). Tải lười áp dụng trên tất cả các thành phần, bao gồm:

  • CSS, ở đây bạn sẽ chỉ tải các đoạn mã CSS cho màn hình đầu tiên (còn gọi là critical CSS), còn phần còn lại sẽ trì hoãn tải.
  • JS, tương tự, bạn gần như trì hoãn tải tất cả các đoạn mã JS, ngay cả jQuery trong trường hợp thích hợp cũng có thể trì hoãn tải được.
  • Ảnh, ở đây là các ảnh thuộc màn hình thứ hai trở đi. Lazy load ảnh đang hồi sinh trên rất nhiều trang vì các công nghệ mới (như native lazy-loading của trình duyệt Chrome) giúp nó giảm thiểu ảnh hưởng đến trải nghiệm người dùng. Một trong các plugin ưa thích của tôi là Flying Images, nó giúp tải trước ảnh khi nó đi vào khung nhìn trình duyệt, với ngưỡng tùy ý mà bạn chọn.
  • Video, tương tự ảnh, video cũng có khả năng trì hoãn tải. Plugin ưa thích của tôi là WP YouTube Lyte.

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 trong link tôi vừa dẫn.

Áp dụng đúng cách ưu tiên hiển thị cho màn hình đầu tiên có thể giúp bạn giảm thời gian tải trang lần đầu từ 50 – 80%. Bạn không nhìn nhầm đâu! Đây quả thực là con số giá trị, trong khi các giải pháp để triển khai không khó (về mặt kỹ thuật).

Tham khảo thêm bài viết này sẽ giúp bạn hiểu rõ hơn: Tuyến hiển thị quan trọng trong tăng tốc website

Khó khăn:

  • Critical CSS nếu muốn tạo chuẩn chỉnh ở thời điểm hiện tại không có giải pháp miễn phí. Nó hay được tích hợp sẵn trong các plugin cache trả phí như WP-Rocket, Swift Performance, vân vân. Hoặc thông qua ứng dụng của bên thứ ba như Autoptimize criticalcss com power-up. Về đánh giá chất lượng WP-Rocket được một số người cho là có khả năng tạo critical CSS rất tốt. Autoptimize criticalcss com power-up tôi chưa dùng bao giờ nhưng có thể tự tin nói rằng nó có chất lượng cao vì plugin này bắt nguồn từ sự phối hợp của 2 người rất am hiểu về tăng tốc web, chỉ có điều giá của nó đắt với người dùng thông thường, lên tới 7 bảng / tên miền / tháng. Nếu muốn thử nghiệm giải pháp miễn phí thì bạn có thể thử pegasaas.com/critical-path-css-generator/ kết hợp với plugin này wordpress.org/plugins/autoptimize/ (cũng chính là Autoptimize)
  • Trì hoãn JS thường không khó khăn gì, có rất nhiều plugin miễn phí hỗ trợ bạn làm việc này. Một plugin chuyên sâu tốt là Async JavaScript (cùng tác giả phát triển Autoptimize).
  • Lazy load ảnh cũng có rất nhiều plugin hỗ trợ. Trở ngại có thể xảy ra trên các trang thương mại điện tử nơi người dùng có đòi hỏi cao, và rủi ro có thể làm bạn chịu chi phí lớn khi người mua hàng rời đi vì các lý do liên quan đến tải ảnh chậm chạp. Trong những trang khác, đặc biệt là trang nhiều ảnh, lazy load là biện pháp hoàn hảo để tăng tốc và giảm tải cho máy chủ (qua đó tối ưu chi phí host).

3. Cache

WordPress nếu không có cache đòi hỏi việc thực thi PHP và truy vấn MySQL (cơ sở dữ liệu) để hiển thị website, đây đều là các tác vụ tốn thời gian, nhất là trên các trang có nhiều bài viết và lưu lượng truy cập lớn.

Cache có nhiệm vụ tạo ra các trang tĩnh và tránh cho bạn phải thực thi PHP lẫn MySQL. Có 2 kỹ thuật cache căn bản là cache phía máy chủ (Ngnix FastCGI, Memcached, Redis, Varnish, vân vân), và cache bằng plugin (WP-Rocket, Swift Performance, WP Super cache, vân vân).

Cá nhân tôi thích các biện pháp cache phía máy chủ hơn, đặc biệt là RAM cache, nhất là trên các website không có lưu lượng truy cập quá lớn.

Ngoài các kỹ thuật cache cao cấp, một kỹ thuật khác rất đơn giản, miễn phí nhưng vẫn rất hiệu quả đó là cache phía trình duyệt, hay còn được gọi là HTTP Caching.

Khó khăn:

  • Cache phía máy chủ nếu tự cài đặt không bao giờ là biện pháp dễ dàng với bất kỳ ai, nó đòi hỏi kỹ năng cao, hiểu biết sâu. Bạn có thể dùng các app tối ưu sẵn như GridPane và SpinupWP để giải quyết vấn đề này. Nhiều host chuyên cho WordPress cũng tích hợp sẵn cache phía máy chủ, ví dụ DreamPress tích hợp sẵn Varnish.
  • Cache bằng plugin không khó dùng nhưng nó luôn thôi thúc người ta mong muốn bỏ tiền ra để sử dụng các plugin trả phí cao cấp, và plugin này cũng không rẻ nếu bạn không dư dả (có giá khoảng 1 triệu / năm). Nếu bạn không quá khắt khe, plugin cache miễn phí là đủ (tôi thích Cache Enabler). Nếu có điều kiện kinh tế thì mọi chuyện sẽ trở thành đơn giản!

4. Tối ưu hóa ảnh

Ảnh thường là thành phần chiếm nhiều dung lượng nhất trên website, có thể dao động từ 40 – 70%, con số phổ biến mà tôi nhớ trong một thống kê là 45%.

Ảnh có xu hướng ngày càng gia tăng kích thước vì các thiết bị chụp hình tiên tiến hơn, nhưng đây lại là thành phần không thể thiếu trên website trong phần lớn trường hợp.

Tối ưu hóa ảnh giúp giải quyết vấn đề này. Ngay cả với tùy chọn giảm ảnh không mất chất lượng (dung lượng ảnh giảm nhưng chất lượng ảnh thì giữ nguyên), các ảnh của bạn vẫn có khả năng giảm dung lượng từ 5 – 20%; nói cách khác nhờ tối ưu hóa ảnh bạn có thể giảm thời gian tải trang đi từ 2 – 10%.

Bạn có thể đọc thêm bài viết này để biết rõ hơn về các plugin tối ưu hóa ảnh.

Khó khăn:

  • Có lẽ plugin nén ảnh chỉ có khó khăn đôi chút về học cách sử dụng.
  • WebP, một định dạng ảnh mới nhẹ, rất hấp dẫn nhưng trong đa số trường hợp bạn không nên nhảy vào, vì nó có thể kéo theo các rắc rối về, web server, cache hoặc tích hợp CDN.
  • Luôn ưu tiên nén ảnh không mất chất lượng dù hệ số nén không cao. Nén mất chất lượng có nhiều rủi ro vì ảnh có thể xấu và bạn có thể không khôi phục lại được ảnh gốc nếu không chủ động thiết lập backup.

5. Theme và Plugin

Theme đơn giản giúp bạn tránh những đoạn mã cồng kềnh và do đó website tải nhanh hơn. Nhưng theme đơn giản không phải là vấn đề quan trọng nhất, điều căn bản ở đây là người viết theme! Bởi nếu họ là người lập trình tốt các vấn đề về tốc độ sẽ được khắc phục ngay từ lúc đầu. Điều này bao gồm loại bỏ CSS, JS chặn hiển thị, các hiệu ứng đẹp mắt vốn tốn nhiều mã cũng được tối ưu, vân vân. Và tối ưu từ đầu bao giờ cũng tốt hơn việc về sau mới tối ưu.

Tuy nhiên ngay cả các theme được tối ưu nhất thì điều bạn không tránh được là sử dụng plugin, cái này sẽ biến theme của bạn đang bảnh bao sẽ trông nhếch nhác về mặt tốc độ. Lý do nằm ở chỗ plugin bổ sung rất nhiều CSS và JS. Ngoài ra không phải người lập trình plugin nào cũng quan tâm đến tốc độ!

Giải pháp ở đây là gì:

  • Chọn plugin ưu tiên tốc độ
  • Chọn plugin từ những nhà cung cấp uy tín
  • Hạn chế sử dụng plugin, nói cách khác chỉ dùng plugin nào đó khi bạn thực sự cần

Khó khăn:

  • Các theme chất lượng cao, tăng tốc thường là theme trả phí (có thể có giá khoảng 1 triệu / theme). Học cách sử dụng theme để tùy biến thành thạo thường không khó nhưng mất thời gian và có phần tẻ nhạt!
  • Plugin cũng vậy, các plugin chất lượng cao, đủ tính năng thì thường cũng cần trả phí, nhưng may mắn hơn cho chúng ta là nhiều plugin cơ bản nhất có chất lượng cao, và miễn phí.

Bonus: Quản lý tài nguyên từ bên thứ ba (thirt-party)

Với việc chúng ta thường xuyên sử dụng các ứng dụng của bên thứ ba như:

  • Phân tích website (Google Analytics),
  • Nhúng video (từ YouTube, Vimeo,…),
  • Các nút chia sẽ mạng xã hội (Facebook,…),
  • Và có thể bất cứ ứng dụng nào mà bạn muốn bổ sung vào trang

Thì có một vấn đề này sinh là các tài nguyên thứ ba này gây chậm website do làm bổ sung thêm tìm kiếm DNS, kết nối HTTP, chính sách cache phía trình duyệt không chủ động can thiệp được, tải lượng mã CSS, JS mà bạn cũng không can thiệp được theo cách thông thường.

Giải pháp ở đây là gì:

Khó khăn:

  • Không phải ứng dụng từ bên thứ ba nào cũng được người thiết kế tối ưu cho tốc độ hoặc/và có plugin hỗ trợ tăng tốc độ.
  • Can thiệp vào các đoạn mã của bên thứ ba nhiều khi đòi hỏi bạn phải tìm hiểu sâu thông tin kỹ thuật để tránh sai sót. Vì nếu sai sót xảy ra khả năng cao là ứng dụng đó không hoạt động được bình thường.

OK, vậy là xong, hẹn gặp lại bạn trong bài viết khác.

Back to Top