Categories Tăng tốc Wordpress Tối ưu thêm

20 cách tăng tốc website WordPress: Hướng dẫn toàn diện. Nhiều cách Free, tuy nhiên đầu tư thêm tiền sẽ tốt hơn!

tăng tốc wordpress

Có thể tiêu đề làm bạn tụt hứng phần nào, nhưng đó lại là thực tế phũ phàng! Tuy nhiên cũng có một thực tế khác dễ chịu hơn nhiều mà chúng ta cần phải biết, và điều này có lợi cho tất cả mọi người:

Khi muốn tăng tốc WordPress thì có điều kiện về tiền bạc chỉ làm bạn thuận lợi hơn thôi chứ nó không thể thay thế được các lựa chọn thông minh.

Điều hay ho nữa: Bài viết này sẽ cung cấp nhiều cách hiệu quả nhất (trong hiểu biết của tôi), trong đấy có cả những cái không hề tốn một xu nào (nhưng dĩ nhiên có mất công tốn sức!).

Không phải dẫn những nghiên cứu quốc tế, từ kinh nghiệm cá nhân chúng ta đều biết rõ rằng:

Website chậm chạp không chỉ gây ảnh hưởng tiêu cực đến trải nghiệm người dùng, mà còn tạo ra hàng loạt hệ quả tai hại xoáy vòng, cộng hưởng khác như: người dùng đánh giá thấp năng lực của chủ web, giảm bớt nhu cầu xem tiếp trang thứ hai, thứ hạng trên máy tìm kiếm kém đi*, tỷ lệ chuyển đổi thấp, vân vân. Trong trường hợp xấu nhất, khách có thể rời khỏi website trước khi nó kịp tải xong.

– Kiến càng

Mặc dù bài viết này hướng đến việc tối ưu cho WordPress nó cũng rất có ích cho những ai muốn tăng tốc website nói chung. Bởi vì các nền tảng cơ bản vẫn vậy, khác nhau chỉ là công cụ sử dụng mà thôi.

Các cách tăng tốc WordPress hiện Kiến càng đang áp dụng:

  1. Hosting: ChemiCloud với LiteSpeed webserver, vị trí máy chủ Singapore;
  2. Cache: LiteSpeed cache với nhiều tùy chọn chuyên sâu, miễn phí;
  3. CDN: QUIC cloud & BunnyCDN, giá cả thân thiện và tốc độ tốt;
  4. Theme: GeneratePress, rất nhanh & dễ dùng;
  5. Loại bỏ CSS, JS dư: Perfmatters, hiệu quả, dễ dùng, giá vừa phải;

Nếu bạn muốn có cái nhìn nhanh, tổng quan về 5 biện pháp và công cụ hiệu quả khác thường được dùng (trong số rất nhiều cách thức bên dưới), thì nó đây. Bạn chỉ cần chọn một trong các công cụ để dùng, những cái bôi đậm là tôi thích dùng hoặc đang dùng**, những cái in nghiêng là tôi đã từng trải nghiệm:

Biện pháp Dịch vụ/Công cụ
Host tốt Vultr (ưu tiên cái này nếu cần giá thân thiện, chất lượng ổn và dễ dùng), DigitalOcean, ChemiCloud, UpCloud, Dreamhost, SiteGround, Knownhost, Cloudways, Closte (ưu tiên cái này nếu có kinh phí tốt).
CDN CDNSun, KeyCDN, Cloudflare, BunnyCDN (ưu tiên cái này), Stackpath, QUIC cloud, BizFly.
Cache Plugin như LiteSpeed cache (ưu tiên cái này), FlyingPress, Swift Performance, W3 Total Cache, WP-Rocket. Hoặc cache phía máy chủ như Varnish, Redis, Nginx FastCGI cache.
Tối ưu ảnh Plugin như EWWW, reSmush.it Image Optimizer, ShortPixel. Hoặc dịch vụ bên thứ ba như Cloudinary, Imagekit, Imgix (chúng thường tối ưu sâu hơn & kết hợp luôn với CDN), hoặc tính năng có sẵn trong plugin cache, ví dụ LiteSpeed cache (ưu tiên cái này, vừa rẻ vừa đơn giản).
Lazy load a3 Lazy Load, Flying Images, Lazy Loader (có khả năng lazy cả ảnh background rất nuột) hoặc dùng tính năng tương tự trong plugin cache (ưu tiên cái này vì vẫn rất tốt mà bạn đỡ phải cài thêm plugin). Các cách thức liên quan đến mã, như critical CSS và defer JS cũng có thể coi là lazy load

(**): Lưu ý, những gì tôi thích dùng hoặc đang dùng chưa chắc là cái phù hợp nhất với trường hợp của bạn.

(*)Tránh hiểu lầm quan trọng: Google đánh giá tốc độ website của bạn nhanh hay chậm không phải thông qua tổng thời gian để tải toàn bộ trang web, mà là thời gian để tải nội dung trong màn hình đầu tiên (above the fold), tức là nội dung mà người dùng thấy khi chưa cuộn chuột. Điều này công bằng hơn, vì nếu không thì những trang có nội dung dài sẽ bị mặc định là chậm, và cũng nhờ cách đánh giá này các kỹ thuật lazy load và trì hoãn tải rất quan trọng, giúp bạn cải thiện tốc độ web lên rất nhiều mà không cần quan tâm nhiều đến độ dài bài viết, cũng như các tài nguyên phong phú có dữ liệu lớn trên trang.

Lưu ý thứ hai là: khi bạn tăng tốc trang bạn phải để ý đến điểm tương tác trên trang. Mục tiêu không phải chỉ là thuần túy tăng tốc độ hiển thị website, suy cho cùng, mục tiêu cao nhất là để người dùng có thể làm được thứ mà họ muốn trên website nhanh nhất có thể.

Lưu ý thứ ba là: tốc độ website là một trong các yếu tố quan trọng trong bài viết chuẩn SEO. Google chính thức sử dụng tốc độ như một thành tố xếp hạng kể từ năm 2010.

Giờ đến lúc chúng ta cùng khám phá nào.


Mục lục

1. Host phải tốt – tiền ít khó hít được đồ thơm #

  • Ưu điểm: là biện pháp cải thiện tốc độ hiệu quả nhất;
  • Nhược điểm: chi phí cao nếu muốn có hosting chất lượng;
  • Lựa chọn nhanh: ChemiCloud;

Nhìn là biết cách tăng tốc WordPress này sẽ tốn thêm tiền rồi! Tuy nhiên…

…Host rẻ, web nặng, traffic nhiều mà bạn lại đòi tốc độ WordPress cao thì khó lắm! Nếu bạn muốn web nhanh điều quan trọng nhất là phải chọn được hosting phù hợp.

Phù hợp ở đây ý tôi là phù hợp với kiểu web của bạn và lưu lượng truy cập.

Nếu web bạn nhẹ, truy cập không lớn (dưới 2 – 3K view / ngày), bạn chọn host từ 5 đô – 10 đô / tháng vẫn CHẤP NHẬN ĐƯỢC. Nhưng nếu nhiều hơn hoặc trang có tài nguyên lớn bạn nên cân nhắc các gói hosting tốt hơn.

Đặc biệt, nếu là web bán hàng, web chạy Adsense đem lại thu nhập cao, đừng tiếc 1 – 5% tiền vốn cho host. Bên cạnh nội dung chất lượng cao, SEO, thì tăng tốc website là điều quan trọng thứ hai mà tôi ưu tiên thực hiện. Trải nghiệm người dùng tốt thường đem lại nhiều lợi ích vượt hơn rất nhiều chi phí bạn phải bỏ ra để thuê host “ngon”.

Host xịn không chỉ có RAM, CPU khoẻ, chịu được truy cập lớn, mà phần lớn các host kiểu này đã được tối ưu sẵn nhiều thứ, cái mà nếu bạn không có chuyên môn tốt thì rất khó tự mình thực hiện.

Các bạn có thể muốn hỏi nên mua hosting ở đâu? Cái này nó thay đổi theo thời gian! 12 tháng sau có khi đã khác nên tôi sẽ cố gắng chỉ nêu vài cái tên đã ổn định lâu năm. Tuy nhiên nếu nói riêng về phần kinh nghiệm thì chọn lựa là thế này:

  • Nếu hiểu biết một chút về công nghệ và muốn có host tốt, web nhanh, chịu traffic cao, tiết kiệm tiền thì mua VPS. Nó còn là giải pháp giúp bạn có được cơ hội thử nghiệm nhiều loại CMS (hệ quản trị nội dung) khác nhau chứ không chỉ riêng WordPress, ví dụ như Magento, Drupal, hay ngay cả các đoạn mã tự code;
  • Nếu không rành công nghệ thì mua các loại host đã được tối ưu, kiểu ăn sẵn, ví dụ một số host được tối ưu riêng cho WordPress (Managed WordPress Hosting);
  • Nói chung thì tiền nào sẽ đi với của đấy. Host giá cao thường đi kèm một số dịch vụ gia tăng như cài đặt đơn giản, backup miễn phí hàng ngày, hỗ trợ nhanh 24/7, thời gian uptime rất cao, phòng trừ malware, vân vân;
  • Chọn công ty gia nhập thị trường đủ lâu, ít cũng phải được 3 năm. Nhiều đại gia ngành host đã có mặt ở đây 15 – 20 năm rồi;
  • Vào xem những trang web lớn, hoặc web mà bạn thấy nhanh xem họ dùng hosting của công ty nào, nếu dưới chân trang không thấy, bạn có thể dùng công cụ whoishostingthis để tìm xem web đó dùng host ở đâu? (Xem hướng dẫn kiểm tra host ở đâu tại bài viết này). Tuy nhiên cách này cùng có hạn chế, ở chỗ là dù cùng một công ty host nhưng họ cung cấp nhiều gói dịch vụ khác nhau, nếu web bạn thấy nhanh chọn dịch vụ cao cấp còn bạn chọn dịch vụ thông thường, thì dù là cùng công ty, vẫn có sự chênh lệch đáng kể về tốc độ, hiệu suất;
  • Đa số các công ty hosting đều có chính sách hoàn tiền lại nếu cảm thấy không ưng í. Thời gian giới hạn thì còn tuỳ từng công ty, nhưng thường có thể lên đến 30 ngày trải nghiệm. Do vậy, khi bạn dùng thử một thời gian thấy tốc độ không ổn thì chuyển đi luôn, đừng ngại;
  • Cái cuối cùng quan trọng này, đọc review thật kỹ, gồm cả review ở các diễn đàn lẫn review của các blogger công nghệ. Các review của các blogger công nghệ có thể bị ảnh hưởng bởi việc họ được ăn % hoa hồng (affiliate) khi có người mua qua khuyến nghị của họ, nên bạn phải nghe bằng cả hai tai. Dù sao những tay blogger lớn bản thân họ cần giữ uy tín nên đa số là tin được, nhưng nên nhớ là những tay hàng đầu thôi nhé;

OK, giờ là một số cái tên tôi thấy ổn.

A. Share host. Đây là gói host phổ biến nhất với người dùng thông thường, các gói chuyên cho WordPress nói chung thường cũng là share host nhưng được tùy chỉnh để tối ưu hơn. Các công ty tôi nói dưới đây thường cũng có VPS nhưng share host của họ được biết đến nhiều hơn.

  • SiteGround (VPS/share/tối ưu WordPress/dễ dùng, có location ở Sing, gần với VN nhưng giá khá đắt). Thanh toán cho cả năm đầu tiên được khuyến mại với giá rất ổn. Các năm tiếp theo trở về giá ban đầu tương đối cao, với tầm 36 USD cho một host tối ưu WP có 100 ngàn view/tháng (SiteGround nói rằng con số này chỉ để làm mốc tham khảo chứ không phải là hạn chế cứng nhắc, tuy nhiên SiteGround lại có hẳn một panel thống kê lượt view rất chi tiết!). Trong một số cuộc thăm dò về hosting nên dùng và có tốc độ tốt, SiteGround thường là cái tên được nêu. Tuy nhiên dạo gần đây (cuối năm 2019) một số người dùng nói rằng TTFB của SiteGround là khá cao (không tốt);
  • Dreamhost (VPS/share host/tối ưu WordPress/dễ dùng, ổn định, chịu tải tốt, nhưng không có location ở Châu Á). Tôi trung thành với Dreamhost hơn 5 năm, nhìn chung nó ổn, nhất là gói DreamPress chuyên cho WordPress, còn với VPS thì bình thường. Nhiều người không thích panel mà Dreamhost tự tạo, nhưng quen rồi thì cũng thấy nó không tệ;
  • Mediatemple (tối ưu WordPress/dễ dùng), nhưng chất lượng đã suy giảm nhiều sau khi bán cho GoDaddy;
  • Lightning Base (tối ưu WordPress/dễ dùng, giá đắt);
  • Liquid Web (tối ưu WordPress/dễ dùng/tuy nhiên đăng ký cần xác nhận);
  • Knownhost (VPS/share host/tối ưu WordPress/dễ dùng, uptime cao, cài thêm được LiteSpeed hỗ trợ tăng tốc khi cần, không có loacation ở Châu Á).

B. VPS. Phổ biến dạo gần đây, khi người dùng muốn một hosting có thông số cụ thể (thay vì toàn unlimited), và ít bị ảnh hưởng bởi những người hàng xóm.

  • Vultr (VPS/giá cạnh tranh, tương đối dễ dùng nhất là với ai có hiểu biết nhất định về hosting, có location ở Sing, gần với VN). Vultr là VPS rất được ưa chuộng ở Việt Nam. Ưu điểm của nó là giá tính theo giờ, tạo điều kiện vọc vạch tìm hiểu mà không tốn kém chi phí, ngoài ra là các app cài đặt thuận tiện chỉ cần thông qua vài click. Với việc sử dụng WordPress trên Vultr có nhiều giải pháp trong đó có việc sử dụng dòng lệnh (vpssim, hocvps), sử dụng app cài WordPress trên Vultr, sử dụng app Plesk phiên bản miễn phí, sử dụng các app của bên thứ ba ví dụ như ServerPilot, GridPane, Forge Laravel. Mỗi cái có ưu điểm riêng. Đối với người không thạo dòng lệnh, ngại vọc vạch nhiều sử dụng Plesk phiên bản miễn phí là dễ và tối ưu chi phí nhất, bạn có đầy đủ công cụ cần dùng khi cần thiết. Với những ai tập trung vào hiệu suất, tốc độ, các app của bên thứ ba là giải pháp hữu hiệu hơn vì nó ít sử dụng tài nguyên hệ thống, ngoài ra chúng thường được coi là bảo mật hơn (do ít phổ biến hơn, và ít phải mở các cổng do tính năng đơn giản). GridPane (bản miễn phí) ở thời điểm này là ứng viên hoàn hảo cho ai vừa muốn tối ưu tốc độ, lẫn chi phí;
  • DigitalOcean (VPS, Cloud/dễ dùng). Tương tự, DO cũng là một cái tên hàng đầu về VPS, có server ở Sing (không có ở Nhật, Hàn), hiện nhiều website tôi đang dùng ở DO và thấy rất ưng ý.
  • UpCloudmột làn gió mới rất đáng chú ý trong cuộc chơi VPS, có location Sing, được đánh giá rất cao về tốc độ, phần cứng.
  • Linode (VPS, Cloud/tương đối khó). Có vị trí hàng đầu trong làng VPS giống Vultr. Tuy nhiên đăng ký có vẻ khó, tôi đăng ký thử một lần và họ block luôn không rõ lý do, mặc dù thẻ & các thứ khác đều đàng hoàng.
  • Cloudways (VPS, dịch vụ trung gian cho phép chọn nhiều VPS khác nhau, trong đó có cả Google Cloud). Cloudways về nhiều điểm khá giống serverpilot, nhưng với nhiều chức năng phong phú hơn. Tính theo giá nó đắt gấp đôi các VPS mà nó kết nối đến.

C. Tối ưu sẵn cho WordPress

  • Hiện tôi ưng mỗi hosting của Closte: ưu điểm sử dụng Google Cloud chất lượng cao, LiteSpeed Enterprise. Cách tính giá của Closte hơi phức tạp, nhưng nhìn chung website có lưu lượng 50 – 100K view/tháng có giá hợp lý từ 15 – 30$/tháng. Tham khảo bài review để có cái nhìn chính xác hơn về Closte.

Các công ty bán VPS có khoảng giá phong phú từ thấp nhất khoảng 5 USD cho đến vài trăm USD. Các công ty chuyên cho WordPress thường có giá khởi điểm từ 20 – 30 USD / tháng.

Hiện tại tôi host trang này trên DigitalOcean, tôi dùng kèm với vài trang khác nữa, tốc độ tương đối tốt.

Với host Việt Nam, tôi không có nhiều kinh nghiệm, nhưng thấy anh em bạn bè dùng và phản ánh khá tốt thì có một số nơi như:

  • Azdigi (Thạch Phạm);
  • BKNS;
  • vHost.

Ưu điểm quan trọng nhất của host Việt Nam là vị trí máy chủ ở gần người dùng, do vậy tốc độ cải thiện đáng kể so với việc bạn đi nửa vòng trái đất để lấy dữ liệu từ host ở Hoa Kỳ chẳng hạn.

Ngoài ra bạn còn thấy sự khác biệt rõ ràng trong trường hợp đứt cáp, host ở Việt Nam hầu như không ảnh hưởng gì về tốc độ, host ở nước ngoài (nhất là với các gói thấp) hoặc/và ở xa thì chậm hẳn.

Nếu bạn vẫn thích host ngoại nhưng ngại đường dài, hãy chọn host có máy chủ ở Singapore (ưu tiên địa điểm này), HongKong hoặc Nhật Bản, Hàn Quốc.

Ở thời điểm hiện tại có nhiều dịch vụ cao cấp cho host dùng WordPress, tôi có thể kể vài cái tên vì họ cũng nổi tiếng và ổn định thời gian dài rồi, thí dụ như Closte, LiquidWeb, Pressidium, Kinsta, WebSynthesis, MediaTempate,…Những thằng này cỡ từ 50 – 200 đô / tháng

Có một số thằng giá chát quá tôi không nêu ra, toàn 300 – 400 đô / tháng thì ghê quá à!

Từ khoá bạn có thể tra là: wordpress premium hosting

Kiến càng đang thuê host ở đâu: Tôi từng sử dụng host của Dreamhost, cả gói VPS lẫn DreamPress cho một số trang web. Ưu điểm của bạn này là trâu bò và uptime cao. Nhược điểm là vẫn sử dụng phần mềm máy chủ web Apache, cái vốn không phải là phần mềm máy chủ web nhanh nhất. Ngoài ra nó chỉ có máy chủ ở Hoa Kỳ. Ở thời điểm hiện tại bạn nên chọn host có máy chủ ở gần Việt Nam, thí dụ như Sing, Hongkong hoặc Nhật. Điều thứ hai là nên chọn host có phần mềm máy chủ web ưu tiên tốc độ, chẳng hạn sử dụng Nginx hoặc Litespeed. Theo tôi biết thì SiteGround, Vultr và DigitalOcean (2 cái sau cần dùng app của bên thứ ba để tối ưu) là các ứng viên rất tốt ở thời điểm này.

Combo tăng tốc của tôi ở thời điểm hiện tại:

Những giải pháp trên có ưu điểm là bạn dễ làm, ít phải thao tác với dòng lệnh, control panel đầy đủ tính năng.


2. Giao diện phù hợp – không phải website nào cũng cần lộng lẫy, bóng bẩy #

Cách thức tăng tốc WordPress này có thể tốn tiền hoặc không.

Rất giống áo quần ở chỗ nó là cái bề ngoài của bạn, tuy nhiên điểm khác biệt là bạn KHÔNG phải thay nó hàng ngày. Giao diện có thể sử dụng NHIỀU THÁNG, thậm chí là NHIỀU NĂM, do vậy, nếu cảm thấy cần đầu tư thì bạn cũng đừng tiếc tiền.

Ở đây lại nói đến tính phù hợp. Website càng màu mè, nhiều tính năng thì càng nặng vì nó sẽ cần nhiều JavaScript, CSS, ảnh hơn,…Tính thêm cả những truy vấn đến cơ sở dữ liệu nữa (và dĩ nhiên điều này làm ảnh hưởng đến tốc độ web).

Do vậy hãy đơn giản tối đa, nghĩa là bạn cần mức nào thì chọn giao diện mức đấy. Bắt buộc cần tính năng nào thì vẫn phải dùng, không thì thôi.

Chẳng hạn như trang này của tôi, giao diện không cần bắt mắt, nên tôi chọn theme đơn giản với các chức năng cơ bản để tăng tốc WordPress (hiện tại thì trang này màu mè hơn nhiều rồi ạ, tôi đã mua áo mới cho nó!).

sử dụng giao diện đơn giản giúp tăng tốc wordpress

Nói đi cũng phải nói lại, nếu bạn làm các trang yêu cầu hình thức như bán đồ mỹ phẩm, thời trang, đồ trang sức, nội thất…thì ưu tiên cho tính thẩm mỹ sẽ phải được tính đến.

Hiện tôi đang rất thích giao diện này: https://wordpress.org/themes/astra/ nó được tối ưu hóa cho tốc độ, nhưng trông vẫn đủ hấp dẫn. Astra có cả phiên bản miễn phí lẫn có phí, đường link tôi dẫn ở trên là phiên bản miễn phí.

Các theme tối ưu cho tốc độ bằng cách:

  • Tối ưu việc sử dụng font chữ, tốt nhất là dùng font có sẵn trên máy tính người dùng, hoặc tự host các font nhẹ, tránh sử dụng Google Font cho những font không phổ biến và nặng nề;
  • Không sử dụng jQuery, cái thường được thay thế dễ dàng bằng các đoạn JS có tính năng tương tự nhưng nhỏ gọn hơn nhiều (nhưng cuối cùng thì về sau chúng ta vẫn cài các plugin cần đến jQuery! Thật vô cùng khó để loại bỏ jQuery khỏi WordPress);
  • Giản hóa thiết kế, trong đó bao gồm việc sử dụng CSS, JS đơn giản, gọn gàng, tránh việc chặn hiển thị nội dung màn hình đầu tiên;

Tất cả những điều trên sẽ được tôi nói kỹ hơn ở các phần sau, và cả các biện pháp khắc phục nữa. Thường ngay cả khi bạn chủ động chọn được theme tốc độ tốt vấn đề tốc độ vẫn có thể xảy ra do các plugin mà chúng ta sử dụng sau này làm ảnh hưởng.

Bonus: Bạn có thể thích bài viết bàn về chủ đề theme WordPress nào nhanh nhất?

Kiến càng đang sử dụng giao diện nào: Tôi sử dụng nhiều giao diện, từ mặc định của Automatic cho đến các theme miễn phí khác rồi các theme phải bỏ tiền ra mua. Trang Kiến càng (một trang khác cùng tác giả) tôi đang dùng theme Soledad. Một theme khác mà tôi thích là Newspaper, nó có vẻ chạy rất mượt và nhanh hơn Soledad. Trang không quá cầu kỳ về hình ảnh, tôi thích dùng Astra, nó là theme chủ đích thiết kế cho tăng tốc, bản có phí của nó sử dụng không giới hạn website.

P/S: từ đầu năm 2019, tôi tách các bài viết về tăng tốc website trên Kiến càng ra một trang web riêng, đặt tên là speed.family, chính là trang bạn đang đọc đây. Kiến càng sử dụng theme của Astra. Sau tôi đổi sang theme GeneratePress.


3. Gỡ bỏ các plugin không dùng & hạn chế plugin quá nặng – vứt đồ thừa trong nhà #

  • Ưu điểm: chẳng tốn chi phí gì;
  • Nhược điểm: đòi hỏi bạn phải có vốn hiểu biết nhất định về nhu cầu của người dùng;

Nó chỉ là việc bỏ đi gánh nặng mà thôi. Cũng như căn nhà trở nên chật chội, khó ở vì có quá nhiều đồ đạc rất ít khi dùng, hosting cũng ì ạch nếu nó phải gánh quá nhiều. Tôi nghe đâu đó nguyên tắc rằng nếu một đồ vật không được dùng trong vòng 6 tháng hãy cân nhắc chào vĩnh biệt nó.

Plugin thường tạo ra hàng loạt các file CSS và JS bổ sung vào giao diện, nhiều trong số đó có dung lượng không nhẹ chút nào, có những cái lên đến hàng 100KB. Do vậy, mặc dù đa số plugin chúng ta dùng đều miễn phí, nhưng hãy tiết kiệm trong việc sử dụng nó.

Bản thân trang này tôi cố gắng để nó tối thiểu hoá plugin cần xài, hiện tại vẫn chưa đến 20 plugin:

sử dụng ít plugin giúp giảm tải cho wordpress

Nguyên tắc sử dụng plugin, cũng giống như giao diện, xài đến đâu thì cài đến đó. Đừng thừa đừng thiếu.

Một nguyên tắc quan trọng khác để bạn tránh gặp các rắc rối liên quan đến lỗ hổng bảo mật là đừng cài plugin crack, chọn plugin uy tín và được cộng đồng đánh giá cao. Chẳng có gì chắc chắn 100%, nhưng chúng ta cố gắng làm thế nào để tránh được trong khả năng.

Kiến càng hạn chế lạm dụng plugin như thế nào: Tôi cố gắng phát hiện các tính năng trùng lặp giữa các plugin hoặc của plugin và giao diện sẵn có để chọn chỉ dùng một cái mà thôi. Ví dụ JetPack có cái thống kê lưu lượng sử dụng rất hay, cũng như có CDN miễn phí. Tuy nhiên vì tôi dùng Google Analytics rồi, cũng như đã có CDN dùng riêng nên tôi không cần plugin JetPack nữa, tôi đã xóa nó đi (plugin JetPack khá nặng, sắp tới nếu thích hợp tôi sẽ tìm hiểu các plugin nặng phổ biến để chúng ta cân nhắc sử dụng nó hay không). Ví dụ thứ hai là các nút chia sẽ mạng xã hội, tôi dùng riêng một plugin chia sẻ, nên không dùng tính năng tương tự mà theme cũng có. Do vậy bạn vào tùy chọn theme và tắt nó đi.

Một điểm cần lưu ý nữa đó là: giữa nhiều plugin khác nhau, có những cái được thiết kế tốt hơn những cái khác ở khía cạnh tốc độ (có thể do trình độ lập trình, hoặc người ta chủ động thiết kế để tối ưu hiệu suất). Cái này tùy vào mục đích mà bạn cân nhắc đánh đổi giữa tính năng và tốc độ để chọn cái phù hợp.


4. Tối ưu hoá hình ảnh – hàng to nặng khéo gói buộc, sắp xếp cũng nhẹ đi nhiều #

  • Ưu điểm: dễ dùng, nhiều plugin miễn phí;
  • Nhược điểm: plugin chất lượng cao mất phí và các tùy chọn chuyên sâu có thể phức tạp với người quản trị web;
  • Lựa chọn nhanh: dùng tính năng miễn phí của plugin LiteSpeed cache hoặc plugin ShortPixel;

Nếu bạn nhìn bảng phân tích lưu lượng tải xuống của một trang web bạn có thể thấy hình ảnh chiếm từ 30 – 70% dung lượng (tuỳ từng trang, bài viết). Có nghĩa là một trang web 2 MB chẳng hạn, có thể 1,4 MB đã là hình ảnh rồi.

hình ảnh được tối ưu sẽ giúp tăng tốc wordpress lên nhiều lần
Như trang web được thống kê, hình ảnh chiếm đến 85%. Nội dung văn bản chẳng đáng bao nhiêu, chưa đến 2%. Chiếm thứ nhì là JavaScript, khoảng 7%. Đây là thống kế ngẫu nhiên một trang khá nặng hình ảnh, các trang khác tỉ lệ sẽ khác đi nhiều

Do vậy tối ưu hoá hình ảnh tốt sẽ giảm được rất nhiều lưu lượng, tương ứng là giảm thời gian hiển thị website (gồm cả thời gian trong màn hình đầu tiên/ above the fold, lẫn tổng thời gian để tải cả trang).

Có hai cách giảm dung lượng ảnh:

  • Giảm không mất chất lượng: Dung lượng ảnh giảm nhưng độ nét vẫn thế, thường tiết kiệm được từ 10 – 15% với ảnh JPG và lên đến 30 – 70% với ảnh PNG. Cái này lúc nào bạn cũng nên làm vì bạn chẳng mất gì về độ nét cả.
  • Giảm mất chất lượng: Dung lượng giảm, độ nét cũng giảm theo. Ưu điểm là có thể giảm được rất lớn, đôi khi đến 50% với ảnh JPG và 90% với ảnh PNG. Tuy nhiên cái này cần cân đối để không bị giảm chất lượng ảnh quá nhiều. Và thực tế đây là cách tôi không khuyên dùng trong hầu hết trường hợp.

Một cách đơn giản nhất để giảm dung lượng ảnh đó là chỉnh lại kích thước ảnh!

Thông thường kích thước web mà người dùng xem trên máy tính bàn giao động từ 600 – 800px, nên bạn chỉnh sửa ảnh lại chiều rộng như vậy sẽ đỡ đi nhiều. Chẳng hạn bạn có ảnh 1200px, bạn biết chiều rộng 600px là đủ thì hãy giảm kích cỡ này xuống, nó có thể giúp ảnh giảm dung lượng đi 3 đến 4 lần.

Một điều hay là nếu bạn lỡ up các ảnh lớn lên trang WordPress rồi thì vẫn có một số plugin cung cấp cho bạn khả năng thu gọn lại các ảnh đó về kích cỡ nhỏ hơn. Điều này hay là vì khi bạn có blog nhiều bài viết thì tìm thủ công các ảnh rất khó.

Để tìm các phần mềm tối ưu ảnh trên desktop bạn có thể tra từ khoá Image Optimization Software. Còn để tìm các plugin cho WordPress hãy tra Image Optimization Plugin WordPress. (Trừ khi bạn lấy ảnh chụp từ máy ảnh thường có kích thước rất lớn thì bạn nên tối ưu hóa trước bằng phần mềm desktop, còn các ảnh thông thường nhẹ nhàng khác thì cứ sử dụng plugin của WordPress là được, bạn đỡ mất công hơn nhiều).

Một số plugin tôi thấy khá ổn (và có hướng dẫn đầy đủ cách dùng ở link kèm theo) là:

P/S: Xem thêm so sánh các plugin nén ảnh.

Bên dưới là ảnh chụp màn hình phần cài đặt của plugin Imagify:

Imagify - plugin tối ưu hoá hình ảnh

Nếu bạn cần trả lời nhanh một plugin khá tốt, dễ dùng mà miễn phí thì tôi tiến cử EWWW.

Google cách đây vài năm đã đề xuất định dạng ảnh mới WebP thay thế một số định dạng ảnh cũ như JPG và PNG. Ưu điểm của WebP là dung lượng lưu trữ giảm khoảng 20 – 30% mà chất lượng không thay đổi.

Tuy nhiên điều khiến WebP chưa phổ biến là hiện mới có 2 trình duyệt lớn hỗ trợ nó (Chrome & Opera), ngoài ra các công cụ tiện lợi cho người dùng không rành kỹ thuật vẫn chưa nhiều.

(Cập nhật 2019: hiện WebP đã dùng được trên FireFox và Edge/Microsoft, chỉ còn Safari vẫn chưa hỗ trợ, và đây có thể là tiền đề để nó mở rộng sức ảnh hưởng mạnh mẽ hơn rất nhiều thời gian dài trước đây)

Tôi từng thực hiện chuyển đổi cho một khách hàng cá nhân sang với hơn 12 ngàn bức ảnh sang định dạng WebP, bạn nào muốn tìm hiểu thì vào liên kết này. Tuy nhiên cách thức này đòi hỏi kha khá công sức và tìm hiểu kỹ thuật để thực hiện chính xác nhiệm vụ.

Kiến càng sử dụng plugin nào để tối ưu hóa ảnh: Tôi dùng rất nhiều plugin, cả miễn phí lẫn trả phí. Hiện tại tôi thích EWWW, vì dù nó miễn phí nhưng lại có khá nhiều tùy biến cũng như ít giới hạn như các plugin miễn phí khác. Nếu có kinh tế bạn có thể chọn Imagify hoặc ShortPixel…Sắp tới tôi sẽ tìm hiểu sâu hơn vụ ảnh WebP + Lazy load + CDN, đây sẽ là cách cải thiện tốc độ ảnh trên web nhanh nhất có thể. Vướng víu ở chỗ tích hợp WebP với CDN hơi khó khăn vì nó cần viết lại thẻ ảnh để tùy vào trình duyệt mà load URL ảnh thích hợp. Các ứng cử viên tiềm năng để thực hiên công việc này bao gồm: CDN Enabler có khả năng tạo trang tĩnh riêng cho WebP và định dạng khác, WebP Express với khả năng can thiệp vào thẻ ảnh.

Lưu ý: Triển khai chính xác WebP là một nhiệm vụ phức tạp nên bạn cần cẩn trọng. Nếu bạn không chắc chắn không nên làm. Với những website mà lưu lượng truy cập chủ yếu đến từ Safari thì chuyển sang WebP hầu như không có tác dụng.

Chuyển sang WebP có lợi nhất khi bạn rơi vào một trong các trường hợp sau:

  • Người dùng của bạn chủ yếu dùng Chrome và các trình duyệt hỗ trợ WebP
  • Website có nhiều ảnh
  • Website có lưu lượng truy cập lớn

5. Sử dụng CDN – đáng đồng tiền bát gạo #

  • Ưu điểm: đem lại khả năng cải thiện tốc độ đáng kể & có khả năng cải thiện uptime nhờ giảm tải cho hosting gốc trên các website có lưu lượng lớn;
  • Nhược điểm: chi phí cao với trang web lưu lượng truy cập lớn hoặc/và nhiều tài nguyên;
  • Lựa chọn nhanh: BunnyCDN hoặc BizFly;

CDN là viết tắt của từ Content Delivery Network – hay mạng phân phối nội dung.

Hiểu nôm na nó thế này. Có hai ô tô giống nhau, một cái xuất phát ở Sài Gòn, một cái xuất phát ở Hải Phòng, đường xá đều đẹp, xăng xe đầy đủ, giữa đường không có vấn đề gì đặc biệt. Hỏi xe nào đến Hà Nội trước?

xe nào đến Hà Nội trước
Ảnh của Google map

Câu trên không phải mẹo đâu. Xe ở Quảng Ninh sẽ đến trước, vì nó gần hơn đến gần 10 lần.

Điều tương tự cũng xảy ra với host. Bạn mua cái host ở Mỹ, ngay cả bạn mua host tốt (xe ô tô xịn), đã được tối ưu hoá ảnh và tính năng (hàng hoá không nặng lắm), nhưng quãng đường xa vậy thì cũng không thể chốc nhát là đến.

Thế thì cái CDN làm nhiệm vụ phân tán nội dung khắp thế giới, và nó sẽ lấy nội dung nào ở vị trí nào gần với người dùng nhất, qua đó giúp tăng tốc.

Để thử có xem có CDN thì tốc độ sẽ thay đổi như thế nào, bạn hãy xem video dưới đây, nó có 2 ảnh giống y nhau về kích cỡ, dung lượng, nhưng một cái thì lưu ở host Hoa Kỳ, một cái lưu ở CDN có PoP tại Việt Nam (hoặc ở Sing):

Ảnh mèo bên phải có sử dụng CDN:

Ngày xưa CDN có giá đắt đỏ, khó dùng, rất ít website dám dùng trừ các trang lớn, nhưng ở thời điểm hiện tại, kỹ thuật CDN trở thành một dịch vụ phổ thông khi giá đã cạnh tranh hơn rất nhiều và triển khai cũng không quá khó khăn.

Một số dịch vụ hàng đầu cho website không có kinh phí lớn hoặc không rành về kỹ thuật:

  • Cloudflare (nhiều PoP nhất, có dịch vụ miễn phí, cài đơn giản);
  • CDNSun (có PoP ở Việt Nam);
  • KeyCDN (dễ dùng, nhiều chức năng chuyên sâu);
  • BunnyCDN (giá rất hấp dẫn, hiệu suất không thua kém KeyCDN);
  • StackPath (công ty mua lại MaxCDN, cũng có giá rất cạnh tranh);
  • QUIC cloud (mới ra nhập thị trường hơn năm nay, đây là sản phẩm của LiteSpeed).

(Xem thêm đánh giá về các dịch vụ CDN hàng đầu tại đây).

cloud-flare-co-hang-tram-pop-tren-toan-cau
Cloudflare có hàng trăm POP (trung tâm dữ liệu – Data Center) trên toàn thế giới và là một trong các dịch vụ CDN hàng đầu. Ở châu Á, các POP của họ bao phủ hầu hết các nước, hiện tại đã có 2 POP ở Việt Nam (đầu năm 2019). Châu Mỹ, Châu Phi họ không có nhiều POP, đây là tình hình chung, số lượng thế này đã là khá hơn rất nhiều các dịch vụ khác rồi.

Người dùng nào ở Việt Nam vào web bạn thì ảnh không phải lấy ở host tận bên Hoa Kỳ mà là lấy ở Nhật, Singapore hay thậm chí ngay tại Việt Nam.

Câu hỏi, nếu khách truy cập chủ yếu ở Việt Nam thế sao không thuê host luôn ở Việt Nam đi cho tiện, bày vẽ sang tận Hoa Kỳ, Nhật, Sing thuê host làm gì bây giờ lại phải khổ.

Lý do là thế này: Về nhiều mặt, trong đó có chất lượng kỹ thuật, dịch vụ, bảo mật, phương thức thanh toán…hosting của Hoa Kỳ và nước ngoài nói chung tốt hơn Việt Nam (và nhiều khi là rẻ hơn).

Ngoài ra với một số dịch vụ đặc biệt (ít thôi) mà khách hàng phân tán khắp thế giới thì yêu cầu dùng CDN là rất cần thiết. Chẳng hạn hầu hết các hãng tin hàng đầu thế giới mà người đọc rải khắp năm châu bốn bể thì họ đều sử dụng CDN để cải thiện tốc độ, và tránh quá tải cho máy chủ.

Nhược điểm khi sử dụng CDN là gì:

  • Không nhiều dịch vụ CDN quốc tế có POPs đặt tại Việt Nam. (Cập nhật 2019, hiện có Cloudflare và CDNSun có PoP ở Việt Nam, tôi đã dùng thử thấy tốc độ khá ổn).
  • Để dùng được CDN chất lượng, số tiền bỏ ra cũng không hẳn là nhỏ với đa số website, 5 – 10 đô / tháng để sử dụng CDN là chuyện bình thường. Giá đó tương đương với host nho nhỏ rồi. Tuy nhiên cái này cũng tùy quan điểm của từng người, lợi ích của CDN có thể quan trọng hơn nhiều lần mức giá đó, cái vốn chỉ là vấn đề với web nào quá eo hẹp về tài chính. Cập nhật: hiện BunnyCDN cung cấp dịch vụ CDN có chất lượng tốt với giá cả rất phải chăng, tôi không tốn hơn 2$ cho hệ thống website có lưu lượng truy cập khoảng 50 ngàn view / tháng;
  • Triển khai CDN chuẩn chỉnh có thể gây khó khăn cho những ai không am hiểu về kỹ thuật và yêu cầu thời gian tìm hiểu cẩn thận. Một số trở ngại có thể kể đến như thiết lập https cho CDN, hoặc cài subdomain và chống trùng lặp nội dung khi sử dụng CDN.

Các dịch vụ CDN có nhiều cách tính giá:

  • Dùng đến đâu trả đến đấy – theo dung lượng: cách này hay được áp dụng nhất, dùng một tháng hay một năm hết cũng được, bao giờ hết mới phải mua tiếp;
  • Trả theo tháng, dùng bao nhiêu dung lượng thì dùng: tôi biết có mỗi Cloudflare áp dụng cách này. Gói tầm trung của nó tầm 20 đô / tháng. Dịch vụ miễn phí nhìn chung cũng được đánh giá tốt.

Nếu web thông tin có 200K – 500K view / tháng có thể dùng host 20 đô + Cloudflare được đấy ạ (xem hướng dẫn cách cài đặt CloudFlare ở đây), có những người cho biết website của họ tiết kiệm đến 11 TB dữ liệu hàng tháng nhờ sử dụng gói CDN Pro của Cloudflare.

Nếu có mức chi tiêu 100 đô / tháng mà khách truy cập chủ yếu ở Việt Nam bạn có thể cân nhắc thuê một con host thật tốt tại Việt Nam, và không cần phải dùng CDN.

Vậy CDN hợp với ai?

  • Site nhỏ, hoặc tầm trung muốn tăng tốc và giảm tải host;
  • Site lớn, lượng người truy cập phân tán khắp thế giới;
  • Site kích thước bất kỳ, dùng host nước ngoài, muốn tăng tốc trong trường hợp đứt cáp ở Việt Nam;
  • Site hay có lượng truy cập tăng bất thường, gây quá tải.

Site lớn và lượng truy cập tập trung ở Việt Nam thì chi phí host sẽ cao có thể chọn một trong hai cách:

  • Sử dụng luôn host tại Việt Nam nếu được, với chi phí cao sẽ được ưu đãi, quan tâm chăm sóc nhiều hơn.
  • Mua host xịn nước ngoài ở gần Việt Nam mà không cần CDN (tuy nhiên đây không phải là cách tối ưu tốc độ tốt nhất. Một xu hướng mà tôi thấy đang thịnh hành, nhiều host cao cấp hiện nay thường hợp tác với bên thứ 3 (hoặc tự triển khai) để cung cấp luôn CDN, ví dụ như Kinsta. Điều này cho thấy CDN là dịch vụ rất được quan tâm trong dòng hosting chất lượng).

Lưu ý quan trọng: Trong điều kiện internet bình thường, website của bạn không có lưu lượng truy cập đột biến, và người dùng chủ yếu ở VN thì tôi nhận thấy rằng bạn chỉ cần đặt hosting trên máy chủ đủ tốt tại Sing là đủ, tốc độ tải trang vẫn rất cao. Ví dụ blog Kiến càng đang host trên VULTR HFC tại Sing mà không cần đến CDN. Tôi nói điều này để chúng ta ý thức được rằng mặc dù CDN là một xu thế hot và khó cưỡng (với những ai đam mê tốc độ) nhưng cũng tùy tình hình thực tế mà chúng ta sử dụng, bởi vì làm cái gì cũng mất công tốn sức cả, những cái không cần thì không nên dùng, sẽ đỡ đi nhiều việc.

Nói thêm một chút về Cloudflare, vì tôi cũng có kinh nghiệm sử dụng sản phẩm có phí của nó. Đánh giá chung là khá ổn. Cloudflare không đơn giản chỉ là dịch vụ CDN, nó còn là dịch vụ giúp bạn tăng tốc website rất toàn diện + cả bảo mật cho web nữa.

Bên trong Cloudflare có hỗ trợ nén ảnh, nén HTML, CSS, JS & một số giải pháp tăng tốc mà bạn rất khó tìm ở nơi khác. Về bảo mật Cloudflare giúp hạn chế các cuộc tấn công, hack, bao gồm cả DDoS. Điểm hay nữa của dịch vụ này là nó giúp tăng tốc cho tất cả các nền tảng chứ không riêng gì WordPress.

Về dịch vụ CDN truyền thống, bạn có thể tham khảo 2 bài viết này:

Kiến càng đang sử dụng CDN như thế nào: Tôi từng dùng CDNSun, KeyCDN, MaxCDN và Cloudflare. Hiện tôi thích CDNSun nhất, tuy rằng nó khó sử dụng hơn KeyCDN và không có nhiều tính năng như Cloudflare nhưng bù lại nó có máy chủ ở Việt Nam, trong khi những cái khác không có, kể cả Cloudflare dù đã bổ sung PoP ở Việt Nam, nhưng dữ liệu thực tế vẫn lấy nhiều ở Hongkong (có thể chỉ dịch vụ cao cấp Cloudflare mới ưu tiên dữ liệu ở Việt Nam, còn không họ sẽ tối ưu hóa chi phí bằng cách lấy dữ liệu ở chỗ khác rẻ hơn/tôi đoán vậy). Trường hợp đặc biệt, khi bạn có trang web lưu lượng truy cập rất lớn, sử dụng Cloudflare có thể rất thích hợp.

Có dịch vụ CDN miễn phí nào không?

Để cung cấp dịch vụ CDN rất tốn kém, họ phải có máy chủ khắp thế giới nên nói thẳng ra rất khó tìm được hàng miễn phí. Nếu có miễn phí thường sẽ rơi vào tình cảnh giới hạn dung lượng rồi mồi nhử bạn mua gói cao hơn.

Thế thực sự không có gói miễn phí nào trọn đời dùng thoải mái à?

Thực ra là . Hiện tại tôi biết có mỗi Automatic chính chủ WordPress cung cấp dịch vụ CDN miễn phí thông qua plugin Jetpack, trọn đời, không giới hạn dung lượng. Tuy nhiên nó không ngon như bạn tưởng!

dịch vụ CDN miễn phí của Jetpack có khi không làm tăng tốc WordPress

Nhược điểm của dịch vụ CDN Jetpack là tốc độ không được cao như các dịch vụ CDN khác, tức là cái quan trọng nhất để mọi người muốn dùng CDN thì nó lại không đáp ứng được!

Ngay cả người dùng nước ngoài đôi khi cũng kể lại rằng bị Jetpack làm cho trang web của họ load đến 8 – 10s.

Thứ hai do đặc thù ở Việt Nam nên việc tải ảnh qua máy chủ của CDN Automatic WordPress đôi khi rất chậm thậm chí bị chặn luôn! (đặc biệt là trên điện thoại di động).

Ngoài ra là một số vấn đề:

  • Ảnh CDN lưu trên photon của Jetpack bị giảm chất lượng, do vậy nếu ảnh nguồn chưa được tối ưu thì không sao, nếu nó được tối ưu tốt rồi thì việc giảm chất lượng này lại gây ra tác dụng ngoài mong muốn là chất lượng ảnh sẽ quá xấu.
  • Một số người nói rằng image CDN của Jetpack ảnh hưởng đến SEO của họ.

Đấy là lý do việc dùng CDN của Jetpack trong bối cảnh này trong nhiều trường hợp hại lại nhiều hơn lợi, duy nhất có cái lợi nhỏ là bạn tốn ít băng thông hơn & bớt được các request tới máy chủ mà thôi. Vậy nếu không quá túng thiếu thì không nên dùng.

Bonus: CDN chuyên sâu cho ảnh

Một vài dịch vụ CDN tập trung riêng vào ảnh, có 2 lý do để làm điều này:

  • Dung lượng trang phần nhiều là ảnh, dung lượng gấp 3 – 4 lần CSS và JS cộng lại không phải là chuyện hiếm
  • Ảnh có nhiều đất diễn để các dịch vụ CDN thi thố tính năng, chẳng hạn như nén ảnh, webp, lazy load, các hiệu ứng biến đổi, tối ưu kích cỡ hiển thị, vân vân

Một số dịch vụ có chất lượng tốt:

Ai nên sử dụng CDN chuyên cho ảnh?

Các trang tập trung vào đồ họa có thể thích hợp nhất, vì họ tận dụng được nhiều tính năng sâu và rộng về ảnh. Các trang thông thường với cách sử dụng ảnh đơn giản (ví dụ như blog này), tôi nghĩ không cần thiết.


6. Sử dụng cache – không thể bỏ qua cách tăng tốc WordPress này được #

  • Ưu điểm: có khả năng đem lại cải thiện tốc độ rất tốt, nhiều plugin miễn phí;
  • Nhược điểm: cài đặt chuyên sâu yêu cầu bạn phải tìm hiểu kỹ, các plugin chất lượng cao nhất yêu cầu trả phí;
  • Lựa chọn nhanh: LiteSpeed cache hoặc WP-Rocket;

Những tay mới lọ mọ WordPress có thể chẳng biết gì về CDN, hay tối ưu dung lượng ảnh để tăng tốc web, nhưng có khả năng cao là vẫn biết plugin cache nào đấy. Lý do ư? Vì đây là công cụ tăng tốc rất hiệu quả, và cài đặt cơ bản dễ làm, ngoài ra đa số các biện pháp tăng tốc WordPress sử dụng cache đều có cách thức/gói miễn phí.

Có rất nhiều điều để nói về phần này, và nó cũng bao gồm nhiều thông tin kỹ thuật (và có những cái tôi cũng không hiểu hết), nhưng bạn vẫn nên đọc để nắm được ý tưởng cơ bản.

Cache nghĩa là bộ nhớ đệm. Dưới đây là một số cách.

A. Cache phía trình duyệt

Bạn đã vào một trang web, các ảnh và JavaScript, CSS đã tải về. Ngày hôm sau, tuần sau, hoặc tháng sau bạn vào trang đó, thì trình duyệt sẽ không cần tải lại các thông tin đấy nữa, vì nó đã lưu ảnh (chẳng hạn ảnh banner), JS và CSS vào bộ nhớ của nó ở máy tính, điện thoại rồi, vì những cái này giống nhau giữa các trang (tôi nghĩ vui vui thế này: đây là dịch vụ CDN rẻ nhất và hiệu quả nhất! Bạn chẳng tốn xu nào và thiết bị của người dùng thì lại lưu sẵn nội dung trang của bạn rồi).

Cái này đơn giản vậy mà tăng tốc rất nhiều lần đấy ạ. Khách truy cập các lần tiếp theo giảm tải có khi từ 30% đến 70%. Tất nhiên cái này không có tác dụng trong lần truy cập đầu tiên của khách hàng.

Tuy nhiên theo mặc định cache trình duyệt nếu bạn không điều chỉnh thì thời gian lưu của nó không dài, tức là tác dụng cache sẽ kém đi rất nhiều.

Để chủ động thời gian lưu dữ liệu phía máy khách bạn cần thêm các đoạn mã vào file .htaccess (đây là cách tiêu chuẩn, nhưng thủ công, đa số các plugin cache tốt cho phép bạn làm điều này thông qua giao diện đồ họa dễ hơn nhiều, phần này cho bạn biết bản chất của các đoạn mã cache trình duyệt).

File này có 2 cách truy cập, cách dễ nhất là thông qua plugin cho phép chỉnh sửa bằng giao diện trực quan của WordPress, ở đây bạn có thể dùng luôn plugin mà đa số người dùng WordPress đều xài đó là Yoast SEO:

Bạn vào Yoast > Tools > File editor

Copy – Paste đoạn code này vào phần chỉnh sửa .htaccess (đoạn code này là cho máy chủ dùng Apache, LiteSpeed webserver hoặc bất cứ dạng lai nào dùng được .htaccess):

EXPIRES CACHING ##
ExpiresActive On ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
## EXPIRES CACHING ##

Sau đó nhấn nút Save…

(Bạn có thể muốn xem thêm hướng dẫn dùng Yoast SEO ở bài viết này và bài chi tiết về việc tận dụng bộ nhớ đệm/cache phía trình duyệt).

Bạn cần hết sức cẩn thận copy chính xác, bởi vì cái file này chỉ cần làm nó bị lỗi một chút là trang web sẽ KHÔNG TRUY CẬP được, cho nên bạn cần biết cách thứ hai phòng khi làm lỗi cách thứ nhất, nhưng trước tiên, tôi muốn giải thích sơ qua đoạn code trên, với đoạn mẫu trên bạn sẽ bảo trình duyệt của người dùng:

  • Lưu trữ ảnh trong vòng 1 năm;
  • Lưu trữ text, css, pdf, x-icon trong vòng 1 tháng;
  • Còn mặc định những định dạng khác là 2 ngày;

Nếu cách thứ nhất làm lỗi (và bạn không truy cập được website nữa) thì bạn chỉ còn duy nhất một phương án đó là truy cập vào thư mục gốc trên hosting của trang web.

Bạn có thể sử dụng công cụ như FileZilla để chỉnh sửa các file trên hosting. Khi đăng nhập bạn sẽ thấy các file và folder tương tự như thế này:

FileZilla đăng nhập hosting

Nói chung bước này cần bạn chịu khó hơn một chút, yêu cầu phải nắm được cả thông tin tài khoản hosting. Để rõ hơn về chỉnh sửa .htaccess, bạn tham khảo bài viết này: https://kiencang.net/sua-htaccess-wordpress/

Kiến càng làm điều này như thế nào: Hầu hết các trang tôi sử dụng plugin cache thì nó tự động làm điều này rồi nên tôi không phải làm gì thêm. Một số trang không có thì tôi thêm thủ công.

P/S: Để hiểu rõ hơn về cache phía máy khách (trình duyệt người dùng), bạn có thể tham khảo bài viết về HTTP Caching, nó có trình bày kỹ thuật sử dụng Cache-Control, là kỹ thuật mới và hiệu quả hơn so với Expires.

B. Kỹ thuật tạo trang tĩnh

Đại khái trang mà bạn nhìn thấy được tạo thành từ các truy vấn từ cơ sở dữ liệu, mỗi lần bạn yêu cầu, nó sẽ phải tạo truy vấn cơ sở dữ liệu, thực hiện các câu lệnh PHP để lấy ảnh, tiêu đề, nội dung, phần chân trang…

Nó giống như để nhìn thấy cả đại gia đình bạn phải gọi cả ông bà, bố mẹ, con cháu nội ngoại ở khắp nơi về họp mặt. Nếu bạn không cần nói chuyện với họ, cách hay hơn để nhìn thấy mà đỡ tốn công nhiều người là…chụp một bức ảnh cả đại gia đình, phóng to như thật, hiệu quả về mặt hình ảnh là gần tương tự.

Ở trên chỉ là một giải thích sơ sài về cache cho bạn dễ hiểu. Tìm hiểu thêm về cache trong WordPress bạn có thể đọc bài này: 6 kiểu cache trong WordPress.

Trên thị trường hiện nay, đặc biệt là WordPress có vài plugin rất tốt hỗ trợ, như LiteSpeed cache (miễn phí và cực tốt), WP Rocket (thích hợp cho dân không chuyên vì rất dễ dùng, nhưng giá đắt 39 đô / năm), dạo gần đây còn có Swift Performance (có cả bản miễn phí và có phí). Ngoài ra còn 2 plugin rất nổi tiếng ngày xưa là WP Super Cache (thích hợp cho share host, miễn phí), W3 Total Cache (thích hợp cho VPS và người có kinh nghiệm, miễn phí và bản premium), nhưng giờ ít người dùng hơn.

Bản thân tôi đang dùng WP Rocket cho trang này (tuy nhiên sau khi hết hạn 1 năm, tôi đã chuyển sang LiteSpeed cache). Đa số các plugin vừa đề cập đều có khả năng điều chỉnh cả cache phía trình duyệt.

Các bạn lưu ý là các hosting tối ưu chuyên cho WordPress thường tích hợp sẵn các công cụ bộ nhớ đệm kiểu trang tĩnh ở phía máy chủ rồi nên bạn sẽ không cần phải cài thêm plugin nữa. Ví dụ như gói DreamPress của Dreamhost đã tích hợp đầy đủ cho tôi, hay SiteGround có plugin chuyên dụng của họ cũng được cài đặt sẵn. Tuy nhiên để cẩn thận bạn nên kiểm tra trước với công ty hosting của bạn.

Kiến càng đang sử dụng plugin tạo trang tĩnh nào: Tôi có lịch sử sử dụng plugin tạo trang tĩnh khá phức tạp, chuyển qua chuyển lại nhiều lần. Hiện tại, các trang nào có kinh phí đầu tư tốt tôi dùng Swift, WP-Rocket, còn các trang miễn phí, tôi dùng WP Super Cache, Cache Enabler. Còn WP Fastest Cache cũng khá tốt, tuy nhiên nó có nhược điểm là nếu theme có giao diện dành riêng cho mobile, phiên bản miễn phí sẽ không tạo cache cho phiên bản dành riêng cho mobile này (dù rằng phần lớn theme không cần giao diện dành riêng cho mobile vì thiết kế đáp ứng rất phổ biến, tuy nhiên việc sử dụng plugin có thể dẫn đến việc phải bổ sung thêm, và lúc này WP Fastest Cache tỏ ra bất lợi). Do vậy hiện tại tôi ít dùng WP Fastest Cache hơn. Cập nhật: hiện trên hầu hết các trang tôi sử dụng plugin LiteSpeed cache.

Bonus: hiện có plugin tạo trang tĩnh thú vị có tên WP2Static. Nó thú vị và khác biệt so với các plugin cache khác ở chỗ nó tạo ra một website tĩnh hoàn toàn, loại bỏ nhu cầu phải sử dụng MySQL và thực thi các đoạn mã PHP. Nó vừa giúp tăng tốc, vừa giúp giảm chi phí hosting với khả năng chịu tải tương đương. Tuy nhiên tạo ra website tĩnh hoàn toàn vừa là ưu điểm cũng là nhược điểm của nó. Bạn có thể click vào bài giới thiệu trên để tìm hiểu rõ hơn.

C. Kỹ thuật cache phía máy chủ

Kỹ thuật này đòi hỏi chuyên môn nếu bạn tự tay làm (một số VPS, ví dụ có lần tôi mua bên LiquidWeb, họ không cài sẵn mà mình phải yêu cầu hoặc tự cài), ngược lại một số host khá xịn thì họ chủ động cài sẵn cho bạn rồi (thí dụ đã kể là DreamPress của Dreamhost).

Vài công nghệ có thể kể đến là Varnish, Memcached, Redis, Nginx FastCGI, PHP OPcache. Có thể có mâu thuẫn giữa kỹ thuật cache phía máy chủ và plugin cache (ví dụ giữa Varnish và WP-Rocket) nên bạn phải cẩn thận trước khi dùng cả hai.

Kiến càng thực hiện điều này như thế nào: Tôi có sử dụng gói DreamPress của Dreamhost trên một số website (không phải trang này, trang này sử dụng VPS). Đây là gói host được tối ưu hóa sẵn cache phía máy chủ, Dreamhost khuyên là tôi không nên dùng plugin cache với DreamPress nên tôi cũng áp dụng theo để tránh xung đột… Kiến thức về cache phía máy chủ của tôi còn hạn chế nên không có nhiều điều để nói, sắp tới tôi sẽ bổ khuyết vấn đề này.

D. Một vài lưu ý về kỹ thuật cache

  • Bạn nên sử dụng nó bởi vì đây là một trong các cách hiệu quả nhất để cải thiện tốc độ trang.
  • Khi cập nhật nếu bạn quên xoá cache trang đó thì thông tin hiện ra ngoài không thay đổi. Để phòng điều đó, các plugin cache tĩnh để thời gian sống của cache thường từ 1 ngày đến 1 tuần là nhiều (bạn có thể chủ động điều chỉnh thông số này) hoặc là họ ngay lập tức xoá cache chỉ của URL vừa mới cập nhật (cách này là tốt nhất, và thường là tính năng mặc định của nhiều plugin tạo cache).
  • Các kỹ thuật cache phía máy chủ không dành cho người không chuyên, nếu không thành thạo thì có khả năng hại nhiều hơn là lợi.

7. Sử dụng nén Gzip – thường được các công ty host tích hợp sẵn rồi #

  • Ưu điểm: thường được tích hợp sẵn trong hosting rồi;
  • Nhược điểm: không nén tốt bằng phương thức nén Brotli;
  • Lựa chọn nhanh: chọn công ty hosting nào có nén Brotli để tối ưu hơn nữa;

Nén Gzip cũng là kỹ thuật tăng tốc WordPress miễn phí, theo đó máy chủ hosting sẽ nén một số file của bạn như HTML, CSS, JS, rồi mới gửi đến trình duyệt (nó chỉ nén dữ liệu dạng văn bản, không nén media như hình ảnh, video). Sau khi tải xong file nén (đã được giảm dung lượng rất nhiều), trình duyệt sẽ giải nén để hiển thị thông tin.

Dưới đây kết quả cho thấy Gzip hiệu quả thế nào với một số file thông dụng (JS & CSS):

Để kiểm tra trang web của bạn đã bật Gzip hay chưa, bạn có thể vào trang web: https://www.giftofspeed.com/gzip-test/

Kết quả thử với trang web:

Nén Gzip cho trang này giúp tiết kiệm 70,8% dung lượng
Nén Gzip cho trang này giúp tiết kiệm 70,8% dung lượng. Lưu ý lại lần nữa thống kê này áp dụng cho văn bản. Ảnh và video không có nén Gzip.

Đa số các hosting đều cho phép nén Gzip, thậm chí cài đặt sẵn tính năng này bởi vì nó giúp họ tiết kiệm băng thông đi nhiều.

Các plugin WordPress tạo cache trang tĩnh phần lớn đều tích hợp luôn tính năng bật Gzip (bên cạnh việc nó thường cũng hỗ trợ luôn điều chỉnh cache phía trình duyệt).

Nếu bạn không rơi vào các trường hợp kể trên có thể bật Gzip theo cách thủ công bằng cách chỉnh sửa file .htaccess.

Với máy chủ dùng Apache, bạn thêm đoạn sau vào file .htaccess:

# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

P/S: Cho bạn nào muốn đào sâu hơn hãy tham khảo bài dịch này: https://kiencang.net/bat-nen-gzip/

Ngoài nén Gzip rất phổ biến, hiện có kỹ thuật nén mới tên Brotli được phát triển bởi Google cho khả năng nén còn tốt hơn, tuy nhiên hiện không phải hosting nào cũng có. Để kiểm tra host nào đó có hỗ trợ Brotli hay không bạn có thể dùng công cụ này của KeyCDN: https://tools.keycdn.com/brotli-test

VPS này tôi đang dùng cho website Kiến càng không hỗ trợ Brotli, gói DreamPress được tối ưu cho WordPress, cũng của Dreamhost thì có hỗ trợ nén Brotli.

host có hỗ trợ nén brotli

Kiến càng có sử dụng gzip không: dĩ nhiên là có, mặc định hosting tôi thuê đã bật gzip rồi nên phần này tôi không phải động tay động chân gì.


8. Các kỹ thuật tăng tốc của Google và Facebook – cân nhắc thiệt hơn #

  • Ưu điểm: miễn phí, cải thiện tốc độ đáng kinh ngạc;
  • Nhược điểm: đôi khi bạn phải hy sinh tính năng trên trang;

Đây là một trong những cách thức đơn giản nhất và hiệu quả nhất để tăng tốc WordPress.

Không có biện pháp nào bên trên sánh được về mức độ cải thiện tốc độ bằng cách này. Tuy nhiên cái gì cũng có cái giá của nó (không phải tiền) nên bạn cần cân nhắc cẩn thận.

Cả Facebook và Google đều cung cấp các biện pháp mới nhằm tăng tốc tải trang trên nền tảng di động. Nguyên nhân là vì tốc độ truy cập internet trên di động không có tốc độ cao cũng như độ ổn định như internet truy cập tại nhà.

Về cơ bản biện pháp chính của họ là:

  • Rút gọn code của trang web. Cả hai sẽ thu gọn trang web lại, họ hầu như chỉ giữ lại nội dung chính yếu của website và loại bỏ các thông tin khác, chẳng hạn như thông tin cột bên phải, các thiết kế màu mè.
  • Lưu trang web trên máy chủ của Google và Facebook. Dĩ nhiên vì máy chủ của họ mạnh và gần người dùng hơn hẳn đa số các dịch vụ hosting mà bạn dùng nên tốc độ sẽ được cải thiện đáng kể.

Cách này không nên dùng nếu bố cục và chức năng của trang web bị thay đổi ngoài sự mong muốn của bạn. Còn nếu trang đặt trọng tâm vào nội dung thì tôi rất khuyến khích. Thí dụ như trang này (Kiến càng) tôi sử dụng công cụ tăng tốc của Google.

Google gọi chương trình tăng tốc của họ là AMP (Accelerated Mobile Pages). Với WordPress bạn có thể cài plugin AMP của chính chủ Automatic (xem hướng dẫn dùng ở bài này).

Khi người dùng tìm kiếm trên Google bằng điện thoại, nếu trang của bạn dùng AMP thì khả năng cao nó sẽ hiển thị kết quả ở định dạng này (có biểu tượng sấm sét bên cạnh đường link). Người dùng truy cập nhanh hơn đáng kể. Ông Jarrod Dicker người đứng đầu bộ phận sản phẩm & công nghệ của Washington Post nói rằng AMP làm tăng tỷ lệ click lên 50% vì người đọc biết rằng trang tải nhanh hơn, cụ thể ông chia sẻ thêm trang tải nhanh hơn 88% so với trang mobile truyền thống.

Sau khi vào trang AMP từ công cụ tìm kiếm, từ các click tiếp theo họ sẽ truy cập định dạng mobile thông thường.

Cũng có người khuyên rằng nên đợi AMP trở thành một trong các yếu tố xếp hạng và cần thời gian thử thách xem nó có được Google hỗ trợ dài lâu không? (cập nhật 2019: đến thời điểm này đã khẳng định được rằng AMP rất thành công)

Với Facebook họ gọi kỹ thuật của mình là Instant Articles, khi bạn đăng ký dùng sản phẩm tải trang nhanh của Facebook, mỗi khi bạn chia sẻ lên trang fanpage, Facebook sẽ chuyển nó sang định dạng của họ và làm trang tải nhanh hơn rất nhiều.

So sánh tốc độ thì FIA (Facebook Instant Articles) nhanh hơn Google AMP. Nhưng điều ấy không hàm ý là bạn chỉ nên dùng FIA vì đây là 2 nền tảng khác nhau, và thường là mình sẽ dùng cả hai nếu muốn đẩy tốc độ trang web lên tối đa.

So sánh tốc độ tải trang của AMP, FIA & trang web mobile thông thường
So sánh tốc độ tải trang của AMP, FIA & trang web mobile thông thường. Ảnh của Chartbeat

Kiến càng đang sử dụng AMP và FIA như thế nào: Hiện tôi mới áp dụng AMP cho trang web này và một số trang khác, FIA vẫn chưa dùng, vì lưu lượng truy cập của tôi chủ yếu qua tìm kiếm. Bạn nên thận trọng sử dụng AMP nếu trang của bạn là trang thương mại điện tử, vì AMP lược gọn đi rất nhiều tính năng.


9. Cắt giảm các thiết kế không cần thiết trên di động – nhỏ mà có võ #

  • Ưu điểm: đơn giản, dễ làm;
  • Nhược điểm: cache sẽ phức tạp hơn vì phải tách 2 phiên bản khác nhau;

Đây là cách tăng tốc WordPress tôi thấy ít người nói đến nhưng thực sự nó có tác dụng.

Nếu bạn để ý có rất nhiều phần thiết kế trên desktop gần như vô ích trên di động. Không phải là nó vô ích theo nghĩa nó không có tác dụng gì mà vấn đề là người dùng có khả năng cao không xem đến chúng.

Chẳng hạn với cột phải, ở màn hình lớn, thông tin cột sẽ hiện ra trước mắt người dùng khi họ đọc tin, nhưng ở điện thoại thì khác, họ có thể phải kéo xuống tận cùng mới thấy các thông tin cột phải (hoặc trái), và hành vi kéo xuống tận cùng đó rất ít khi được sử dụng.

Do vậy nếu thông tin đó quan trọng, ở trên di động bạn nên xem xét đến việc chuyển nó gần hơn phía cuối bài viết. Còn nếu thông tin đó không quá quan trọng, và bạn nhận thấy khả năng nó được xem trên mobile là rất thấp hãy cân nhắc cắt giảm chúng trên di động.

Bản thân AMP cũng là việc cắt giảm rất nhiều yếu tố để giữ lại khung nền chính mà thôi. Còn ở đây là sự cắt giảm chủ động từ phía chúng ta dù bạn có cài AMP hay không.

P/S: plugin Ad Inserter được tôi sử dụng để tùy chỉnh giao diện trên mobile. Bản miễn phí của nó là đủ dùng trong phần lớn trường hợp vì cũng có đến 16 khối code để bạn tùy chỉnh.

Kiến càng cắt giảm thiết kế như thế nào: Hiện trang bạn đang đọc, tôi không phải cắt giảm thiết kế gì, vì cột phải không có nội dung gì cả. Tuy nhiên một số trang của khách hàng tôi đã tiến hành cắt giảm vì cột phải trên desktop có khá nhiều thông tin mà hầu như sẽ không được xem trên di động.


10. Lazy Load ảnh – khi lười có lợi hơn chăm #

  • Ưu điểm: miễn phí, hiệu quả và không khó triển khai;
  • Nhược điểm: không phải trang nào cũng phù hợp & ít nhiều ảnh hưởng đến trải nghiệm người dùng;
  • Lựa chọn nhanh: sử dụng tính năng sẵn có trên plugin cache hoặc dùng plugin Flying Images;

Tải chậm/tải lười ảnh, đây là mẹo này rất hay nếu trang của bạn có nhiều ảnh, video hoặc/và có lưu lượng truy cập lớn. Nó sẽ chỉ tải ảnh nếu ảnh hoặc video của bạn hiện ra trong tầm nhìn của người đọc (hoặc ở gần đó với một ngưỡng xác định, chẳng hạn 1000px).

Thí dụ nếu bài viết có 5 ảnh, mỗi ảnh 100KB, thì mới đầu nó chỉ tải văn bản và các thứ khác thôi, chưa tải ảnh vội, đến lúc người xem cuộn tới phần có ảnh thì nó mới tải, trong ví dụ trên, dung lượng trang web cho lượt tải đầu tiên có thể giảm được đến 500KB (nếu cả 5 ảnh đều nằm dưới màn hình đầu tiên), website vì thế sẽ hiển thị cho người dùng nhanh hơn.

Trang càng có nhiều ảnh nằm phía dưới màn hình đầu tiên, cách thức này càng tỏ ra hiệu quả. Điều này dựa trên thực tế rằng không có nhiều người dùng đọc toàn bộ trang web, dẫn đến chuyện nếu bạn tải toàn bộ ảnh thì đây thường là sự phí phạm rất lớn và tốn kém thời gian.

Các bạn sẽ thấy khá nhiều trang tin tức có lưu lượng truy cập lớn dùng cách này, vì họ có nhiều ảnh và hàng triệu người dùng, ví dụ như trang Medium hay Wikihow. Lazy load vừa giúp tăng tốc, vừa làm giảm băng thông vô cùng hiệu quả (rất có ý nghĩa nếu bạn sử dụng CDN, nó sẽ tiết kiệm đáng kể tiền băng thông), các plugin phần nhiều lại miễn phí (vì kỹ thuật lazy load về bản chất không khó để thực hiện) cho nên tôi khuyến khích các bạn sử dụng. Thực tế đây là cách đơn giản, rẻ tiền và hiệu quả nhất để cải thiện tốc độ website.

Có một số thông tin nói rằng cách làm này có thể ảnh hưởng tiêu cực đến SEO, cụ thể hơn, máy tìm kiếm có thể không index (lập chỉ mục) cho các ảnh được lazy load. Tuy nhiên đây đã là câu chuyện của quá khứ, Yoast nói rằng Google lập chỉ mục các ảnh lazy load hoàn toàn bình thường (bản thân Google cũng khuyến khích kỹ thuật này, thể hiện qua chuyện họ có nhiều tài liệu chuyên sâu về lazy load ảnh và video), và bạn không bị ảnh hưởng gì đến SEO khi triển khai lazy load, ngược lại nó còn tốt hơn cho SEO, vì tốc độ trang được cải thiện, đồng nghĩa với điểm số SEO tốt hơn.

Có vẻ mọi chuyện quá tốt nhỉ? Lazy load không có nhược điểm gì sao?

Thực tế là có, hai vấn đề có thể xảy đến là:

  1. Quá trình tải chậm bị “Lazy quá mức” – nói cách khác nhiều khi người dùng cuộn chuột qua rồi mà ảnh vẫn chưa hiện/hoặc hiện ra rất chậm – đây chắc chắn là phiền phức nghiêm trọng, và bạn nên kiểm tra thật cẩn thận trước khi dùng, đặc biệt là những trang có phần lớn người duyệt web trên thiết bị di động & hosting không đủ gần người dùng, vì mạng di động không có tốc độ cao, không ổn định, độ trễ lớn và phần cứng yếu hơn. Vấn đề bị lazy quá mức còn có thể có nguyên nhân từ công cụ sử dụng, nên bạn hãy thử nhiều plugin khác nhau để tìm kiếm được cái thích hợp nhất với website của mình. Nếu bạn thấy lazy load trên di động thực sự là vấn đề, hãy tắt chức năng này trên di động, trong khi vẫn bật nó khi người dùng sử dụng máy tính. Plugin WP-Rocket có các đoạn mã tắt/bật này cho bạn;
  2. Trải nghiệm người dùng có thể bị ảnh hưởng phần nào, vì ảnh đột ngột xuất hiện. Hiện đã có một số mẹo để hạn chế sự khó chịu đó, chẳng hạn như trang Medium đưa thuộc tính blur vào quá trình tải ảnh, tạo cảm giác dễ chịu, do ảnh xuất hiện từ từ, không bị giật cục. Bạn có thể tham khảo thêm bài viết khá hay về cách trang Medium cải tiến kỹ thuật lazy load đã được dịch sang tiếng Việt: https://viblo.asia/p/medium-da-toi-uu-toc-do-load-hinh-anh-nhu-the-nao-1VgZv9XRKAw. Về thuật ngữ chuyên môn, kỹ thuật vừa nói sử dụng LQIP (Low Quality Image Placeholder / Ảnh giữ chỗ chất lượng thấp). Hiện tôi vẫn chưa biết bất kỳ plugin nào cho phép triển khai kỹ thuật này trên local host (thông qua CDN ảnh thì có khả năng có vì CDN ảnh sử dụng dịch vụ của bên thứ ba). Hiện giờ bạn vẫn phải triển khai thủ công nếu muốn áp dụng LQIP, thông qua các thư viện lazy load có chất lượng cao như lazysizes;
  3. Cập nhật: hiện LiteSpeed cache có tính năng LQIP rất mượt mà;

Có vài plugin bạn có thể dùng cho nhiệm vụ lazy load và bản thân một số plugin cache cũng tích hợp sẵn luôn. Hiện tại thì tôi đã áp dụng Lazy Load cho trang Kiến càng (từ đầu năm 2019), sử dụng plugin a3 Lazy Load, thấy rất tốt (giờ tôi đã chuyển sang plugin Flying Images). Ưu điểm của plugin a3 là tính tùy biến rất cao. WP-Rocket cũng có plugin tương tự được đánh giá cao.

Điều quan trọng khi dùng plugin cho mục đích tải chậm ảnh là hãy test thật kỹ trên website của bạn. Khuyến cáo bạn có thể không nên sử dụng Lazy Load trên trang bán sản phẩm, bạn cần hiện ngay lập tức ảnh sản phẩm cho người dùng thấy.

Mắt thấy tai nghe: Thử xem tính năng Lazy Load hoạt động thế nào trong bài viết có 50 ảnh sau: https://kiencang.net/check-tinh-nang-lazy-load/

Để đảm bảo ảnh load mịn, tôi khuyên các bạn nên kết hợp tính năng Lazy load với dịch vụ CDN (cặp đôi hoàn hảo). Nhờ CDN, ảnh sẽ load rất nhanh khi người dùng cuộn chuột đến do máy chủ lưu trữ ảnh ở gần người dùng, tránh tình trạng ảnh load trễ (độ trễ sẽ tăng lên khi host ở xa người dùng).

P/S: theo Patrick Sexton chủ trang web về tối ưu hóa Varvy thì Lazy load mặc dù rất tốt vẫn chưa phải là kỹ thuật tối ưu, lý do thì cũng như phần trên có nói, nó tạo cảm giác giật cục, và có thể thành vấn đề trên di động. Vậy có cách nào khác hay hơn không?

Câu trả lời là CÓ. Đó là việc áp dụng trì hoãn tải ảnh. Nó giống và khác nhau thế nào?

Điểm giống là cả hai đều khiến tốc độ website tăng lên đáng kể nhờ việc không tải ngay lập tức ảnh nằm ngoài khung nhìn của người dùng. Nhưng cái hay hơn của trì hoãn tải ảnh là nó chỉ trì hoãn tải lúc ban đầu, sau khi nội dung thuộc màn hình đầu tiên tải xong. Sau giai đoạn này nó âm thầm tải ảnh, nghĩa là nó không để trống khoảng thời gian trong khi người dùng đọc thông tin phần đầu, ngược lại lazy load là “nước đến chân mới nhảy” – nói cách khác chỉ khi người dùng cuộn chuột đến phần có ảnh thì nó mới tải. Điều đó gây ra kết quả là lazy load có khả năng gây giật cục rất cao. Ở phía đối lập, trì hoãn tải ảnh tạo ra độ mượt rất tốt, gần như không có gì thay đổi so với chế độ lướt web thông thường, vì nó thường đủ thời gian để tải các ảnh trì hoãn trước đó thuộc phần dưới của màn hình đầu tiên.

Nhưng cũng có vấn đề mà tôi cảm thấy với trì hoãn tải ảnh, là việc nó bổ sung thêm một ảnh giả bên cạnh ảnh thật, ảnh giả này rất nhẹ và được dùng để đánh lừa trình duyệt, sau khi trang tải xong (vốn rất nhẹ vì chỉ phải tải ảnh giả) thì một đoạn mã JS sẽ tráo ảnh giả này bằng ảnh thật. Liệu điều này có làm ảnh hưởng đến SEO hay không? Tôi e là có, nhưng vẫn chưa tìm hiểu sâu để đi đến kết luận cuối cùng. Hiện tại thì tôi chỉ thấy các plugin WordPress áp dụng kỹ thuật lazy load.

Kiến càng đang sử dụng Lazy load như thế nào: Hiện tôi chỉ sử dụng lazy load trên các trang có nhiều ảnh, còn các trang có ít ảnh thì không dùng. Nhiều ở đây với tôi là từ 2 cái trở lên. Tôi cũng không dùng lazy load trên các trang thương mại điện tử, vốn là những trang mà người dùng cần đáp ứng nhu cầu xem ảnh càng nhanh càng tốt. Hiện có 2 plugin mà tôi thấy thích, một cái của WP-Rocket, một cái của a3 lazy load, cả hai đều có khả năng tùy biến phong phú. Lazy load trên trang bạn đang xem là của WP-Rocket.

Cập nhật quan trọng: Gần đây tôi mới biết một plugin Lazy Load ảnh rất hay, nó có tên Flying Images, giúp giải quyết rất tốt vấn đề “giật cục” của Lazy Load ảnh. Đặc biệt hiệu quả nếu người dùng của bạn chủ yếu sử dụng trình duyệt Chrome vì nó sử dụng thuộc tính lazy load cấp độ trình duyệt (native lazy loading) cho kết quả rất tuyệt vời. Với các trình duyệt khác không hỗ trợ native lazy loading nó vẫn sử dụng JS nhưng có một cải tiến vô cùng quan trọng đó là tải trước ảnh khi nó kịp đến khung nhìn, và gần như loại bỏ hoàn toàn hiện tượng “giật cục, đột ngột” (trừ khi đường truyền quá chậm). Phần lớn website tôi quản lý đã chuyển sang Flying Images. Bạn có thể tìm hiểu cách cài đặt nhanh cho plugin Flying Images ở đây.


11. Tối ưu hóa phân phối CSS – cần đến đâu tải đến đó #

  • Ưu điểm: đem lại cải thiện tốc độ đáng kể;
  • Nhược điểm: đòi hỏi kỹ năng nhất định mới triển khai tốt được;
  • Lựa chọn nhanh: dùng tính năng sẵn có trên plugin LiteSpeed cache;

Lưu ý: phần này ngắn nhưng rất quan trọng. Có hai lý do, (1) Tối ưu phân phối CSS làm tốc độ trang của bạn tăng lên rất nhiều, ít nhất là chỉ số First Contentful Paint. (2) Triển khai biện pháp này hoàn toàn miễn phí, mà cũng không quá khó để thực hiện.

Các trang WordPress vốn dĩ có rất nhiều CSS, không chỉ do theme bạn đang dùng, mà còn có rất nhiều CSS của plugin. Vấn đề ở đây là nếu bạn không tối ưu hóa phân phối CSS, thì các file này cần phải tải hết toàn bộ và phân tích xong thì trang web mới hiển thị cho người dùng được, trong khi có một thực tế rõ ràng là nhiều file trong số đó không bắt buộc phải tải ngay và luôn. Hiện tượng này được đặt tên là CSS chặn hiển thị.

Và để tăng tốc trong trường hợp này, người ta sẽ ưu tiên các CSS quan trọng nhất (critical CSS) dành cho việc hiển thị nội dung, đặc biệt là ở màn hình đầu tiên (above the fold), trong khi các CSS khác được trì hoãn để tải sau. Một số plugin cache được tích hợp tính năng tối ưu phân phối CSS, chẳng hạn như LiteSpeed cache, WP-Rocket. Khi bật tính năng này, plugin sẽ tạo ra tuyến hiển thị quan trọng – tức là những CSS đóng vai trò chủ chốt cho phần giao diện được xem sớm. Khi tối ưu hóa phân phối CSS thông qua plugin bạn cần kiểm tra kỹ lại, để đảm bảo nó không ảnh hưởng đến giao diện, bởi đôi khi (dù hiếm) plugin không nhận diện được những CSS chính, làm bố cục bị ảnh hưởng.

Kiến càng đang tối ưu CSS như thế nào: Hiện tại tôi mới chỉ tối ưu hóa CSS qua việc nén nó, còn gộp CSS thì vì có HTTP/2 nên cũng không quá quan trọng (tuy nhiên có lời khuyên rằng bạn nên thử để xem cách nào hiệu quả hơn, tức gộp tốt hơn, hay không gộp tốt hơn, khi có thời gian tôi sẽ viết bài về cách kiểm tra sau). Còn tối ưu hóa cho CSS cho nội dung ở trong màn hình đầu tiên thì hiện LiteSpeed cache đang làm điều này rất tốt mà nó lại miễn phí, bạn nên dùng thử.

Autoptimize mới bổ sung tính năng này bằng plugin Autoptimize criticalcss.com power-up, có cả khả năng tối ưu CSS trên máy bàn lẫn di động cho màn hình đầu tiên, tuy nhiên cái này là có phí, với giá 7 bảng/tháng (một tháng dùng CDN trên trang web 50 ngàn view cũng chỉ tốn của tôi khoảng 2$ là nhiều) – không rẻ tí nào, sắp tới tôi sẽ dùng thử, vì họ cho dùng thử một tháng.

P/S: Tôi hơi ngố, hóa ra là Autoptimize có tính năng tích hợp critical CSS miễn phí, tôi đã triển khai và thấy OK. Bạn đọc bài viết về cách dùng plugin Autoptimize để biết cách làm.


12. Trì hoãn tải JavaScript – vẫn là một dạng lười #

  • Ưu điểm: cải thiện tốc độ đáng kể, nhiều plugin miễn phí;
  • Nhược điểm: đòi hỏi kỹ năng nhất định;
  • Lựa chọn nhanh: dùng tính năng sẵn có trên plugin cache;

Cũng giống như trường hợp CSS, các website nói chung và WordPress nói riêng có rất nhiều đoạn mã JavaScript không cần phải tải ngay lập tức mới hiển thị được trang. Giả dụ trang của bạn có 20 file JavaScript, thì trong số đó có khi chỉ cần 2 file là đủ để hiển thị trang trong màn hình đầu tiên, còn những cái khác thì không cần thiết (còn được gọi là JavaScript chặn hiển thị).

Khi ấy việc ưu tiên tải cho 2 file JavaScript quan trọng, còn trì hoãn (defer) 18 file còn lại sẽ giúp trang của bạn có tốc độ tải lần đầu (initial page load) rất cao. Hiện có rất nhiều plugin giúp bạn trì hoãn tải JavaScript, nó cũng thường được tích hợp sẵn trong các plugin chuyên tạo cache. Khi kích hoạt tính năng này bạn cũng nên kiểm tra xem nó có gây ảnh hưởng đến tính năng không (nhất là khi bạn có ý định defer hoặc async file jQuery).

Lưu ý rằng với cả lazy load ảnh, tối ưu phân phối CSS, và trì hoãn tải JavaScript thì tổng thời giản tải trang của bạn không hề giảm xuống, cái nhanh hơn ở đây là khoảng thời gian để người dùng thấy nội dung thuộc màn hình đầu tiên kể từ khi họ click, truy cập vào website. Nếu không áp dụng các biện pháp trì hoãn tải, trang của bạn buộc phải tải toàn bộ tài nguyên mới được hiển thị, trong khi đó với trì hoãn tải bạn có thể chỉ cần tải 10% – 20% dung lượng của toàn trang để cho người dùng xem trước, sau đó trong khi họ đang xem nội dung, trình duyệt âm thầm tải phần còn lại (với CSS và JS), hoặc đợi khi người dùng cần đến mới tải.

Để dễ hiểu hơn, nó cũng giống như bạn xem video trực tuyến trên YouTube. YouTube không tải xong toàn bộ video rồi mới cho bạn xem, ngược lại họ cho bạn xem ngay lập tức khi chỉ cần tải được khoảng 10 giây video. Trong khi bạn xem, họ tiếp tục tải phần còn lại (vừa nhanh, vừa tiết kiệm dữ liệu, vì khả năng cao là bạn không xem hết video, cũng tương tự trên các bài dài bạn sẽ không đọc toàn bộ bài viết, tôi sẽ khá khâm phục mức độ kiên nhẫn của bạn nếu bạn đọc từ đầu đến dòng này!).

Kiến càng đang làm điều này thế nào: Có nhiều plugin cache hoặc tối ưu hóa khác (như plugin Autoptimize) tích hợp sẵn tính năng này cho bạn. Chúng ta chỉ việc bật lên là xong. Ngoài ra thì một số theme tối ưu cũng chủ động làm điều này nên bạn không cần phải làm gì (tuy nhiên bạn cần kiểm tra lại xem có đúng thế không). Tôi đang dùng WP-Rocket và sử dụng tính năng trì hoãn JS của nó trên một số trang. Các trang khác tôi dùng Autoptimize. Varvy bàn về kỹ thuật trì hoãn tải JavaScript hơi khác và rất thú vị ở đây: https://kiencang.net/tri-hoan-tai-javascript/

Lưu ý nhỏ: nếu bạn đang dùng plugin Autoptimize thì bạn có thể dùng thêm plugin Async JavaScript của cùng tác giả để có thể tùy chỉnh sâu hơn nữa các biện pháp trì hoãn (defer), tải không đồng bộ (anysc) JS.

Cập nhật: hiện các plugin cache tốt khác như LiteSpeed, Swift Performance, FlyingPress cũng đang làm rất tốt điều này.


13. Rút gọn, gộp các file JavaScript, CSS, và nén HTML – cạo râu mọc lưa thưa #

  • Ưu điểm: nhiều plugin hỗ trợ, cả miễn phí lẫn có phí;
  • Nhược điểm: đòi hỏi kỹ năng;
  • Lựa chọn nhanh: dùng tính năng sẵn có trên plugin cache hoặc dùng plugin Autoptimize;

  • Gộp file (combine): nghĩa là kết hợp nhiều file lại với nhau thành một, chẳng hạn nhiều file CSS thành một file CSS. Nhiều file JavaScript thành một file JavaScript;
  • Rút gọn: nghĩa là loại bỏ các ký tự thừa, chú thích trong CSS và JS để tối thiểu hóa dung lượng, cách này lúc nào bạn cũng nên làm.

Điều đó đồng thời giảm số lượng yêu cầu về máy chủ, lẫn dung lượng tải về máy khách, qua đấy giúp tăng tốc. Tuy nhiên có khả năng gây ảnh hưởng bố cục, chức năng nếu bạn gộp nén quá mức, vì vậy hãy kiểm tra lại website sau khi sử dụng tính năng trên với từng mức độ chuyên sâu khác nhau.

Một trong các plugin mạnh nhất để thực hiện nhiệm vụ gộp, nén là Autoptimize – plugin miễn phí, ngoài ra nó còn có khả năng rút gọn HTML.

P/S: Gộp file có thể không cần thiết nếu host của bạn hỗ trợ http/2, vì công nghệ mới này cho phép tải song song nhiều file cùng lúc, ngoài ra gộp file có thể không tốt cho việc tối ưu hóa phân phối CSS hoặc trì hoãn tải JavaScript một cách hiệu quả nhất có thể. Bạn dùng công cụ của KeyCDN để kiểm tra xem http/2 có trên website của bạn hay không: https://tools.keycdn.com/http2-test.

Kiến càng hiện sử dụng tính năng gộp, nén JS, CSS như thế nào: Một số plugin tạo cache tĩnh có sẵn tính năng này thì tôi sử dụng luôn của họ, ví dụ như WP-Rocket, LiteSpeed cache hoặc Swift và với Rocket tôi chỉ nén chứ không gộp theo lời khuyên của chính chủ plugin vì host có hỗ trợ http/2. Với các trang khác mà không có plugin tích hợp sẵn thì tôi dùng Autoptimizer để bổ sung, với việc tick chọn hầu hết các tính năng của nó. Việc bạn chọn theme ưu tiên cho tốc độ sẽ giúp bạn không phải lo lắng nhiều chuyện gộp file, hay JS và CSS chặn hiển thị làm tăng thời gian render trang, vì các theme theo hướng này sẽ chủ động làm điều đó (tuy nhiên bạn nên kiểm tra lại, vì các plugin cài thêm có thể bổ sung vô số JS và CSS không được trì hoãn). Còn thao tác nén thì rất an toàn.


14. Loại bỏ việc sử dụng Google Fonts – đôi khi trang sức là gánh nặng #

  • Ưu điểm: cải thiện tốc độ đáng kể;
  • Nhược điểm: có thể bạn phải hy sinh font chữ bạn rất thích;
  • Lựa chọn nhanh: sử dụng tính năng sẵn có trong plugin cache;

Kho thư viện font dùng chung của Google giúp các nhà thiết kế giao diện có nhiều chọn lựa hơn trong việc tạo ra các font đẹp mắt cho web. Nhưng tất nhiên nó làm bạn tốn thời gian hơn do phải yêu cầu tải font về từ máy chủ của Google, và nó có thể làm phát sinh hiện tượng FOIT.

Về lý thuyết là vậy nhưng cũng có thể việc này chẳng tốn kém thời gian gì lắm, vì máy chủ của Google đã rất mạnh rồi và thứ nữa, các font này vốn được rất nhiều website sử dụng, cho nên trong nhiều trường hợp có thể đã được cache sẵn tại thiết bị của người dùng, nói cách khác là hầu như không làm bạn tốn thêm thời gian.

Tuy nhiên nó vẫn có thể trở thành vấn đề nếu:

  • Font trên web bạn dùng là font hiếm được dùng, do vậy khả năng được cache sẵn trên trình duyệt là rất thấp, hay nói cách khác, người dùng sẽ phải tốn thời gian tải font về.
  • Những lúc đứt cáp thì bất kể dung lượng hay loại font, các liên kết hướng đến các máy chủ nằm ngoài Việt Nam đều có thể là gánh nặng về độ trễ.

Lúc này có 2 biện pháp:

  • Tự host font lên hosting của bạn, và sau đó sử dụng CDN để truyền tải nhanh hơn. Khi ấy ngay cả khi đứt cáp hoặc/và font hiếm, font của bạn sẽ vẫn được tải từ máy chủ gần nhất với người dùng, và nếu PoP đó ở Việt Nam, nó sẽ hạn chế được tối đa độ trễ. Plugin có tên Self-Hosted Google Fonts sẽ giúp bạn làm việc này, nó tải toàn bộ font của Google mà web bạn dùng rồi đẩy nó lên host của bạn, web sẽ vẫn giữ được giao diện chữ như cũ. Nhược điểm của phương pháp này là nó sẽ làm bạn tốn thêm tiền lưu lượng (do dùng CDN), tuy rằng rất nhỏ, vì đa số font đều nhẹ thôi. Điểm yếu nữa là với biện pháp này nếu tình trạng cáp internet ổn định (phần lớn thời gian trong năm đều vậy) và web bạn dùng font Google phổ biến (nhiều web dùng) thì biện pháp tự host font về mặt tổng thể còn làm web chậm đi đôi chút, do không tận dụng được ưu thế cache sẵn trên trình duyệt.
  • Hoàn toàn loại bỏ font Google, nếu kiểu font chữ không thành vấn đề với bạn, bạn nên dùng biện pháp này, nó lúc nào cũng làm tốc độ website cao hơn, bất kể có đứt cáp hay không. Khi sử dụng cách loại bỏ font, web sẽ sử dụng font có sẵn trên thiết bị người dùng (còn gọi là font an toàn). Bạn có thể sử dụng plugin có tên Disable Google Fonts cho mục đích trên. Nhược điểm của nó là ở một số giao diện nhất định, plugin này không loại bỏ được font Google. Bạn nên kiểm tra kỹ để chắc chắn plugin này có tác dụng với theme của bạn. P/S: nhiều giao diện cho phép bạn bật tắt các font tùy chỉnh (gồm cả font host ở bên thứ ba, lẫn font tự host).

Cách kiểm tra xem web có còn dùng Google Font hay không sau khi đã bật plugin:

  1. Sau khi cài plugin để can thiệp font, nếu bạn đạng dùng plugin tạo cache, hãy xóa cache của web (LiteSpeed cache, WP Super Cache, W3 Total Cache, WP Fastest Cache,…), bao gồm cả plugin như Autoptimize;
  2. Nếu bạn đang dùng CDN thì cũng nên làm mới (Purge) cache;
  3. Truy cập vào website, nhấn phím tắt Ctrl + U để xem mã nguồn của trang;
  4. Nhấn Ctrl + F để thực hiên thao tác tìm kiếm;
  5. Copy –  Paste nội dung fonts.googleapis.com vào ô tìm kiếm, nếu bạn không thấy tìm ra bất kỳ kết quả nào nghĩa là plugin đã kích hoạt thành công;

Ví dụ về website sử dụng Google font:

website sử dụng Google Fonts

Ví dụ về website không sử dụng Google Fonts sau khi kích hoạt plugin:

không dùng Google Fonts

Tóm tắt các trường hợp dùng và không nên dùng từng plugin:

  Tự host font lên hosting của bạn
Hosting tại nước ngoài & không dùng CDN Không nên dùng
Cáp internet bình thường & font Google phổ thông Không nên dùng
Cáp internet bình thường & font Google dạng hiếm & không dùng CDN Không nên dùng
Cáp internet bình thường & font Google dạng hiếm & có dùng CDN Có thể Nên dùng
Hosting tại nước ngoài & có dùng CDN có PoP ở Việt Nam & đứt cáp Nên dùng
Hosting tại Việt Nam Có thể Nên dùng

  Loại bỏ hoàn toàn font Google
Font quan trọng với giao diện Không nên dùng
Font không quan trọng với gian diện Nên dùng

Nếu bạn vẫn cảm thấy rối thì đây là kết luận chung, đúng trong phần lớn trường hợp:

  • Nếu loại bỏ hoàn toàn được font Google thì nên loại bỏ;
  • Tự host font Google chỉ dùng khi cáp internet bị đứt và bạn có CDN;

Đọc thêm về cách sử dụng font web sao cho tối ưu về mặt tốc độ.

Kiến càng đang sử dụng font như thế nào: Tôi ưu tiên sử dụng các font có mặc định trên máy người dùng (font web an toàn) để web không cần tải font từ bất cứ đâu (host hoặc của bên thứ ba), như trang bạn đang xem có font-family như sau: Arial, Helvetica, sans-serif; đều là những font phổ thông có sẵn trên máy.

sử dụng font phổ thông

Tuy nhiên với những trang yêu cầu thẩm mỹ bạn có thể chọn các font nhẹ và lưu tại host của bạn. Các font phổ biến có nhiều người dùng, tốc độ có thể được cải thiện nếu bạn sử dụng Google font.


15. Sử dụng các thư viện JavaScript dùng chung của Google – không nên xây công viên trong nhà #

  • Ưu điểm: cải thiện tốc độ đáng kể;
  • Nhược điểm: hiệu quả tăng tốc sẽ không còn khi sắp tới Chrome thay đổi cách lưu cache;

P/S: hiện biện pháp này sắp trở thành vô dụng, thậm chí là tác dụng ngược vì Google Chrome sẽ sửa đổi cách cache tài nguyên của bên thứ ba. Bạn sẽ vẫn phải tải lại tài nguyên tập trung của bên thứ ba dù trước đó nó đã được cache trong trình duyệt người dùng khi họ truy cập các website khác. Lý do là người dùng ngày càng có yêu cầu cao về tính riêng tư.

Các theme WordPress hay dùng nhiều thư viện có dung lượng khá khủng, điển hình như jQuery, có dung lượng tới 90 – 100KB, và thường chúng được tự host (tức là file được tải từ hosting của bạn).

Điểm thú vị của những thư viện này là có rất nhiều website dùng (theo thống kê của W3techs, có hơn 73% các website lớn dùng jQuery, trong đó phiên bản 1 chiếm hơn 85%). Cho nên khả năng nó đã được cache sẵn trước đó trong trình duyệt của người dùng là rất cao (lưu trong bộ nhớ đệm của trình duyệt), nói cách khác, nếu bạn thay thế việc tự host các thư viện phổ biến này bằng các thư viện lưu trên Google, tốc độ có khả năng cải thiện tốt hơn nữa (đó là chưa kể máy chủ của Google cũng rất mạnh và phân phối khắp toàn cầu, như một dạng thư viện CDN dùng chung). Google hiện lưu rất nhiều thư viện kiểu này, bạn có thể xem ở đây: https://developers.google.com/speed/libraries/

Còn để thay thế việc tự host bằng thư viện trên Google, bạn cần bổ sung một đoạn mã vào file function.php của theme, chi tiết đoạn mã tôi để ngay bên dưới:

/**
* Making jQuery Google API
*
*
*/
function modify_jquery() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', false, '1.12.4');
wp_enqueue_script('jquery');
}
}
add_action('init', 'modify_jquery');

P/S: nhược điểm của đoạn mã trên là nó chưa đưa ra được chỉ thị defer/async jQuery để tối ưu tốc độ hơn nữa. Tôi tìm trên mạng thì thấy có cách khắc phục, nhưng do chưa thử nghiệm thực tế nên tôi không thể nói gì thêm.

Bạn chú ý đến phiên bản của jQuery đang dùng trên WordPress, ở trong đoạn mã trên là jQuery phiên bản 1.12.4

Sau khi chỉnh sửa bạn kiểm tra lại bằng cách xem mã nguồn của trang để biết jQuery lưu tại Google có được tích hợp vào website không. Ngoài ra để cho chắc chắn cũng nên kiểm tra xem các tính năng trên website có bình thường không.

Lưu ý quan trọng: Dù function.php rất hay được dùng làm nơi chứa các mã tùy biến, nhưng nó có nhiều nhược điểm như cập nhật theme sẽ phải cập nhật lại mã hay một lỗi nhỏ sẽ làm cả website bị lỗi. Gần đây tôi biết cách hay hơn để thêm mã tùy chỉnh vào WordPress, bạn nên tham khảo nếu áp dụng phương pháp tăng tốc này.

Sử dụng thư viện của bên thứ ba còn có một lợi ích rõ ràng nữa: máy chủ của bạn được giảm tải. Ngoài Google còn có nhiều trang khác phát triển các thư viện dùng chung phổ biến, như jsDelivr.

Nghe có vẻ tốt quá, liệu thư viện của bên thứ ba có nhược điểm nào không? Vâng, nó cũng có nhược điểm:

  • Bạn không làm chủ được thời gian cache phía trình duyệt. Bạn có thể tham khảo bài viết về HTTP caching để hiểu sâu hơn vấn đề này, cũng như cách kiểm tra để biết được thư viện được cache trong thời gian bao lâu. Nhưng bạn đừng lo, nhiều thư viện để thời gian cache đủ lâu cho chúng ta, và có thể lên đến 1 năm.
  • Nó có thể trở thành điểm lỗi duy nhất gây gián đoạn website. Điều này xảy ra khi thư viện cache không truy cập được và nó ảnh hưởng đến chức năng của trang. Nhưng một lần nữa bạn nên an tâm, vì hầu hết các website cung ứng dịch vụ thư viện dùng chung đều có hệ thống máy chủ rất mạnh và thời giam dowtime vô cùng nhỏ.

Kiến càng đang sử dụng jQuery như thế nào: Tôi đã áp dụng cách trên cho hầu hết các trang, bao gồm cả trang bạn đang đọc đây.

thư viên jQuery của Google

Lưu ý là trong trường hợp đứt cáp quang internet ngoài biển, bạn không nên sử dụng jQuery Google mà nên sử dụng CDN có PoP ở Việt Nam và tự host lấy jQuery sẽ cho tốc độ tốt hơn. Tiến tới tôi sẽ tìm hiểu cách loại bỏ hoàn toàn jQuery trên những trang thực sự không cần thiết (dù điều này thực sự khó vì rất nhiều plugin đang sử dụng nó, và có lẽ chỉ hợp với những trang đơn giản).


16. Chọn phần mềm máy chủ web (web server) tối ưu – bên cạnh xe phổ thông, luôn có xe phân khối lớn #

  • Ưu điểm: đem lại khả năng cải thiện tốc độ rất tốt;
  • Nhược điểm: tốn kém chi phí hoặc phải am hiểu về kỹ thuật;
  • Lựa chọn nhanh: LiteSpeed webserver;

Hiện có 3 phần mềm máy chủ web chủ yếu là Apache (free), Nginx (free) và Litespeed (free & có phí). Trong đó Apache hiện chiếm lĩnh thị phần lớn nhất, một phần nhờ ra đời sớm, tài liệu hướng dẫn phong phú và có nhiều module hỗ trợ đa dạng tính năng. Tuy nhiên nếu xét về tốc độ xử lý PHP thì Nginx và Litespeed có tốc độ tốt hơn hẳn.

Trang Varvy chuyên về tối ưu hóa tốc độ nói rằng, chỉ cần bạn chuyển từ Apache sang Nginx là rất nhiều vấn đề về tốc độ được giải quyết rồi. Bạn có thể đọc bài viết này để biết thêm chi tiết: https://kiencang.net/giam-thoi-gian-phan-hoi-cua-may-chu/.

Có một vấn đề về lựa chọn phần mềm máy chủ nhanh như Nginx là đôi khi công ty host mà bạn thích, quen thuộc lại chỉ có phần mềm máy chủ Apache hoặc chỉ ưu tiên cho nó. Ví dụ như Dreamhost là công ty host tôi rất thích (chịu tải tốt và uptime cao) lại ưu tiên Apache hơn, dù họ có cho chọn Nginx (kèm thông báo rằng có khả năng bạn sẽ phải tự tùy chỉnh thêm, điều vốn chẳng dễ dàng gì với người dùng phổ thông hay chỉ biết sơ qua về máy chủ).

Nói tóm lại ở phần này là dù Apache là lựa chọn an toàn cho hầu hết trang web, nhưng nếu trang của bạn có lưu lượng lớn hoặc cần tốc độ cao nhất có thể, bạn nên chọn các công ty host có máy chủ là Nginx hoặc các dạng tương tự nhanh hơn như Litespeed.

Kiến càng áp dụng điều này như thế nào: Trên hầy hết website tôi quản trị, tôi đã chuyển qua sử dụng LiteSpeed webserver.

Về hiệu năng LiteSpeed được đánh giá cao nhất, hơn cả Ngnix. LiteSpeed có phiên bản miễn phí là OpenLiteSpeed cho những ai chưa có điều kiện mua bản trả phí. Ngay cả bản miễn phí của nó cũng hơn Apache nhiều, và ngang ngửa hoặc hơn Ngnix. Cách dễ nhất để sử dụng OpenLiteSpeed là cài CyberPanel trên DigitalOcean (giao diện người dùng thân thiện), còn trên Vultr bạn vẫn phải dùng dòng lệnh để cài (màn hình đen như kiểu cmd trên Windows, bạn muốn làm gì thì phải gõ lệnh xuống).

Nếu bạn biết nhiều hơn về dòng lệnh, thế giới hosting của bạn sẽ mở rộng, tự do ra nhiều đấy. Bạn sẽ tự cài được nhiều gói host khác mà ít nhiều phải biết dòng lệnh mới làm được. Đây là những Script được tùy chỉnh sẵn để có tốc độ cao, mà nó lại miễn phí nữa. Thí dụ như: Webinoly, Centmin Mod, EasyEngine, tất cả các Script này đều dùng trên nền Nginx.

P/S: Những Control Panel như GridPane hay SpinupWP về bản chất cũng là các Script như trên, tuy nhiên nó có thêm giao diện đồ họa để các thao tác dễ sử dụng hơn rất nhiều.

Cập nhật tiếp (10/3/2021): Hiện trang Kiến càng đã sử dụng LiteSpeed Enterprise trên hosting của ChemiCloud.


17. Trì hoãn tải / Lazy load video – lười vẫn hoàn lười #

  • Ưu điểm: đem lại khả năng cải thiện tốc độ rất tốt trên trang nhiều video;
  • Nhược điểm: chủ yếu hiệu quả trên máy bàn, trên di động ít tác dụng hoặc phải đánh đổi bằng việc người dùng phải click 2 lần để bật video!
  • Lựa chọn nhanh: sử dụng tính năng lazy load iframe sẵn có trong plugin cache;

Nếu bạn nhúng video từ Youtube (hoặc Vimeo, vân vân) vào trang của bạn, website sẽ tải hàng tá tài nguyên về trước khi nội dung thuộc màn hình đầu tiên được tải, và điều này làm chậm tốc độ tải trang.

Trì hoãn tải video thực hiện nhiệm vụ ngăn không cho các tài nguyên nặng nề tải về cho đến khi trang được tải xong, cách thức thực hiện rất đơn giản, bạn chỉ cần sửa một chút phần thông tin src của iframe, rồi thêm một đoạn mã nhỏ JavaScript trước thẻ đóng body.

Cách trên áp dụng theo cách của Varvy, nhưng nó có thể không tiện nếu bạn có rất nhiều video hoặc bạn không biết một chút về code. Tôi mới viết một bài khác về chủ đề này có lẽ sẽ thuận lợi hơn một chút: https://kiencang.net/tang-toc-video-youtube-wordpress/

Nói chung với WordPress, tôi nghiêng về cách sử dụng plugin, vì nó tiện, không tốn kém chi phí cũng như không đòi hỏi phải tìm hiểu quá sâu để sử dụng. Một số plugin bạn có thể tham khảo:

Bạn cần thận trọng khi sử dụng lazy load cho video, nếu không làm khéo nó có thể ảnh hưởng tiêu cực đến SEO (ý là bạn nên đọc hướng dẫn sử dụng plugin cẩn thận).

Kiến càng đang trì hoãn tải video như thế nào: Tôi đang sử dụng cả hai cách, lazy load trong plugin cache có sẵn, và trì hoãn tải video theo theo cách thủ công trên một số trang trọng điểm. Trì hoãn tải video hay hơn Lazy load, tuy nhiên hiện không có plugin hỗ trợ cho cách làm này trong khi làm thủ công sẽ tốn rất nhiều công sức (đọc thêm bài viết ngay link trên).


18. Sử dụng DNS trung gian có tốc độ cao hơn – lúc nào cũng có con đường tắt bên cạnh đường chính #

  • Ưu điểm: tuy chỉ là cải thiện nhỏ nhưng có tính nền tảng, ngoài ra nó cũng rất dễ triển khai;
  • Nhược điểm: không có nhiều dịch vụ chất lượng cao miễn phí;
  • Lựa chọn nhanh: Cloudflare;

DNS là dịch vụ phân giải tên miền, kết nối tên miền với địa chỉ IP của máy chủ lưu trữ web. Thường thì chúng ta sử dụng DNS của công ty bán tên miền hoặc DNS của công ty hosting, tuy nhiên DNS của cả hai nói chung chỉ có tốc độ ở mức trung bình (cả tốc độ phân giải lẫn tốc độ cập nhật địa chỉ IP mới).

P/S: Tốc độ cập nhật địa chỉ IP mới rất quan trọng khi bạn chuyển host, một số dịch vụ DNS của nơi bán tên miền có thể mất từ 2 – 24h mới cập nhật xong toàn bộ, điều này sẽ ảnh hưởng xấu đến khả năng truy cập trong giai đoạn chuyển giao.

Hiện có một số dịch vụ miễn phí có tốc độ rất cao là giải pháp thay thế mà bạn nên tận dụng, vì nó không tốn kém, cũng như chẳng mất công sức thiết lập nhiều nhặn gì.

Ở thời điểm này tôi khuyến nghị các bạn sử dụng DNS trung gian của Cloudflare, khi bổ sung tên miền vào, bạn nên tắt đám mây màu vàng đi để chỉ dùng DNS, chứ không dùng CDN miễn phí của họ.

Cloudflare hiện là DNS có tốc độ hàng đầu thế giới, không giới hạn số lượng bản ghi, và có độ ổn định rất cao. Nó thậm chí được nhiều người đánh giá tốt hơn các dịch vụ DNS trả phí. Thường khi cập nhật IP, CloudFlare chỉ mất có vài phút để các bản ghi được lan tỏa ra các máy chủ trên toàn cầu.

Kiến càng từng sử dụng DNS như thế nào: Ban đầu tôi thường sử dụng DNS của công ty bán tên miền, chẳng hạn như Godaddy, tuy nhiên thi thoảng cũng gặp rắc rối vì DNS của Godaddy hay bị tấn công (có năm tôi bị 2 lần, dù thời gian downtime chỉ vài giờ). Sau đó tôi chuyển qua DNS của công ty bán hosting, điểm lợi là nếu máy chủ web có cập nhật IP mới thì DNS cũng sẽ được phản ánh luôn chứ không làm gián đoạn truy cập nữa. Tuy nhiên cuối cùng xét tổng thể nhiều yếu tố thì tôi quyết chuyển sang dùng Cloudflare với các ưu điểm nêu ở trên.

Ngoài chuyện sử dụng dịch vụ phân giải tên miền có tốc độ tốt hơn, bạn cũng nên hạn chế số lượng tra cứu DNS cần phải dùng, bạn có thể tham khảo bài viết này để biết cách thực hiện: https://kiencang.net/toi-thieu-thoi-gian-tra-cuu-dns/

Lo ngại: khoảng giữa năm 2019, CloudFlare bắt đầu bị tấn công, tuy nhiên khả năng phục hồi nhanh, và dù sao thì nhìn nhiều mặt nó vẫn tốt hơn nhiều DNS ở nơi khác cho nên tôi vẫn tiếp tục dùng.


  • Ưu điểm: cải thiện tốc độ đáng kể, nhất là cho màn hình đầu tiên;
  • Nhược điểm: phải hy sinh ít nhiều tính thẩm mỹ (nhưng cái này cũng tùy quan điểm);

Ảnh lớn đầu bài viết đem lại tính thẩm mỹ cho trang web, bản thân một số trang của tôi như Kiến càng cũng dùng ảnh lớn đầu bài. Tuy nhiên nếu được, việc không dùng ảnh lớn đầu bài sẽ giúp cải thiện tốc độ trang web về mặt nhận thức một cách đáng kể.

Lý do nằm ở chỗ, ảnh lớn đầu bài thường nằm trong màn hình đầu tiên, tức là nó sẽ yêu cầu tải trước (dù bạn có dùng lazy load hay trì hoãn tải ảnh thì bạn cũng phải tải ảnh nằm trong màn hình đầu tiên càng sớm càng tốt), trong khi dung lượng ảnh này thường không nhỏ (thường 50 – 100KB, không thành vấn đề trên máy bàn, nhưng sẽ ảnh hưởng đến tốc độ trên di động).

Nếu bạn vẫn muốn cân bằng tính thẩm mỹ và tốc độ tải trang thì thay vì để ảnh minh hoạ nằm ở màn hình đầu tiên, bạn nên ẩn nó xuống màn hình thứ hai, nội dung màn hình đầu tiên do vậy sẽ tải nhanh hơn vì không phải load lượng dữ liệu lớn nữa.

Ngoài việc tăng tốc độ duyệt bài post, page, việc loại bỏ featured image còn giúp tăng tốc độ duyệt thư mục, tag, hay bất cứ dạng danh sách bài viết nào lôi featured image ra làm ảnh đại diện.

Kiến càng đang làm điều này thế nào: Trang bạn đang xem vẫn dùng featured image trên các bài viết cần thiết, tuy nhiên với một số trang của khách hàng không quan trọng tính năng này, tôi đã bỏ nó đi và cho tốc độ tải trang nhanh hơn đáng kể. Thư mục của bạn có thể trông hơi đơn điệu nếu bỏ ảnh lớn đầu trang, nhưng điều này không nên quá lo lắng, vì phần lớn lưu lượng truy cập đều vào thẳng trang post hoặc page, nghĩa là bạn vẫn có ảnh minh họa trong bài viết là được, không nhất thiết ảnh đó phải là ảnh lớn đầu bài.

P/S: Nếu khéo chọn giao diện bạn vẫn có khả năng không cần sử dụng ảnh lớn đầu bài mà trông vẫn đẹp mắt, hãy nhìn cách mà trang WPJohnny làm, trang anh ấy trông vẫn rất bắt mắt:

không dùng ảnh lớn đầu bài

PS: trang Kiến càng cũng vừa được tôi tùy biến để trang thư mục không hiện ảnh nữa.


20. Một số kỹ thuật khác – không có giới hạn cuối cùng #

  • Ưu điểm: tuy chỉ là những cái nhỏ, nhưng nhiều cái nhỏ hợp lại có thể đem đến cải thiện lớn;
  • Nhược điểm: đòi hỏi bạn phải tìm hiểu sâu về web nói chung và WordPress nói riêng;

Đây có thể coi là các mẹo thì đúng hơn, vì nó khá là nhỏ và hơi tinh quái:

  • Tải trước các liên kết nội bộ: Tận dụng thời gian rảnh rỗi khi người dùng đang xem trang để tải các liên kết khác trên trang đó mà người dùng có thể click để xem tiếp (những liên kết nằm trong khung nhìn tình duyệt). Hiện chỉ có một plugin mà tôi biết hỗ trợ làm công việc này là Flying Pages (cùng tác giả phát triển plugin Flying Images). Ưu điểm của cách làm này là nó có thể tăng tốc độ lên rất cao nhưng nó cũng có nhược điểm không nhỏ là đòi hỏi hosting phải mạnh mẽ, vì nếu trang có nhiều liên kết, host sẽ phải hoạt động tăng lên nhiều so với không sử dụng tính năng tải trước. Nếu bạn dùng các hình thức tăng tốc phía máy chủ như Redis hoặc Nginx FastCGI cache, nơi mà cache được lưu trên RAM, việc sử dụng plugin này sẽ làm bạn tốn RAM máy chủ rất nhanh, như một trang tôi quản lý tăng từ 2 – 3 lần. Do vậy đây có thể là con dao 2 lưỡi nếu bạn dùng tùy tiện. Với cache trên disk như các plugin cache WP-Rocket hay Cache Enabler, vân vân thì plugin này tôi tin sẽ không ảnh hưởng nhiều như là đối với cache kiểu RAM. Khi nào có cơ hội kiểm tra thực tế tôi sẽ bổ sung sau…Tôi có viết bài giới thiệu về Flying Pages ở đây.
  • Vẫn nói về việc tải trước các liên kết nội bộ, giải pháp dung hòa hơn là bạn nên dùng tính năng tải ngay khi hover chuột, đây chính là tính năng Instant click có trên LiteSpeed hoặc plugin Instant.page;
  • Preload, Prefetch và Preconnect: Một tính năng tôi mới phát hiện thời gian gần đây, bản thân plugin Flying Pages nói ở trên áp dụng Prefetch. Với 2 cái còn lại tuy không cho tốc độ cải thiện nhiều nhưng lại rất dễ triển khai, chỉ một vài đoạn mã là xong, nhưng dù sao bạn cũng không nên kiểm tra lại, để đảm bảo các cải tiến thực sự đem lại kết quả.
  • Perfmatters (xem phần giới thiệu plugin Perfmatters ở đây) hoặc Gonzales (xem phần giới thiệu plugin Gonzales ở đây) hoặc Asset CleanUp: Tôi biết đến các plugin này khoảng 1 năm trước trong nhóm chia sẻ về WP trên Facebook. Nói chung nó thú vị vì đây là kiểu tăng tốc khá lạ: thông qua việc tắt bỏ các chức năng không cần thiết, đi kèm luôn với việc loại bỏ CSS và JS không dùng (dưới dạng file cụ thể). Đặc biệt là tắt các chức năng mà chỉ cần trên một số trang, trong khi toàn trang web lại không cần. Nói cách khác plugin này giúp bạn chỉ bật chức năng trên những trang cần thiết, qua đó tăng tốc cho những trang còn lại. 3 Plugin này không được biết đến nhiều có lẽ vì để sử dụng nó hiệu quả, người dùng phải tương đối có hiểu biết về chức năng của plugin, tôi tin rằng ai không biết sơ qua về CSS, JS thì không nên dùng.
  • Tối ưu hóa tốc độ khu vực bình luận trên WordPress: Ở những trang web sôi động, bình luận có thể trở thành vấn đề làm chậm tốc độ tải trang, khi ấy bạn cần tối ưu cho nó. Cách làm rất đơn giản, không phức tạp và đều có plugin hỗ trợ sẵn miễn phí cho bạn. Về cơ bản triết lý chung vẫn là làm giảm tải càng nhiều yêu cầu càng tốt, và phân chia, cũng như lazy load ảnh đại diện để nó không trở thành gánh nặng trong lượt tải đầu tiên. Bạn có thể xem chi tiết cách tăng tốc khu vực comments ở đây.
  • Sử dụng ảnh mã hóa base64: Tăng tốc web site qua việc mã hóa ảnh bằng base64 rồi đưa mã trực tiếp vào HTML, giúp cho trang không cần tải ảnh từ liên kết ngoài nữa. Chỉ khuyến khích dùng cho ảnh nhỏ dưới 3KB và không quan trọng, ví dụ như ảnh icon nút mạng xã hội.
  • Sử dụng phiên bản PHP tăng tốc: Một số hosting cho phép bạn chọn phiên bản PHP cho WordPress, thường thì phiên bản mới hơn sẽ giúp web của bạn chạy mượt hơn, nên bạn có thể chọn tính năng tự động nâng cấp lên phiên bản PHP mới nhất (nếu có). Ngoài ra, cùng một phiên bản PHP, họ có thể cung cấp cho bạn các biến thể có khả năng tăng tốc hơn nữa. Ví dụ dưới đây, tôi chọn phiên bản mới nhất 7.2 và kết hợp FastCGI. Nhược điểm là nó yêu cầu bạn có RAM khỏe hơn.7.2 Fast CGI
  • Làm sạch Database, loại bỏ các dữ liệu dư thừa để quá lâu không còn cần thiết. Chẳng hạn những phiên bản cũ của bài viết (chức năng revision của WordPresss), cái này có ích khi mà bạn sửa chữa không đúng thì bạn có thể phục hồi nhanh chóng lại bài, tuy nhiên theo thời gian nó sẽ đầy lên rất nhiều, và tất nhiên có nhiều phiên bản cũ bạn không bao giờ dùng đến. Tôi chỉ có 375 bài viết nhưng có đến hơn 5000 phiên bản lưu trữ! Mấy hôm trước vừa xoá hết rồi. Lưu ý luôn backup tài liệu trước khi dọn Database, phòng khi nhỡ tay hoặc có sai sót gì còn có cái phục hồi. Plugin được đánh giá tốt về khả năng làm điều này là WP-Optimize. P/S: Hóa ra tối ưu hóa cơ sở dữ liệu trong WordPress phức tạp hơn tôi nghĩ nhiều. Và để tối ưu sâu bạn nên nâng cấp lên các plugin trả phí,… Một cản trở nữa là bạn cần phải am hiểu nhất định về plugin, theme thì việc tối ưu mới tránh được lỗi. Nếu bạn cần một cái tên làm tốt công việc này thì Advanced Database Cleaner là lựa chọn xứng đáng.
  • Hạn chế tối đa các liên kết ngoài không cần thiết. Chẳng hạn nếu cảm thấy không cần nút chia sẻ Twiter, Printest thì không nên gắn vào web. Những liên kết ngoài sẽ làm tăng thời gian tải trang.
  • Hạn chế các liên kết chuyển h ướng. Tôi từng phạm lỗi này khi chuyển từ không-www sang có-www, làm một số ảnh tôi chưa chuyển bị vấn đề chuyển hướng, ảnh thì vẫn hiện ra thôi nhưng nó mất công chuyển hướng ngấm ngầm. Tự dưng thì không phát hiện được lỗi này đâu vì về mặt hiển thị không có gì thay đổi. Bạn nên dùng công cụ tối ưu tốc độ tải trang để kiểm tra, ví dụ như của tools.pingdom. Bạn vào những công cụ thế này có thể phát hiện được nhiều thứ hay ho hơn nữa. Từ khoá tra: Website speed test. Về ảnh hưởng của chuyển hướng đến tốc độ website, bạn tham khảo bài viết này: https://kiencang.net/toi-thieu-hoa-chuyen-huong/

Bonus: Các kỹ năng, công cụ tăng tốc WordPress thay đổi thường xuyên, bạn có thể ghé thăm một số nhóm Facebook hoặc trang web sau để tìm hiểu thêm nhiều thông tin bổ ích (hầu hết là tiếng Anh, nhưng là tiếng Anh kỹ thuật, đơn giản là phần nhiều nên các bạn cứ tự tin nhé).

  • Nhóm WordPress Speed Up (nhóm rất đông thành viên);
  • Website WP Speed Matter (bạn sẽ ngạc nhiên về tốc độ của trang này);
  • Nhóm WordPress Speed Matters (cũng thuộc về tác giả của website trên);
  • Website WPJohnny (hình như bạn này gốc Việt Nam, thấy tên là Johnny Nguyen);
  • Website Speed.Family (!), tôi thường xuyên cập nhật các kỹ thuật tối ưu hiệu suất, đặc biệt là cho WordPress;

Có một trang tiếng Việt của anh chàng đa tài LQ2… LQ2 có bài tổng quan sâu về cài đặt web server tối ưu tốc độ, rất đáng để tham khảo thêm.

~~~

21. Kết luận #

Không có công cụ nào “tốt với tất cả mọi người”, luôn có cái gì đó thì hợp với bạn nhưng lại không hợp với người khác và ngược lại, đây là chuyện thường tình vì mỗi người có một nhu cầu riêng. Hãy thử nghiệm để tìm ra cái phù hợp nhất với bạn nhé.

Giờ chúng ta xem lại tiêu đề một chút. Nếu có kinh phí ổn, bạn dễ dàng làm được các điều sau:

  • Chọn được host tốt, có RAM tốt, dung lượng tốt, cài cắm sẵn nhiều công cụ nền tảng giúp tăng tốc;
  • Mua được plugin tăng tốc mà không phải ngại giá cả, có thể lên đến gần 100 đô với W3 Total Cache hay gần 50 đô như WP-Rocket;
  • Trong trường hợp bắt buộc phải dùng CDN cũng không thành vấn đề;

Đúng, mạnh vì gạo bạo vì tiền sẽ thuận lợi hơn, tuy nhiên ngay cả khi không có đồng nào trong tay bạn cũng dễ dàng tăng tốc được bằng các biện pháp như:

  • Tận dụng OpenLiteSpeed;
  • Xóa bỏ plugin dư thừa;
  • Chọn theme tối ưu tốc độ miễn phí;
  • Tối ưu hoá ảnh;
  • Cache phía máy khách chỉ bằng một đoạn code;
  • Plugin cache tĩnh miễn phí;
  • Và một vài mẹo lặt vặt khác;

Cuối cùng thì chuyện tăng tốc độ website cũng như chuyện làm giàu vậy. Bạn không phải trở thành người giàu nhất mới thoải mái, tương tự bạn không cần phải có website nhanh nhất thế giới, hay Việt Nam, hay ngay cả trong lĩnh vực của riêng bạn.

Tại sao lại như vậy? Có ai không muốn website nhanh nhất?

Bởi vì mọi thứ đều cần chi phí. Bạn càng muốn website nhanh và ổn định sẽ càng tốn tiền, công sức, và càng về sau chi phí bỏ ra để cắt giảm 0,1 giây sẽ càng đắt đỏ. Nó giống y như việc bạn sẽ hơi vất vả để vào tầng lớp trung lưu, rất vất vả để vào giới thượng lưu, nhưng gia nhập nhóm siêu giàu thì là chuyện vô vàn (x 100) khó khăn.

Hãy tăng tốc website trong khả năng của bạn, và nhớ là tốc độ chỉ là một phần trong giá trị tổng thể của website.

Comments are closed.

Back to Top