Giới Thiệu

Time to First Byte (TTFB) là một chỉ số quan trọng trong việc đánh giá hiệu suất của một trang web. TTFB đo thời gian từ khi người dùng gửi yêu cầu đến khi nhận được byte dữ liệu đầu tiên từ máy chủ. Một TTFB thấp cho thấy máy chủ của bạn phản hồi nhanh chóng, cải thiện trải nghiệm người dùng và có thể tác động tích cực đến SEO. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về cách tối ưu TTFB để cải thiện hiệu suất trang web.

TTFB Là Gì?

TTFB bao gồm ba giai đoạn chính:

DNS Lookup:

Thời gian để trình duyệt xác định địa chỉ IP của máy chủ từ tên miền. Kết Nối Mạng:

Thời gian để thiết lập kết nối giữa trình duyệt và máy chủ, bao gồm quá trình bắt tay TCP và SSL/TLS (nếu có). Phản Hồi Máy Chủ:

Thời gian để máy chủ xử lý yêu cầu và gửi phản hồi đầu tiên.

Công thức tính TTFB:

TTFB = DNS Lookup + Kết Nối Mạng + Phản Hồi Máy Chủ

Nguyên Nhân Gây Ra TTFB Cao

• Thời Gian Xử Lý Máy Chủ Dài: Máy chủ của bạn có thể mất quá nhiều thời gian để xử lý yêu cầu do các vấn đề như cơ sở dữ liệu chậm, mã ứng dụng không hiệu quả hoặc thiếu bộ nhớ cache.
• Thời Gian Kết Nối Mạng Lâu: Thiết lập kết nối giữa trình duyệt và máy chủ có thể bị chậm do khoảng cách địa lý lớn hoặc hiệu suất mạng kém.
• DNS Lookup Chậm: Quá trình tìm kiếm DNS có thể kéo dài nếu máy chủ DNS không hiệu quả hoặc không được tối ưu hóa.

Cách Tối Ưu TTFB

1. Cải Thiện Thời Gian Xử Lý Máy Chủ Tối Ưu Hóa Mã Ứng Dụng

A. Sử Dụng Bộ Nhớ Cache

Sử dụng Redis:

Lưu trữ các trang đã render vào Redis để giảm tải cho máy chủ và tăng tốc độ phản hồi.

// Cài đặt redis và node-cache
const Redis = require('redis');
const redisClient = Redis.createClient();

// Middleware để kiểm tra cache
function cacheMiddleware(req, res, next) {
  const key = req.originalUrl;
  redisClient.get(key, (err, data) => {
    if (err) throw err;
    if (data !== null) {
      res.send(data);
    } else {
      next();
    }
  });
}

// Lưu trữ trang đã render vào cache
app.use(cacheMiddleware);
app.use(nuxt.render);
app.post('/store', (req, res) => {
  const key = req.originalUrl;
  const value = req.body;
  redisClient.setex(key, 3600, value); // Cache trong 1 giờ
  res.send('Stored in cache');
});

B. Sử Dụng Component-Level Caching (giả sử trong trường hợp sử dụng nuxtjs):

Sử dụng module cache của Nuxt để lưu trữ các component đã render.

// nuxt.config.js
modules: [
  'nuxt-cache'
],
cache: {
  useHostPrefix: false,
  pages: [
    /^\/$/, // cache trang chủ
    /^\/about$/ // cache trang giới thiệu
  ],
  store: {
    type: 'memory', // lưu trữ trong bộ nhớ
    max: 100,
    ttl: 60 * 60 // 1 giờ
  }
}

C. Tránh sử dụng các thư viện nặng, ưu tiện sử dụng dynamic import

Thay vì import toàn bộ thư viện, bạn có thể sử dụng dynamic imports để chỉ tải phần cần thiết khi cần.

// pages/index.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const data = await $axios.$get('/api/data');

    const _ = await import('lodash');
    const moment = await import('moment');

    const title = _.capitalize(data.title);
    const description = moment(data.date).format('MMMM Do YYYY, h:mm:ss a');

    return { title, description };
  }
}
</script>

2. Giảm Thời Gian Kết Nối Mạng:

A. Sử Dụng CDN

Sử Dụng Cloudflare hoặc AWS CloudFront: CDN giúp giảm khoảng cách địa lý giữa người dùng và máy chủ, tăng tốc độ tải trang.

B. Sử Dụng HTTP/2 hoặc HTTP/3

Cấu Hình HTTP/2 với Nginx:

server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /etc/ssl/certs/example.com.crt;
    ssl_certificate_key /etc/ssl/private/example.com.key;

    # Các cấu hình khác
}

3. Tối Ưu Hóa Thời Gian Xử Lý Máy Chủ

• Tối Ưu Hóa Cơ Sở Dữ Liệu:
  • Đảm bảo các truy vấn cơ sở dữ liệu được tối ưu hóa bằng cách sử dụng chỉ mục phù hợp.
  • Sử Dụng Các Truy Vấn Không Đồng Bộ

• Sử Dụng Bộ Nhớ Cache Phía Máy Chủ

4. Tối Ưu Hóa DNS Lookup

Sử dụng kỹ thuật DNS prefetching để giảm thời gian tìm kiếm DNS.

<link rel="dns-prefetch" href="//example.com">

Kết Luận

Tối ưu hóa Time to First Byte (TTFB) cho các ứng dụng sử dụng server-side rendering là một quá trình quan trọng để cải thiện hiệu suất và trải nghiệm người dùng. Bằng cách tối ưu hóa mã ứng dụng, sử dụng bộ nhớ cache, giảm thời gian kết nối mạng và tối ưu hóa DNS lookup, bạn có thể giảm TTFB và nâng cao chất lượng trang web của mình. Trên đây là các kiến thức mình biết về chỉ số TTFB hi vọng giúp ích được các bạn trong công việc và cuối cùng cảm ơn các bạn đã lắng nghe và hẹn gặp lại ở các bài viết sau nhé.