Học Wordpress

12 yêu cầu để website WordPress bạn tải nhanh hơn

537

Vấn đề tối ưu website WordPress để truy cập nhanh hơn luôn là vấn đề quan trọng bật nhất cho những ai đang quản trị website, vì website mà vào nhanh thì sẽ không bị mất khách hàng, tăng lượt truy cập quay lại do khách truy cập không phải đợi lâu.

Các bài viết hướng dẫn tăng tốc WordPress mình đã có viết khá nhiều rồi, nhưng qua các bài đó mình nhận thấy nhiều bạn vẫn thắc mắc tại sao website người ta chạy vù vù mà website mình thì lại như rùa bò sau khi tăng tốc. Thật sự mà nói, tốc độ của website không phải cứ tăng tốc là nhanh, hay cứ dùng host xịn là nhanh mà nó còn phụ thuộc vào rất nhiều yếu tố mà ở bài này mình sẽ liệt kê ra để bạn xem mình đã làm hết hay chưa.

Tăng tốc wordpress từ a to z (phần 2)

1. Hạn chế sử dụng plugin

Hạn chế sử dụng plugin không có nghĩa là bạn không sử dụng plugin mà sẽ đi tìm các giải pháp tự code hoặc tự kiếm code. Plugin cũng được viết từ code mà thôi mà có khi code trong plugin còn tối ưu hơn của bạn viết rất nhiều, cho nên cái gì thật sự cần thiết mà có plugin hỗ trợ thì hãy cứ dùng, còn không cần thiết thì không dùng, kể cả dùng code.

Khi có nhiều plugin, đồng nghĩa với việc server của bạn phải làm việc nhiều hơn để xử lý các đoạn code bên trong đó, mỗi plugin khi kích hoạt lên cũng sẽ lưu lại một dữ liệu nhỏ trong database nên nếu bạn thử quá nhiều plugin thì sẽ khiến table wp_options sẽ phình to ra hơn, lúc đó server lại mất tài nguyên và thời gian để “listing” dữ liệu trong database trước khi lấy dữ liệu tương ứng với truy vấn gửi đến.

Tips: Sử dụng plugin P3 để phân tích thời gian tải của từng plugin.

2. Sử dụng theme đơn giản

Một theme đẹp không có nghĩa là nó sẽ có lợi cho bạn, thực tế đã chỉ ra rằng theme càng đẹp, càng có nhiều tính năng thì nguy cơ làm ảnh hưởng đến tốc độ của website càng lớn.

Hãy thử tưởng tượng một theme dạng tin tức, nó sẽ có chức năng hiển thị các bài theo chuyên mục và nó sẽ hiển thị ở nhiều chuyên mục khác nhau. Điều này có nghĩa là nó sẽ sản sinh ra rất nhiều truy vấn từ khách truy cập gửi đến máy chủ, sẽ làm cho máy chủ bạn tốn nhiều tài nguyên hơn và nặng hơn là tràn bộ nhớ.

editor-themefree

Thứ hai, là các theme bóng bẩy luôn chứa rất nhiều CSS và Javascript để tạo ra các hiệu ứng, mà CSS và Javascript lại là một trong các nguyên nhân làm website bạn tải lâu hơn.

Do đó, theo lời khuyên của mình thì bạn nên sử dụng theme có cấu trúc càng đơn giản càng tốt nếu có thể, trường hợp bạn cần một theme rườm rà thì hãy chọn đúng các theme ở các nhà cung cấp uy tín vì không phải theme nào trả phí là nó đều chạy tốt, rất nhiều theme trả phí nhưng vẫn chứa nhiều bug, lúc này server lại càng có thêm việc để làm là ghi log lỗi có trong website.

3. Sử dụng cache là điều bắt buộc

Dù bạn sử dụng host khủng hay host cùi thì việc sử dụng một plugin hỗ trợ cache luôn là điều tối thiểu phải làm nếu như không muốn sống trong cảnh đợi chờ là hạnh phúc.

Sử dụng cache là một hình thức lưu dữ liệu đã qua xử lý vào một nơi nào đó (trên ổ cứng hoặc trên RAM) mà những người dùng tiếp theo sẽ không cần phải gửi truy vấn để lấy dữ liệu nữa mà sẽ đọc trực tiếp dữ liệu đó, như vậy sẽ giảm gánh nặng đáng kể cho server và thời gian tải trang.

Cache thì có rất nhiều loại, nếu bạn chỉ dùng Shared Host bình thường thì có thể sử dụng plugin WP Super Cache rất tốt, dễ cài đặt và tương thích hầu hết trên mọi nền tảng.

Nếu bạn muốn sử dụng cùng lúc nhiều loại cache hơn (như Disk, Browse Cache, Opcode Cache, Object Cache,..) thì có thể sử dụng plugin W3 Total Cache nhưng sẽ cần bạn biết cách cấu hình nó một chút, và chỉ nên sử dụng nó trên VPS hoặc Server riêng.

Còn nếu bạn chưa có bất cứ plugin cache nào, thì hãy cài ngay 1 cái, WP Super Cache là lựa chọn tốt để bạn bắt đầu.

4. Sử dụng host có máy chủ ở gần bạn

dedicated-server

Chẳng hạn nếu bạn có nhiều khách truy cập đến từ Việt Nam thì lựa chọn tốt nhất là hãy sử dụng các server ở gần bạn nhất như Singapore, Malaysia, Hongkong hoặc Việt Nam. Bởi lẽ dù host bạn có mạnh đến đâu đi chăng nữa, nhưng nếu nó lại ở quá xa thì tốc độ sẽ phần nào giảm đi ít nhiều.

Tham khảo thêm: Cẩm nang thuê hosting cho website WordPress.

5. Hãy sử dụng server riêng nếu có thể (VPS/Dedicated Server)

Nếu như website bạn đã có trên 5000 Unique Visitor mỗi ngày thì tốt nhất hãy nâng cấp lên sử dụng VPS có ít nhất 1GB RAM và 1 CPU nếu không muốn nhà cung cấp có thể đơn phương khóa dịch vụ của bạn bất cứ lúc nào vì tốn tài nguyên.

Hiện nay VPS cũng rất rẻ rồi vì xuất hiện công nghệ Cloud VPS, bạn có thể mua thuê 1 VPS tại Singapore chỉ với $10/tháng cho 1GB RAM/1CPU tại DigitalOcean, hoặc Linode cũng là một lựa chọn Cloud VPS rất tốt.

Còn nếu bạn đang lo lắng về cách sử dụng và quản trị VPS thì lại càng không đáng lo hơn vì mình đã có serie Hướng dẫn VPS căn bản đã và đang khóa hoàn chỉnh nên bạn có thể tham khảo.

6. Sử dụng CDN

amazon-cdn

Mô hình hoạt động của CDN

CDN (Content Devilery Network) là một công nghệ truyền tải các dữ liệu tĩnh (hình ảnh, file CSS và Javascript,..) thông qua proxy của các máy chủ CDN, nó sẽ tự nhận diện địa chỉ của người dùng và sẽ điều hướng họ qua proxy ở server gần nhất mà nó có hỗ trợ. CDN cực kỳ hữu dụng nếu bạn sử dụng các host nước ngoài và có lượng lớn hình ảnh trên website.

Các dịch vụ CDN miễn phí thì có CloudFlare là khá tốt, nó cũng bao gồm luôn việc lưu cache các file tĩnh để tăng tốc. Còn trả phí mà bạn có thể sử dụng thì có dịch vụ CloudFront của Amazon đang rất hot hiện nay.

Có thể bạn thích: KeyCDN – Dịch vụ CDN giá rẻ nhất hiện nay.

7. Tối ưu hình ảnh

Hình ảnh là nguyên nhân chính dẫn tới website load lâu hơn và tốn băng thông nhiều hơn vì dung lượng các tấm ảnh loại lớn không hề nhỏ, nếu website bạn đăng các ảnh với chất lượng cao như wallpaper máy tính, ảnh photographer thì lại càng nặng hơn.

Khi upload lên môi trường web, bạn thật sự không cần bức ảnh to và chất lượng như vậy, mà hãy nên thu nhỏ lại với kích thước lớn nhất là 800×600 và sử dụng các phần mềm nén ảnh xử lý trước khi upload. Nếu bạn cần khách có thể xem ảnh chất lượng cao thì có thể gói zip lại và upload lên dạng file, họ có thể tải về để xem ảnh chất lượng cao.

Nếu bạn không thể sử dụng phần mềm nén ảnh thì có thể dùng plugin WP Smush.it hoặc EWWW để nó tự giảm chất lượng hình ảnh mỗi khi upload lên máy chủ.

Xem thêm:

  • Tối ưu hình ảnh trên WordPress.
  • Sử dụng WP Performence Pack để tối ưu hình ảnh
  • Quản trị hình ảnh toàn tập

Một thủ thuật khác để tăng tốc độ tải cho những website sử dụng ảnh là sử dụng kỹ thuật tải không đồng bộ lên nó, bạn có thể sử dụng các plugin như BJ LazyLoad, Advanced LazyLoad để cấu hình website sẽ chỉ tải hình ảnh nếu người dùng xem tới vị trí của nó, còn không nó sẽ không tải.

8. Tối ưu database

Nếu website bạn đã có nhiều bài viết, dung lượng database đạt mức trên 100MB thì việc cấp bách bạn cần làm là nên tối ưu lại database để server có thể xử lý tốt hơn khi có truy vấn gửi vào.

Trước hết, hãy chắc chắn rằng database của bạn luôn được làm tươi vì nó cũng giống như ổ cứng vậy, sau khi thực hiện việc đọc/ghi dữ liệu quá nhiều nó cũng sẽ bị hiện tượng phân mảnh và chứa các dữ liệu rác (như log chẳng hạn) lưu trong đó, đó là chưa kể đến các dữ liệu không cần thiết như các transient, comment spam, bản nháp tự lưu, revisions,… Bạn có thể dễ dàng tối ưu database qua plugin tên là WP Optimize.

Còn nếu website bạn có mức độ lớn hơn, bạn có điều kiện hơn thì hãy sử dụng một máy chủ riêng để lưu trữ và xử lý database (Remote MySQL Server) vì việc xử lý database khá tốn tài nguyên nên nó sẽ làm ảnh hưởng đến việc xử lý các file PHP của server. Chỉ đơn giản là tìm một cái host khác và bỏ database vào đó rồi sửa phần hostname trong file wp-config.php thành địa chỉ của máy chủ đó. Hoặc bạn cũng có thể dùng các dịch vụ chuyên dụng hơn như Amazon RDS, Google Cloud Database.

9. Hạn chế kết nối với tài nguyên bên ngoài

Tài nguyên bên ngoài ở đây nghĩa là các dịch vụ có trỏ liên kết ra bên ngoài và khi vào website bạn phải tải nó, ví dụ như các mã nhúng Google Analytics, Google+, Facebook,…

Tốt nhất bạn chỉ nên chèn các dịch vụ thật sự cần thiết như Google Analytics, Google+, Facebook,..còn cái nào bạn có thể hạn chế được thì hạn chế vì không phải lúc nào các script đó cũng load tốt, đôi khi có thể do vài lý do nào đó mà khách sẽ không load nổi các đường dẫn trong script đó trong khi vào website bạn thì rất tốt.

10. Gzip và Cache cho trình duyệt

Gzip là một phương thức nén các dữ liệu nhận được từ máy chủ lại thành một gói dữ liệu nhỏ và gửi nó đến trình duyệt. Vì bản năng trình duyệt cũng là một phước thức tải file từ các website về dữ liệu cache của nó nên sẽ vô cùng mất thời gian nếu website bạn không sử dụng gzip. Sử dụng gzip có thể giúp website bạn được nén lại tới mức nhẹ tối đa nên khách truy cập sẽ tốn ít thời gian tải hơn.

Để kích hoạt gzip bạn có thể chèn đoạn sau vào file .htaccess (nếu sử dụng Shared Host/Apache):


# Start gzip compression
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# End Gzip compression

Còn bạn dùng NGINX thì hãy chắc chắn file nginx.conf của bạn có các dòng này:


# Start Gzip compression
gzip on;
gzip_min_length 1100;
gzip_buffers 4 32k;
gzip_types text/plain application/x-javascript text/xml text/css;
gzip_vary on;
# End Gzip Compression

Kết quả kiểm tra tại trang http://checkgzipcompression.com/ có thể cho bạn thấy website của bạn đã bật gzip chưa và đã được nén xuống còn bao nhiêu.

gzip-check

Kiểm tra website đã bật gzip hay chưa

Còn Cache cho trình duyệt (Browser Cache) là một cách để chỉnh sửa thời gian lưu bộ nhớ đệm của các file tĩnh như hình ảnh lâu lưu trữ lâu hơn ở trình duyệt trên máy tính, vì khi trình duyệt đã có cache các file đó rồi thì các lần load sau nó không phải mất công tải dữ liệu về nữa nên bạn sẽ truy cập được nhanh hơn.

Để thiết lập cache trình duyệt, bạn có thể chèn đoạn dưới vào file .htaccess (Apache):


# Browser caching
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
# End Browser caching

Hoặc cho NGINX:


location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
expires max;
}

11. Sử dụng Host có ổ cứng SSD

Trong khi các file PHP sẽ gửi các truy vấn tới máy chủ để xử lý thì các file tĩnh được lưu trên server đều sẽ được webserver trực tiếp gửi nó đến trình duyệt qua thao tác ghi và chép. Dĩ nhiên nếu host bạn có một ổ cứng tốt, thì thời gian truy xuất các file tĩnh sẽ nhanh hơn rất nhiều so với các loại ổ cứng thông thường.

Vì lẽ đó, mình khuyên các bạn nên sử dụng một host hỗ trợ ổ cứng SSD nếu có thể, một số nhà cung cấp rất tốt có hỗ trợ ổ cứng SSD như:

  • AZDIGI
  • A2Hosting
  • StableHost
  • InmotionHosting
  • DigitalOcean
  • MediaTemplate

12. Phân tích tốc độ tải của website

gtmetrix

Ở trên đều là những yêu cầu chung, nhưng mỗi website sẽ có cấu trúc khác nhau nên việc bạn cần nên làm là thường xuyên kiểm tra tốc độ website, để biết được trên website của bạn có file nào tải lâu, file nào dung lượng lớn để bạn có hướng tối ưu thích hợp.

Tham khảo: 5 công cụ kiểm tra tốc độ website uy tín nhất.

Lời kết

Đó là 12 yêu cầu rất cơ bản và đơn giản mà bạn có thể tự làm được để có một website WordPress tải nhanh hơn. Như vậy bạn có thể thấy, việc tối ưu tốc độ của một website là gian nan như thế nào nên hãy tự thưởng cho bản thân mình nếu bạn đã có thể làm website bạn tải tốt hơn.

Một lý do rất quan trọng nữa để bạn phải tối ưu tốc độ website là nó có thể ảnh hưởng đến việc đánh giá thứ hạng của Google cũng như tỷ lệ khách mua hàng nếu như đó là website bán hàng, vì khách hàng luôn rất lười và họ thường không đủ kiên nhẫn để đợi.

Học Wordpress

Tối ưu Google Pagespeed Insights cho WordPress – Phần 1

464

Bài này thuộc phần 1 của 2 phần trong serie Tối ưu Google Pagespeed Insights cho WordPress

Google Pagespeed Insights là một bộ tiêu chuẩn đo lường tốc độ và khả năng thân thiện của website do chính Google đề xuất ra. Theo Google, các tiêu chuẩn trong Pagespeed Insights sẽ tập trung vào hai vấn đề chính, đó là tốc độ tải trang và thân thiện với trải nghiệm người dùng. Và nếu các website nào càng được nhiều điểm ở trang đánh giá Pagespeed Insights thì tức là trang đó đáp ứng được càng nhiều các tiêu chuẩn của Google đề ra.

Thực tế, các tiêu chuẩn này không cần bạn phải áp dụng toàn bộ vì không phải tiêu chuẩn nào bạn cũng có thể sử dụng trên mọi trường hợp. Nên nếu bạn xem serie này và không có khả năng làm được một số tiêu chuẩn nào đó thì cứ bỏ qua, vì Google không bắt bạn phải đạt tiêu chuẩn hết.

Và hiện tại, Google Pagespeed Insights có tất cả 16 tiêu chuẩn đánh giá như sau:

Quy tắc tối ưu tốc độ

  • Tránh sử dụng chuyển hướng ở trang đích.
  • Bật chức năng nén dữ liệu gửi về trình duyệt.
  • Cải thiện thời gian phản hồi của máy chủ.
  • Cải thiện bộ nhớ đệm ở trình duyệt.
  • Nén các tài nguyên CSS và Javascript trên website.
  • Nén giảm dung lượng hình ảnh.
  • Tối ưu việc chèn CSS vào website.
  • Thiết lập thứ tự ưu tiên của nội dung trong website.
  • Bỏ chặn Javascript và CSS khi tải trang.

Quy tắc tối ưu hiệu suất sử dụng

  • Tránh sử dụng các trình cắm (plugin) để hiển thị nội dung.
  • Cấu hình viewport để hiển thị kích thước màn hình phù hợp.
  • Tối ưu các nút bấm hoặc liên kết trên website.
  • Sử dụng cỡ chữ phù hợp để hiển thị nội dung.

Như vậy, nếu bạn muốn website của mình thân thiện với Google Pagespeed thì hãy chắc chắn rằng là bạn đã áp dụng các quy tắc ở trên. Vậy áp dụng ra sao, làm sao để áp dụng cho WordPress? Đó là những gì mà mình sẽ hướng dẫn bạn làm xuyên suốt các bài hướng dẫn tối ưu Google Pagespeed Insights này.

 Tiêu chuẩn đầu tiên: Sử dụng host phù hợp

Nếu bạn hiện tại đang sử dụng các host miễn phí thì đừng làm theo các bài hướng dẫn này làm gì cho mất công, bởi vì có thể tốc độ chậm của nó cũng như hỗ trợ ít công nghệ nên bạn sẽ không thể làm được rất nhiều tính năng. Do vậy, mình khuyến khích bạn sử dụng các host tốt cho WordPress mà những cái tên mình khuyến khích là A2Hosting (có máy chủ Singapore), StableHost, Arvixe (có server Hongkong) đều là các host tốt cho WordPress, tương thích với nhiều plugin.

Ngoài ra, mình khuyến khích bạn sử dụng dịch vụ CloudFlare để tối ưu hoá tốc độ website tốt hơn.

Tránh sử dụng chuyển hướng ở trang đích

Chuyển hướng nghĩa là khi bạn vào một trang nào đó mà bạn lại thiết lập cho nó chuyển hướng (redirect) sang một trang khác hoặc kiểu địa chỉ khác. Tình trạng này thường thấy nhất là với các trang sử dụng tên miền kiểu www.domain.com (có www). Mà theo thói quen của nhiều người thì họ chỉ gõ domain.com lên trình duyệt, nên lúc này webserver cần thêm thời gian để nó chuyển hướng sang kiểu tên miền có www và làm chậm trễ thêm vài giây.

Do đó, mình khuyến khích các bạn không nên sử dụng tên miền có www vì nó sẽ làm người dùng mất thêm thời gian để chuyển hướng, cũng như là nhìn địa chỉ website dài thêm 3 ký tự.

Bật chức năng nén

Chức năng nén ở đây nghĩa là webserver sẽ nén các dữ liệu gửi về trình duyệt theo phương thức HTTP dưới dạng gzip thay vì dưới dạng dữ liệu thô thông thường, lúc này trình duyệt sẽ hiển thị nội dung đã được nén gzip. Và việc nén như vậy có thể sẽ giúp bạn tối ưu tốc độ lên gấp nhiều lần do dung lượng của mỗi lần request đã giảm đáng kể (khoảng 50 – 70% sau khi nén).

Xem thêm: Kiểm tra Gzip trên website tại http://gzipwtf.com/

Để bật tính năng nén Gzip, bạn có thể làm các cách sau:

Nếu dùng plugin W3 Total Cache

Bạn có thể bật tính năng nén Gzip tại Performance -> General Settings -> Browser Cache.

Bật gzip cho W3 Total Cache

Bật gzip cho W3 Total Cache

Sau đó bạn vào Performance -> Browser Cache và đánh dấu vào tất cả tuỳ chọn “Set expires header“.

Nếu dùng WP Super Cache

Đối với WP Super Cache thì bạn có thể bật Gzip bằng cách vào Settings -> WP Super Cache -> Advanced và đánh dấu vào tuỳ chọn “Cache hits to this website for quick access. (Recommended)” và “Compress pages so they’re served more quickly to visitors. (Recommended)“.

Bật gzip cho WP Super Cache

Bật gzip cho WP Super Cache

Đối với Apache

Nếu bạn dùng webserver Apache mà không dùng hai plugin ở trên thì có thể bật Gzip bằng cách chèn đoạn sau vào .htaccess:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Hoặc nếu đoạn trên bạn chèn vào mà bị lỗi 500 hay không có gzip thì xoá đi và sử dụng đoạn ở dưới.

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Đối với NGINX

Nếu bạn dùng NGINX và không sử dụng plugin WP Super Cache hoặc W3 Total Cache thì chèn đoạn sau vào file nginx.conf:

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Cải thiện thời gian phản hồi của máy chủ

Việc cải thiện này có nghĩa là tối ưu tốc độ của host hoặc máy chủ của bạn đang sử dụng. Nếu bạn sử dụng host thì hãy chắc chắn host của bạn có tốc độ xử lý nhanh như các host tốt nhất cho WordPress. Còn nếu bạn sử dụng máy chủ riêng/VPS thì hãy theo dõi (có thể dùng Newrelic) để theo dõi xem tốc độ xử lý của máy chủ có chậm theo thời gian không, từ đó bạn có thể áp dụng thêm các phương thức lưu dữ liệu đệm khác như Database Cache hoặc Object Cache.

Xem thêm: Các kỹ thuật cache và khi nào nên sử dụng.

Nếu bạn đang dùng máy chủ riêng hoặc VPS thì nên sử dụng EasyEngine hoặc Centminmod để chạy WordPress để có tốc độ phản hồi cao nhất.

Cải thiện bộ nhớ đệm của trình duyệt

Mặc định khi trình duyệt tải các website, nó sẽ lưu dữ liệu đệm (cache) các tập tin tĩnh như hình ảnh, CSS, thậm chí là cả nội dung website nếu bạn có bật gzip ở trên. Nhưng nếu bạn không tối ưu lại thời gian mà trình duyệt được phép lưu cache thì bạn sẽ gặp phải vấn đề là cache quá nhanh hết hoặc quá lâu hết, tối ưu nhất là bạn chỉ nên kêu trình duyệt lưu cache của các file tĩnh trên website của bạn tầm khoảng 1 tháng là đẹp.

Để làm việc này, chúng ta sẽ cần khai báo thêm một đoạn Cache-ControlETag vào HTTP Header của các file tĩnh, ví dụ của thachpham.com:

HTTP/1.1 200 OK
Date: Tue, 16 Jun 2015 17:13:06 GMT
Content-Type: image/png
Content-Length: 112
Connection: keep-alive
ETag: "550032be-70"
Expires: Fri, 13 Jun 2025 17:13:06 GMT
Cache-Control: public, max-age=315360000
Access-Control-Allow-Origin: *
CF-Cache-Status: HIT
Vary: Accept-Encoding
Accept-Ranges: bytes
Server: cloudflare-nginx
CF-RAY: 1f7824b54a4905b5-ARN

Đoạn trên có nghĩa là mình đã thêm Cache-Control vào header với tham số publicmax-age315360000 giây, nghĩa là tập tin này sẽ lưu cache vào trình duyệt trong thời gian 10 năm. Lúc này, đoạn Expires sẽ hiển thị chính xác thời gian mà tập tin này hết cache và đoạnETag nó sẽ chứa một chuỗi giá trị ngẫu nhiên để trình duyệt kiểm tra xem tập tin này có được thay đổi không, nếu có thì nó sẽ xoá cache cũ đi. Như vậy tóm lại, đoạn trên là trình duyệt sẽ lưu cache tập tin này trong vỏng 10 năm nếu người dùng không xoá cache và nội dung tập tin không bị thay đổi.

Để xem HTTP Headers nhanh thì bạn có thể vào http://web-sniffer.net/ và copy một đường link của một file ảnh, CSS hay Javascript trên website của bạn để kiểm tra xem nó đã có các header ở trên chưa.

Thêm thời hạn cache bằng CloudFlare

Nếu bạn sử dụng CloudFlare trên website thì bạn có thể thiết lập thời gian hết hạn của các tập tin tĩnh tại Caching -> Browser Cache Expiration.

Cloudflare-browsercaching

Đối với W3 Total Cache

Nếu bạn dùng W3 Total Cache thì khi bật tính năng Browser Cache (xem ở phần nén Gzip ở trên) thì nó đã tự thêm thời gian hết hạn vào các file tĩnh. Tuy nhiên bạn có thể vào Performance -> Browser Cache và đánh dấu vào các dòng như “Set entity tag (eTag)“, “Set cache control header“.

Đối với Apache

Nếu bạn không dùng CloudFlare và W3 Total Cache mà sử dụng webserver Apache thì có thể thêm đoạn sau vào .htaccess:

<ifmodule mod_expires.c>
<Filesmatch ".(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$">
 ExpiresActive on
 ExpiresDefault "access plus 1 year"
</Filesmatch>
</ifmodule>

Hoặc nếu đoạn trên không được thì dùng đoạn dưới đây:

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"

Đối với NGINX

Nếu bạn dùng NGINX thì thêm đoạn sau vào file cấu hình domain của NGINX:

# Media: images, icons, video, audio, HTC
location ~* .(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
 expires 1M;
 access_log off;
 add_header Cache-Control "public";
}

# CSS and Javascript
location ~* .(?:css|js)$ {
 expires 1y;
 access_log off;
 add_header Cache-Control "public";
}

Lời kết phần 1

Phần này chúng ta đã hiểu qua về cơ chế đánh giá điểm số Google Pagespeed Insights trên website, và chúng ta cũng đã tối ưu website của mình dựa vào 4 tiêu chuẩn đầu tiên trong Google Pagespeed. Ở phần tiếp theo chúng ta sẽ tiếp tục làm các tiêu chuẩn khác nhé.

Xem tiếp bài trong serie

Phần kế tiếp: Tối ưu Google Pagespeed Insights cho WordPress – Phần 2

Học Wordpress

Tối ưu Google Pagespeed Insights cho WordPress – Phần 2

446

Bài này thuộc phần 2 của 2 phần trong serie Tối ưu Google Pagespeed Insights cho WordPress

Ở phần 1, chúng ta đã làm qua 4 quy tắc đầu tiên để tối ưu hoá website thân thiện với các tiêu chuẩn của Google Pagespeed Insights và nếu bạn kiểm tra thì có thể điểm số Google Pagespeed Insights của bạn đã cải thiện được một xíu.

Tiếp tục ở bài này, chúng ta sẽ làm tiếp tục 4 quy tắc tiếp theo đó là:

  • Làm nhỏ tài nguyên CSS và Javascript trên website.
  • Nén dung lượng hình ảnh trên website.
  • Tối ưu việc chèn CSS.
  • Thiết lập thứ tự ưu tiên nội dung.

Làm nhỏ CSS và Javascript

Trong một website WordPress, bạn có thể sẽ thấy website mình có chèn nhiều tập tin CSS và Javascript riêng biệt với nhau. Nhưng bạn có biết là trình duyệt khi tải một website, nó chỉ tiến hành gửi tối đa khoảng 10 request đồng thời và sau khi 10 request đó được tải xong nó sẽ tiếp tục gửi request cho các nội dung khác. Và dĩ nhiên, thứ tự các tài nguyên được nhận request sẽ đánh dấu từ trên xuống dưới trong mã nguồn website của bạn ngoài front-end.

Các bạn xem qua ví dụ sau:

[html]
<!DOCTYPE html>
<html>
    <head>
        <title>Title Web</title>
        <!–Javascript của website–>
        <script src=”js/script1.js”></script>
        <script src=”js/script2.js”></script>
        <script src=”js/script3.js”></script>

        <!–CSS của website–>
        <link rel=”stylesheet” href=”css/style1.css” />
        <link rel=”stylesheet” href=”css/style2.css” />
        <link rel=”stylesheet” href=”css/style3.css” />
    </head>
    <body>
        <p>Lorem lipsum</p>
    </body>
</html>
[/html]

Bạn thấy chúng ta có 3 tập tin Javascript và 3 tập tin CSS. Điều này có nghĩa là trình duyệt của bạn sẽ tốn mất 6 request để xử lý các tập tin này. Vậy tại sao chúng ta không tiết kiệm request mà trình duyệt gửi đi bằng cách gộp 3 tập tin Javascript thành 1, và gộp 3 tập tin CSS thành 1? Kỹ thuật này chúng ta gọi nó là Minify CSSMinify Javascript.

Ngoài ra, kỹ thuật Minify còn áp dụng thêm một cách nữa đó là loại bỏ các khoảng trắng và gom toàn bộ nội dung trên cùng một hàng. Cái này bạn có thể xem mã nguồn của Thachpham.com là thấy.

Sử dụng plugin

Lưu ý, cách này có thể làm giao diện của bạn bị lỗi. Nếu bạn dùng máy chủ riêng thì nên sử dụng Google Pagespeed để làm nhỏ CSS và JS mà không bị lỗi.

Có 2 plugin mà bạn có thể sử dụng để làm việc này, đó là Speed Booster Pack (nên dùng), Better WP Minify của Khang Minh thần thánh hoặc W3 Total Cache.

Thiết lập Better WP Minify

Thiết lập plugin Better WP Minify để nén CSS và Javascript

Thiết lập plugin Better WP Minify để nén CSS và Javascript

Thiết lập Speed Booster Pack

Thiết lập plugin Speed Booster Pack để nén CSS

Thiết lập plugin Speed Booster Pack để nén CSS

Thiết lập W3 Total Cache

Bạn vui lòng xem hướng dẫn này để biết thêm chi tiết.

Sử dụng Google Pagespeed

Nếu bạn có dùng Google Pagespeed thì thêm các filter này vào để sử dụng.

NGINX

pagespeed EnableFilters combine_css,rewrite_css,rewrite_javascript,combine_javascript;

Apache

ModPagespeedEnableFilters combine_css,rewrite_css,rewrite_javascript,combine_javascript

Nén dung lượng hình ảnh

Việc giảm các dung lượng hình ảnh rất quan trọng trong việc tăng tốc website cũng như tiết kiệm băng thông cho website. Bởi vì một tấm ảnh có thể sẽ có dung lượng khá nặng mà bạn có thể giảm dung lượng nó xuống mức thấp nhất mà vẫn giữ nguyên chất lượng hình ảnh, hoặc chất lượng giảm xuống rất ít.

Nên xem thêm: Tối ưu hình ảnh trên website đúng cách

 Nén ảnh trước khi upload

Mình khuyên thật lòng bạn nên sử dụng các phần mềm hỗ trợ nén ảnh để giảm bớt dung lượng rồi hãy upload lên. Bạn có thể sử dụng các phần mềm như Ceasium (Windows) hoặc ImageOptim (Mac).

Sử dụng plugin nén ảnh trong WordPress

Nén ảnh trong WordPress với EWWW Image Optimizer

Nếu bạn đã có rất nhiều ảnh thì có thể sử dụng các plugin tự động nén các ảnh upload lên và nén các ảnh đã có trong thư viện như WP Smush hoặc EWWW Image Optimizer. Nếu bạn sử dụng máy chủ riêng, thì hãy sử dụng EWWW Image Optimizer và cài WP-CLI vào, sau đó sử dụng lệnh wp help ewwwio optimize --allow-root để xem cách nén nhanh bằng lệnh.

Tối ưu việc chèn CSS

Quy tắc này nghĩa là chúng ta sẽ tối ưu việc xử lý chặn hiển thị tập tin CSS bên ngoài (External Stylesheet), nghĩa là các đoạn chèn CSS bằng cách nhúng tập tin CSS vào website bằng thẻ <link> và nó đều thuộc loại render-blocking (chặn hiển thị).

Như Google giải thích ở đây, mỗi khi trình duyệt tải trang thì nó sẽ xử lý các nội dung trong trang hiện tại trước rồi mới gửi các request đến các tập tin bên ngoài để nó xử lý sau, bao gồm các tập tin CSS và Javascript được nhúng vào website. Điều này có nghĩa là nếu website bạn có nhiều tập tin CSS được nhúng vào thì trình duyệt sẽ mất thêm thời gian đợi để xử lý các tập tin đó.

Thứ tự hiển thị khi trình duyệt tải trang

Thứ tự hiển thị khi trình duyệt tải trang

Lời khuyên tối ưu

Theo Google, khi bạn thiết kế website thì hãy hạn chế việc tạo ra nhiều tập tin CSS khác nhau để nhúng vào website, và các đoạn CSS ngắn thì có thể nhúng trực tiếp vào website theo kiểu inline-style. Và nếu website bạn có một tập tin CSS lớn, thì hãy áp dụng kỹ thuật chỉ tải các đoạn CSS cần thiết và nhúng inline các đoạn CSS cần thiết đó vào website (xem thêm ở dưới).

Ngoài ra, bạn cũng tránh việc nhúng inline CSS vào các thuộc tính HTML kiểu <span style=”color: red”>… vì cách nhúng này bị chặn bởi Content Security Policy.

Tải inline các đoạn CSS cần thiết

Kỹ thuật này nghĩa là chúng ta sẽ sử dụng Javascript để điều hướng cho website tự lấy các đoạn CSS trong một tập tin nào đó rồi nhúng inline vào nội dung của tập tin HTML trang hiện tại, sau đó nó sẽ tiếp tục tải không đồng bộ (Asynchronous) các đoạn CSS cần thiết khi người dùng kéo trang xuống.

Nếu bạn muốn biết tập tin CSS của bạn nó có những đoạn nào là những đoạn CSS ở lần tải đầu tiên thì có thể sử dụng công cụ Critical Path CSS. Và bạn có thể làm thủ công bằng cách nhúng đoạn CSS cần thiết đó bằng cách chèn inline.

Critical_Path_CSS_Generator_-ThachPham.ComNếu bạn là coder thì có thể xem qua bài Authoring Critical Above-the-Fold CSS của CSS-Trick để có thể sử dụng SASS + Grunt Task để tối ưu việc này.

Sử dụng Googe Pagespeed

Nếu bạn đang sử dụng công cụ Google Pagespeed thì thật đáng mừng là nó có một module cho việc này tên là prioritize_critical_css.

Sử dụng plugin WordPress

Nếu bạn không biết code mà cũng không dùng Google Pagespeed thì chắc chắn cách còn lại là sử dụng plugin trong WordPress để nó hỗ trợ làm việc này tự động. Một plugin làm việc này khá tốt đó là Speed Booster Pack, bạn bật tính năng tải CSS cần thiết như ảnh dưới.

Thiết lập plugin Speed Booster Pack để nén CSS

Thiết lập thứ tự ưu tiên của nội dung trong website

Điều này có nghĩa là bạn sẽ cần đưa các nội dung cần thiết trong website lên đầu trang để nó tải trước thay vì tải các tài nguyên không cần thiết trước, bao gồm các đoạn Javascript hoặc Javascript từ bên ngoài (như các script của Facebook, Googe+,…).

Có một cách bạn có thể làm việc này đó là hãy đưa toàn bộ các file Javascript xuống footer, tức là phần bên dưới của trang để nó tải sau. Việc này bạn có thể dễ dàng làm được với plugin như W3 Total Cache, Speed Booster Pack và Scripts to Footer.

Sử dụng Javascript tải không đồng bộ

Kỹ thuật tải không đồng bộ nghĩa là Javascript sẽ tải mà không cần đồng bộ với việc tải trang, giống như AJAX bạn sẽ gửi nhận dữ liệu mà không cần tải lại trang thì gọi là không đồng bộ (viết tắt là Async). Nhưng trong trường hợp này, chúng ta sẽ sử dụng kỹ thuật tải không đồng bộ để chỉ định Javascript chỉ tải sau khi nội dung trên website tải xong, nhằm tránh việc website có quá nhiều Javascript sẽ tăng thời gian đợi.

Nếu bạn là coder

Khi nhúng Javascript vào website, bạn có thể sử dụng thuộc tính async nhúng vào thẻ <script> để chỉ định nó tải không đồng bộ.

[html] <script src=”demo_async.js” async></script> [/html]

Sử dụng plugin WordPress

Có rất nhiều plugin trong WordPress giúp website tự động đưa toàn bộ Javascript về dạng tải không đồng bộ mà bạn có thể xem tại danh sách này.

Sử dụng CloudFlare

Nếu bạn dùng CloudFlare thì không cần dùng plugin hay làm gì cả mà có thể kích hoạt tính năng Rocket Loader.

Kích hoạt async cho Javascript trên CloudFlareLời kết phần 2

Kết thúc phần này, cộng với phần 1 thì chúng ta đã làm xong các quy tắc tối ưu tốc độ trên website rồi. Hãy lưu ý rằng trong bài này mình có nói qua việc nén Javascript và hãy nhớ rằng nếu website bạn dùng nhiều Javascript thì có thể sẽ bị lỗi, đó là lý do mà các bạn nên sử dụng càng ít Javascript càng tốt nếu muốn website đạt điểm cao nhất trong Google Pagespeed Insights.

Ở bài sau, cũng như bài cuối, mình sẽ nói qua một số quy tắc tối ưu trải nghiệm người dùng trên website để website thân thiện hơn.

Xem tiếp bài trong serie

Phần trước: Tối ưu Google Pagespeed Insights cho WordPress – Phần 1

Học Wordpress

Làm sao để kiểm tra tốc độ website chính xác?

461

Đối với các người quản trị website, việc tăng tốc website của mình luôn là vấn đề hàng đầu để mang lại trải nghiệm tốt nhất cho người truy cập. Nếu một website truy cập chậm chắc chắn sẽ khó mà giữ chân được khách truy cập.

Trong bài hướng dẫn tăng tốc WordPress của mình đã chia sẻ rất nhiều kỹ thuật và kinh nghiệm để tăng tốc website WordPress. Thế nhưng mình nhận thấy có nhiều bạn chưa thật sự hiểu lắm về cách xem tốc độ thật sự trong website của mình. Để tránh các hiểu lầm cho các bạn, trong bài này mình sẽ nói qua chi tiết làm sao để kiểm tra tốc độ thật sự trên website và các lưu ý khi kiểm tra tốc độ website.

1. Yếu tố nào ảnh hưởng đến tốc độ website?

Tốc độ tải của một trang web trên trình duyệt sẽ phụ thuộc vào rất nhiều yếu tố, ở đây mình có các yếu tố cơ bản như sau.

1.1) Vị trí của máy chủ

Đây là yếu tố quan trọng nhất để đánh giá đúng tốc độ thật sự của một website. Vị trí của máy chủ càng gần với người truy cập thì nó càng nhanh, vì nếu các máy chủ ở khác quốc gia, kết nối phải đi qua nhiều ngỏ mạng khác nhau nên sẽ tốn thời gian truy cập hơn.

Trong vài trường hợp đặc biệt như đứt cáp quang biển, nếu bạn truy cập vào website sử dụng host tại nước ngoài sẽ càng chậm hơn. Đó là lý do tại sao mà các gói host nước ngoài như StableHost, A2Hosting đều có tốc độ truy cập không nhanh bằng host ở Việt Nam mặc dù nó là những nhà cung cấp host cực chất lượng.

Do vậy, nếu có mua host thì hãy ưu tiên các máy chủ gần như Việt Nam hoặc Singapore, Hongkong. Ở Việt Nam bạn có thể dùng host tại vHost, Singapore thì có A2Hosting và Hongkong thì có Site5 hoặc Arvixe. Nhưng tốc độ hiện tại ở Việt Nam khi truy cập các máy chủ tại Mỹ cũng khá nhanh nên bạn cũng không lo lắm.

1.2) Khả năng xử lý yêu cầu truy cập của máy chủ

Khi bạn truy cập vào một trang nào đó trên website, trình duyệt sẽ gửi yêu cầu (request) truy cập về máy chủ web (webserver), lúc đó webserver tiếp nhận yêu cầu và phân loại rồi gửi đến các ứng dụng khác nếu nó cần như PHP, MySQL, Ruby,…rồi gửi lại ngược về webserver, sau đó webserver mới gửi về trình duyệt xử lý và hiển thị.

Như vậy, nếu máy chủ bạn thuộc hàng tốt, kết nối internet tốc độ cao nhưng cấu hình chưa chuẩn xác, có lỗi thì khả năng xử lý bị kém đi nên thời gian đợi của người truy cập lâu hơn.

Về tình trạng này, hãy cố gắng tối ưu code bên trong website thật tốt và hạn chế lỗi/bug ít nhất có thể. Còn về máy chủ, bạn có thể sử dụng các kỹ thuật khác để tăng thời gian xử lý dữ liệu trên máy chủ hơn như lưu bộ nhớ đệm (cache) cho website, tối ưu khả năng xử lý code như PHP thì sử dụng APC, XCache.

1.3) Dung lượng website

Nếu website của bạn có quá nhiều hình ảnh và nội dung lên đến cả chục MB thì chắc chắn thời gian tải sẽ lâu dù cho server có tốt đi chăng nữa. Lúc đó tốc độ sẽ phụ thuộc vào chất lượng mạng của người truy cập, mạng nhanh thì 10MB họ tải trong tích tắc nhưng mạng lởm thì đó là vấn đề lớn.

Do đó, bạn nên hạn chế sử dụng các hình ảnh có kích thước to trên website, và kết hợp các bước tối ưu ảnh đúng cách để sử dụng trên website.

1.4) Dữ liệu đệm trên trình duyệt

Các trình duyệt hiện đại bây giờ đều có khả năng lưu nội dung của website vào bộ nhớ đệm trên máy tính để nó tái sử dụng nếu họ có truy cập vào lại website, lúc đó trình duyệt sẽ truy cập nhanh hơn vì không mất thêm thời gian tải lại các nội dung trên website nữa. Ví dụ như nó có thể lưu toàn bộ nội dung trên website, hoặc lưu các tập tin đính kèm như CSS, Javascript, hình ảnh, Flash,….

Do vậy, bạn nên thiết lập cho phép trình duyệt nén nội dung trên website thành gzip và lưu nó vào bộ nhớ đệm để khách truy cập vào nhanh hơn ở các lần sau.

Nên xem: Tăng tốc WordPress từ A tới Z

2. Cách kiểm tra tốc độ website

2.1) Kiểm tra thủ công trên máy

Cách đầu tiên mà bạn nên làm đó là hãy thử nghiệm tốc độ website hoàn toàn bằng thủ công trên máy tính của bạn. Hãy thoát tài khoản (hoặc dùng trình duyệt khác) rồi xoá hết cache, cookie. Sau đó ấn chuột phải chọn Inspect Element (hoặc F12).

Screen Shot 2015-06-24 at 20.14.19Sau đó chọn tab Network.

inspect-element-netowkrVà tải lại website, bạn sẽ thấy nó thống kê thứ tự các thành phần được tải trước, số lần yêu cầu truy cập và tổng thời gian cho việc tải.

inspect-element-network2

Nếu bạn tải lại lần thứ hai mà thời gian nhanh hơn là do các dữ liệu tĩnh trên website đã được lưu vào bộ nhớ đệm.

Đây là cách kiểm tra chính xác và khách quan nhất dựa theo tốc độ internet của bạn nhưng nếu khách truy cập của bạn cũng ở cùng quốc gia với bạn thì kết quả sẽ tương đương với nhau.

2.2) Có nên sử dụng Pagespeed Insights để kiểm tra tốc độ?

KHÔNG, KHÔNG! Mình không khuyên bạn sử dụng Google Pagespeed Insights để kiểm tra tốc độ website vì nó không phải là công cụ đánh giá tốc độ của website mà chỉ là đánh giá sự tối ưu của website dựa vào các tiêu chuẩn của Google. Điều này có nghĩa là tốc độ website của bạn nhanh chưa chắc đã đạt điểm cao của Google Pagespeed Insights, mà đạt điểm cao chưa chắc nó tải nhanh hơn các website điểm thấp.

Mình xin trích lại lời của một bạn ở group WordPress Việt Nam.

google-pagespeed-wpvnBạn cũng đừng có nghĩ là điểm Pagespeed Insights cao là thân thiện với SEO, không có, Google không có nói vậy. Nói tóm lại nó chỉ là một cái chuẩn như W3C, bạn khong đạt 100% cũng không chết ai.

2.3) Vậy công cụ gì để kiểm tra tốc độ website?

Trước hết, mình xin nhấn mạnh rằng kiểm tra tốc độ website bằng thủ công như cách trên là khách quan nhất. Nhưng nếu bạn muốn kiểm tra tốc độ website trên nhiều quốc gia khác nhau thì sẽ cần sử dụng đến các công cụ làm việc này như Pingdoom Tools, GTMetrix, Webpagetest.

Nhưng bạn nên lưu ý rằng các công cụ trên sẽ kiểm tra tốc độ từ một máy chủ tại một quốc gia nào đó. Có nghĩa là nếu bạn dùng host tại Việt Nam mà kiểm tra tốc độ ở các dịch vụ nước ngoài thì kết quả rất thất vọng.

Ngoài ra, còn có một công cụ đánh giá hiệu suất của website nâng cao hơn và có trả phí là Blitz.io.

Xem thêm: Các công cụ kiểm tra tốc độ website tốt nhất

Lời kết

Trong bài viết này, mục đích là mình muốn chia sẻ cho các bạn sâu hơn về khả năng đánh giá tốc độ của một website cũng như biết thêm tốc độ của website phụ thuộc vào các yếu tố nào. Hy vọng rằng sau bài này, bạn sẽ biết được cách kiểm tra tốc độ website chính xác, cũng như không còn quá phụ thuộc vào những công cụ kiểm tra tốc độ, tránh các hiểu lầm đáng tiếc.

Học Wordpress

Website WordPress bị chậm, vì sao nên nỗi?

487

Chào các bạn, đã lâu mình cũng không viết bài mới lên blog vì công việc có phần hơi nhiều cũng như việc cập nhật bài cũ mất khá nhiều thời gian. Tuy nhiên trong thời gian vừa qua, theo mình quan sát và ghi nhận ý kiến khách hàng tại AZDIGI thì mình thấy có rất nhiều trường hợp website WordPress tải trang rất chậm mặc dù cấu hình máy chủ/hosting rất cao nên không tối ưu hóa được hiệu suất.

Vì vậy trong bài viết này, mình sẽ nói chi tiết về một số nguyên nhân mà website WordPress tải chậm bằng tất cả các kinh nghiệm của mình để các bạn có thể tự tối ưu hóa website của mình tốt hơn.

Nguyên nhân website WordPress tải chậm

Cấu hình Hosting/Máy chủ

Đây có lẽ là nguyên nhân đầu tiên phải kể đến khi một website WordPress tải chậm. Về phía máy chủ thì có 2 nguyên nhân chính đó là:

Cấu hình không đủ

Chúng ta đều phải hiểu rằng mỗi website sẽ có khả năng sử dụng tài nguyên máy chủ khác nhau. Giả sử website của bạn là bắt buộc phải sử dụng nhiều tài nguyên hơn bình thường (website bán hàng, hoặc các website sử dụng nhiều tính năng phức tạp) thì bây giờ bạn sẽ cần một cấu hình dịch vụ Hosting/Máy chủ cao hơn bình thường để mọi tính năng trên website đều xử lý mượt mà, bởi vì thường là website sẽ tải các tiến trình theo thứ tự, chỉ cần một trong các tiến trình tải bị chậm thì thời gian tải toàn website sẽ bị chậm theo.

Đối với Shared Hosting dùng cPanel, có một cách để biết cấu hình không đủ cho website đó là vào cPanel và xem thống kê CPU/Physical Memory bên cột phải. Nếu thấy nó báo màu cảm hoặc đỏ lòm như thế này thì website bạn đã sử dụng quá nhiều tài nguyên.

Website WordPress bị chậm, vì sao nên nỗi? 27

Bạn cũng có thể vào phần CPU and Concurrent Connection Usage để xem lại lịch sử những lần mà gói host của bạn vượt quá tài nguyên.

Website WordPress bị chậm, vì sao nên nỗi? 28

Còn đối với sử dụng VPS hoặc máy chủ riêng mà bạn có quyền truy cập vào SSH của máy chủ thì có thể dùng lệnh top -c để xem tình trạng CPU cũng như các tiến trình chiếm CPU:

Website WordPress bị chậm, vì sao nên nỗi? 29

Do mỗi website có điều kiện tải khác nhau nên mình không thể tư vấn được cấu hình chính xác mà bạn cần là bao nhiêu. Do vậy bạn có thể đọc hết bài viết này và làm tất cả các cách dưới đây mà website vẫn cần nhiều tài nguyên để xử lý thì nâng cấp dịch vụ lên gói cao hơn.

Lỗi từ máy chủ

Dù khá khó để xảy ra nhưng đây vẫn là một nguyên nhân gây chậm website bất thình lình không rõ nguyên nhân. Thường thì với máy chủ Shared Hosting, bạn có thể vào cPanel => Server Information để xem tình trạng tải của máy chủ xem có bị quá tải không, hoặc có thể là có sự cố gì đó từ phía nhà cung cấp.

Thường thì nếu có sự cố từ phía server thì thời gian Time To First Bytes (TTFB) khi tải trang sẽ rất cao (khoảng trên 5 giây nếu dùng dịch vụ của nhà cung cấp trong nước, còn nước ngoài thì nhưng lúc đứt cáp thì cũng sẽ bị như vậy). Để xem thời gian TTFB khi tải trang thì bạn có thể mở trình duyệt Google Chrome rồi truy cập vào website của mình, sau đó ấn chuột phải vào trang và chọn Inspect rồi tìm liên kết tải lâu nhất để xem TTFB như hình ảnh bên dưới.

Website WordPress bị chậm, vì sao nên nỗi? 30

Tải chậm từ liên kết bên ngoài

Nếu website có sử dụng nhiều liên kết bên ngoài như mã nhúng Facebook, Tawk.to, PushCrew,…thì cũng là một nguyên nhân gây chậm website vì nếu tốc độ mạng của người truy cập vào các liên kết này chậm thì cũng sẽ tăng thời gian tải của website bạn lên. Do vậy nên hạn chế sử dụng mã nhúng của dịch vụ bên ngoài, chỉ dùng với các dịch vụ thật sự cần thiết hoặc nhúng riêng ở một trang thích hợp.

Một số cách khắc phục website WordPress tải chậm

Hạn chế sử dụng nhiều plugin

Mỗi một plugin khi cài vào website thì mức tiêu hao tài nguyên sẽ tăng thêm ít hay nhiều tùy thuộc vào loại plugin, do vậy bạn nên hạn chế sử dụng các plugin không thật sự cần thiết hoặc không dùng đến. Đặc biệt có một số plugin nên cân nhắc sử dụng như:

  • Google XML Sitemaps: Sitemap bạn có thể dùng plugin Yoast SEO để cài đặt mà không cần một plugin riêng cho nó. Bởi vì khi sitemap cập nhật, nếu số lượng trang của bạn nhiều thì máy chủ sẽ cần khá nhiều tài nguyên để cập nhật tập tin sitemap.
  • Các plugin bảo mật: Việc bảo mật WordPress tuy phức tạp mà cũng đơn giản, do vậy bạn không cần thiết sử dụng nhiều plugin bảo mật khác nhau mà chỉ nên dùng một plugin duy nhất. Plugin mình khuyến khích sử dụng là iThemes Security vì có đủ các tính năng cần thiết để bảo mật website WordPress.
  • Các plugin tự động liên kết với từ khóa trong bài viết: Một số người dùng vì muốn tăng số lượng liên kết nội bộ trong website nên đã sử dụng những plugin tự động liên kết với từ khóa trong bài viết đến tag, category hoặc bài viết. Việc này là không cần thiết vì việc lạm dụng các plugin này sẽ khiến bài viết của bạn chỉ toàn liên kết rất mất thẩm mỹ, bạn có thể thực hiện việc này thủ công hoặc sử dụng plugin Internal Link Manager để chỉ tự liên kết với các từ khóa bạn mong muốn tới trang chỉ định.

Sử dụng cache trên website

Trên mỗi website bất kỳ đều nên có cache, có rất nhiều kỹ thuật caching cho WordPress khác nhau nhưng mỗi website nên đều có HTML Cache để giảm thiểu việc máy chủ sử dụng nhiều tài nguyên để xử lý. Nếu bạn không am hiểu lắm về kỹ thuật thì có thể sử dụng plugin WP Super Cache hoặc LiteSpeed Cache (với các host hỗ trợ LSCache như AZDIGI) để tạo cache cho website, như vậy là website bạn đã tiết kiệm một khoản tài nguyên kha khá rồi.

Nén hình ảnh trước khi upload lên website

Lỗi này rất thường hay gặp với một số người sử dụng, đó là upload một tấm ảnh nguyên gốc chưa qua tối ưu nặng cả chục MB lên website. Như vậy có nghĩa là khi người dùng tải trang, trình duyệt họ sẽ tải hàng chục MB hình ảnh chưa bao gồm các thành phần khác, tốn phải 5 giây là ít.

Đối với các website thông thường không cần độ nét chính xác tới từng pixels của ảnh thì chỉ nên giảm kích thước xuống còn tối đa 1100px cho chiều ngang. Ngoài ra bạn có thể cài thêm plugin Smush Image Optimization, Compression, and Lazy Load để hỗ trợ nén ảnh tự động khi upload lên website giúp giảm kích thước tập tin ảnh xuống mức thấp nhất mà vẫn giữ nguyên chất lượng.

Giảm tần suất chạy WP Cron

Mỗi website WordPress đều có các cronjob riêng được tích hợp thẳng vào mã nguồn để thực thi một số việc có tính lặp đi lặp lại như kiểm tra phiên bản mới, xóa các bình luận trong thùng rác, hoặc một số tính năng mà plugin/theme có sẵn.

Một đặc điểm của việc WP Cron dùng nhiều tài nguyên đó là tập tin wp-cron.php luôn chạy với mức sử dụng CPU cao, cái này bạn chỉ có thể xem được khi xem với lệnh top trong máy chủ Linux.

Website WordPress bị chậm, vì sao nên nỗi? 31

Để xem tất cả cron có trong website WordPress thì bạn có thể sử dụng plugin WP Control. Sau đó nếu thấy trong này chỉ có các cron không cần thiết thì bạn có thể tắt WP Cron bằng cách chèn đoạn này vào tập tin wp-config.php:

define(‘DISABLE_WP_CRON’, true);

Sau đó tạo một cronjob trong Hosting/Máy chủ chạy định kỳ mỗi ngày 2 lần như sau:

* */12 * * * /usr/bin/php /home/path/public_html/wp-cron.php  >/dev/null 2>&1

Tập tin admin-ajax.php sử dụng nhiều CPU

Ngoài wp-cron.php thì còn một tập tin khác đói CPU không kém đó là tập tin /wp-admin/admin-ajax.php. Thường thì tập tin này sẽ hoạt động nhiều khi bạn sử dụng WooCommerce hoặc các plugin sử dụng Hearbeat API của WordPress. Nếu bạn thấy tập tin admin-ajax.php của bạn xử lý liên tục thì đây là lúc bạn cần kiểm soát lại tần suất hoạt động của tập tin này.

Cách đơn giản nhất đó là sử dụng plugin Hearbeat Control để tắt luôn Hearbeat API nếu bạn nghĩ rằng website không cần cái này, hoặc giảm tần suất hoạt động của tập tin này lại.

Dọn dẹp database, đặc biệt là bảng wp_options

Những ai là lập trình viên thì chắc chắn không xa lạ gì với việc tất cả dữ liệu của bảng wp_option trong WordPress sẽ tải ra hết một lượt cho mỗi lần website tải. Điều này có nghĩa là nếu bạn kiểm tra database mà thấy bảng này có dung lượng lớn thì cần nên xem lại và tối ưu. Mình đã có một bài viết khá chi tiết về việc này tại đây.

Sử dụng phiên bản PHP 7 trở lên

Các phiên bản PHP cũ hơn 7.2 sẽ bị khai tử cho đến tháng 11/2019, nghĩa là sẽ không có phiên bản cập nhật hoặc hỗ trợ từ PHP. Do vậy bạn nên sử dụng phiên bản PHP 7.2 cho website ngay từ bây giờ một phần vì bảo mật, phần quan trọng hơn cả là PHP 7.2 có tốc độ xử lý nhanh hơn nhiều lần so với các phiên bản PHP 5.6 trở xuống, nếu bạn có thể sử dụng phiên bản PHP 7.3 thì càng tốt.

Tham khảo: Cách nâng cấp lên PHP 7 sử dụng Shared Hosting dùng cPanel

Lời kết

Ở trên chỉ là một số cách đơn giản mà mọi người ai cũng có thể tự làm được để tối ưu lại website của mình để website nhanh hơn từ việc tiết kiệm tài nguyên cho máy chủ. Với một số các cách nâng cao khác mình sẽ đề cập ở một bài viết khác chi tiết hơn. Ngoài bài viết này thì mình cũng có  một số bài viết khác liên quan đến việc tăng tốc website cho WordPress mà bạn có thể tham khảo bên dưới.

Tham khảo:

  • Hướng dẫn tăng tốc WordPress từ A đến Z
  • 12 yêu cầu để website WordPress bạn tải nhanh hơn