Trong thời đại số hóa hiện nay, một trang web bán hàng hoạt động hiệu quả không chỉ là một yếu tố quan trọng mà còn quyết định sự thành công của doanh nghiệp. Khi khách hàng truy cập vào website, họ mong đợi có một trải nghiệm mượt mà và nhanh chóng.
Tuy nhiên, nhiều doanh nghiệp gặp phải tình trạng website bị chậm, điều này không chỉ làm giảm sự hài lòng của khách hàng mà còn ảnh hưởng đến tỷ lệ chuyển đổi và doanh thu. Việc tăng tốc website bán hàng trở thành một nhiệm vụ cấp bách, giúp cải thiện hiệu suất và thu hút thêm khách hàng. Các yếu tố như tốc độ tải trang, thời gian phản hồi và khả năng tương tác đều đóng vai trò quan trọng trong việc giữ chân khách hàng.
Một trang bán hàng nhanh chóng không chỉ tạo ấn tượng tốt mà còn khẳng định sự chuyên nghiệp của doanh nghiệp. Trong bài viết này, Quicksite sẽ cùng bạn khám phá những giải pháp hiệu quả để tối ưu hóa hiệu suất trang bán hàng, từ đó nâng cao trải nghiệm người dùng và thúc đẩy doanh số bán hàng.
Ưu tiên chọn máy chủ tốt cho website bán hàng online
Hiệu suất của website phụ thuộc nhiều vào máy chủ mà nó đang sử dụng. Tốc độ, khả năng hoạt động và khả năng mở rộng được xác định bởi phần mềm, cài đặt, băng thông có sẵn và phần cứng của máy chủ: bao gồm số lượng và tốc độ của các lõi CPU, dung lượng RAM và loại ổ đĩa lưu trữ (ví dụ: ổ SSD).
Các loại hosting phổ biến
Có nhiều loại hosting khác nhau, mỗi loại đều có ưu điểm và nhược điểm cùng mức giá khác nhau. Thông thường, bạn sẽ nhận được giá trị tương ứng với số tiền bỏ ra. Tuy nhiên, hosting nhanh không nhất thiết phải đắt đỏ.
Shared Hosting
Đây là loại hosting phổ biến nhất và thường có giá thấp nhất. Với shared hosting, bạn sẽ chia sẻ một máy chủ vật lý hoặc ảo với hàng trăm website khác. Điều này có nghĩa là tài nguyên của máy chủ (bộ nhớ, CPU) cũng sẽ được chia sẻ, dẫn đến việc bạn chỉ có quyền truy cập vào một lượng lưu trữ và băng thông hạn chế.
Với kế hoạch shared hosting, bạn sẽ có ít quyền kiểm soát hơn về cài đặt máy chủ và tài khoản, thường bị giới hạn bởi giao diện quản lý của nhà cung cấp. Điều này có thể dẫn đến tình trạng downtime nhiều hơn do ảnh hưởng từ các website khác.
Nếu ngân sách cho phép, hãy cân nhắc chuyển sang VPS để có hiệu suất tốt hơn. Nếu bạn không muốn quản lý máy chủ của riêng mình, hãy chọn giải pháp VPS được quản lý hoặc hosting WordPress chuyên dụng.
Shared hosting giá rẻ: Chemicloud, HostArmada, Racknerd! (cấu hình cao, không giới hạn CPU, uptime 100%)
VPS (Virtual Private Server) Hosting
VPS là một lựa chọn tốt cho những ai muốn nâng cao hiệu suất và kiểm soát mà không tốn quá nhiều chi phí. Mặc dù bạn vẫn chia sẻ máy chủ vật lý với người dùng khác, nhưng VPS cung cấp không gian riêng tư với tài nguyên được phân bổ đặc biệt cho bạn.
Bạn có thể cài đặt bất kỳ phần mềm nào và linh hoạt điều chỉnh dung lượng lưu trữ, RAM và CPU theo nhu cầu. VPS cho phép bạn hoàn toàn kiểm soát cài đặt máy chủ, khởi động lại các phần mềm như PHP hoặc MySQL bất cứ lúc nào.
Nếu chọn VPS không được quản lý, bạn sẽ cần tự duy trì và cập nhật phần mềm.Những nhà cung cấp VPS phổ biến như DigitalOcean, Linode và Vultr cho phép bạn thiết lập nhanh chóng và dễ dàng mở rộng khi cần.
VPS khuyên dùng: Vultr, Cloudways, Racknerd (giá rẻ, cấu hình cao, bảo mật và uptime 100%)
Dedicated Server Hosting
Với hosting dedicated, bạn sẽ có quyền sử dụng độc quyền một máy chủ vật lý. Bạn có toàn quyền kiểm soát tài nguyên máy chủ và có thể tùy chỉnh cấu hình theo ý muốn. Tuy nhiên, việc quản lý một máy chủ dedicated đòi hỏi kiến thức kỹ thuật cao và không phù hợp với người mới bắt đầu.
Dedicated Server khuyên dùng: Xcloud Hosting, Racknerd
Managed WordPress Hosting
Đây là giải pháp lý tưởng cho những ai không muốn xử lý các công việc bảo trì máy chủ. Các gói hosting này thường bao gồm quản lý hiệu suất, bảo mật, cập nhật phần mềm và hỗ trợ premium. Mặc dù chi phí có thể cao hơn, nhưng nó giúp tiết kiệm thời gian và giảm bớt lo lắng. Tuy nhiên, điểm hạn chế là bạn có thể có ít quyền kiểm soát hơn đối với cài đặt máy chủ. Một số tùy chọn có thể bị hạn chế vì lý do bảo mật hoặc hiệu suất.
Managed Hosting khuyên dùng: WP Engine, WPX
Nói ngắn gọn
Việc lựa chọn đúng loại hosting không chỉ ảnh hưởng đến hiệu suất trang web mà còn đến trải nghiệm người dùng. Hãy cân nhắc kỹ lưỡng nhu cầu của bạn để đưa ra quyết định phù hợp nhất. (giá rẻ nhất trong thời điểm hiện tại là Racknerd)
Chọn máy chủ gần với khu vực khách truy cập của bạn
Vị trí của máy chủ đóng vai trò quan trọng trong việc giảm độ trễ mạng và TTFB (Thời gian đến byte đầu tiên). Độ trễ mạng là khoảng thời gian cần thiết để một gói dữ liệu di chuyển từ điểm này sang điểm khác. TTFB là thời gian mà trình duyệt phải chờ đợi để nhận byte dữ liệu đầu tiên.
Cả hai chỉ số này nên được tối ưu hóa ở mức thấp nhất có thể, điều này có thể đạt được bằng cách giảm khoảng cách đến khách truy cập trang web của bạn. Các nhà cung cấp dịch vụ lưu trữ WordPress cao cấp như Kinsta hoặc WP Engine có nhiều máy chủ trên toàn cầu để đảm bảo điều này.
Sử dụng CDN cũng là một giải pháp hiệu quả để giảm độ trễ mạng, vì các tệp tài nguyên (đã được lưu cache) sẽ luôn được phục vụ từ máy chủ CDN gần nhất với người dùng. (Gợi ý: BunnyCDN – giá re, chất lượng hoặc KeyCDN).
Để xác định nguồn gốc của hầu hết khách truy cập, bạn có thể kiểm tra dữ liệu địa lý của họ trong Google Analytics.
Chọn nhà cung cấp sử dụng Nginx
Mỗi trang web WordPress đều chạy trên một máy chủ với phần mềm web server là Apache hoặc Nginx. Đối với các trang web WordPress nhỏ với lượng truy cập ít, Apache hoàn toàn đủ khả năng. Tuy nhiên, đối với các trang web lớn với nội dung tĩnh hoặc có nhiều yêu cầu đồng thời, Nginx thường được khuyến nghị hơn.
Nginx được phát triển với mục tiêu tối ưu hóa hiệu suất trong môi trường quy mô lớn và thường vượt trội hơn Apache trong các bài kiểm tra hiệu suất. Chính vì vậy, các dịch vụ lưu trữ WordPress cao cấp như Kinsta đã chọn Nginx cho máy chủ của mình.
Mặc dù Nginx có thể khó cấu hình hơn Apache và không hỗ trợ tệp .htaccess, nhưng việc chạy WordPress trên Nginx đã được tài liệu hóa rõ ràng. Ngoài ra bạn cũng có thể cân nhắc sử dụng Litespeed nhưng giá sẽ cao hơn một chút.
Sử dụng HTTP/2
Tại sao bạn nên sử dụng HTTP/2 cho trang web của mình?
Sử dụng giao thức HTTP/2 cho máy chủ của bạn có thể cải thiện tốc độ tải trang web lên đến 50-70% so với giao thức cũ hơn HTTP/1.1. Với HTTP/2, khi người dùng yêu cầu một trang web, máy chủ có thể gửi nhiều luồng dữ liệu tới trình duyệt cùng một lúc nhờ vào kỹ thuật multiplexing. Điều này cho phép các nhà phát triển gán các trọng số khác nhau cho từng luồng dữ liệu, giúp trình duyệt biết luồng nào cần được hiển thị trước. Ngược lại, HTTP/1.1 tải tất cả tài nguyên theo thứ tự, khiến cho nếu một tài nguyên không thể tải, các tài nguyên khác cũng sẽ bị chặn lại.
Kiểm tra xem máy chủ của bạn có hỗ trợ HTTP/2 không
Rất nhiều dịch vụ lưu trữ hiện nay cung cấp HTTP/2 theo mặc định. Tuy nhiên, nếu tài khoản lưu trữ của bạn đã sử dụng một thời gian dài, bạn nên kiểm tra xem máy chủ có đang chạy HTTP/2 hay không để tận dụng tốc độ tải trang tối ưu.
Những phương pháp cần thay đổi khi chuyển sang HTTP/2
Khi sử dụng HTTP/2, một số kỹ thuật và phương pháp tốt trước đây có thể không còn hiệu quả và thậm chí gây hại đến tốc độ tải trang của bạn:
- Không kết hợp các tệp CSS hoặc JavaScript
- HTTP/2 cho phép tải nhiều tệp mà không cần gửi nhiều yêu cầu đến máy chủ. Số lượng tệp ít quan trọng hơn khi tối ưu hóa tốc độ. Việc tách riêng các tệp sẽ giúp cải thiện hiệu suất khi kết hợp với bộ nhớ đệm.
- Không nhúng script trong HTML
- Kỹ thuật nhúng script trong HTML từng được coi là tốt với HTTP/1.1 để giảm số lượng yêu cầu. Tuy nhiên, đối với HTTP/2, việc này có thể làm giảm khả năng tối ưu hóa tốc độ tải trang vì nó loại bỏ khả năng bộ nhớ đệm riêng cho từng tài nguyên.
- Ngừng sử dụng CSS image sprites
- Sử dụng hình ảnh kết hợp (image sprites) để giảm yêu cầu tới máy chủ là một phương pháp phổ biến với HTTP/1.1. Với HTTP/2, tệp nhỏ sẽ tải nhanh hơn và hiệu quả hơn, vì vậy việc sử dụng hình ảnh riêng biệt sẽ không ảnh hưởng đến tốc độ tải trang của bạn.
- Không sử dụng domain sharding
- Kỹ thuật “domain sharding” nhằm phân chia tài nguyên web qua nhiều miền để vượt qua giới hạn tải đồng thời trong HTTP/1.1 không còn cần thiết với HTTP/2. Thực tế, nó có thể gây bất lợi vì sẽ làm giảm khả năng khai thác multiplexing và tải đồng thời.
- Tận dụng chức năng server push
- Trong HTTP/1.1, trình duyệt sẽ yêu cầu tài nguyên sau khi nhận HTML từ máy chủ. Nhưng với HTTP/2, chức năng “server push” cho phép máy chủ gửi tất cả tài nguyên cần thiết tới trình duyệt mà không cần yêu cầu riêng biệt, giúp giảm số lượng yêu cầu HTTP và tăng tốc độ tải trang.
Hướng dẫn thêm về server push trong HTTP/2
Để tìm hiểu sâu hơn về chức năng server push trong HTTP/2 và cách kích hoạt nó, bạn có thể tham khảo bài viết trên A Comprehensive Guide To HTTP/2 Server Push — Smashing Magazine. Ngoài ra, Cloudflare cũng hỗ trợ HTTP/2 Server Push và có thể được kích hoạt cho các tệp kiểu như stylesheet và script thông qua plugin WordPress của How do I enable HTTP2 Server Push in WordPress | Cloudflare Support docs.
Hãy đảm bảo rằng bạn đang tận dụng những lợi ích mà HTTP/2 mang lại để cải thiện trải nghiệm người dùng trên trang web của mình!
Sử dụng DNS chất lượng
Tra cứu bản ghi DNS và hướng lưu lượng truy cập thường mất thời gian, ngay cả khi chỉ trong mili giây. DNS miễn phí từ nhà đăng ký tên miền thường chậm hơn so với các dịch vụ DNS cao cấp như DNS Service – Amazon Route 53 – AWS. Để có giải pháp tốt hơn, Cloudflare DNS là một dịch vụ miễn phí cung cấp nhiều lợi ích tương tự như DNS cao cấp. Để đánh giá hiệu suất DNS, bạn có thể sử dụng các công cụ trực tuyến như DNSperf, giúp tối ưu hóa tốc độ và hiệu quả của trang web của bạn.
Sử dụng phiên bản PHP mới nhất
Việc sử dụng phiên bản PHP mới nhất có thể mang lại nhiều cải tiến về hiệu suất cho website của bạn, mặc dù không phải tất cả các plugin hoặc chủ đề đều hỗ trợ phiên bản này. Mỗi phiên bản PHP thường nhanh hơn đáng kể so với phiên bản trước đó. Theo thử nghiệm kiểm tra PHP + WordPress của Kinsta năm 2022, PHP 8.1 nhanh hơn 47.10% so với PHP 8.0. So với PHP 7.2, PHP 8.1 có khả năng xử lý hơn 50% số yêu cầu (hoặc giao dịch) mỗi giây. Các cửa hàng WooCommerce chạy trên PHP 8.1 nhanh hơn 11.47% so với khi chạy trên PHP 7.2.
Để kiểm tra phiên bản PHP mà trang web của bạn đang sử dụng, bạn có thể sử dụng plugin miễn phí Query Monitor và kiểm tra trong phần Environment. Hầu hết các bảng điều khiển hosting đều cung cấp tùy chọn để thay đổi phiên bản PHP cho tài khoản của bạn.
Đặt giới hạn bộ nhớ WordPress và máy chủ
Giới hạn bộ nhớ mà trang web của bạn được phép sử dụng có thể ảnh hưởng đến hiệu suất, tùy thuộc vào loại server, loại website và các plugin đã cài đặt. Nếu không có cài đặt nào, WordPress mặc định áp dụng giới hạn bộ nhớ là 40MB (64MB cho các trang Multisite). Điều này có nghĩa là một script PHP trên frontend chỉ có thể sử dụng tối đa 40MB RAM, điều này có thể không đủ trong nhiều trường hợp.
Khuyến nghị về bộ nhớ
Nếu bạn đang sử dụng nhiều hoặc các plugin nặng như WooCommerce, WPML, Yoast SEO, SearchWP hoặc Gravity Forms, hãy cân nhắc tăng giới hạn bộ nhớ của WordPress. Giới hạn bộ nhớ cao hơn cũng cần thiết để ngăn chặn việc chỉ mục của bạn bị dừng lại nếu bạn có một trang web lớn hoặc nếu các trang của bạn cần thực hiện nhiều truy vấn để lấy toàn bộ dữ liệu.
Đối với WPML, yêu cầu tối thiểu là 128MB, và 256MB được khuyến nghị. Nếu dưới mức này, có thể xảy ra nhiều vấn đề như mất các mục bài viết, thuật ngữ, v.v.
Hãy nhớ rằng việc thiết lập giới hạn bộ nhớ cao hơn không nhất thiết sẽ tăng hiệu suất trang web của bạn. Vì cài đặt bộ nhớ của WordPress áp dụng giới hạn cho mỗi script, nên tốt hơn là đặt mức thấp nhất có thể (nhưng vẫn đủ cho từng script) để giảm nguy cơ một script làm quá tải RAM trên server của bạn. Đặt giới hạn bộ nhớ WP ở mức 128MB là điểm khởi đầu tốt. Khi trang web của bạn lớn với nhiều plugin nặng, bạn có thể bắt đầu với mức 256MB.
Cách kiểm tra giới hạn bộ nhớ hiện tại của WordPress và máy chủ
Để xem giới hạn bộ nhớ hiện tại của WordPress và máy chủ, bạn có thể cài đặt plugin miễn phí Query Monitor. Sau khi cài đặt, hãy kiểm tra phần Environment để xem các thiết lập về giới hạn bộ nhớ. Plugin này cũng hiển thị Peak Memory Usage trong quá trình tải trang, giúp bạn xác định nhu cầu bộ nhớ cho các trang nặng.
Nếu bạn đang sử dụng WPML, bạn có thể kiểm tra bộ nhớ đã được thiết lập bằng cách vào WPML > Support. Trong phần WordPress, bạn sẽ thấy giới hạn bộ nhớ. Giới hạn này phải nhỏ hơn hoặc bằng với bộ nhớ có sẵn trên máy chủ, mà bạn có thể xem trong phần PHP dưới “Memory limit”. Phần này cũng hiển thị “Memory usage” hiện tại.
Cách thay đổi giới hạn bộ nhớ WordPress
Giới hạn bộ nhớ của WordPress có thể được định nghĩa bằng hằng số WP_MEMORY_LIMIT. Bạn có thể thêm dòng sau vào tệp wp-config.php để cho phép WordPress sử dụng tối đa 256M RAM cho mỗi script PHP:
define( 'WP_MEMORY_LIMIT', '256M' ); // Dành cho front-end. Mặc định: 40MCài đặt này sẽ hoạt động miễn là giới hạn memory_limit trong tệp php.ini hoặc user.ini của máy chủ của bạn bằng hoặc cao hơn giới hạn của WordPress (256M trong ví dụ này). Bạn cũng có thể thiết lập giới hạn bộ nhớ của WordPress bằng với giới hạn mà máy chủ đang có như sau:
define( 'WP_MEMORY_LIMIT', ini_get( 'memory_limit' ) );Trong một số trường hợp, bạn có thể muốn thiết lập một lượng bộ nhớ khác nhau cho front-end và back-end. Điều này có thể được thực hiện với WP_MAX_MEMORY_LIMIT, cho phép bạn thiết lập giới hạn bộ nhớ riêng cho WordPress Admin. Mặc định là 256M hoặc giá trị memory_limit trong php.ini nếu giá trị đó cao hơn.
Dưới đây là ví dụ về cách bạn có thể sử dụng cả WP_MEMORY_LIMIT và WP_MAX_MEMORY_LIMIT cùng nhau:
define( 'WP_MEMORY_LIMIT', '128M' ); // Dành cho front-end. Mặc định: 40M
define( 'WP_MAX_MEMORY_LIMIT', '512M'); // Dành cho back-end. Mặc định: 256MCách thay đổi giới hạn bộ nhớ của máy chủ
Giới hạn memory_limit là một cài đặt máy chủ có thể được thiết lập cho toàn bộ máy chủ hoặc riêng biệt cho từng người dùng. Tùy thuộc vào gói hosting và máy chủ của bạn, tệp php.ini (hoặc các cài đặt riêng của nó) có thể được thay đổi trực tiếp trong bảng điều khiển hosting, bằng cách thêm tệp .ini hoặc .user vào tài khoản người dùng của bạn, hoặc trong .htaccess:
memory_limit = 512M // bộ nhớ tối đa mỗi scriptNếu bạn không chắc chắn cách thay đổi, hãy kiểm tra với nhà cung cấp hosting của bạn.
Các cài đặt khác trong php.ini
Ngoài giới hạn bộ nhớ, còn có nhiều cài đặt khác trong php.ini cần lưu ý, đặc biệt nếu bạn có một trang web lớn hoặc gặp phải các vấn đề về treo trang, timeout hoặc lỗi nghiêm trọng:
memory_limit = 512M // bộ nhớ tối đa mỗi script
max_input_vars = 3000 // số biến POST tối đa được gửi
max_execution_time = 60 // thời gian (giây) cho phép một script chạy trước khi bị kết thúc
max_input_time = 1000 // thời gian tối đa (giây) cho phép một script phân tích dữ liệu đầu vào, như POST và GET
upload_max_filesize = 64M // kích thước tối đa của một tệp tải lên
post_max_size = 256M // kích thước tối đa của toàn bộ nội dung yêu cầu. Phải cao hơn upload_max_filesize và thấp hơn memory_limitBạn có thể xem giá trị hiện tại cho hầu hết các cài đặt này trong bảng điều khiển Environment của Query Monitor. Nếu sử dụng WPML, một số giá trị này cũng được liệt kê trong phần PHP trên trang WPML > Support.
Tối ưu hóa cơ sở dữ liệu MySQL của bạn
Tối ưu hóa và làm sạch các bảng cơ sở dữ liệu có thể mang lại hiệu suất đáng kể cho trang web của bạn. Dưới đây là một số bước quan trọng để đảm bảo MySQL hoạt động hiệu quả.
Đảm bảo máy chủ của bạn đủ mạnh
Trước tiên, hãy chắc chắn rằng máy chủ của bạn có đủ khả năng. Nếu CPU, bộ nhớ và kết nối mạng không đủ mạnh, việc tối ưu hóa MySQL chỉ cải thiện một chút tình hình, nhưng bạn sẽ nhanh chóng đạt đến giới hạn của phần cứng trước khi thấy được sự khác biệt.
Lưu ý: Luôn sao lưu trước khi thực hiện bất kỳ thay đổi nào đối với cơ sở dữ liệu hoặc cài đặt của bạn và hãy chắc chắn bạn biết cách khôi phục bản sao lưu.
Chọn đúng động cơ lưu trữ cơ sở dữ liệu
Nhiều trang web cũ vẫn đang sử dụng động cơ lưu trữ MyISAM. Trong những năm gần đây, InnoDB đã chứng tỏ hiệu suất tốt hơn và đáng tin cậy hơn. Một lý do kỹ thuật để sử dụng InnoDB thay vì MyISAM là InnoDB có khóa cấp dòng, cho phép các truy vấn xử lý nhanh hơn.
Nếu bạn đang chạy một trang WordPress khá mới, có thể bạn đã sử dụng InnoDB. Tuy nhiên, với các trang WordPress cũ hơn, hãy kiểm tra xem điều này có đúng không.
Bạn có thể kiểm tra động cơ lưu trữ nào đang được sử dụng trong phpMyAdmin: chọn cơ sở dữ liệu của bạn ở bên trái và sau đó kiểm tra cột “Type” trong danh sách các bảng ở bên phải.
Nếu bạn phát hiện vẫn có các bảng MyISAM, bạn có thể chuyển đổi chúng thủ công bằng phpMyAdmin, WP-CLI hoặc một plugin.
Tối ưu hóa, sửa chữa và làm sạch các bảng cơ sở dữ liệu MySQL
Nên thường xuyên tối ưu hóa, sửa chữa và làm sạch các bảng cơ sở dữ liệu. Lệnh “Optimize Table” trong MySQL là một phương pháp tích hợp để giảm không gian thừa mà cơ sở dữ liệu chiếm giữ.
Tối ưu hóa với phpMyAdmin
Trong phpMyAdmin, đầu tiên chọn cơ sở dữ liệu ở bên trái. Sau đó chọn các bảng mà bạn muốn cải thiện (bạn có thể chọn tất cả bằng cách đánh dấu ô bên dưới danh sách các bảng). Bạn sẽ thấy lệnh “Optimize table” trong menu “With selected”.
Tối ưu hóa với WordPress
WordPress có công cụ sửa chữa cơ sở dữ liệu tích hợp giúp tối ưu hóa và sửa chữa cả MyISAM lẫn InnoDB. Để sử dụng công cụ này, trước tiên hãy thêm dòng sau vào tệp wp-config.php của bạn:
define('WP_ALLOW_REPAIR', true);Lưu ý: Hãy chắc chắn xóa dòng trên khỏi wp-config.php sau khi đã hoàn tất hoặc đặt hằng số thành false.
Sau đó, truy cập công cụ sửa chữa cơ sở dữ liệu WordPress qua URL:
https://yoursite.com/wp-admin/maint/repair.phpBạn sẽ thấy hai nút: “Repair Database” và “Repair and Optimize Database”.
Khi nhấp vào một trong hai nút, WordPress sẽ cố gắng sửa chữa/tối ưu hóa tất cả các bảng trong cơ sở dữ liệu của bạn. Nếu có bảng nào không thể sửa chữa, WordPress sẽ thông báo cho bạn.
Tối ưu hóa bằng các plugin
Có nhiều plugin mà bạn có thể sử dụng để tối ưu hóa, sửa chữa và làm sạch các bảng cơ sở dữ liệu:
- WP Optimize: Tối ưu hóa và làm sạch các bảng cơ sở dữ liệu, xóa các bảng không sử dụng từ các plugin không hoạt động hoặc đã xóa, và lên lịch bảo trì định kỳ.
- WP Sweep, Advanced Database Cleaner và ODAR: Các plugin khác giúp tối ưu hóa bảng và làm sạch dữ liệu không sử dụng hoặc trùng lặp.
Hãy luôn sao lưu cơ sở dữ liệu trước khi chạy bất kỳ plugin nào.
Tuning MySQL
Đây là một chủ đề nâng cao và không dành cho những người thiếu tự tin. MySQL có thể được điều chỉnh với hàng trăm cài đặt trong tệp cấu hình my.cnf. Bạn có thể truy cập tệp này nếu có quyền root trên máy chủ/VPS của mình.
Một số cài đặt có thể tác động lớn đến hiệu suất MySQL cho các trang nặng về dữ liệu. Có rất nhiều tài liệu hướng dẫn về cách điều chỉnh MySQL. Trang MySQL :: MySQL 8.0 Reference Manual :: 10 Optimization có chương về tối ưu hóa là một điểm khởi đầu tốt.
Kiểm tra và xem xét lại các plugin của bạn
Nhiều hiệu suất có thể được cải thiện bằng cách xem xét lại các plugin mà bạn đang sử dụng. Vô hiệu hóa những plugin không cần thiết hoặc nặng nề và đảm bảo rằng các plugin còn lại được cấu hình hoạt động tốt với nhau.
Vô hiệu hóa bất kỳ plugin nào mà bạn không sử dụng thường xuyên.
Để hiểu rõ hơn về mức độ ảnh hưởng của từng plugin đến tốc độ trang, bạn có thể sử dụng plugin Code Profiler, tạo báo cáo về hiệu suất của plugin và chủ đề.
Một lựa chọn tốt khác là Query Monitor, cho phép bạn theo dõi hiệu suất của các plugin với tính năng Queries by Component.
Hy vọng những gợi ý trên sẽ giúp bạn tối ưu hóa cơ sở dữ liệu MySQL của mình một cách hiệu quả!
Cách loại bỏ các yêu cầu HTTP cản trở trong WordPress
Plugins, theme và Core của WordPress thường xuyên thực hiện các yêu cầu HTTP bên ngoài tới API hoặc máy chủ của chúng để kiểm tra cập nhật, thông tin bản quyền và dữ liệu khác. Những yêu cầu này có thể diễn ra theo lịch trình (do WP Cron kích hoạt) và có thể trùng với các yêu cầu từ người truy cập trang.
Vấn đề từ các yêu cầu HTTP
Một số cuộc gọi API có thể xảy ra đồng thời hoặc mất nhiều thời gian để hoàn thành. Đôi khi, chúng có thể bị thời gian chờ do máy chủ mà chúng đang gọi tạm thời bận hoặc không khả dụng. Nếu thời gian chờ của yêu cầu quá lâu (ví dụ 10 giây), máy chủ không phản hồi có thể khiến yêu cầu cố gắng liên hệ với máy chủ nhiều lần, dẫn đến việc bạn phải chờ 20-30 giây hoặc lâu hơn. Trong suốt thời gian này, các yêu cầu này có thể cản trở quá trình tải trang bình thường. Đây cũng là lý do khiến việc đăng nhập vào WordPress Admin hoặc mở trang Plugins đôi khi mất thời gian dài.
Giải pháp để theo dõi yêu cầu HTTP
Plugin miễn phí Query Monitor là một công cụ hữu ích giúp bạn theo dõi các yêu cầu HTTP và cuộc gọi API. Tuy nhiên, cần lưu ý rằng Query Monitor chỉ hiện các yêu cầu này khi chúng xảy ra. Vì những yêu cầu này thường không diễn ra thường xuyên hoặc theo lịch cron, nên bạn không phải lúc nào cũng thấy được chúng.
Một giải pháp cho vấn đề này là sử dụng plugin Log HTTP Requests. Plugin này ghi lại tất cả các yêu cầu WP_HTTP từ Core, plugin, theme và AJAX, đồng thời lưu trữ thời gian chạy của chúng để bạn có thể chẩn đoán các yêu cầu có thể gây cản trở sau này.
Kiểm soát các tác vụ cron
Các tác vụ cron (do WP-Cron điều khiển) được sử dụng bởi WordPress và nhiều plugin để lên lịch các nhiệm vụ lặp đi lặp lại như kiểm tra cập nhật plugin. Tuy nhiên, theo thời gian, những tác vụ này có thể gây ra vấn đề về hiệu suất và tốc độ tải trang.
WP-Cron chỉ được kích hoạt khi có hoạt động trên website. Trên những website ít lượt truy cập, điều này có thể làm chậm tốc độ tải trang cho người dùng và quản trị viên vì tất cả các tác vụ cron đã lên lịch bắt đầu chạy khi có người truy cập lần đầu sau thời gian không hoạt động. Một vấn đề khác có thể xảy ra là nếu website không có đủ PHP workers, đôi khi một yêu cầu sẽ đến, WordPress sẽ “khởi tạo” cron, nhưng cron phải chờ worker và chỉ ngồi đó.
Bạn có thể sử dụng plugin miễn phí WP Crontrol để xem và quản lý tất cả các tác vụ cron đã lên lịch trên website của mình. Một plugin hữu ích khác để phát hiện các yêu cầu web có thể gây cản trở là Log HTTP Requests, ghi lại tất cả các yêu cầu WP_HTTP và thời gian thực hiện của chúng.
Thay thế WP-Cron bằng cron server
Để ngăn chặn những vấn đề đã mô tả ở trên, bạn có thể vô hiệu hóa WP-Cron và sử dụng cron server (còn gọi là “real” cron) để khởi động tất cả các tác vụ cron đã lên lịch. Với cách tiếp cận này, như được mô tả trong hướng dẫn của WP, các tác vụ cron sẽ chạy theo lịch trình đã định sẵn mà bạn chọn, chẳng hạn như mỗi 30 phút, thay vì dựa vào lượt truy cập trang (sau thời gian không hoạt động).
Để thực hiện điều này, trước tiên bạn cần vô hiệu hóa WP-Cron bằng cách thêm đoạn mã sau vào tệp wp-config.php của bạn:
define('DISABLE_WP_CRON', true);Sau đó, bạn cần lên lịch một tác vụ cron từ máy chủ của mình. Trong hầu hết các bảng điều khiển hosting như cPanel và DirectAdmin, rất dễ dàng để thêm một tác vụ cron. Lệnh sau sẽ thiết lập lịch trình cho tác vụ chạy mỗi 30 phút (hai lần mỗi giờ):
wget -q -O - https://www.yourdomain.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1Cách chạy lệnh trên máy chủ
Các lệnh cần được nhập trong giao diện dòng lệnh, như Terminal. Để chạy các lệnh trên máy chủ, trước tiên bạn cần đăng nhập vào máy chủ bằng SSH. Các lệnh WP-CLI chỉ có thể được thực hiện khi bạn đang ở trong thư mục WordPress của website.
Nếu bạn quen thuộc với SSH, bạn cũng có thể quản lý các tác vụ cron từ dòng lệnh bằng lệnh crontab.
Kết luận
Việc giảm thiểu các yêu cầu HTTP cản trở trong WordPress không chỉ cải thiện hiệu suất trang mà còn nâng cao trải nghiệm người dùng. Bằng cách sử dụng các công cụ và phương pháp nêu trên, bạn có thể quản lý tốt hơn các tác vụ cron và tối ưu hóa website của mình.
Vô hiệu hóa biết tượng cảm xúc
Xóa biết tượng cảm xúc
WordPress mặc định hỗ trợ biểu tượng cảm xúc, điều này tạo ra một yêu cầu HTTP bổ sung để tải tệp JavaScript wp-emoji-release.min.js. Để vô hiệu hóa tính năng này, bạn có thể sử dụng plugin Disable Emojis hoặc thực hiện thủ công thông qua các hook trong tệp functions.php. Nhiều plugin tối ưu hóa như Perfmatters cũng có tùy chọn tích hợp để vô hiệu hóa biểu tượng cảm xúc.
<?php
//Disable emojis in WordPress
add_action( 'init', 'quicksite_disable_emojis' );
function quicksite_disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}Dùng Gzip hoặc Brotli
Nén Gzip
Gzip là một định dạng tệp được sử dụng để nén và giải nén dữ liệu, giúp cải thiện hiệu suất bằng cách giảm kích thước tệp tải xuống. Tỷ lệ nén có thể đạt đến 90%, ngay cả với các tệp CSS và JavaScript đã được minify. Lưu ý rằng Gzip không nén hình ảnh.
Tất cả các trình duyệt hiện đại đều hỗ trợ Gzip và tự động yêu cầu nó khi thực hiện các yêu cầu HTTP. Tuy nhiên, bạn cần kích hoạt Gzip trên máy chủ của mình. Bạn có thể sử dụng các công cụ kiểm tra trực tuyến để xác định xem Gzip đã được kích hoạt hay chưa.
- Máy chủ Nginx: Gzip thường được bật mặc định. Bạn có thể mở tệp cấu hình
nginx.confđể đảm bảo rằng các mục trong phần gzip không bị chú thích. - Apache: Hỗ trợ nén Gzip thông qua module
mod_deflate, thường được kích hoạt mặc định. Bạn có thể bật nén Gzip qua tệp cấu hình máy chủ (httpd.conf), trong.htaccess, hoặc thông qua một plugin.
Nén Brotli
Nén Brotli thường được các CDN như BunnyCDN và KeyCDN sử dụng. Trong các bài kiểm tra, Brotli thường cho tỷ lệ nén tốt hơn so với Gzip, nhưng tốc độ nén/giải nén phụ thuộc vào cài đặt của nó.
Bạn có thể kiểm tra xem máy chủ có gửi các tệp đã nén Brotli hay không bằng cách sử dụng các công cụ trực tuyến.
Tận dụng bộ nhớ đệm trình duyệt
Bộ nhớ cache trình duyệt cho phép trang web của bạn ra lệnh cho trình duyệt của người dùng lưu trữ các tệp đã tải xuống (HTML, CSS, JavaScript, hình ảnh, và font) trên máy tính của họ để tải lại những tệp này trong các lần truy cập tiếp theo mà không cần tải lại từ máy chủ. Điều này giúp tăng tốc độ tải trang cho những lần truy cập sau.
Thiết lập Header Expires và Cache-control
Nhà phát triển web cần có cách thông báo cho trình duyệt của người dùng biết khi nào một tài nguyên cần được lấy lại từ máy chủ do có phiên bản mới. Đây chính là vai trò của các Header Expires và Cache-control.
- Header Expires: Cho phép bạn chỉ định thời gian mà tài nguyên sẽ “hết hạn” và cần được tải lại. Các header này được thiết lập trong
.htaccesscho Apache hoặc trong tệp cấu hình máy chủ cho Nginx. - Header Cache-control: Là một kỹ thuật mới hơn, cho phép bạn điều chỉnh thời gian cache linh hoạt hơn.
Kinsta cung cấp hướng dẫn chi tiết về cách thiết lập các Header Expires và Cache-control cho Apache và Nginx.
Phá vỡ Cache với Query Strings
Nếu bạn thay đổi các tệp tài nguyên trên trang web của mình, bạn cần đảm bảo trình duyệt của người dùng không sử dụng phiên bản cache mà tải xuống phiên bản mới. Bạn có thể làm điều này bằng cách thêm query string vào tên tệp, ví dụ style.css?ver=1.2.
Kích hoạt bộ nhớ Cache máy chủ
Bộ nhớ cache giúp lưu trữ nội dung vào bộ nhớ của máy chủ, cơ sở dữ liệu hoặc các tệp cache khi nội dung được yêu cầu lần đầu tiên. Trong những lần tải trang tiếp theo, nội dung đã lưu sẽ được truy xuất và tái sử dụng, giúp tăng tốc độ hiển thị trang.
Các loại bộ nhớ Cache máy chủ
- Nén OPcode PHP: Khi một tệp PHP được xử lý, nó cần phải được biên dịch thành OPcode. Bộ nhớ cache OPcode tích hợp (Zend OPcache) lưu trữ OPcode đã chuyển đổi để tăng tốc độ xử lý.
- Bộ nhớ Cache đối Tượng: Lưu trữ kết quả của các truy vấn cơ sở dữ liệu nhằm phục vụ nhanh chóng mà không cần truy vấn lại.
- Bộ nhớ Cache trang: Khi một trang WordPress được tải, hệ thống tạo ra một HTML tĩnh cho mỗi trang chỉ một lần và lưu trữ nó trong cache.
Đọc thêm: https://quicksite.vn/kien-thuc-ve-cache-tai-sao-website-can-phai-cache/
Sử dụng Plugin tối ưu hóa và Cache
Có nhiều plugin WordPress cung cấp giải pháp caching đa dạng kết hợp với tính năng tối ưu hóa mã như minification, ghép nối và trì hoãn script, tối ưu hóa hình ảnh… Một số plugin phổ biến bao gồm FlyingPress, Perfmatters, Swift Performance AI).
Caching CDN
Mạng phân phối nội dung (CDN) là một mạng lưới các máy chủ toàn cầu, giúp lưu trữ và phân phối các tài nguyên tĩnh của trang WordPress như CSS, JavaScript, hình ảnh, phông chữ và video. Sử dụng CDN có thể cải thiện hiệu suất bằng cách đảm bảo rằng các tài nguyên được tải từ vị trí gần nhất với người dùng, giảm độ trễ và giúp hình ảnh tải nhanh trên toàn thế giới. Ngoài ra, CDN cũng giúp tiết kiệm băng thông cho các trang có lượng truy cập cao.
Các loại CDN
- CDN truyền thống: Lưu trữ bản sao tài nguyên nhưng vẫn thực hiện yêu cầu trực tiếp đến máy chủ của bạn. Ví dụ: KeyCDN hoặc BunnyCDN.
- CDN proxy ngược: Chặn tất cả các yêu cầu đến và hoạt động như một trung gian giữa trình duyệt của người dùng và máy chủ của bạn, cung cấp thêm lớp bảo mật bằng cách chặn lưu lượng xấu. Ví dụ: Cloudflare (cùng với plugin WordPress của nó) và Sucuri.
Nhiều plugin caching như FlyingPress tích hợp sẵn CDN hoặc cung cấp tích hợp với các dịch vụ CDN khác như BunnyCDN.
Tối ưu hóa giao diện
Lựa chọn giao diện WordPress ảnh hưởng lớn đến hiệu suất. Hầu hết các giao diện đi kèm nhiều tính năng như phông chữ Google, biểu tượng, slider, thư viện hình ảnh, video và các script parallax.
Hãy tìm một giao diện nhẹ và nhanh chóng chỉ chứa những tính năng bạn thực sự cần. Nếu bạn quen với việc phát triển giao diện, hãy chọn một giao diện dễ dàng tùy chỉnh bằng cách tắt các tính năng không sử dụng. Xóa bỏ các script và CSS không cần thiết. Một số giao diện hỗ trợ tệp SCSS/Sass, giúp loại bỏ các phần không sử dụng và biên dịch lại CSS dễ dàng hơn.
Để đạt được thời gian tải trang khoảng 1 giây, cách tốt nhất là tự xây dựng giao diện từ đầu với ít thành phần thừa nhất có thể hoặc bắt đầu với một giao diện cơ bản được tối ưu hóa cho hiệu suất.
Tối ưu hóa truy vấn cơ sở dữ liệu
Để tối ưu hóa hiệu suất cho các trang không được cache, giảm thời gian tổng thể của truy vấn cơ sở dữ liệu là điều quan trọng nhất mà bạn có thể thực hiện.
Thời gian truy vấn tổng thể của một trang phụ thuộc vào số lượng truy vấn và thời gian chạy của từng truy vấn. Mục tiêu của việc tối ưu hóa là giảm cả số lượng truy vấn và thời gian thực hiện chúng. Điều này có thể thực hiện bằng cách loại bỏ các truy vấn không cần thiết và xóa bỏ các truy vấn trùng lặp. Việc này có thể thực hiện thông qua tối ưu hóa mã trong giao diện hoặc quyết định loại bỏ một số thành phần hoặc plugin.
Nén CSS, JavaScript và HTML
Để giảm lượng dữ liệu mà trình duyệt phải tải xuống, việc nén các tệp CSS, JavaScript và HTML là rất cần thiết. Bạn có thể thực hiện việc này bằng cách sử dụng các công cụ nén trực tuyến hoặc trong trình soạn thảo mã của bạn.
Các plugin caching và tối ưu hóa như Perfmatters hoặc FlyingPress cũng có tùy chọn nén mã.
Ngoài ra, bạn có thể kết hợp (concatenate) các tệp CSS và JavaScript để giảm số lượng tệp, nhưng nếu máy chủ của bạn sử dụng HTTP/2, hãy cẩn thận với điều này.
Tối ưu hóa phông chữ web
Nếu bạn sử dụng phông chữ tùy chỉnh trong giao diện, hãy hạn chế số lượng họ phông và trọng số phông (thường, nghiêng, đậm, v.v.). Mỗi trọng số phông đều có tệp riêng và chúng thường nặng.
Hầu hết các giao diện WordPress cho phép bạn chọn phông chữ Google từ cài đặt của giao diện. Tuy nhiên, hãy cẩn thận khi chọn quá nhiều phông chữ vì điều này có thể làm giảm hiệu suất. Một phương pháp tốt hơn là vô hiệu hóa tải phông Google trong giao diện của bạn và thêm chúng thủ công để kiểm soát tốt hơn.
Cách tốt nhất là lưu trữ phông chữ (Google) trên máy chủ của riêng bạn. Để làm điều này, bạn cần tải xuống và chuyển đổi chúng thành tệp phông web trước. Công cụ Google-webfonts-helper có thể giúp bạn thực hiện việc này.
Khi lưu trữ phông chữ Google tại chỗ, hãy kiểm tra hiệu suất và cân nhắc sử dụng CDN để phục vụ phông chữ. Việc phục vụ phông chữ từ máy chủ của riêng bạn có thể làm chậm tốc độ tải cho những người dùng ở xa nếu không sử dụng CDN.
Tối ưu hóa biểu tượng phông
Nếu giao diện của bạn sử dụng thư viện biểu tượng như Fontawesome, hãy lưu ý rằng các tệp phông cho các bộ biểu tượng này có thể khá nặng và ảnh hưởng đến hiệu suất. Thường thì bạn chỉ cần sử dụng một vài biểu tượng từ bộ biểu tượng đã tải.
Công cụ Icomoon là một lựa chọn tuyệt vời để tạo bộ biểu tượng tùy chỉnh nhỏ gọn. Bạn có thể chọn chỉ những biểu tượng mình cần và kết hợp chúng từ nhiều bộ khác nhau.
Giống như với phông chữ web, việc preload tệp biểu tượng và thiết lập tiêu đề Expires hoặc Cache-control dài hạn cũng là những biện pháp tốt để cải thiện hiệu suất.
Tối ưu hóa hình ảnh cho website
Hình ảnh thường chiếm từ 30% trở lên khối lượng tổng thể của một trang. Hình ảnh lớn hoặc số lượng hình ảnh nhiều trên website có thể làm chậm tốc độ tải trang đáng kể.
Tối ưu hóa hình ảnh là một chủ đề rộng với nhiều khía cạnh khác nhau. Dưới đây là một số hướng dẫn giúp bạn bắt đầu:
Chọn định dạng tệp phù hợp
JPG / JPEG vs WebP
- JPG: Là lựa chọn mặc định cho hình ảnh chụp. JPG có thể nén rất nhiều nhưng không phải là định dạng không mất dữ liệu, vì vậy bạn cần cẩn thận khi chọn mức nén để đảm bảo giữa kích thước tệp và chất lượng hình ảnh.
- WebP: Xem xét chuyển đổi (một số) hình ảnh sang định dạng WebP, vì nó có thể nhỏ hơn từ 25-35% so với JPG tương đương. Hầu hết các trình duyệt hiện đại và WP5.8+ đều hỗ trợ WebP.
Bạn có thể cung cấp WebP cho các trình duyệt hỗ trợ và sử dụng JPG làm phương án dự phòng. Đối với hình ảnh trong HTML, bạn có thể sử dụng thuộc tính srcset như sau:
<picture>
<source srcset="/wp-content/uploads/WebPImage.webp" type="image/webp">
<source srcset="/wp-content/uploads/JPGFallbackImage.jpg" type="image/jpeg">
<img src="/wp-content/uploads/JPGFallbackImage.jpg" alt="Alt Text">
</picture>PNG
Đối với hình ảnh đồ họa với ít màu sắc, PNG thường là định dạng tốt hơn nếu bạn muốn giảm kích thước tệp. Hình minh họa đồ họa, logo, v.v., đều là ứng cử viên tốt cho PNG. PNG không mất dữ liệu và có thể hỗ trợ độ trong suốt một phần.
SVG
Các hình ảnh vector (được tạo ra từ các chương trình như Adobe Illustrator, Figma) thường được phục vụ dưới dạng SVG. SVG rất nhẹ và có thể mở rộng vô hạn mà không làm giảm chất lượng. SVG được hỗ trợ trên tất cả các trình duyệt chính.
Tối ưu hóa hình ảnh trước khi tải lên
Bước đầu tiên để giảm kích thước tệp hình ảnh là chuẩn bị hình ảnh đúng cách trước khi tải lên. Xác định kích thước lớn nhất (thường là chiều rộng) mà hình ảnh sẽ được sử dụng trên trang và cắt hình ảnh theo kích thước đó. Sau đó, nén hình ảnh đến mức chất lượng chấp nhận được.
- JPG: Chọn mức chất lượng dưới 100%. Thông thường, từ 60-75% là mức hợp lý để giữ chất lượng hình ảnh và giảm kích thước tệp.
- PNG: Có thể tối ưu hóa đáng kể bằng các công cụ như TinyPNG.
Sử dụng kích thước hình ảnh tối ưu trong mẫu của bạn
Khi bạn tải lên hình ảnh đã được tối ưu hóa, WordPress sẽ tự động tạo ra nhiều kích thước khác nhau cho hình ảnh đó. Mặc định, nó tạo ra bốn kích thước khác nhau:
- Kích thước thu nhỏ: 150px (hình vuông).
- Kích thước trung bình: Chiều rộng và chiều cao tối đa 300px.
- Kích thước lớn: Chiều rộng và chiều cao tối đa 1024px.
- Kích thước đầy đủ: Kích thước gốc của hình ảnh.
Bạn có thể sử dụng các kích thước này trong mẫu của mình. Nếu các kích thước mặc định không phù hợp với bố cục của bạn, bạn có thể thay đổi kích thước trong Cài đặt > Phương tiện.
Sử dụng hình ảnh đáp ứng với thuộc tính srcset
Từ phiên bản 4.4, WordPress đã hỗ trợ hình ảnh đáp ứng với thuộc tính srcset. Điều này cho phép trình duyệt chọn và hiển thị kích thước hình ảnh tối ưu cho bố cục tương ứng với thiết bị.
Phục vụ hình ảnh với lazy loading
Lazy loading là kỹ thuật tải nội dung hiển thị trước và trì hoãn việc tải nội dung không hiển thị (“dưới fold”). Điều này có thể tác động lớn đến tốc độ tải trang nếu bạn có nhiều hình ảnh ở dưới.
Bạn có thể sử dụng các plugin như ShortPixel hoặc Perfmatters hoặc FlyingPress để thực hiện lazy loading trên WordPress.
Từ phiên bản 5.5, WordPress tự động thêm thuộc tính lazy loading vào các thẻ <img> và <iframe>.
Sử dụng plugin tối ưu hóa hình ảnh
Có nhiều plugin tối ưu hóa hình ảnh tốt kết hợp nhiều kỹ thuật như giảm kích thước, nén, chuyển đổi định dạng và tái tạo kích thước hình ảnh trong thư viện phương tiện của bạn.
Bằng cách áp dụng những mẹo trên, bạn sẽ cải thiện hiệu suất website của mình đáng kể!
Loại bỏ Render-Blocking JavaScript và CSS
Tối ưu hóa trang web có thể đạt được bằng cách tải các tệp JavaScript và CSS cụ thể “không đồng bộ” hoặc “hoãn lại”, nghĩa là tải sau trong quá trình tải trang vì chúng không cần thiết ngay lập tức hoặc chỉ cho nội dung “dưới gấp”. Bằng cách này, chúng không chặn quá trình hiển thị phần nhìn thấy của trang.
JavaScript Render-Blocking
Đối với các tệp JavaScript, bạn có thể thêm thuộc tính defer hoặc async vào các phần tử script.
- Thuộc tính defer: Thông báo cho trình duyệt chờ tải tệp cho đến khi việc phân tích HTML hoàn tất. Sau khi trình duyệt hoàn thành việc phân tích HTML, nó sẽ tải và hiện thực hóa tất cả các script đã hoãn lại theo thứ tự xuất hiện trong tài liệu.
- Thuộc tính async: Cho phép trình duyệt bắt đầu tải tài nguyên ngay lập tức mà không làm chậm quá trình phân tích HTML. Khi tài nguyên có sẵn, việc phân tích HTML sẽ tạm dừng để tải tài nguyên đó.
CSS Render-Blocking
Loại bỏ CSS chặn đầu ra phức tạp hơn. Bạn cần cẩn thận để không trì hoãn CSS cần thiết cho việc hiển thị nội dung “trên gấp”. Kỹ thuật này nhằm mục đích hiển thị nội dung trên gấp với CSS được cung cấp trực tiếp trong HTML. Sau đó, sử dụng thuộc tính “media” trên các phần tử liên kết CSS để xác định các tệp CSS chỉ nên được tải cho các thiết bị hoặc tình huống cụ thể. Các tệp CSS còn lại nên được tải không đồng bộ bằng cách thêm chúng với JavaScript đã hoãn lại hoặc không đồng bộ.
Chẩn đoán vấn đề Render-Blocking
Tình hình này có thể trở nên phức tạp nhanh chóng. May mắn thay, các plugin tối ưu hóa như FlyingPress và Perfmatters cung cấp cài đặt để hoãn lại và không đồng bộ các script và CSS. Tuy nhiên, hãy cẩn thận rằng việc tải script với async hoặc defer có thể thay đổi thứ tự và thời gian tải của các script, dẫn đến một số vấn đề với các script khác hoặc plugin không hoạt động đúng nữa. Hãy kiểm tra tất cả chức năng sau khi thực hiện điều này.
Bạn có thể kiểm tra xem trang của bạn có tài nguyên chặn đầu ra hay không bằng PageSpeed Insights (web.dev) hoặc các công cụ thay thế khác.
Hướng dẫn của Kinsta: How to Eliminate Render-Blocking Resources on WordPress (kinsta.com)
Sử dụng gợi ý và chỉ thị tài nguyên
Các gợi ý và chỉ thị tài nguyên như preload, dns-prefetch và preconnect có thể mang lại lợi ích hiệu suất bằng cách tải trước và tải tài nguyên nhất định.
- Preload: Cung cấp kiểm soát về cách tải một số tài nguyên. Nó cho phép các tài nguyên được khởi động qua CSS hoặc JavaScript được tải trước và xác định khi nào mỗi tài nguyên nên được áp dụng.
<link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>- Prefetch vs Preload: Prefetch là một gợi ý cho trình duyệt rằng một tài nguyên có thể cần thiết, nhưng quyết định về việc có nên tải nó hay không là do trình duyệt. Ngược lại, preload là một yêu cầu rõ ràng, cho phép bạn buộc trình duyệt gửi yêu cầu mà không làm chậm sự kiện onload của tài liệu.
- DNS-prefetch: Thực hiện tìm kiếm DNS trong nền trước khi người dùng nhấp vào liên kết, giúp cải thiện hiệu suất. Điều này chỉ hiệu quả cho các tìm kiếm DNS trên miền khác. Bạn có thể bật điều này bằng cách thêm thẻ liên kết với thuộc tính
rel="dns-prefetch"trong phần đầu của trang web WordPress của bạn.
<link rel="dns-prefetch" href="//cdn.domain.com/">
<link rel="dns-prefetch" href="//fonts.googleapis.com/">
<link rel="dns-prefetch" href="//google-analytics.com">- Preconnect: Giúp trình duyệt tạo kết nối sớm trước khi gửi yêu cầu HTTP, giảm thiểu độ trễ vòng đi vòng lại và tiết kiệm thời gian. Preconnect có thể được thực hiện bằng cách thêm thẻ liên kết với thuộc tính
rel="preconnect"vào các tài nguyên liên kết trong phần đầu của trang WordPress của bạn.
Công cụ chẩn đoán và tối ưu
Có nhiều công cụ giúp bạn chẩn đoán và tối ưu hóa các vấn đề về tốc độ tải trang và hiệu suất. Dưới đây là tổng quan về các công cụ đã đề cập:
Công cụ máy chủ và DNS: Kiểm tra tính năng của máy chủ như HTTP/2, nén Gzip/Brotli và hiệu suất DNS. (KeyCDN HTTP/2 test, DNSperf, Gzip compression test, Gzip + Brotli compression test, KeyCDN Brotli compression test)
Công cụ WordPress và Query: Kiểm tra hiệu suất của WordPress, chủ đề và truy vấn cơ sở dữ liệu. (Database My Admin, Advanced Database Cleaner plugin, Mysqltuner, WP Sweep plugin, Query Monitor plugin, Xdebug, Debug Bar plugin, Crontab Generator)
Công cụ nén mã: Giúp nén và tối ưu hóa CSS, JavaScript và HTML. (JavaScript compression/minification, CSS compression/minification)
Công cụ tối ưu hóa hình ảnh: Giúp tối ưu hóa kích thước và định dạng hình ảnh trên trang web. (ShortPixel, EWWW Optimizer, TinyPNG, Canva)
Plugin caching và tối ưu hóa: Kết hợp nhiều tối ưu hóa khác nhau trong một giao diện duy nhất. (FlyingPress, Perfmatters, Swift Performance AI)
Công cụ kiểm tra tốc độ và hiệu suất: Đánh giá tốc độ tổng thể của trang web và đưa ra khuyến nghị cải thiện. (Google PageSpeed Insights, GTmetrix, Pingdom Tools, WebPageTest)
Áp dụng những kỹ thuật này sẽ giúp cải thiện đáng kể hiệu suất trang web của bạn.
