How to optimize web performance in the Cloud environment

 `Expires`

 Cache-Control: max-age=86400

Tài nguyên này sẽ được cache trong 1 ngày.

– Sử dụng etag để chỉ tải lại tài nguyên khi có thay đổi.

1.4. Tối ưu nội dung qua CDN

a. Phân phối tài nguyên tĩnh

• Minify các file CSS, JS trước khi lưu trên CDN.
• Tích hợp các công cụ build như Webpack, Rollup để giảm kích thước file.

b. Lazy Loading
Chỉ tải hình ảnh/video khi người dùng cuộn đến phần đó.
Kết hợp CDN để phân phối tài nguyên hình ảnh/video này.

c. Tùy chỉnh theo địa lý

• Sử dụng tính năng Geo-Targeting của CDN để phân phối nội dung phù hợp:
• Hình ảnh hoặc ngôn ngữ khác nhau dựa trên vị trí của người dùng.
• Ví dụ: Người dùng tại Việt Nam nhận tài nguyên từ máy chủ tại Singapore.

1.5. CDN cho nội dung động

• Dynamic Content Acceleration (DCA):
  Một số CDN (như Cloudflare, Akamai) hỗ trợ tối ưu hóa nội dung động qua các thuật toán tối ưu đường truyền.
• Edge Computing:
• Xử lý một phần logic backend tại Edge Server để giảm thời gian round-trip tới origin server.

1.6. Tích hợp bảo mật qua CDN

a. Web Application Firewall (WAF)

• Bảo vệ website khỏi các cuộc tấn công SQL Injection, XSS,…
• Kích hoạt WAF tại CDN để giảm thiểu rủi ro.

b. Chống DDoS

• CDN tự động phát hiện và giảm tải các request xấu (thông qua rate limiting, filtering).

c. CORS Policy

• Đảm bảo chính sách CORS (Cross-Origin Resource Sharing) phù hợp để tránh lộ thông tin nhạy cảm.

1.7. Theo dõi và tối ưu hiệu suất CDN

Sử dụng các công cụ của CDN để giám sát hiệu suất:

• Cloudflare Analytics , AWS CloudFront Logs, hoặc các công cụ giám sát thứ ba.

Tối ưu TTL dựa trên dữ liệu thực tế:

• Nếu nội dung thay đổi thường xuyên, giảm TTL để tránh hiển thị nội dung cũ.
• Kiểm tra thời gian phản hồi bằng Google Lighthouse hoặc **Pingdom.

Ví dụ Cấu hình Cloudflare:

1. Cache Everything:
Cache toàn bộ nội dung:

Page Rules:

Cache Level: Cache Everything

Always Use HTTPS:
– Đảm bảo mọi request đều qua HTTPS.
Image Optimization:
– Kích hoạt Polish để nén hình ảnh.
Brotli Compression:
– Tăng tốc độ nén file tĩnh.

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch(error => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/images/logo.png'
];

// Cài đặt Service Worker và cache tài nguyên
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

// Chặn request và lấy tài nguyên từ cache
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request);
      })
  );
});

// Xóa cache cũ khi Service Worker mới kích hoạt
self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
}); 

b. Network First

– Mô tả: Lấy tài nguyên từ mạng trước. Nếu mạng không khả dụng, dùng cache.
–Ưu điểm: Phù hợp với dữ liệu động (API, JSON).

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        const responseClone = response.clone();
        caches.open(CACHE_NAME).then(cache => {
          cache.put(event.request, responseClone);
        });
        return response;
      })
      .catch(() => caches.match(event.request))
  );
});

c. Stale While Revalidate

– Mô tả: Trả về tài nguyên từ cache ngay lập tức, đồng thời tải phiên bản mới từ mạng.
– Ưu điểm: Trải nghiệm người dùng nhanh chóng nhưng dữ liệu vẫn cập nhật.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          caches.open(CACHE_NAME).then(cache => {
            cache.put(event.request, networkResponse.clone());
          });
          return networkResponse;
        });
        return response || fetchPromise;
      })
  );
});  

2.4. Tích hợp Web Cache API

Web Cache API được sử dụng để lưu trữ và truy xuất tài nguyên cục bộ.

a. Tạo cache mới

caches.open('my-cache').then(cache => {
  cache.addAll(['/index.html', '/styles.css']);
});

caches.match('/styles.css').then(response => {
  if (response) {
    console.log('Found in cache:', response);
  } else {
    console.log('Not found in cache');
  }
});

caches.keys().then(cacheNames => {
  cacheNames.forEach(cacheName => {
    if (cacheName !== 'my-cache') {
      caches.delete(cacheName);
    }
  });
});

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).catch(() => caches.match('/offline.html'))
  );
});