Tăng tốc website WordPress với Jetpack

Tăng tốc website WordPress

Tốc độ tải website là một trong những vấn đề quan trọng mà chúng ta cần phải quan tâm khi có một website. Nó không những ảnh hưởng tới trải nghiệm người dùng trên website mà còn ảnh hưởng cả tới điểm SEO nữa. Trong bài viết này, mình sẽ hướng dẫn các bạn tăng tốc website nhờ vào plugin miễn phí Jetpack.

Tại sao cần quan tâm tới tốc độ website

Thử tưởng tượng bạn truy cập vào một website load mãi không xong, cảm giác của bạn thế nào? Có phải rất khó chịu không?

Hay khi bạn đang cần đọc nội dung quan trọng mà đợi hoài mà chưa thấy. Liệu bạn có đóng ngay website đó lại và tìm đọc trên một website khác không?

Hoặc giả sử công ty của bạn có một website giới thiệu. Trong buổi họp bạn trình bày với đối tác, nhưng vì load chậm nên bạn mở website mãi mà không lên. Liệu lúc đó cảm giác bạn thế nào?

Hay bạn muốn xem 1 bài viết qua điện thoại di động, nhưng load lâu quá thì bạn có chán không?

Những ví dụ trên là những vấn đề rất hay gặp phải và nó gây rất nhiều khó chịu, phiền toái và đôi khi là bực bội cho người dùng. Những thứ đó ảnh hưởng trực tiếp đến trải nghiệm của người dùng khi mới vào website. Không chỉ như vậy, nó còn có thể khiến người dùng rời bỏ website.

Nhận thấy được sự ảnh hưởng quan trọng của tốc độ tải website tới trải nghiệm người dùng, Google đã đưa tốc độ tải website thành 1 trong những tiêu chí đánh giá SEO. Theo đó, tốc độ tải càng nhanh thì điểm SEO càng cao và ngược lại.

Vì thế, nếu website của bạn load chậm, thì bạn cần phải sửa ngay lập tức. Những chỉ dẫn trong bài này sẽ giúp bạn phần nào khắc phục được vấn đề đó.

Tốc độ tải bao nhiêu là tốt?

Vì cảm nhận của mỗi người khi truy cập website là khác nhau, nên một người có thể nói website này tải chậm, nhưng người khác lại nói nó tải nhanh. Như vậy thì cần phải có cách nào đó để xác định được website tải nhanh hay chậm chứ?

Nói chung thì tốc độ tải website nếu dưới 3 giây thì có thể coi như là tốt. Nếu như càng nhanh hơn nữa thì càng tốt. Nếu bạn có thể tối ưu cho website tải dưới 1 giây thì quá tuyệt vời!

Lưu ý là khi nói đến tốc độ tải của website, cần phải phân biệt 2 thứ:

  • Tốc độ khả dụng: là tốc độ khi tải xong website đủ để dùng. Thông thường khi nói về tốc độ web thì ta hay nói về tốc độ này. Đây là tốc độ được tính từ lúc bắt đầu đến khi web đã load xong các thành phần cơ bản (như chữ viết, phần đầu trang – header, …) và người dùng đã có thể bắt đầu đọc, hoặc tương tác trên website.
  • Tốc độ khi tải xong toàn bộ website: tốc độ này được tính từ lúc bắt đầu tới khi tất cả các hình ảnh, script, icon, … trên site được load xong. Thông thường thì tốc độ này cao hơn tốc độ khả dụng ở trên vài giây. Tuy nhiên, nó không quá ảnh hưởng tới trải nghiệm người dùng. Vì họ đã có thể tương tác được với website rồi.

Một số website sử dụng các kỹ thuật lazy load để làm giảm thời gian tải website lúc đầu. Nhờ đó làm tăng tốc độ khả dụng của website và tăng trải nghiệm người dùng.

Đo tốc độ tải của website như thế nào?

Để biết được website nhanh hay chậm, cách đơn giản nhất là bạn tự trải nghiệm nó. Hãy thử mở trình duyệt ẩn danh (để đảm bảo không bị cache) và mở website đó. Bạn sẽ cảm nhận rõ ràng nhất website đó load nhanh hay chậm. Tốc độ như vậy có chấp nhận được hay không.

Để kiểm tra thêm, bạn có thể mở điện thoại di động, dùng 3G để truy cập vào website. Thông thường, tốc độ trên điện thoại di động sẽ thấp hơn trên desktop một chút. Nên sự cảm nhận của bạn về tốc độ tải website sẽ rõ ràng hơn rất nhiều.

Ngoài cách trải nghiệm trực tiếp, bạn có thể dùng các công cụ để đo được chính xác thời gian tải một web. Có 3 công cụ nổi bật nhất, bạn dùng cái nào cũng được:

GTMetrix

gtmetrix

Điểm tốc độ của vi.fitwp.com

GTMetrix là một công cụ miễn phí, giúp đo được thời gian tải của website và đưa ra các khuyến cáo để tăng tốc độ web. Bạn chỉ cần nhập URL của website và submit.

Công cụ này chấm điểm website theo 2 cách: dùng PageSpeed (của Google) và YSlow (của Yahoo). Các điểm được đánh từ cao xuống thấp là A, B, C, … Hình trên là tốc độ tải của chính trang vi.fitwp.com. Thông thường, nếu bạn đạt được 2 điểm A là tốc độ tải rất tốt rồi.

Lưu ý là GTMetrix có đưa ra giá trị về thời gian tải website. Đây là thời gian mà website của bạn load xong toàn bộ tất cả các hình ảnh, script, icon, … nhé. Do đó số này có thể hơi lớn 1 chút, nhưng không sao cả.

PageSpeed Insights

Google PageSpeed Insights

Google PageSpeed Insights

PageSpeed là một công cụ được Google phát triển để phân tích tốc độ websiteđưa ra các khuyến cáo cho developer. Công cụ này không đưa ra thời gian cụ thể một website load. Tuy nhiên, nó đưa ra điểm số về tốc độ trên di động và trên desktop. Ngoài ra nó cũng đưa ra các khuyến cáo để tăng tốc website.

Kinh nghiệm cá nhân của mình cho thấy PageSpeed đưa ra các tiêu chuẩn khá khắt khe và ngặt nghèo. Ít có website nào thỏa mãn được 95/100 điểm ở cả bản di động lẫn desktop. Nên lời khuyên của mình khi sử dụng công cụ này là chỉ cần tối ưu cho đạt “màu xanh” là được (điểm số ≥ 80/100)!

Pingdom

Pingdom Website Speed Test

Pingdom Website Speed Test

Tương tự như GTMetrix, Pingdom cũng kiểm tra tốc độ tải của website và chấm điểm. Ưu điểm của công cụ này là có thể kiểm tra tốc độ tải website từ nhiều địa điểm khác nhau. Rất tiếc là chưa có từ Việt Nam!

So với GTMetrix thì Pingdom có giao diện đẹp và dễ nhìn hơn. Hơn nữa, nó chú trọng vào phân tích các thành phần trên website và tốc độ tải của chúng. Tuy nhiên Pingdom lại không đưa ra các khuyến cáo về tối ưu như GTMetrix.

Cá nhân mình thì hay dùng GTMetrix để có được những khuyến cáo này và làm theo đó để tối ưu tốc độ website được tốt hơn.

Có nhiều kỹ thuật để tối ưu website WordPress để có tốc độ cao hơn. Dưới đây mình sẽ chỉ các bạn một cách làm đơn giản, miễn phí mà hiệu quả lại cao.

Tăng tốc website WordPress với Jetpack

Giới thiệu sơ lược về Jetpack

Jetpack là một plugin miễn phí cho WordPress. Nó được phát triển bởi Automattic – công ty mẹ đẻ ra WordPress. Vốn ban đầu được dùng cho hệ thống WordPress.com của Automattic, nhưng sau đó, họ đã tung ra phiên bản phục vụ chung cho tất cả mọi người.

Jetpack là một gói gồm nhiều tính năng cho website WordPress như viết bài bằng MarkDown, tối ưu hình ảnh, thay form bình luận, hỗ trợ subscription newsletter, …

Trong phạm vi bài viết về tối ưu tốc độ này, mình chỉ giới thiệu tính năng về CDN của Jetpack mà thôi. Nếu bạn cần tham khảo thêm về Jetpack, có thể đọc bài này.

Tối ưu tốc độ website nhờ Jetpack

Ngay mới hôm qua thôi (6/11/2018), Jetpack tung ra một tính năng cực kỳ hữu ích với người dùng WordPress. Tính năng này gọi là Site Accelerator, tạm dịch là tăng tốc website.

Về cơ bản, tính năng này cung cấp một CDN miễn phí cho chúng ta để ta có thể lưu các hình ảnh, file JavaScript hay CSS trên CDN của WordPress.com! Điều này có ý nghĩa gì?

Nếu bạn nghiên cứu về kỹ thuật tối ưu tốc độ website, thì một trong những lời khuyên hàng đầu là cần phải sử dụng CDN để tăng tốc website! CDN có thể hiểu như một mạng lưới các server trên toàn cầu (hoặc trong 1 khu vực nào đó, VD như trong nước Việt Nam) chuyên dùng để host các file hình ảnh, JavaScript và CSS cho chúng ta. Khi chúng ta request tới một hình ảnh chẳng hạn, thay vì bắt website tải về từ 1 server ở bên Mỹ, CDN sẽ tải về ngay từ 1 server ở Hà Nội. Và hiển nhiên khi đó với cùng 1 hình ảnh, tốc độ tải đã khác rất nhiều.

Trước đây, Jetpack đã cung cấp CDN miễn phí cho hình ảnh, gọi là Photon. Mình đã sử dụng và thấy rất thích tính năng này. Đến nay thì Jetpack nâng cấp lên một đẳng cấp khác – là cung cấp CDN miễn phí cho cả các file JavaScript và CSS nữa! Như thế thì phần lớn các tài nguyên của website của chúng ta sẽ được host trên CDN của WordPress.com. Do đó vừa giảm tải cho host của mình, vừa tăng tốc độ website.

Lưu ý về CDN của Jetpack

Sở dĩ mình nói phần lớn tài nguyên ở trên là vì Jetpack không lưu tất cả các file JavaScript và CSS của chúng ta lên CDN của họ. Thử tưởng tượng xem nếu mỗi lần ta cập nhật CSS mà Jetpack lại đẩy file đó lên CDN thì chẳng mấy mà CDN của họ thành rác!

Thay vì làm như vậy, Jetpack chỉ đưa các file nằm trong core của WordPress (như jQuery chẳng hạn), Jetpack và cả WooCommerce nữa. Nếu website của bạn dùng WooCommerce thì đây đúng là một tin vui! Vì các file JavaScript và CSS của WooCommerce cũng sẽ được Jetpack hỗ trợ. Sở dĩ có điều này là vì WooCommerce cũng là một sản phẩm của Automattic – công ty mẹ của Jetpack.

Lưu ý nữa là nếu website của bạn chỉ phục vụ cho người Việt thì bạn cần phải kiểm tra tốc độ từ CDN của Jetpack. Jetpack không công bố mạng lưới phân bố các server CDN (ta có thể kỳ vọng là họ đặt ở tại Việt Nam hoặc gần Việt Nam – như ở Singapore hay Nhật Bản). Chúng ta không thể chắc chắn được là tốc độ tải từ CDN đó có tốt hơn so với tốc độ tải từ các server đặt ngay trong Việt Nam hay không. Tất nhiên là một server chuyên dùng làm CDN sẽ được tối ưu cho các tác vụ này hơn 1 server dùng làm web. Vì thế, cần phải kiểm tra lại cho chắc chắn. Bạn có thể dùng 1 trong 3 công cụ ở trên để kiểm tra.

Cá nhân mình thì thấy CDN hoạt động rất tốt với website vi.fitwp.com này. Hiện mình đang áp dụng nó và thấy tốc độ khá ổn.

Kết luận

Tối ưu và tăng tốc website WordPress là một chủ đề hay và có rất nhiều vấn đề cần được bàn tới. Trong bài viết này, mình mới chỉ nói về một khía cạnh mà thôi. Tất nhiên, bạn không nên đặt toàn bộ niềm tin vào CDN của Jetpack, mà bạn cần phải tiến hành các kỹ thuật khác để tối ưu website tốt nhất. VD như: dọn dẹp website, tối ưu hình ảnh, lựa chọn host tốt, v.v… Hy vọng bài viết đem lại các thông tin bổ ích cho bạn. Và chúc website của bạn load xong dưới 1 giây!

5 Comments

  1. Tốt nhất Việt Nam on 07/11/2018 at 10:52

    tuyệt vời quá, phải cài ngay

  2. Kynang.me on 07/11/2018 at 13:18

    Mình đang cài và thấy nó là nguyên nhân chính gây chậm web, mà chưa nghĩ cách thay thế nên vẫn dùng @@

  3. tinhwrl on 07/11/2018 at 14:34

    Khả năng là không có sever ở VN Nhưng vậy thì tốt với quốc tế nhưng với vn thì chưa chắc

  4. TrungAZ on 09/11/2018 at 22:07

    Jetpack vs Roket cái nào ngon hơn ta?

    • anhtnt on 12/11/2018 at 09:35

      2 cái cho 2 mục đích khác nhau mà bạn. Có thể dùng chung được mà.

Gửi phản hồi