How to optimize web performance in the Cloud environment

How to Optimize Web Performance in a Cloud Environment

1.1. Using a CDN (Content Delivery Network)

A CDN is a network of servers distributed globally, designed to store and deliver content (images, videos, CSS, JS, static files, etc.) close to the end user to reduce page load times.

Key Benefits:

• Reduced Latency: Resources are delivered from the server nearest to the user.
• Load Balancing: Reduces direct pressure on the origin server.
• Faster Transmission: Utilizes optimized protocols like HTTP/2 or HTTP/3.
• Enhanced Security: CDNs often include WAF (Web Application Firewall) and DDoS protection.

1.2. Steps to Implement a CDN

a. Choose a CDN Provider
Some popular CDN providers:

• Sunteco: As a partner of CDNetworks Holdings Singapore – a leading global CDN provider, Sunteco supports clients with consulting and implementation services tailored to specific needs. Sun CDN accelerates page loading, optimizes performance, and enhances user experience. With top-tier CDN infrastructure and a network of 2,800 PoPs worldwide, Sunteco provides businesses with fast, stable, and highly secure web solutions.
• Cloudflare: Easy to integrate, offers a free basic plan, and supports security.
• AWS CloudFront: Integrates well with the AWS ecosystem.
• Google Cloud CDN: Integrates well with Google Cloud Platform.
• Akamai: Suitable for large enterprises, offers advanced features.
• Fastly: Fast, ideal for real-time content.

b. Configure the CDN

• Connect Domain to CDN:
  Point the domain’s DNS to the CDN (usually via a CNAME record).

  Example with Cloudflare:

  • Log into Cloudflare.
  • Add the domain and point DNS through Cloudflare’s system.
  • Note: Ensure no conflicts with original DNS records.

• Enable Cache Features:

  • Identify resources to cache (images, CSS, JS, etc.).
  • Configure TTL (Time-To-Live) for cache. For example:
    • Static resources: TTL from 1 day to 1 month.
    • APIs or dynamic content: Lower TTL (~1-5 minutes).

• Integrate HTTPS:

  • Ensure the CDN supports SSL/TLS.
  • Configure HTTPS with free SSL certificates (e.g., Let’s Encrypt) or those provided by the CDN.

• Optimize Protocols:

  • HTTP/2: Speeds up page loading with concurrent streams.
  • HTTP/3/QUIC: Improves transmission performance on high-latency networks.

1.3. CDN Caching Strategies

• Full Caching: Cache all static content to reduce load on the origin server.
• Conditional Caching:
  • Use headers like… to manage dynamic content caching based on specific conditions.

 `Cache-Control`

 `Expires`

 Cache-Control: max-age=86400

Cache Level: Cache Everything

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);
          }
        })
      );
    })
  );
});

2.3. Caching Strategy

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

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))
  );
});

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;
      })
  );
});  

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'))
  );
});

a. Offline image compression

• Tools:

  ImageMagick

magick input.jpg -quality 80 output.jpg

• [TinyPNG: Compress PNG and JPEG.
• Squoosh : Compress images online with many options.

b. Automatic image compression

• Integration with applications:
  – Using Sharp (Node.js):

const sharp = require('sharp');
sharp('input.jpg')
  .resize(800) // Resize to 800px width
  .toFormat('webp') // Convert to WebP
  .toFile('output.webp');

Using imagemin:

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*.{jpg,png}'], {
  destination: 'output',
  plugins: [imageminWebp({quality: 75})],
});

3.3. Tối ưu kích thước ảnh

a. Resize images appropriately

– Only use images the correct size for the display area.
– Use tools to resize automatically:
– ImageMagick:

magick input.jpg -resize 1920x1080 output.jpg

Sharp (Node.js):

sharp('input.jpg')
  .resize({ width: 1920 })
  .toFile('output.jpg');

b. Responsive Images

– Use the srcset and sizes attributes:

img
  src="image-480.jpg"
  srcset="image-480.jpg 480w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 480px,
         (max-width: 1200px) 800px,
         1200px"
  alt="example">

3.4. Lazy Loading (Tải ảnh khi cần)** **a. HTML Native Lazy Loading

– Use attributes `loading=”lazy”` for photo:

img src="image.jpg" loading="lazy" alt="example">

b. Lazy Loading with JavaScript

Use **Intersection Observer** :

const lazyImages = document.querySelectorAll('img.lazy');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach(image => observer.observe(image));

3.5. Video Optimization

a. Video Compression

– Using Tools:
– **FFmpeg:**

ffmpeg -i input.mp4 -vcodec libx265 -crf 28 output.mp4

b. Adaptive Streaming (HLS/DASH)

– Use HLS (HTTP Live Streaming) format to play video according to user bandwidth.
– Create video chunks:

ffmpeg -i input.mp4 -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls output.m3u8

3.6. Apply CDN for images & media

3.7. Integrate WebP/AVIF fallback

a. Detect format support

– Use JavaScript to check for WebP support:

function supportsWebP(callback) {
  const webP = new Image();
  webP.onload = webP.onerror = function () {
    callback(webP.height === 2);
  };
  webP.src = 'data:image/webp;base64,UklGRhIAAABXRUJQVlA4WAoAAAAQAAAACcQAA';
}
supportsWebP(supported => {
  if (supported) {
    console.log('WebP is supported');
  } else {
    console.log('WebP is not supported');
  }
});

b. HTML Picture Element

Provide fallback for images that do not support WebP:

3.8. Monitoring and Evaluation

• Use Tools:
  • Google Lighthouse: Measures performance and provides improvement suggestions.
  • PageSpeed Insights: Analyzes image sizes and page load times.

3.9. Summary

• Prioritize WebP/AVIF for images to reduce file sizes.
• Use Lazy Loading and Responsive Images to optimize for mobile devices.
• Combine automated compression tools with CI/CD pipelines to ensure images are always optimized before deployment.

Conclusion

And there you have it—we’ve explored a range of tools for optimizing web performance in a Cloud environment! From choosing a CDN as a reliable companion, to compressing images and videos to make them lighter, and not forgetting to make your website “smarter” with Service Workers—these tips will elevate your website to peak speed and user experience! Technology is ever-evolving, so keep learning and optimizing to ensure your website stays “fresh” and as nimble as it was on day one. If you need consultation on CDN services for your website, please contact Sunteco:  Hotline: (+84) 78 678 3868 / (+84) 24 5678 3868