Lompat ke konten
Aback Tools Logo

Daftar Periksa Kompresi Aset Statis S3

Selesaikan daftar periksa langkah demi langkah ini untuk mengonfigurasi bucket AWS S3 dan distribusi CloudFront Anda untuk melayani aset statis GZIP dan Brotli yang telah dikompresi sebelumnya dengan benar. Daftar periksa kompresi aset statis S3 mencakup kebijakan bucket, unggahan file yang telah dikompresi sebelumnya dengan metadata Pengkodean Konten yang benar, kebijakan cache CloudFront, header Vary, dan perintah verifikasi - masing-masing dengan cuplikan AWS CLI dan Terraform yang siap disalin. Semua konten berjalan di browser Anda - tidak perlu mendaftar.

S3 Static Asset Compression Checklist
Work through this checklist to configure your AWS S3 bucket and CloudFront distribution to serve pre-compressed GZIP and Brotli static assets correctly. Each item includes configuration snippets, warnings, and verification commands. All content is generated in your browser - no signup required.
0 / 17 completed0%

Enable public read access (or use CloudFront OAC)

For public static sites, configure the bucket policy to allow s3:GetObject. For private assets served via CloudFront, use Origin Access Control (OAC) instead of public access.

Enable static website hosting (if serving directly from S3)

Go to S3 → Bucket → Properties → Static website hosting → Enable. Set index.html as the index document. Skip this step if you are serving exclusively through CloudFront.

Configure CORS for font and API assets (if needed)

If your S3 bucket serves fonts or JSON assets loaded cross-origin, add a CORS configuration to allow the correct origins.

Upload pre-compressed .gz files alongside originals

Pre-compress your static assets at build time and upload both the original and .gz version. S3 does not compress on-the-fly - you must upload pre-compressed files.

Upload pre-compressed .br files for Brotli support

Upload Brotli-compressed versions of your assets. CloudFront can serve .br files to clients that send Accept-Encoding: br.

Set correct Content-Type on all uploaded files

S3 must serve the correct Content-Type for each asset - not the MIME type of the compressed wrapper. Set Content-Type to the original file type (e.g. application/javascript for .js.gz).

Set Cache-Control headers on uploaded assets

Set long-lived Cache-Control headers on versioned/hashed assets and short-lived headers on index.html and other non-versioned files.

Create a CloudFront distribution with S3 as origin

Create a CloudFront distribution pointing to your S3 bucket. Use the S3 REST endpoint (not the website endpoint) for OAC support and better performance.

Enable CloudFront automatic compression

In CloudFront → Behaviors → Edit → Compress objects automatically → Yes. This enables CloudFront to compress responses on-the-fly for objects not already compressed. For pre-compressed assets, CloudFront will pass through the Content-Encoding header.

Configure cache policy to forward Accept-Encoding

Create a CloudFront cache policy that includes Accept-Encoding in the cache key. This ensures CloudFront caches separate versions for GZIP, Brotli, and uncompressed responses.

Enforce HTTPS with redirect-to-https viewer protocol policy

Set the viewer protocol policy to "Redirect HTTP to HTTPS" to ensure all traffic is encrypted. This is required for Brotli - browsers only send Accept-Encoding: br over HTTPS.

Add Vary: Accept-Encoding response header

Configure a CloudFront response headers policy to add Vary: Accept-Encoding. This tells downstream caches (browsers, CDN edge nodes) to cache separate versions for different encodings.

Add security headers via CloudFront response headers policy

Use a CloudFront managed response headers policy (SecurityHeadersPolicy) or create a custom one with X-Content-Type-Options, X-Frame-Options, and Strict-Transport-Security.

Verify GZIP compression is working

Use curl to confirm CloudFront is serving GZIP-compressed responses with the correct Content-Encoding header.

Verify Brotli compression is working

Confirm CloudFront serves Brotli-compressed responses when the client sends Accept-Encoding: br.

Verify CloudFront cache hit ratio

Check the X-Cache response header to confirm CloudFront is caching compressed responses. "Hit from cloudfront" means the response was served from cache.

Measure actual transfer size savings

Use curl with --compressed to measure the actual transfer size vs the uncompressed size and confirm the expected savings.

Quick Reference: S3 + CloudFront Compression Architecture

Browser
  │  Accept-Encoding: gzip, br
  ▼
CloudFront Edge
  │  Checks cache key (includes Accept-Encoding)
  │  Cache HIT → serve cached compressed response
  │  Cache MISS → forward to S3 origin
  ▼
S3 Origin
  │  Returns pre-compressed file (app.js with Content-Encoding: gzip)
  │  OR returns uncompressed file (CloudFront compresses on-the-fly)
  ▼
CloudFront Edge
  │  Caches response keyed by Accept-Encoding
  │  Adds Vary: Accept-Encoding header
  ▼
Browser
  │  Decompresses response transparently
  └  Renders page

Mengapa Menggunakan Daftar Periksa Kompresi Aset Statis S3 Kami?

  • Selesaikan Penyiapan Kompresi S3 di Satu Tempat: Daftar periksa kompresi aset statis S3 mencakup setiap langkah - kebijakan bucket, unggahan file yang telah dikompresi sebelumnya, konfigurasi CloudFront, header Vary, dan perintah verifikasi - sehingga Anda tidak melewatkan langkah penting yang merusak kompresi.
  • Daftar Periksa Kompresi S3 Aman Online: Semua konten daftar periksa dibuat seluruhnya di browser Anda. Tidak ada kredensial AWS, nama bucket, atau nama domain yang dikirim ke server mana pun - aman untuk merencanakan konfigurasi kompresi produksi S3 dan CloudFront.
  • Cuplikan Konfigurasi untuk Setiap Langkah: Setiap item daftar periksa mencakup cuplikan konfigurasi yang siap disalin - perintah AWS CLI, sumber daya Terraform, kebijakan bucket, dan perintah verifikasi curl - sehingga Anda dapat segera menerapkan setiap langkah.
  • 100% Gratis Selamanya: Daftar periksa kompresi aset statis S3 sepenuhnya gratis tanpa pendaftaran, tanpa tingkat premium, tanpa batasan, dan tanpa iklan. Gunakan sebanyak yang Anda perlukan, selamanya.

Mengapa Kompresi S3 Memerlukan Pra-kompresi

Tidak seperti Nginx atau Apache, Amazon S3 tidak memampatkan respons saat itu juga. S3 adalah layanan penyimpanan objek - melayani file persis seperti yang diunggah. Untuk menyajikan aset terkompresi dari S3, Anda harus melakukan pra-kompres file Anda pada waktu pembuatan dan mengunggah versi asli dan terkompresi dengan metadata Pengkodean Konten yang benar. Daftar periksa kompresi aset statis S3 kami memandu Anda melalui setiap langkah proses ini, mulai dari konfigurasi bucket hingga penyiapan dan verifikasi kebijakan cache CloudFront.

Cara Kerja Daftar Periksa Kompresi S3

  1. Bekerja Melalui Setiap Kategori: Daftar periksa ini disusun dalam lima kategori - Pengaturan Bucket S3, Unggah File Terkompresi Sebelumnya, Konfigurasi CloudFront, Header Respons, dan Verifikasi. Klik setiap item untuk memperluas cuplikan konfigurasi dan peringatan.
  2. Centang Langkah Selesai: Klik ikon lingkaran di samping setiap item untuk menandainya selesai. Bilah kemajuan melacak keseluruhan penyelesaian Anda di semua item daftar periksa.
  3. Salin dan Terapkan: Setiap item menyertakan perintah AWS CLI, sumber daya Terraform, atau perintah verifikasi curl yang siap disalin - klik Salin untuk segera menggunakannya di terminal atau saluran pipa Anda.

Apa yang Dicakup dalam Daftar Periksa

  • Penyiapan Bucket S3: Kebijakan bucket untuk pembacaan publik atau CloudFront OAC, hosting situs web statis, dan konfigurasi CORS untuk font lintas asal dan aset API.
  • Unggah File Pra-kompresi: Cara mengunggah file.gz dan.br dengan metadata Pengodean Konten, Tipe Konten, dan Kontrol Cache yang benar menggunakan AWS CLI.
  • Konfigurasi CloudFront: Penyiapan distribusi, kompresi otomatis, kebijakan cache dengan Accept-Encoding di kunci cache, dan penegakan HTTPS.
  • Verifikasi: perintah curl untuk mengonfirmasi GZIP dan Brotli berfungsi, pemeriksaan rasio cache hit, dan pengukuran ukuran transfer.

S3 + CloudFront vs Kompresi Langsung

Pra-kompresi + S3 lebih efisien daripada kompresi langsung untuk aset statis - biaya CPU kompresi dibayarkan satu kali pada waktu pembuatan, bukan pada setiap permintaan. CloudFront juga dapat mengompresi respons saat itu juga untuk objek yang belum dikompresi (objek berukuran ≥1000 byte), namun pra-kompresi memberi Anda tingkat kompresi maksimum (GZIP level 9, kualitas Brotli 11) yang tidak digunakan oleh kompresi langsung CloudFront. Untuk performa terbaik, lakukan kompresi awal pada aset Anda dan unggah ke S3 dengan metadata yang benar - CloudFront akan melewati header Content-Encoding secara transparan.

Pertanyaan yang Sering Diajukan

Daftar periksa kompresi aset statis S3 adalah panduan langkah demi langkah untuk mengonfigurasi AWS S3 dan CloudFront untuk melayani aset statis GZIP dan Brotli yang telah dikompresi sebelumnya dengan benar. Ini mencakup kebijakan bucket, unggahan file yang dikompresi sebelumnya dengan metadata yang benar, kebijakan cache CloudFront, header Vary, dan perintah verifikasi.

Tidak. Amazon S3 adalah layanan penyimpanan objek - layanan ini menyajikan file persis seperti yang diunggah. Untuk menyajikan aset terkompresi dari S3, Anda harus melakukan pra-kompres file Anda pada waktu pembuatan dan mengunggahnya dengan metadata Pengodean Konten yang benar. CloudFront dapat mengompresi respons saat itu juga untuk objek yang tidak terkompresi, namun pra-kompresi memberikan rasio kompresi yang lebih baik.

Ya. Daftar periksa kompresi aset statis S3 100% gratis tanpa pendaftaran, tanpa langganan, tanpa batasan, dan tanpa iklan. Semua konten daftar periksa dibuat di browser Anda - tidak ada kredensial AWS atau data konfigurasi yang dikirim ke server mana pun.

Unggah file terkompresi menggunakan nama file asli (misalnya app.js, bukan app.js.gz) dan atur Content-Encoding: gzip dan Content-Type: application/javascript. Ini memberitahu browser untuk mendekompresi respons secara transparan. Jika Anda mengunggah sebagai app.js.gz tanpa Pengodean Konten, browser akan mengunduhnya sebagai file biner.

Aktifkan "Kompres objek secara otomatis" di pengaturan perilaku CloudFront Anda dan buat kebijakan cache dengan EnableAcceptEncodingBrotli: true. CloudFront akan melayani Brotli kepada klien yang mengirimkan Accept-Encoding: br. Catatan: Brotli hanya dinegosiasikan melalui HTTPS.

Tanpa Accept-Encoding di kunci cache, CloudFront hanya menyimpan satu versi dari setiap objek. Jika respons terkompresi di-cache dan disajikan ke klien yang tidak mendukung GZIP, browser akan menerima konten yang rusak. Menyertakan Accept-Encoding dalam kunci cache memastikan CloudFront menyimpan cache versi terpisah untuk setiap pengkodean.

Kompresi CloudFront on-the-fly menggunakan GZIP level 6 dan hanya mengompresi objek ≥1000 byte. Pra-kompresi menggunakan level maksimum (GZIP level 9, kualitas Brotli 11) dan mengunggah file terkompresi ke S3. Pra-kompresi lebih efisien untuk aset statis karena biaya CPU dibayarkan satu kali pada waktu pembuatan.

Jalankan: `curl -H "Accept-Encoding: gzip" -I https://YOUR-CLOUDFRONT-DOMAIN/app.js` dan cari `Content-Encoding: gzip`. Untuk Brotli: `curl -H "Accept-Encoding: br" -I https://YOUR-CLOUDFRONT-DOMAIN/app.js` dan cari `Content-Encoding: br`.

Gunakan titik akhir S3 REST dengan CloudFront Origin Access Control (OAC). Titik akhir situs web S3 tidak mendukung OAC, memerlukan akses bucket publik, dan tidak mendukung HTTPS dari CloudFront ke S3. Titik akhir REST dengan OAC lebih aman dan mendukung semua fitur CloudFront.