Tối ưu tốc độ website dễ như ăn kẹo

6 Likes Bình luận
Làm thế nào để cải thiện tốc độ website? - Ảnh: bangnguyen.net

Tốc độ tải trang là một trong những tiêu chí quan trọng trong phát triển web. Nếu chờ quá 5 giây để load trang, tỷ lệ khách hàng rời bỏ website của bạn có thể lên đến 70%.

Vậy làm cách nào để cải thiện tốc độ load trang mà không làm ảnh hưởng đến các thành phần của web? Bài viết sau sẽ giúp bạn tìm ra cách tối ưu tốc độ website một cách hiệu quả

1. Phân tích tình trạng website

Công cụ PageSpeed Insights của Google. - Ảnh: bangnguyen.net Công cụ PageSpeed Insights của Google. – Ảnh: bangnguyen.net

Có rất nhiều công cụ miễn phí giúp phân tích chi tiết các thông số website của bạn như GTmetrix, Pingdom… Trong bài viết này, mình sẽ sử dụng công cụ PageSpeed Insights của Google:

Bạn chỉ cần vào developers.google.com/speed/pagespeed/insights/ sau đó nhập url của trang bạn muốn phân tích rồi nhấn enter và chờ kết quả.

Kết quả sẽ được phân tích cho cả giao diện desktop và mobile sẽ giúp bạn có một cái nhìn tổng quát về những vấn đề cần giải quyết để cải thiện tốc độ website trên mọi thiết bị.

 

2. Tối ưu từng thành phần website

Sau khi phân tích, google sẽ cho bạn biết những thành phần nào đang làm giảm tốc độ load trang của bạn, một số vấn đề gây cản trở tốc độ load trang thường gặp là:

  • Eliminate render-blocking JavaScript and CSS in above-the-fold content (các file stylesheet và javascript phải load hoàn tất trước khi trình duyệt render trang người dùng truy cập)
  • Leverage browser caching (sử dụng bộ nhớ đệm để trình duyệt không phải donwload nhiều tài nguyên từ server)
  • Enable compression (nén các thành phần website để tăng tốc độ tải)
  • Minify CSS, Javascript, HTML (tối giản hóa các file css, js, hmtl làm giảm kích cỡ tập tin)
  • Optimize Images (nén hình ảnh)
  • Reduce server response time (giảm thời gian phản hồi của máy chủ)

Khi đã xác định được những vấn đề trang web của mình đang gặp phải, chúng ta sẽ lần lượt giải quyết từng hạng mục một.

Cách tối ưu phân phối javascript:

Thông thường website của chúng ta có nhiều hơn 1 tập tin css, và nếu có quá nhiều tập tin sẽ khiến trình duyệt phải ra nhiều lệnh yêu cầu tải lên server, đồng nghĩa với việc tốc độ load trang sẽ giảm đi. Cách khắc phục hiệu quả nhất là xóa hoặc gộp các tập tin này lại sao cho số file và kích cỡ một file tối ưu nhất có thể.

Về javascript, hiện có 2 kỹ thuật giúp việc load các file này không ảnh hưởng đến tốc độ tải trang:

  • Thuộc tính async: file javascript sẽ được thực thi trong lúc trang web được render (chứ không phải tải xong mới thực thi). Có thể hiểu như trong lúc trang web được hiện ra thì cũng là lúc các file javascript này được tải.
  • Thuộc tính defer: trang web được hiển thị, sau đó các file javascipt được load và chỉ khi trong trang web có thành phần sử dụng javascipt thì các tập tin .js mới được thực thi. (Khuyên dùng)

Cách sử dụng như sau:

<script src="ten_tap_tin.js" async></script>

<script src="ten_tap_tin.js" defer></script>

Nếu bạn sử dụng wordpress, có một cách nhanh hơn để tự động thêm thuộc tính defer cho tất cả các file javascript. Chỉ cần thêm đoạn code sau vào file functions.php

add_filter('clean_url', function($url)
{
if (FALSE === strpos($url, '.js')) { // not our file
return $url;
}
return "$url' defer='defer";
}, 11, 1);

Đơn giản phải không nào?

Cách tối ưu phân phối css stylesheet:

Hiện tại, một số ít trình duyệt như Chrome, Firefox, Microsoft Edge đã hỗ trợ thuộc tính preload cho định dạng css giúp tối ưu tốc độ dựng trang (các tập tin .css sẽ được tải sau khi trình duyệt dựng cấu trúc html của trang). Tuy nhiên, theo thống kế, hiện tại chỉ có 0.18% người dùng cài đặt trình duyệt hỗ trợ thuộc tính này. Cách ử dụng hết sức đơn giản:

<!-- cách 1: sử dụng link thông thường -->
<link rel="preload" href="/styles/ten_file.css" as="style">

<!-- cách 2,sử dụng JavaScript -->
<script>
var res = document.createElement("link");
res.rel = "preload";
res.as = "style";
res.href = "styles/ten_file.css";
document.head.appendChild(res);
</script>

Một phương pháp hiệu quả khác là cài đặt loadCSS lên website của bạn. loadCSS là một dự án miễn phí được phát triển bởi @scottjehl. Cách sử dụng hết sức đơn giản, bạn chỉ cần cài loadCSS.js lên website của bạn:

Cách tối ưu hình ảnh trong website:

Một điều quan trong mà chúng ta thường bỏ qua đó là kích cỡ hình ảnh tải lên, ngay cả những hình ảnh có độ phân giản phù hợp cho website cũng có thể được tối ưu giảm kích cỡ tập tin.

Trong wordpress có một plugin tuyệt vời giúp bạn tối ưu hình ảnh, đó là EWWW Image Optimizer. Sau khi kích hoạt plugin, bạn có thể vào Media/Bulk optimize để bắt đầu tối ưu hình ảnh cho website. Ngoài ra, plugin còn hỗ trợ tự động tối ưu hình ảnh được upload sau đó giúp bạn tiết kiệm nhiều thời gian.

Trong trường hợp website của bạn không dùng nền tàng WordPress, bạn có thể cài đặt phần mềm Robo resize lên máy tính, tuy nhiên phần mềm chỉ hỗ trợ tối ưu hình ảnh được tải lên sau này chứ không thể quét và tối ưu các hình ảnh tải lên trước đó trên server của bạn.

Cách nén HTML trong WordPress:

Có rất nhiều plugin giúp bạn nén các thành phần thừ HTML đến CSS, Javascript như Better WordPress Minify, WP Super minify… song việc cài thêm quá nhiều plugin khiến website của bạn trở nên chậm chạp. Vì vậy, cách tốt nhất là thêm một hàm vào functions.php.

Việc nén HTML giúp giảm dung lượng tải cho trình duyệt, giúp tốc độ load trang nhanh hơn. Để thực hiện điều này, truy cập link này.

Cách giảm dung lượng file css, js:

Điều tiếp theo bạn có thể làm để cải thiện tốc độ website là giảm dung lượng các file css và js. Thông thường các file css hay javascript đều được hiển thị dưới dạng dòng có định dạng, việc này khiến thao tác chỉnh sửa dễ dàng nhưng lại làm dung lượng file tăng lên (do chứa các dấu cách và xuống dòng không cần thiết).

Ví dụ nội dung như sau:

.bangnguyen {
	background: #f2f2f2;
	border: 1px solid black;
	font-size: 14px;
}

Sẽ được nén thành:

.bangnguyen{background:#f2f2f2;border:1px solid black;font-size:14px}

Bạn có thể nén các file css, javascrip bằng các công cụ online sau:

Bạn chỉ cần copy nội dung file cần nén và nhấn Minify để công cụ tiến hành nén file, sau đó copy  code đã được nén đè vào nội dung file cũ và lưu. Bạn sẽ ngạc nhiên vì dung lượng file được giảm đi đáng kể đó!

Bạn cũng sẽ thích

Bằng Nguyễn

Bạn muốn tìm kênh đầu tư bền vững lâu dài và an toàn? Hãy mời tôi một ly cà phê và tôi sẽ chia sẻ cho bạn. Liên hệ tại đây

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *