Hướng dẫn tối ưu hóa tốc độ website WordPress

Tháng Tư 7, 2024

XDIGI

Tốc độ website luôn là sự quan tâm hàng đầu của các webmaster. Không chỉ ảnh hưởng đến việc SEO, mà nó còn dễ dàng làm khách truy cập thiếu kiên nhẫn thoát ra ngoài. Để cải thiện website bạn có thể lên AMP (Accelerated Mobile Pages) của Google. Tuy nhiên với AMP thì nó không cho phép Javascript hoạt động, và chỉ hiển thị tìm kiếm trên thiết bị di dộng. Để khắc phục tốc độ website bạn chỉ còn cách tự tối ưu trang web của mình thôi.

Những yếu tố ảnh hưởng đến tốc độ website

Có nhiều yếu tố khách quan và chủ quan ảnh hưởng đến tốc độ của website. Các yếu tố khách quan thông thường là do internet nơi người dùng truy cập không được mạnh, vấn đề này chúng ta không thể làm gì được, và chúng cũng chỉ ảnh hưởng đến một lượng nhỏ người truy cập website của bạn, nhưng yếu tố chủ quan khiến website của bạn chậm đi xuất phát từ trang web của bạn sẽ ảnh hưởng đến hầu hết người dùng. Một trong những yếu tố đó như sau.

Chuyển hướng trang: URL sau khi truy cập bị chuyển hướng sang một URL khác. Đây là một trong những nguyên nhân khiến website của bạn chậm đi.
CSS quá nhiều: Để thiết kế một website đẹp thường cần dùng rất nhiều css, tuy nhiên quá nhiều css chồng lấn sẽ khiến website của bạn chậm đi một chút. Tuy nhiên đây chỉ là một đề xuất và nó chỉ tốn có vài mili giây thôi nên mình nghĩ bỏ qua cũng được.
JavaScript quá nhiều: JavaScript là mã kịch bản phía máy khách, tức là nó sẽ được máy tính tải về và trình duyệt sẽ xử lý chứ không phải do server. Tuy nhiên, điều này đều ảnh hưởng đến khách truy cập của bạn và google xem nó như nguyên nhân khiến website của bạn trở nên chậm đi.
HTML thiết kế phức tạp: Bạn nên lựa chọn những source code đơn giản hoặc gọn gàn và hãy loại bỏ đi tất cả mọi thứ không cần thiết ví dụ như ghi chú. Các lập trình viên thường ghi chú rất nhiều để dễ dàng theo dõi và chỉnh sửa, nhưng khi thực thi hãy loại bỏ chúng để giảm thiểu tối đa kích thước tệp.
Thời gian phản hồi của máy chủ lâu: Điều này không nằm hoàn toàn vào khả năng của bạn, nhưng ban đầu nếu lựa chọn nhà cung cấp dịch vụ tốt thì điều này cũng không quá lo lắng.
Hình ảnh có kích thước quá lớn: Hình ảnh kích thước lớn không phù hợp với màng hình sẽ làm lãng phí và nặng hơn cho việc tải về, hãy tối ưu nó để phù hợp hơn.
JavaScript chặn hiển thị (Render-Blocking JavaScript): Những tệp này thường được tải trước nội dung do thường được để ở phần header. Hãy xem cách sửa nó ở bên dưới.

Cách khắc phục để tăng tốc độ website

Tránh các chuyển hướng trang đích

Ví dụ bạn truy cập website Example.com nhưng sau đó được chuyển hướng đến m.example.com/home. Quá trình này tuy nhanh nhưng điều này sẽ tạo ra 2 lần yêu cầu phản hồi http. Ngoài ra có thể nó sẽ tra cứu DNS, bắt tay TCP và đàm phán TLS một lần nữa để kết thúc chu trình đến trang đích. Việc tránh chuyển hướng bạn có thể dễ dàng kiểm soát được bằng mã nguồn của website.

Bật nén

Các nội dung được nén trước khi gửi về client không những giúp tốc độ website được nhanh hơn mà băng thông cũng được giảm đi một ít. Thay vì trình duyệt phải tải một tệp css 34kb thì sau khi nén nó chỉ còn khoảng 8kb.

Để bật nén bạn có thể sử dụng nhiều cách như sử dụng cách nén GZIP trong .htaccess của apache, file config trên NGINX, plugin W3 Total Cache hay WP Super Cache trên WordPres, hoặc kích hoạt tính năng nén trên host nếu có hỗ trợ.

Mình thường sử dụng đoạn PHP này để nén, nó nhanh chóng, đơn giản và có thể sử dung cho nhiều website trên nhiều loại server khác nhau.

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

Tuy nhiên bật nén cũng sẽ có một số nhược điểm như các trình duyệt cũ sẽ không thể đọc được, CPU máy chủ của bạn sẽ phải hoạt động rất nhiều để nén dữ liệu gửi cho client. Giảm thiểu hết mức cần thiết là tốt nhất.

Tối ưu hóa hình ảnh

Tối ưu hóa hình ảnh cũng có nhiều cách, một trong những cách thường được sử dụng đó là lựa chọn độ phân giải phù hợp với kích thước màng hình. Ví dụ bạn có 3 tấm hình giống nhau nhưng kích thước lần lượt là: tấm A 1000×300, tấm B 600×100 và tấm C 350×50, bạn sẽ cho nó tải tấm có kích thước gần nhất với màng hình hiển thị. Đoạn mã ví dụ:

<picture id="images">
   <source media="(min-width: 900px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source media="(min-width: 300px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
</picture>

Lưu vào bộ nhớ cache trong trình duyệt

Các tệp file ít thay đổi như css, js,… thường được yêu cầu lưu cache để truy cập được nhanh hơn do không phải tải lại những file này ở những lần truy cập sau. Sử dụng plugin W3 Total Cache hay WP Super Cache trên WordPres là một trong những cách lưu cache tốt nhanh nhất.

Ưu tiên nội dung hiển thị

Điều này có nghĩa là bạn nên ưu tiên hiển thị nội dung quan trọng trước khi tải các phần khác. Bạn hãy thử Ctr+F5 trên website mình, ngay từ đầu bạn sẽ thấy một đống text hiển thị mà chưa hiển thị ra hình hài của một website, sau đó thì mọi thứ được hiển thị đầy đủ. Đây là vì mình đã cho tải toàn bộ các file css và js sau khi hoàn tất việc tải HTML.

Bạn có thể làm theo cách sau. Đây cũng là cách loại bỏ JavaScript chặn hiển thị

 <script>
   var loadDeferredStyles = function() {
   var addStylesNode = document.getElementById("deferred-styles");
   var replacement = document.createElement("div");
   replacement.innerHTML = addStylesNode.textContent;
   document.body.appendChild(replacement)
   addStylesNode.parentElement.removeChild(addStylesNode);
   };
   var raf = requestAnimationFrame || mozRequestAnimationFrame ||
   webkitRequestAnimationFrame || msRequestAnimationFrame;
   if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
   else window.addEventListener('load', loadDeferredStyles);
 </script>

<noscript id="deferred-styles">
  //Đặt toàn bộ file css, js vào vùng này
</noscript>

Tuy nhiên với cách làm trên nhiều lúc giao diện của bạn sẽ bị hỏng do các tệp javascript thường không được thực thi ngay và dễ gây ra các lỗi.

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

Điều này thì chúng ta rất khó kiểm soát được. Đa phần là do việc lựa chọn nhà cung cấp dịch vụ. Bạn nên xem các review từ các website uy tín hoặc hỏi thử một số người đã từng dùng để lựa chọn được nhà cung cấp dịch vụ tốt nhất.