Nối tiếp series về tối ưu hiệu suất trang web thì hôm nay mình xin phép đề cập đến một metric khá quan trọng trong việc đánh giá hiệu suất trang web đó chính là Time to Interactive (TTI). Vậy TTI là gì, tại sao nó lại quan trọng và có thể cải thiện chỉ số này bằng cách nào ? Bài viết ngày hôm nay sẽ trả lời cho các câu hỏi trên và không dài dòng nữa, chúng ta cùng nhau đi tìm hiểu thôiii.

1. Time to Interactive (TTI) là gì?

Time to Interactive (TTI) là một trong những chỉ số quan trọng khi đánh giá hiệu suất trang web, đặc biệt là đối với các ứng dụng web có tính tương tác cao. TTI đo khoảng thời gian từ lúc trang bắt đầu tải cho đến khi nó trở nên hoàn toàn tương tác. Đây là thời điểm mà các thành phần chính của trang đã hiển thị và JavaScript ban đầu đã được thực thi xong, cho phép người dùng thực hiện các hành động như nhấp chuột, nhập liệu, hoặc cuộn trang mà không gặp phải độ trễ đáng kể.

2. Tại sao Time to Interactive quan trọng ?

TTI quan trọng vì nó liên quan trực tiếp đến trải nghiệm người dùng. Khi TTI dài, trang web có thể xuất hiện hoàn tất tải trên giao diện người dùng nhưng vẫn không phản hồi được các thao tác, gây ra sự khó chịu và thất vọng cho người dùng. Đặc biệt, trong những trường hợp trang web thương mại điện tử hoặc ứng dụng web đòi hỏi sự tương tác nhanh chóng, TTI dài có thể làm giảm tỷ lệ chuyển đổi, tăng tỷ lệ thoát trang và ảnh hưởng xấu đến doanh thu và sự hài lòng của khách hàng.

Ngoài ra, TTI cũng ảnh hưởng đến xếp hạng SEO trên các công cụ tìm kiếm như Google. Google đã xác định rằng trải nghiệm người dùng tốt là yếu tố quan trọng trong việc xếp hạng trang web, và TTI là một trong những chỉ số đo lường trải nghiệm này. Do đó, việc tối ưu hóa TTI không chỉ cải thiện UX mà còn có thể tăng cường hiệu quả SEO.

3. Các yếu tố ảnh hưởng đến Time to Interactive

TTI bị ảnh hưởng bởi nhiều yếu tố khác nhau, bao gồm:

1. Mã JavaScript lớn và phức tạp: Khi trang web tải mã JavaScript lớn hoặc phức tạp, trình duyệt phải mất thời gian dài để tải và thực thi mã này trước khi trang có thể trở nên tương tác. Điều này có thể kéo dài thời gian TTI.

2. Trình tự tải tài nguyên không tối ưu: Việc tải tài nguyên theo thứ tự không tối ưu, chẳng hạn như tải mã JavaScript đồng bộ trong khi đang tải trang, có thể làm chậm quá trình hiển thị và tương tác.

3. Tác vụ JavaScript nặng nề: Các tác vụ JavaScript chạy lâu và nặng nề, chẳng hạn như tính toán phức tạp hoặc thao tác với DOM lớn, có thể làm trì hoãn khả năng tương tác của trang.

4. Hiệu suất máy chủ và mạng: Tốc độ phản hồi của máy chủ và chất lượng mạng ảnh hưởng đến tốc độ tải tài nguyên, từ đó ảnh hưởng đến TTI. Máy chủ chậm hoặc mạng kém có thể làm chậm quá trình tải trang và tài nguyên cần thiết để đạt TTI.

5. Hiệu suất của thiết bị người dùng: Các thiết bị cũ hoặc có hiệu suất thấp thường gặp khó khăn trong việc xử lý các tác vụ phức tạp, dẫn đến TTI dài hơn so với các thiết bị hiện đại và mạnh mẽ hơn.

4. Cách cải thiện Time to Interactive

Cải thiện TTI yêu cầu một chiến lược toàn diện bao gồm tối ưu hóa mã, tối ưu hóa quy trình tải tài nguyên, và sử dụng các kỹ thuật tiên tiến để cải thiện hiệu suất tổng thể. Dưới đây là một số phương pháp cụ thể để cải thiện TTI:

1. Tối ưu hóa và giảm tải JavaScript:

• Code Splitting (Chia nhỏ mã): Chia mã JavaScript thành nhiều phần nhỏ hơn và chỉ tải những phần cần thiết khi trang đầu tiên tải. Sử dụng các công cụ như Webpack để thực hiện code splitting. Điều này giúp giảm kích thước của bundle JavaScript ban đầu, giảm thời gian tải và cải thiện TTI.

  • Cách thức hoạt động:
    • Entry Points: Xác định các điểm nhập (entry points) trong ứng dụng của bạn, chẳng hạn như các trang hoặc các tính năng chính.
    • Dynamic Imports: Sử dụng tính năng import động của JavaScript để tải các module JavaScript chỉ khi chúng thực sự cần thiết. Ví dụ, bạn có thể tải mã JavaScript của một trang khi người dùng thực sự truy cập vào trang đó, thay vì tải toàn bộ mã cho tất cả các trang ngay từ đầu.
    • Split Chunks Plugin (Webpack): Công cụ như Webpack cung cấp Split Chunks Plugin để chia tách mã JavaScript thành các phần riêng biệt. Bạn có thể cấu hình Webpack để tạo ra các bundle nhỏ hơn dựa trên các yếu tố như module sử dụng chung, kích thước tệp, hoặc các điểm nhập được xác định trước.
  • Lợi ích:
    • Giảm kích thước bundle ban đầu: Chỉ tải các phần mã cần thiết giúp giảm kích thước của bundle JavaScript ban đầu, giảm thời gian tải trang và cải thiện TTI.
    • Tăng cường khả năng tái sử dụng mã: Code Splitting cho phép các phần mã được sử dụng lại trên nhiều trang, giúp tối ưu hóa việc sử dụng bộ nhớ cache của trình duyệt và giảm tải cho máy chủ.

• Tree Shaking: Sử dụng tree shaking để loại bỏ mã JavaScript không sử dụng khỏi bundle. Điều này giúp giảm kích thước tệp và tăng tốc độ thực thi mã.

  • Cách thức hoạt động:

    • ES6 Module System: Tree Shaking hoạt động hiệu quả với hệ thống module ES6 (sử dụng import và export). Nó phân tích cú pháp mã nguồn để xác định các phần mã nào thực sự được sử dụng và loại bỏ những phần mã không cần thiết khỏi bundle cuối cùng.
    • Bundler Optimization: Các công cụ đóng gói như Webpack và Rollup có tính năng Tree Shaking tự động khi xây dựng ứng dụng, giúp tối ưu hóa mã JavaScript và giảm kích thước bundle.

  • Lợi ích:

    • Giảm kích thước mã JavaScript: Loại bỏ mã không cần thiết giúp giảm kích thước tổng thể của bundle, từ đó cải thiện thời gian tải và TTI.
    • Hiệu suất tốt hơn: Giảm số lượng mã cần thực thi giúp trình duyệt tải và xử lý trang nhanh hơn, cải thiện trải nghiệm người dùng.

  • Ví dụ với Webpack:

    Đảm bảo sử dụng các module ES6 (import và export) để Webpack có thể thực hiện tree shaking:

math.js:

// utils.js
export function unusedFunction() {
  // Đây là một hàm không sử dụng
}

export function usedFunction() {
  console.log('Hàm này được sử dụng');
}

// main.js
import { usedFunction } from './utils';

usedFunction();  // Chỉ hàm này sẽ có trong bundle sau khi tree shaking

index.js:

import { add } from './math';

console.log(add(2, 3));

webpack.config.js:

// webpack.config.js

const path = require('path');

module.exports = {
  mode: 'production', // Đảm bảo là chế độ 'production' để kích hoạt Tree Shaking
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    usedExports: true, // Cấu hình này cho phép Webpack đánh dấu các exports được sử dụng
  },
};

Chạy lệnh build với Webpack:

npx webpack --config webpack.config.js

Sau khi chạy lệnh này, Webpack sẽ phân tích mã nguồn và loại bỏ các hàm multiply và unusedFunction khỏi bundle.js vì chúng không được sử dụng.

2. Tối ưu hóa tải tài nguyên không đồng bộ:

• Defer và Async cho JavaScript: Sử dụng thuộc tính defer hoặc async cho các thẻ <script> để trì hoãn việc thực thi mã JavaScript cho đến khi trang đã tải xong. async sẽ tải và thực thi các script không đồng bộ ngay khi chúng được tải xong, trong khi defer sẽ chỉ thực thi sau khi trang đã được phân tích cú pháp xong.
• Lazy Loading: Áp dụng kỹ thuật lazy loading để trì hoãn việc tải hình ảnh và nội dung không cần thiết cho quá trình tải ban đầu. Điều này giúp trang tải nhanh hơn và đạt đến trạng thái tương tác sớm hơn.

3. Tối ưu hóa CSS:

• Critical CSS: Xác định và chỉ tải các phần CSS cần thiết cho việc hiển thị phần trên cùng của trang (above-the-fold content) trước tiên. Điều này giúp giảm thời gian để nội dung chính của trang trở nên hiển thị và tương tác nhanh chóng hơn.
• Minify và Compress CSS: Giảm kích thước CSS bằng cách nén và loại bỏ các đoạn mã không cần thiết, từ đó tăng tốc độ tải trang.

4. Sử dụng Service Workers và các kỹ thuật caching:

• Service Workers: Sử dụng service workers để cache các tài nguyên tĩnh và phản hồi nhanh chóng từ cache thay vì yêu cầu mạng. Điều này có thể giảm thời gian tải lại trang và cải thiện TTI, đặc biệt khi người dùng có kết nối mạng yếu hoặc không ổn định.
• Caching thông minh: Sử dụng các chiến lược caching để lưu trữ dữ liệu tĩnh lâu dài và chỉ cập nhật những phần cần thiết, giúp giảm số lượng yêu cầu mạng và thời gian tải trang.

5. Tối ưu hóa hình ảnh và tài nguyên:

• Tối ưu hóa hình ảnh: Sử dụng các định dạng ảnh tối ưu như WebP, giảm kích thước ảnh mà không ảnh hưởng đến chất lượng, và áp dụng kỹ thuật lazy loading để chỉ tải ảnh khi người dùng cần.
• Kết hợp và nén tệp tài nguyên: Kết hợp các tệp CSS và JavaScript để giảm số lượng yêu cầu HTTP và sử dụng các công cụ như Gzip hoặc Brotli để nén tệp, từ đó tăng tốc độ tải trang.

6. Sử dụng CDN (Content Delivery Network):

• CDN: Triển khai nội dung qua CDN giúp phân phối tài nguyên từ các máy chủ gần nhất với người dùng, giảm độ trễ mạng và tăng tốc độ tải trang, từ đó cải thiện TTI.

7. Giảm tác vụ JavaScript nặng nề:

• Web Workers: Sử dụng Web Workers để chuyển các tác vụ JavaScript nặng và không liên quan đến giao diện người dùng sang một luồng riêng biệt, giúp ngăn chặn tình trạng treo ứng dụng và giảm thời gian chờ đợi của người dùng.
• Throttling và Debouncing: Sử dụng kỹ thuật throttling và debouncing để giảm tần suất thực thi các sự kiện JavaScript như cuộn chuột hoặc thay đổi kích thước cửa sổ, giúp giảm tải cho luồng chính của trình duyệt.

8. Giảm số lượng và độ phức tạp của yêu cầu mạng:

• Giảm số lượng yêu cầu HTTP: Kết hợp các tệp CSS và JavaScript để giảm số lượng yêu cầu HTTP. Ngoài ra, sử dụng các phương pháp như inline các đoạn mã quan trọng vào HTML để giảm số lượng yêu cầu đến máy chủ.
• Sử dụng HTTP/2: HTTP/2 cho phép tải song song nhiều tài nguyên từ cùng một kết nối, giúp giảm thời gian tải tổng thể và cải thiện TTI.

9. Theo dõi và phân tích hiệu suất:

• Công cụ đo lường hiệu suất: Sử dụng các công cụ như Lighthouse, WebPageTest, hoặc Chrome DevTools để theo dõi TTI và các chỉ số hiệu suất khác. Phân tích các dữ liệu thu thập được để xác định các điểm nghẽn và cải thiện hiệu suất trang.

Kết luận

Time to Interactive (TTI) là một chỉ số quan trọng trong việc đánh giá trải nghiệm người dùng và hiệu suất trang web. Bằng cách tối ưu hóa tải JavaScript, CSS, tài nguyên không đồng bộ, hình ảnh, và sử dụng các công nghệ tiên tiến như Service Workers và CDN, bạn có thể giảm TTI và cải thiện trải nghiệm người dùng một cách đáng kể. Trải nghiệm người dùng tốt hơn không chỉ làm tăng sự hài lòng của người dùng mà còn giúp tăng tỷ lệ chuyển đổi, giảm tỷ lệ thoát trang và cải thiện xếp hạng SEO. Điều này đặc biệt quan trọng trong bối cảnh cạnh tranh trực tuyến ngày càng gia tăng và người dùng ngày càng kỳ vọng vào hiệu suất cao từ các trang web và ứng dụng web. Hy vọng những chia sẻ trên đây có thể phần nào giúp được các bạn trong công việc, nếu thấy hay thì tiếc gì một follow để đón chờ các content tiếp theo về tối ưu hiệu suất trang web của mình. Cuối cùng thì cảm ơn các bạn đã giành thời gian đọc và chúc các bạn thành công 😁😁😁😁😁