{"content_id":"nz3psdk2a0","slug":"low-involvement-web-static-generation-html-cache","locale":"id","schema_type":"TechArticle","category":"knowledge_base","category_name":"Basis Pengetahuan","title":"Web dengan Keterlibatan Rendah: Pembuatan Statis, Cache HTML","summary":"Dalam desain teknis web dengan keterlibatan rendah, konten utama dalam HTML awal dan cache HTML di CDN perlu diperiksa bersama. TTFB 0.8 detik merupakan nilai acuan untuk peningkatan kinerja, sementara cakupan penerapan cache dan pembaruan setelah perubahan juga perlu dirancang.","sponsorship_disclosure":null,"affiliate_disclosure":null,"commerce_disclosure":null,"author":{"name":"injoys","url":"https://injoys.com/ko/about"},"key_points":["Memuat konten utama dalam HTML awal dapat mengurangi ketergantungan pada eksekusi JavaScript.","Google menjalankan JavaScript, sehingga penggunaan React saja tidak cukup untuk menyimpulkan bahwa perayapan oleh mesin pencari gagal.","TTFB 0.8 detik atau kurang merupakan nilai acuan untuk peningkatan kinerja, bukan waktu pemuatan seluruh halaman.","Cloudflare CDN secara default tidak menyimpan HTML dalam cache, sehingga aturan cache untuk halaman publik perlu diperiksa.","Cache HTML memerlukan pengecualian halaman login serta kebijakan pembaruan setelah konten diubah."],"content_markdown":"Untuk membantu perayapan situs web dengan keterlibatan rendah, konten utama harus disertakan dalam HTML awal. Untuk konten publik, pembuatan statis dan cache HTML di CDN berguna. Namun, mencapai TTFB 0.8 detik saja tidak menjamin kemunculan di hasil pencarian.\n\nAcuan angka TTFB tersebut adalah dokumen web.dev yang diperbarui pada 18 November 2025.\n\n## Kondisi teknis yang perlu diperiksa terlebih dahulu pada web dengan keterlibatan rendah\n\nDalam artikel ini, web dengan keterlibatan rendah berarti situs web tempat pengunjung memeriksa informasi yang dibutuhkan secara singkat. Rendering dan kecepatan pengiriman merupakan aspek teknis yang perlu diperiksa pada situs seperti ini. Namun, kedua aspek tersebut saja tidak dapat menjelaskan seluruh perbedaan visibilitas di hasil pencarian.\n\nPerayapan adalah proses robot mengambil halaman. Pengindeksan adalah proses mengolah konten yang diambil agar dapat dicari. Google menjelaskan bahwa tidak semua halaman yang dirayapi akan masuk ke indeks. [Panduan anggaran perayapan Google](https://developers.google.com/crawling/docs/crawl-budget)\n\n| Aspek pemeriksaan | Hal yang perlu diperiksa | Masalah yang ingin diatasi |\n| --- | --- | --- |\n| HTML awal | Apakah judul dan konten utama disertakan dalam respons | Ketergantungan pada eksekusi tambahan untuk membaca konten utama |\n| Rendering | Apakah konten tampil dengan benar setelah JavaScript dijalankan | Konten yang tidak tampil akibat kesalahan eksekusi atau pemblokiran |\n| TTFB | Waktu yang diperlukan hingga respons pertama tiba | Keterlambatan koneksi dan respons server |\n| Cache HTML | Apakah dokumen publik digunakan kembali melalui CDN | Beban permintaan berulang ke server asal |\n| Status indeks | Bagaimana Google memproses URL tersebut | Kekeliruan menyamakan keberhasilan perayapan dengan masuknya halaman ke pencarian |\n\n## Mengapa halaman React terlihat seperti HTML kosong\n\nHTML awal halaman React berbeda-beda menurut cara implementasinya. Cara yang membuat konten utama di browser disebut CSR. Dengan cara ini, respons pertama mungkin hanya berisi kode yang akan dijalankan, tanpa konten utama.\n\nGoogle menggunakan Chromium untuk menjalankan JavaScript. Halaman mungkin harus menunggu proses rendering setelah dirayapi. Halaman atau file yang diblokir dapat dikecualikan dari proses rendering. Tidak semua robot juga menjalankan JavaScript. [Panduan dasar JavaScript SEO dari Google](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)\n\nKarena itu, jangan menilai status perayapan hanya dari tampilan halaman yang normal. Periksa terlebih dahulu apakah konten utama ada dalam respons awal. Hasil rendering Google dapat diperiksa melalui Inspeksi URL di Search Console.\n\n## Perbandingan pembuatan statis dan rendering server\n\nMetode pembuatan HTML dapat dipilih berdasarkan cara konten utama yang bersifat publik diperbarui. Pembuatan statis menghasilkan HTML sebelum permintaan diterima. Rendering server menghasilkan HTML di server saat permintaan diterima. Metode ini juga dapat digunakan pada React. [Panduan metode rendering web.dev](https://web.dev/articles/rendering-on-the-web)\n\n| Metode | Waktu pembuatan HTML | Situasi yang cocok untuk dipertimbangkan | Hal operasional yang perlu diperiksa |\n| --- | --- | --- | --- |\n| Rendering klien CSR | Saat JavaScript dijalankan di browser | Tampilan dengan banyak interaksi pengguna | Eksekusi dan permintaan yang diperlukan hingga konten utama tampil |\n| Pembuatan statis SSG | Saat build atau pembuatan konten | Dokumen publik yang menampilkan konten sama kepada pengunjung | Pembuatan ulang dan deployment setelah perubahan |\n| Rendering server SSR | Saat memproses permintaan halaman | Tampilan yang menyusun konten terbaru untuk setiap permintaan | Waktu pengambilan data dan pembuatan HTML |\n| Prarendering | Saat aplikasi dijalankan sebelum deployment untuk menghasilkan HTML | Saat menyediakan konten utama awal dari aplikasi yang sudah ada lebih dahulu | JavaScript yang diperlukan untuk fungsi selanjutnya |\n\nPembuatan statis dan CDN memiliki peran yang berbeda. Pembuatan statis merupakan pilihan mengenai waktu pembuatan HTML. CDN merupakan arsitektur untuk mengirimkan dan menggunakan kembali konten. HTML yang dibuat di server juga dapat disimpan dalam cache CDN jika memenuhi persyaratan.\n\n## Apa arti TTFB 0.8 detik?\n\nTTFB adalah waktu dari dimulainya navigasi halaman hingga diterimanya byte respons pertama. web.dev menyarankan **paling lama 0.8 detik** sebagai sasaran umum untuk sebagian besar situs. Ini berbeda dari waktu hingga seluruh halaman ditampilkan. TTFB sendiri juga bukan bagian dari Core Web Vitals. [Penjelasan TTFB dari web.dev](https://web.dev/articles/ttfb)\n\nTTFB juga mencakup keterlambatan di luar pemrosesan internal server. Pencarian DNS adalah proses mencari alamat koneksi suatu domain. Koneksi TCP dan TLS juga dapat memerlukan waktu. Pengalihan ke alamat lain turut memengaruhinya.\n\n- Waktu pencarian DNS dan persiapan koneksi\n- Waktu pengiriman permintaan dan respons melalui jaringan\n- Waktu pengambilan data dan pembuatan HTML di server asal\n- Waktu pengalihan yang terjadi sebelum respons pertama\n\nLokasi server di Seoul saja tidak cukup untuk menyimpulkan bahwa waktunya lebih dari 0.8 detik. Hasilnya berbeda menurut lokasi akses dan apakah koneksi digunakan kembali. Perayap Google terutama menggunakan alamat IP Amerika Serikat. Namun, perayap juga dapat mengakses dari alamat IP negara lain. [Karakteristik teknis perayap Google](https://developers.google.com/crawling/docs/crawlers-fetchers/overview-google-crawlers?hl=en)\n\nKeterlambatan respons yang berkelanjutan memengaruhi kapasitas perayapan Google. Kesalahan server juga dapat menyebabkan berkurangnya jumlah perayapan. Namun, bukan berarti perayapan akan dihentikan begitu waktu respons sekali saja melebihi 0.8 detik. Kualitas halaman dan frekuensi pembaruan juga memengaruhi permintaan perayapan. [Panduan anggaran perayapan Google](https://developers.google.com/crawling/docs/crawl-budget)\n\n## Mengapa cache HTML di CDN perlu diperiksa\n\nCloudflare CDN secara default tidak menyimpan HTML dalam cache. Meskipun gambar atau CSS disimpan dalam cache, dokumen konten utama harus diperiksa secara terpisah. Periksa perilaku default CDN lain dalam dokumentasi layanan masing-masing.\n\n\u003e Cloudflare CDN secara default tidak menyimpan HTML atau JSON dalam cache.\n\u003e\n\u003e Cloudflare, Perilaku cache default\n\nKalimat ini berarti HTML dan JSON bukan sasaran cache secara default. HTML publik dapat dimasukkan sebagai sasaran cache melalui Cache Rules. Apakah respons benar-benar disimpan juga dipengaruhi oleh kondisi seperti header respons dan cookie. [Perilaku cache default Cloudflare](https://developers.cloudflare.com/cache/concepts/default-cache-behavior/)\n\nCache adalah fitur yang menggunakan kembali respons yang telah disimpan. Menghubungkan situs ke CDN tidak berarti semua dokumen langsung disalin ke seluruh dunia. Cloudflare menyimpan konten dalam cache di pusat data yang menangani permintaan. Permintaan untuk konten yang belum ada dalam cache mungkin memerlukan pengambilan dari server asal. [Panduan memulai cache Cloudflare](https://developers.cloudflare.com/cache/get-started/)\n\nSaat menerapkan aturan cache pada HTML publik, kecualikan halaman yang dipersonalisasi. Cloudflare memperingatkan bahwa cache HTML dinamis dapat menyebabkan informasi orang lain terkirim. Jangan simpan halaman login atau akun dalam cache. [Hal yang perlu diperhatikan pada Cloudflare Cache Everything](https://developers.cloudflare.com/cache/how-to/cache-rules/examples/cache-everything/)\n\n## Kriteria penerapan cache berdasarkan kondisi halaman\n\nApakah konten yang sama ditampilkan kepada pengunjung menjadi titik awal penentuan cakupan cache. Teks penjelasan publik cocok digunakan kembali secara bersama. Respons yang isinya berubah menurut status login harus ditangani secara terpisah.\n\n| Kondisi halaman | Konfigurasi yang perlu dipertimbangkan | Hal yang perlu diperiksa bersama |\n| --- | --- | --- |\n| Menyediakan teks penjelasan yang sama kepada pengunjung | Pembuatan statis dan cache HTML publik | Pembuatan ulang dan pembaruan cache setelah perubahan |\n| Konten utama publik memuat angka yang sering berubah | Memisahkan cara pembaruan konten utama dan data yang berubah | Waktu acuan angka dan tampilan saat terjadi kegagalan |\n| Memerlukan informasi publik terbaru saat permintaan diterima | Mempertimbangkan rendering server dan cache bersyarat | Keterlambatan informasi yang dapat ditoleransi |\n| Tampilan login, akun, dan pembayaran | Mengecualikannya dari cache HTML bersama | Cookie autentikasi dan respons per pengguna |\n| Menyediakan dokumen publik dalam berbagai bahasa | URL per bahasa dan cache masing-masing dokumen | Tautan antarversi terjemahan dan pembaruan per bahasa |\n\nMemuat data waktu nyata belakangan memudahkan pemeliharaan konten utama yang statis. Namun, jangan menunda pemuatan seluruh konten inti yang diperlukan untuk pencarian. Hal ini dapat bertentangan dengan tujuan penyediaan HTML awal.\n\n## Kesalahan umum dan kriteria pemeriksaan\n\nMenilai hasil hanya dari nama teknologi atau layar pengaturan dapat membuat kesalahan mudah terlewat. Periksa HTML yang sebenarnya beserta header responsnya. Berikut adalah kondisi yang harus dibedakan satu sama lain.\n\n| Penilaian yang umum | Kriteria yang perlu diperiksa |\n| --- | --- |\n| Situs React tidak dapat dibaca robot pencarian | HTML awal dan hasil rendering Google |\n| TTFB 0.8 detik berarti seluruh halaman juga sudah tampil | Waktu dari respons pertama hingga konten utama tampil |\n| HTML pasti tersimpan dalam cache karena sudah terhubung ke CDN | Status cache permintaan HTML |\n| File statis selalu berisi konten terbaru | Waktu pembuatan terakhir dan konten yang di-deploy |\n| Respons cepat berarti halaman sudah masuk ke pencarian | Status pengindeksan di Search Console |\n| Menilai kecepatan global dari satu hasil cache hit | Hasil pengukuran berdasarkan wilayah akses dan apakah permintaan dilayani dari cache |\n\n`CF-Cache-Status` milik Cloudflare adalah header yang menunjukkan status cache. `HIT` berarti respons ditemukan dalam cache. `MISS` berarti respons tidak ada dalam cache saat permintaan diterima sehingga diambil dari server asal. `DYNAMIC` berarti respons tidak diperlakukan sebagai sasaran cache. [Penjelasan respons cache Cloudflare](https://developers.cloudflare.com/cache/concepts/cache-responses/)\n\n## Pembaruan cache setelah perubahan konten\n\nUntuk file statis dan cache CDN, alur penerapan perubahan juga harus dirancang. Meskipun konten di server asal sudah diubah, konten lama tetap akan dikirim jika cache lama masih ada. Jika HTML dan JSON diterbitkan bersama, isi kedua format tersebut juga harus diselaraskan.\n\nBerikut urutan pemeriksaan saat mengelola dokumen dan file data secara bersamaan.\n\n1. Tetapkan perubahan pada data sumber.\n2. Buat ulang HTML dan file data menggunakan versi perubahan yang sama.\n3. Setelah men-deploy file baru, perbarui cache untuk URL yang berubah.\n4. Minta kembali setiap URL untuk memastikan perubahan isinya konsisten.\n\nCloudflare menyarankan penghapusan cache per URL. Penghapusan cache adalah tindakan menghapus respons yang tersimpan. Pembuatan ulang HTML statis tetap harus dilakukan secara terpisah. Karena itu, hubungkan pembuatan file dan pembaruan cache dalam prosedur deployment yang sama. [Panduan penghapusan cache Cloudflare](https://developers.cloudflare.com/cache/how-to/purge-cache/)\n\nTentukan interval pembaruan sesuai keterlambatan informasi yang dapat ditoleransi oleh konten. Teks penjelasan dan angka waktu nyata tidak harus menggunakan interval yang sama. Masa berlaku cache yang singkat saja tidak dapat menyelesaikan seluruh masalah pembaruan.\n\n## Kriteria hreflang untuk situs multibahasa\n\n`hreflang` adalah informasi yang menghubungkan alamat konten yang sama untuk berbagai bahasa dan wilayah. Ini bukan fitur pembuat terjemahan. Informasi ini membantu Google menemukan versi bahasa yang sesuai untuk pengunjung.\n\n| Lokasi implementasi | Cara penandaan | Hal yang perlu diperiksa saat memilih |\n| --- | --- | --- |\n| HTML | Mencantumkan tautan bahasa alternatif di `head` dokumen | Apakah dapat dikelola dalam setiap templat halaman |\n| Header HTTP | Mencantumkannya dalam header `Link` pada respons | Apakah header dapat dikelola di server |\n| Peta situs | Mencantumkan hubungan URL antarbahasa dalam peta situs | Apakah daftar dokumen dapat dikelola sekaligus |\n\nGoogle memperlakukan semua metode ini secara setara. Karena itu, penandaan tidak harus dimasukkan hanya di dalam HTML. Dokumen setiap bahasa harus mencantumkan dokumen bahasa alternatif, termasuk dirinya sendiri. Periksa juga hubungan antarhalaman yang saling bersesuaian. [Panduan halaman multibahasa Google](https://developers.google.com/search/docs/specialty/international/localized-versions)\n\n## Urutan pemeriksaan hasil deployment\n\nSetelah deployment, verifikasi pengiriman konten utama dan perilaku cache secara terpisah. Catat juga wilayah pengukuran dan status cache bersama hasil pengukuran kecepatan. Urutan berikut memudahkan identifikasi letak masalah.\n\n1. Periksa respons dokumen HTML melalui alat pengembang browser. Pastikan konten utama disertakan dalam respons.\n2. Periksa HTML hasil rendering melalui Inspeksi URL di Search Console. Periksa juga status pengindeksan sebenarnya secara terpisah.\n3. Periksa header cache pada respons HTML. Untuk Cloudflare, baca `CF-Cache-Status`.\n4. Ukur dokumen yang sama dari wilayah akses utama. Bedakan permintaan untuk konten yang tidak ada dalam cache dan permintaan yang dilayani dari cache.\n5. Setelah mengubah konten, periksa hasil pembaruannya. Periksa juga apakah halaman login dikecualikan dari cache.\n\nCloudflare memperingatkan bahwa penerapan cache HTML dinamis secara berlebihan dapat mengganggu fungsi login. Jangan simpan formulir login dan halaman yang memerlukan autentikasi dalam cache. Setelah perubahan, periksa juga apakah cookie autentikasi tetap tersimpan. [Panduan masalah login Cloudflare](https://developers.cloudflare.com/cache/troubleshooting/dynamic-content-and-login-issues/)\n\n## Persyaratan implementasi untuk disampaikan kepada AI saat menulis kode\n\nSaat meminta AI, sertakan hasil yang dapat diverifikasi bersama nama teknologinya. Menentukan isi HTML awal dan cakupan pengecualian cache merupakan cara yang berguna. Teks berikut adalah contoh permintaan untuk membuat halaman pengetahuan publik.\n\n```text\nSertakan konten utama halaman pengetahuan publik dalam HTML awal.\nUtamakan pertimbangan pembuatan statis untuk dokumen publik.\nJelaskan secara terpisah cara memperbarui data yang berubah.\nPeriksa apakah cache HTML diterapkan di CDN.\nKecualikan halaman login, akun, dan pembayaran dari cache bersama.\nHubungkan pembuatan ulang file statis dan pembaruan cache saat konten diubah.\nJika ada halaman multibahasa, atur hubungan hreflang.\nBerikan cara memeriksa HTML awal, status cache, dan apakah perubahan sudah diterapkan.\n```","content_html":"\u003cp\u003eUntuk membantu perayapan situs web dengan keterlibatan rendah, konten utama harus disertakan dalam HTML awal. Untuk konten publik, pembuatan statis dan cache HTML di CDN berguna. Namun, mencapai TTFB 0.8 detik saja tidak menjamin kemunculan di hasil pencarian.\u003c/p\u003e\n\u003cp\u003eAcuan angka TTFB tersebut adalah dokumen web.dev yang diperbarui pada 18 November 2025.\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#kondisi-teknis-yang-perlu-diperiksa-terlebih-dahulu-pada-web-dengan-keterlibatan-rendah\" class=\"anchor\" id=\"kondisi-teknis-yang-perlu-diperiksa-terlebih-dahulu-pada-web-dengan-keterlibatan-rendah\"\u003e\u003c/a\u003eKondisi teknis yang perlu diperiksa terlebih dahulu pada web dengan keterlibatan rendah\u003c/h2\u003e\n\u003cp\u003eDalam artikel ini, web dengan keterlibatan rendah berarti situs web tempat pengunjung memeriksa informasi yang dibutuhkan secara singkat. Rendering dan kecepatan pengiriman merupakan aspek teknis yang perlu diperiksa pada situs seperti ini. Namun, kedua aspek tersebut saja tidak dapat menjelaskan seluruh perbedaan visibilitas di hasil pencarian.\u003c/p\u003e\n\u003cp\u003ePerayapan adalah proses robot mengambil halaman. Pengindeksan adalah proses mengolah konten yang diambil agar dapat dicari. Google menjelaskan bahwa tidak semua halaman yang dirayapi akan masuk ke indeks. \u003ca href=\"https://developers.google.com/crawling/docs/crawl-budget\"\u003ePanduan anggaran perayapan Google\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eAspek pemeriksaan\u003c/th\u003e\n\u003cth\u003eHal yang perlu diperiksa\u003c/th\u003e\n\u003cth\u003eMasalah yang ingin diatasi\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Aspek pemeriksaan\"\u003eHTML awal\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa\"\u003eApakah judul dan konten utama disertakan dalam respons\u003c/td\u003e\n\u003ctd data-label=\"Masalah yang ingin diatasi\"\u003eKetergantungan pada eksekusi tambahan untuk membaca konten utama\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Aspek pemeriksaan\"\u003eRendering\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa\"\u003eApakah konten tampil dengan benar setelah JavaScript dijalankan\u003c/td\u003e\n\u003ctd data-label=\"Masalah yang ingin diatasi\"\u003eKonten yang tidak tampil akibat kesalahan eksekusi atau pemblokiran\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Aspek pemeriksaan\"\u003eTTFB\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa\"\u003eWaktu yang diperlukan hingga respons pertama tiba\u003c/td\u003e\n\u003ctd data-label=\"Masalah yang ingin diatasi\"\u003eKeterlambatan koneksi dan respons server\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Aspek pemeriksaan\"\u003eCache HTML\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa\"\u003eApakah dokumen publik digunakan kembali melalui CDN\u003c/td\u003e\n\u003ctd data-label=\"Masalah yang ingin diatasi\"\u003eBeban permintaan berulang ke server asal\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Aspek pemeriksaan\"\u003eStatus indeks\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa\"\u003eBagaimana Google memproses URL tersebut\u003c/td\u003e\n\u003ctd data-label=\"Masalah yang ingin diatasi\"\u003eKekeliruan menyamakan keberhasilan perayapan dengan masuknya halaman ke pencarian\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003ch2\u003e\n\u003ca href=\"#mengapa-halaman-react-terlihat-seperti-html-kosong\" class=\"anchor\" id=\"mengapa-halaman-react-terlihat-seperti-html-kosong\"\u003e\u003c/a\u003eMengapa halaman React terlihat seperti HTML kosong\u003c/h2\u003e\n\u003cp\u003eHTML awal halaman React berbeda-beda menurut cara implementasinya. Cara yang membuat konten utama di browser disebut CSR. Dengan cara ini, respons pertama mungkin hanya berisi kode yang akan dijalankan, tanpa konten utama.\u003c/p\u003e\n\u003cp\u003eGoogle menggunakan Chromium untuk menjalankan JavaScript. Halaman mungkin harus menunggu proses rendering setelah dirayapi. Halaman atau file yang diblokir dapat dikecualikan dari proses rendering. Tidak semua robot juga menjalankan JavaScript. \u003ca href=\"https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics\"\u003ePanduan dasar JavaScript SEO dari Google\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eKarena itu, jangan menilai status perayapan hanya dari tampilan halaman yang normal. Periksa terlebih dahulu apakah konten utama ada dalam respons awal. Hasil rendering Google dapat diperiksa melalui Inspeksi URL di Search Console.\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#perbandingan-pembuatan-statis-dan-rendering-server\" class=\"anchor\" id=\"perbandingan-pembuatan-statis-dan-rendering-server\"\u003e\u003c/a\u003ePerbandingan pembuatan statis dan rendering server\u003c/h2\u003e\n\u003cp\u003eMetode pembuatan HTML dapat dipilih berdasarkan cara konten utama yang bersifat publik diperbarui. Pembuatan statis menghasilkan HTML sebelum permintaan diterima. Rendering server menghasilkan HTML di server saat permintaan diterima. Metode ini juga dapat digunakan pada React. \u003ca href=\"https://web.dev/articles/rendering-on-the-web\"\u003ePanduan metode rendering web.dev\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eMetode\u003c/th\u003e\n\u003cth\u003eWaktu pembuatan HTML\u003c/th\u003e\n\u003cth\u003eSituasi yang cocok untuk dipertimbangkan\u003c/th\u003e\n\u003cth\u003eHal operasional yang perlu diperiksa\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Metode\"\u003eRendering klien CSR\u003c/td\u003e\n\u003ctd data-label=\"Waktu pembuatan HTML\"\u003eSaat JavaScript dijalankan di browser\u003c/td\u003e\n\u003ctd data-label=\"Situasi yang cocok untuk dipertimbangkan\"\u003eTampilan dengan banyak interaksi pengguna\u003c/td\u003e\n\u003ctd data-label=\"Hal operasional yang perlu diperiksa\"\u003eEksekusi dan permintaan yang diperlukan hingga konten utama tampil\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Metode\"\u003ePembuatan statis SSG\u003c/td\u003e\n\u003ctd data-label=\"Waktu pembuatan HTML\"\u003eSaat build atau pembuatan konten\u003c/td\u003e\n\u003ctd data-label=\"Situasi yang cocok untuk dipertimbangkan\"\u003eDokumen publik yang menampilkan konten sama kepada pengunjung\u003c/td\u003e\n\u003ctd data-label=\"Hal operasional yang perlu diperiksa\"\u003ePembuatan ulang dan deployment setelah perubahan\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Metode\"\u003eRendering server SSR\u003c/td\u003e\n\u003ctd data-label=\"Waktu pembuatan HTML\"\u003eSaat memproses permintaan halaman\u003c/td\u003e\n\u003ctd data-label=\"Situasi yang cocok untuk dipertimbangkan\"\u003eTampilan yang menyusun konten terbaru untuk setiap permintaan\u003c/td\u003e\n\u003ctd data-label=\"Hal operasional yang perlu diperiksa\"\u003eWaktu pengambilan data dan pembuatan HTML\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Metode\"\u003ePrarendering\u003c/td\u003e\n\u003ctd data-label=\"Waktu pembuatan HTML\"\u003eSaat aplikasi dijalankan sebelum deployment untuk menghasilkan HTML\u003c/td\u003e\n\u003ctd data-label=\"Situasi yang cocok untuk dipertimbangkan\"\u003eSaat menyediakan konten utama awal dari aplikasi yang sudah ada lebih dahulu\u003c/td\u003e\n\u003ctd data-label=\"Hal operasional yang perlu diperiksa\"\u003eJavaScript yang diperlukan untuk fungsi selanjutnya\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003ePembuatan statis dan CDN memiliki peran yang berbeda. Pembuatan statis merupakan pilihan mengenai waktu pembuatan HTML. CDN merupakan arsitektur untuk mengirimkan dan menggunakan kembali konten. HTML yang dibuat di server juga dapat disimpan dalam cache CDN jika memenuhi persyaratan.\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#apa-arti-ttfb-08-detik\" class=\"anchor\" id=\"apa-arti-ttfb-08-detik\"\u003e\u003c/a\u003eApa arti TTFB 0.8 detik?\u003c/h2\u003e\n\u003cp\u003eTTFB adalah waktu dari dimulainya navigasi halaman hingga diterimanya byte respons pertama. web.dev menyarankan \u003cstrong\u003epaling lama 0.8 detik\u003c/strong\u003e sebagai sasaran umum untuk sebagian besar situs. Ini berbeda dari waktu hingga seluruh halaman ditampilkan. TTFB sendiri juga bukan bagian dari Core Web Vitals. \u003ca href=\"https://web.dev/articles/ttfb\"\u003ePenjelasan TTFB dari web.dev\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eTTFB juga mencakup keterlambatan di luar pemrosesan internal server. Pencarian DNS adalah proses mencari alamat koneksi suatu domain. Koneksi TCP dan TLS juga dapat memerlukan waktu. Pengalihan ke alamat lain turut memengaruhinya.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eWaktu pencarian DNS dan persiapan koneksi\u003c/li\u003e\n\u003cli\u003eWaktu pengiriman permintaan dan respons melalui jaringan\u003c/li\u003e\n\u003cli\u003eWaktu pengambilan data dan pembuatan HTML di server asal\u003c/li\u003e\n\u003cli\u003eWaktu pengalihan yang terjadi sebelum respons pertama\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eLokasi server di Seoul saja tidak cukup untuk menyimpulkan bahwa waktunya lebih dari 0.8 detik. Hasilnya berbeda menurut lokasi akses dan apakah koneksi digunakan kembali. Perayap Google terutama menggunakan alamat IP Amerika Serikat. Namun, perayap juga dapat mengakses dari alamat IP negara lain. \u003ca href=\"https://developers.google.com/crawling/docs/crawlers-fetchers/overview-google-crawlers?hl=en\"\u003eKarakteristik teknis perayap Google\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eKeterlambatan respons yang berkelanjutan memengaruhi kapasitas perayapan Google. Kesalahan server juga dapat menyebabkan berkurangnya jumlah perayapan. Namun, bukan berarti perayapan akan dihentikan begitu waktu respons sekali saja melebihi 0.8 detik. Kualitas halaman dan frekuensi pembaruan juga memengaruhi permintaan perayapan. \u003ca href=\"https://developers.google.com/crawling/docs/crawl-budget\"\u003ePanduan anggaran perayapan Google\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#mengapa-cache-html-di-cdn-perlu-diperiksa\" class=\"anchor\" id=\"mengapa-cache-html-di-cdn-perlu-diperiksa\"\u003e\u003c/a\u003eMengapa cache HTML di CDN perlu diperiksa\u003c/h2\u003e\n\u003cp\u003eCloudflare CDN secara default tidak menyimpan HTML dalam cache. Meskipun gambar atau CSS disimpan dalam cache, dokumen konten utama harus diperiksa secara terpisah. Periksa perilaku default CDN lain dalam dokumentasi layanan masing-masing.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003eCloudflare CDN secara default tidak menyimpan HTML atau JSON dalam cache.\u003c/p\u003e\n\u003cp\u003eCloudflare, Perilaku cache default\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp\u003eKalimat ini berarti HTML dan JSON bukan sasaran cache secara default. HTML publik dapat dimasukkan sebagai sasaran cache melalui Cache Rules. Apakah respons benar-benar disimpan juga dipengaruhi oleh kondisi seperti header respons dan cookie. \u003ca href=\"https://developers.cloudflare.com/cache/concepts/default-cache-behavior/\"\u003ePerilaku cache default Cloudflare\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eCache adalah fitur yang menggunakan kembali respons yang telah disimpan. Menghubungkan situs ke CDN tidak berarti semua dokumen langsung disalin ke seluruh dunia. Cloudflare menyimpan konten dalam cache di pusat data yang menangani permintaan. Permintaan untuk konten yang belum ada dalam cache mungkin memerlukan pengambilan dari server asal. \u003ca href=\"https://developers.cloudflare.com/cache/get-started/\"\u003ePanduan memulai cache Cloudflare\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eSaat menerapkan aturan cache pada HTML publik, kecualikan halaman yang dipersonalisasi. Cloudflare memperingatkan bahwa cache HTML dinamis dapat menyebabkan informasi orang lain terkirim. Jangan simpan halaman login atau akun dalam cache. \u003ca href=\"https://developers.cloudflare.com/cache/how-to/cache-rules/examples/cache-everything/\"\u003eHal yang perlu diperhatikan pada Cloudflare Cache Everything\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#kriteria-penerapan-cache-berdasarkan-kondisi-halaman\" class=\"anchor\" id=\"kriteria-penerapan-cache-berdasarkan-kondisi-halaman\"\u003e\u003c/a\u003eKriteria penerapan cache berdasarkan kondisi halaman\u003c/h2\u003e\n\u003cp\u003eApakah konten yang sama ditampilkan kepada pengunjung menjadi titik awal penentuan cakupan cache. Teks penjelasan publik cocok digunakan kembali secara bersama. Respons yang isinya berubah menurut status login harus ditangani secara terpisah.\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eKondisi halaman\u003c/th\u003e\n\u003cth\u003eKonfigurasi yang perlu dipertimbangkan\u003c/th\u003e\n\u003cth\u003eHal yang perlu diperiksa bersama\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Kondisi halaman\"\u003eMenyediakan teks penjelasan yang sama kepada pengunjung\u003c/td\u003e\n\u003ctd data-label=\"Konfigurasi yang perlu dipertimbangkan\"\u003ePembuatan statis dan cache HTML publik\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa bersama\"\u003ePembuatan ulang dan pembaruan cache setelah perubahan\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Kondisi halaman\"\u003eKonten utama publik memuat angka yang sering berubah\u003c/td\u003e\n\u003ctd data-label=\"Konfigurasi yang perlu dipertimbangkan\"\u003eMemisahkan cara pembaruan konten utama dan data yang berubah\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa bersama\"\u003eWaktu acuan angka dan tampilan saat terjadi kegagalan\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Kondisi halaman\"\u003eMemerlukan informasi publik terbaru saat permintaan diterima\u003c/td\u003e\n\u003ctd data-label=\"Konfigurasi yang perlu dipertimbangkan\"\u003eMempertimbangkan rendering server dan cache bersyarat\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa bersama\"\u003eKeterlambatan informasi yang dapat ditoleransi\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Kondisi halaman\"\u003eTampilan login, akun, dan pembayaran\u003c/td\u003e\n\u003ctd data-label=\"Konfigurasi yang perlu dipertimbangkan\"\u003eMengecualikannya dari cache HTML bersama\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa bersama\"\u003eCookie autentikasi dan respons per pengguna\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Kondisi halaman\"\u003eMenyediakan dokumen publik dalam berbagai bahasa\u003c/td\u003e\n\u003ctd data-label=\"Konfigurasi yang perlu dipertimbangkan\"\u003eURL per bahasa dan cache masing-masing dokumen\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa bersama\"\u003eTautan antarversi terjemahan dan pembaruan per bahasa\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003eMemuat data waktu nyata belakangan memudahkan pemeliharaan konten utama yang statis. Namun, jangan menunda pemuatan seluruh konten inti yang diperlukan untuk pencarian. Hal ini dapat bertentangan dengan tujuan penyediaan HTML awal.\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#kesalahan-umum-dan-kriteria-pemeriksaan\" class=\"anchor\" id=\"kesalahan-umum-dan-kriteria-pemeriksaan\"\u003e\u003c/a\u003eKesalahan umum dan kriteria pemeriksaan\u003c/h2\u003e\n\u003cp\u003eMenilai hasil hanya dari nama teknologi atau layar pengaturan dapat membuat kesalahan mudah terlewat. Periksa HTML yang sebenarnya beserta header responsnya. Berikut adalah kondisi yang harus dibedakan satu sama lain.\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003ePenilaian yang umum\u003c/th\u003e\n\u003cth\u003eKriteria yang perlu diperiksa\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Penilaian yang umum\"\u003eSitus React tidak dapat dibaca robot pencarian\u003c/td\u003e\n\u003ctd data-label=\"Kriteria yang perlu diperiksa\"\u003eHTML awal dan hasil rendering Google\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Penilaian yang umum\"\u003eTTFB 0.8 detik berarti seluruh halaman juga sudah tampil\u003c/td\u003e\n\u003ctd data-label=\"Kriteria yang perlu diperiksa\"\u003eWaktu dari respons pertama hingga konten utama tampil\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Penilaian yang umum\"\u003eHTML pasti tersimpan dalam cache karena sudah terhubung ke CDN\u003c/td\u003e\n\u003ctd data-label=\"Kriteria yang perlu diperiksa\"\u003eStatus cache permintaan HTML\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Penilaian yang umum\"\u003eFile statis selalu berisi konten terbaru\u003c/td\u003e\n\u003ctd data-label=\"Kriteria yang perlu diperiksa\"\u003eWaktu pembuatan terakhir dan konten yang di-deploy\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Penilaian yang umum\"\u003eRespons cepat berarti halaman sudah masuk ke pencarian\u003c/td\u003e\n\u003ctd data-label=\"Kriteria yang perlu diperiksa\"\u003eStatus pengindeksan di Search Console\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Penilaian yang umum\"\u003eMenilai kecepatan global dari satu hasil cache hit\u003c/td\u003e\n\u003ctd data-label=\"Kriteria yang perlu diperiksa\"\u003eHasil pengukuran berdasarkan wilayah akses dan apakah permintaan dilayani dari cache\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003e\u003ccode\u003eCF-Cache-Status\u003c/code\u003e milik Cloudflare adalah header yang menunjukkan status cache. \u003ccode\u003eHIT\u003c/code\u003e berarti respons ditemukan dalam cache. \u003ccode\u003eMISS\u003c/code\u003e berarti respons tidak ada dalam cache saat permintaan diterima sehingga diambil dari server asal. \u003ccode\u003eDYNAMIC\u003c/code\u003e berarti respons tidak diperlakukan sebagai sasaran cache. \u003ca href=\"https://developers.cloudflare.com/cache/concepts/cache-responses/\"\u003ePenjelasan respons cache Cloudflare\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#pembaruan-cache-setelah-perubahan-konten\" class=\"anchor\" id=\"pembaruan-cache-setelah-perubahan-konten\"\u003e\u003c/a\u003ePembaruan cache setelah perubahan konten\u003c/h2\u003e\n\u003cp\u003eUntuk file statis dan cache CDN, alur penerapan perubahan juga harus dirancang. Meskipun konten di server asal sudah diubah, konten lama tetap akan dikirim jika cache lama masih ada. Jika HTML dan JSON diterbitkan bersama, isi kedua format tersebut juga harus diselaraskan.\u003c/p\u003e\n\u003cp\u003eBerikut urutan pemeriksaan saat mengelola dokumen dan file data secara bersamaan.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eTetapkan perubahan pada data sumber.\u003c/li\u003e\n\u003cli\u003eBuat ulang HTML dan file data menggunakan versi perubahan yang sama.\u003c/li\u003e\n\u003cli\u003eSetelah men-deploy file baru, perbarui cache untuk URL yang berubah.\u003c/li\u003e\n\u003cli\u003eMinta kembali setiap URL untuk memastikan perubahan isinya konsisten.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eCloudflare menyarankan penghapusan cache per URL. Penghapusan cache adalah tindakan menghapus respons yang tersimpan. Pembuatan ulang HTML statis tetap harus dilakukan secara terpisah. Karena itu, hubungkan pembuatan file dan pembaruan cache dalam prosedur deployment yang sama. \u003ca href=\"https://developers.cloudflare.com/cache/how-to/purge-cache/\"\u003ePanduan penghapusan cache Cloudflare\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eTentukan interval pembaruan sesuai keterlambatan informasi yang dapat ditoleransi oleh konten. Teks penjelasan dan angka waktu nyata tidak harus menggunakan interval yang sama. Masa berlaku cache yang singkat saja tidak dapat menyelesaikan seluruh masalah pembaruan.\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#kriteria-hreflang-untuk-situs-multibahasa\" class=\"anchor\" id=\"kriteria-hreflang-untuk-situs-multibahasa\"\u003e\u003c/a\u003eKriteria hreflang untuk situs multibahasa\u003c/h2\u003e\n\u003cp\u003e\u003ccode\u003ehreflang\u003c/code\u003e adalah informasi yang menghubungkan alamat konten yang sama untuk berbagai bahasa dan wilayah. Ini bukan fitur pembuat terjemahan. Informasi ini membantu Google menemukan versi bahasa yang sesuai untuk pengunjung.\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eLokasi implementasi\u003c/th\u003e\n\u003cth\u003eCara penandaan\u003c/th\u003e\n\u003cth\u003eHal yang perlu diperiksa saat memilih\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Lokasi implementasi\"\u003eHTML\u003c/td\u003e\n\u003ctd data-label=\"Cara penandaan\"\u003eMencantumkan tautan bahasa alternatif di \u003ccode\u003ehead\u003c/code\u003e dokumen\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa saat memilih\"\u003eApakah dapat dikelola dalam setiap templat halaman\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Lokasi implementasi\"\u003eHeader HTTP\u003c/td\u003e\n\u003ctd data-label=\"Cara penandaan\"\u003eMencantumkannya dalam header \u003ccode\u003eLink\u003c/code\u003e pada respons\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa saat memilih\"\u003eApakah header dapat dikelola di server\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"Lokasi implementasi\"\u003ePeta situs\u003c/td\u003e\n\u003ctd data-label=\"Cara penandaan\"\u003eMencantumkan hubungan URL antarbahasa dalam peta situs\u003c/td\u003e\n\u003ctd data-label=\"Hal yang perlu diperiksa saat memilih\"\u003eApakah daftar dokumen dapat dikelola sekaligus\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003eGoogle memperlakukan semua metode ini secara setara. Karena itu, penandaan tidak harus dimasukkan hanya di dalam HTML. Dokumen setiap bahasa harus mencantumkan dokumen bahasa alternatif, termasuk dirinya sendiri. Periksa juga hubungan antarhalaman yang saling bersesuaian. \u003ca href=\"https://developers.google.com/search/docs/specialty/international/localized-versions\"\u003ePanduan halaman multibahasa Google\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#urutan-pemeriksaan-hasil-deployment\" class=\"anchor\" id=\"urutan-pemeriksaan-hasil-deployment\"\u003e\u003c/a\u003eUrutan pemeriksaan hasil deployment\u003c/h2\u003e\n\u003cp\u003eSetelah deployment, verifikasi pengiriman konten utama dan perilaku cache secara terpisah. Catat juga wilayah pengukuran dan status cache bersama hasil pengukuran kecepatan. Urutan berikut memudahkan identifikasi letak masalah.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003ePeriksa respons dokumen HTML melalui alat pengembang browser. Pastikan konten utama disertakan dalam respons.\u003c/li\u003e\n\u003cli\u003ePeriksa HTML hasil rendering melalui Inspeksi URL di Search Console. Periksa juga status pengindeksan sebenarnya secara terpisah.\u003c/li\u003e\n\u003cli\u003ePeriksa header cache pada respons HTML. Untuk Cloudflare, baca \u003ccode\u003eCF-Cache-Status\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eUkur dokumen yang sama dari wilayah akses utama. Bedakan permintaan untuk konten yang tidak ada dalam cache dan permintaan yang dilayani dari cache.\u003c/li\u003e\n\u003cli\u003eSetelah mengubah konten, periksa hasil pembaruannya. Periksa juga apakah halaman login dikecualikan dari cache.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eCloudflare memperingatkan bahwa penerapan cache HTML dinamis secara berlebihan dapat mengganggu fungsi login. Jangan simpan formulir login dan halaman yang memerlukan autentikasi dalam cache. Setelah perubahan, periksa juga apakah cookie autentikasi tetap tersimpan. \u003ca href=\"https://developers.cloudflare.com/cache/troubleshooting/dynamic-content-and-login-issues/\"\u003ePanduan masalah login Cloudflare\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#persyaratan-implementasi-untuk-disampaikan-kepada-ai-saat-menulis-kode\" class=\"anchor\" id=\"persyaratan-implementasi-untuk-disampaikan-kepada-ai-saat-menulis-kode\"\u003e\u003c/a\u003ePersyaratan implementasi untuk disampaikan kepada AI saat menulis kode\u003c/h2\u003e\n\u003cp\u003eSaat meminta AI, sertakan hasil yang dapat diverifikasi bersama nama teknologinya. Menentukan isi HTML awal dan cakupan pengecualian cache merupakan cara yang berguna. Teks berikut adalah contoh permintaan untuk membuat halaman pengetahuan publik.\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u003cspan\u003eSertakan konten utama halaman pengetahuan publik dalam HTML awal.\n\u003c/span\u003e\u003cspan\u003eUtamakan pertimbangan pembuatan statis untuk dokumen publik.\n\u003c/span\u003e\u003cspan\u003eJelaskan secara terpisah cara memperbarui data yang berubah.\n\u003c/span\u003e\u003cspan\u003ePeriksa apakah cache HTML diterapkan di CDN.\n\u003c/span\u003e\u003cspan\u003eKecualikan halaman login, akun, dan pembayaran dari cache bersama.\n\u003c/span\u003e\u003cspan\u003eHubungkan pembuatan ulang file statis dan pembaruan cache saat konten diubah.\n\u003c/span\u003e\u003cspan\u003eJika ada halaman multibahasa, atur hubungan hreflang.\n\u003c/span\u003e\u003cspan\u003eBerikan cara memeriksa HTML awal, status cache, dan apakah perubahan sudah diterapkan.\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\n","tags":["Pengembangan AI","Monetisasi konten","Strategi teknologi","Alat pengembangan"],"faqs":[{"question":"Apakah situs web dengan keterlibatan rendah harus dibuat menggunakan kerangka kerja tertentu?","answer":"Tidak ada kerangka kerja tertentu yang wajib digunakan. Pastikan konten utama tercakup dalam HTML awal. Tinjau juga cara konten publik disimpan dalam cache dan diperbarui."},{"question":"Apakah Google tidak menjalankan JavaScript?","answer":"Google menjalankan JavaScript menggunakan Chromium. Namun, waktu tunggu rendering dan sumber daya yang diblokir dapat memengaruhi pemrosesan. Menyertakan konten utama dalam HTML awal dapat mengurangi ketergantungan pada eksekusi tambahan."},{"question":"Apakah situs yang dibuat dengan React juga dapat menggunakan pembuatan statis?","answer":"React juga dapat menghasilkan HTML statis. Pembuatan HTML di server juga didukung. Isi HTML awal tidak dapat ditentukan hanya berdasarkan apakah React digunakan atau tidak."},{"question":"Jika TTFB paling lama 0.8 detik, apakah seluruh halaman sudah terbuka?","answer":"TTFB adalah waktu yang dibutuhkan hingga byte pertama respons tiba. Pengunduhan gambar dan penyusunan tampilan masih dapat berlanjut setelahnya. TTFB harus dibedakan dari waktu pemuatan seluruh halaman."},{"question":"Jika TTFB melebihi 0.8 detik, apakah situs akan dikeluarkan dari penelusuran Google?","answer":"0.8 detik adalah perkiraan target performa yang diberikan oleh web.dev. Ini bukan aturan bahwa situs akan dikeluarkan dari penelusuran jika melampaui waktu tersebut. Keterlambatan respons yang berkelanjutan dan kesalahan server dapat memengaruhi kapasitas perayapan."},{"question":"Apakah penggunaan server di Korea merugikan situs global?","answer":"Pengunjung yang berada jauh dari server dapat mengalami latensi jaringan. Namun, waktu respons tertentu tidak dapat dipastikan hanya berdasarkan lokasi. Nilailah berdasarkan hasil pengukuran aktual di wilayah utama pengunjung."},{"question":"Jika Cloudflare dihubungkan, apakah HTML juga otomatis disimpan dalam cache?","answer":"Secara default, Cloudflare CDN tidak menyimpan HTML dan JSON dalam cache. Periksa Cache Rules yang akan diterapkan pada HTML publik. Setelah aturan diterapkan, periksa status cache yang sebenarnya melalui header respons."},{"question":"Apakah permintaan pertama yang belum ada dalam cache CDN juga selalu cepat?","answer":"Permintaan yang tidak ada dalam cache mungkin perlu mengambil respons dari server asal. Karena itu, latensinya dapat berbeda dari permintaan yang ditemukan dalam cache. Ukur kedua kondisi tersebut secara terpisah."},{"question":"Apakah cache HTML boleh diterapkan juga pada halaman login?","answer":"Jangan menyimpan halaman login dan HTML yang memerlukan autentikasi dalam cache. Cloudflare memperingatkan bahwa penggunaan cache yang berlebihan dapat mengganggu fungsi login. Ada juga risiko informasi khusus pengguna tersampaikan kepada pengunjung lain."},{"question":"Apa yang harus dilakukan jika konten lama masih terlihat setelah artikel di situs statis diedit?","answer":"Pertama, pastikan HTML baru sudah dihasilkan dan diterapkan. Setelah itu, perbarui cache CDN untuk URL yang berubah. Menghapus cache saja tidak akan menghasilkan ulang file statis."},{"question":"Apakah hreflang hanya boleh dimasukkan ke dalam HTML?","answer":"Google mendukung metode HTML, header HTTP, dan peta situs. Ketiga metode tersebut setara dari sudut pandang Google. Pilih metode yang mudah dikelola dan pertahankan keterkaitan antarversi bahasa secara konsisten."},{"question":"Apakah anggaran perayapan perlu dikelola secara intensif meskipun situsnya kecil?","answer":"Panduan anggaran perayapan Google terutama ditujukan untuk situs besar yang sering diperbarui. Jika jumlah halaman tidak banyak, mulailah dengan memperbarui peta situs dan memeriksa laporan pengindeksan. Jika ada kesalahan server atau konten utama yang hilang, selesaikan masalah tersebut terlebih dahulu."}],"sources":[{"url":"https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics","title":"Google Search Central: Memahami dasar-dasar SEO JavaScript","type":"source"},{"url":"https://web.dev/articles/rendering-on-the-web","title":"web.dev: Rendering di web","type":"source"},{"url":"https://web.dev/articles/ttfb","title":"web.dev: Time to First Byte (TTFB), diperbarui pada 18 November 2025","type":"data_point"},{"url":"https://developers.google.com/crawling/docs/crawlers-fetchers/overview-google-crawlers?hl=en","title":"Google: Gambaran umum crawler dan fetcher Google","type":"source"},{"url":"https://developers.google.com/crawling/docs/crawl-budget","title":"Google: Optimalkan anggaran crawl Anda","type":"source"},{"url":"https://developers.cloudflare.com/cache/concepts/default-cache-behavior/","title":"Cloudflare: Perilaku cache default","type":"source"},{"url":"https://developers.cloudflare.com/cache/get-started/","title":"Cloudflare Cache: Memulai","type":"source"},{"url":"https://developers.cloudflare.com/cache/how-to/cache-rules/examples/cache-everything/","title":"Cloudflare: Tingkat cache (Cache Everything)","type":"source"},{"url":"https://developers.cloudflare.com/cache/concepts/cache-responses/","title":"Respons cache Cloudflare","type":"source"},{"url":"https://developers.cloudflare.com/cache/how-to/purge-cache/","title":"Cloudflare: Hapus cache","type":"source"},{"url":"https://developers.cloudflare.com/cache/troubleshooting/dynamic-content-and-login-issues/","title":"Cloudflare: Konten dinamis dan masalah login","type":"source"},{"url":"https://developers.google.com/search/docs/specialty/international/localized-versions","title":"Google Search Central: Beri tahu Google tentang versi halaman Anda yang dilokalkan","type":"source"}],"images":[{"id":2451,"url":"https://injoys.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzgxNjYsInB1ciI6ImJsb2JfaWQifX0=--3301cc345476b9a82de57f9e5bdbad57a8717225/ai-cace8faa.webp","is_representative":true,"generation_method":"ai_photo","license":"ai_generated","mime_type":"image/webp","width":1536,"height":1024,"translations":{"ko":{"alt":"보라색 케이블이 정돈된 서버 랙 옆에서 장비 상태를 살펴보는 남성","caption":"공개 페이지의 HTML 캐시는 적용 범위와 콘텐츠 수정 후 갱신 정책을 함께 설계해야 합니다.","description":null},"en":{"alt":"A man inspecting a server rack with neatly bundled purple cables","caption":"HTML caching for public pages requires defining both its scope and how it is refreshed after content changes.","description":null},"ja":{"alt":"紫色のケーブルが整然と束ねられたサーバーラックの横で機器を確認する男性","caption":"公開ページのHTMLキャッシュは、適用範囲とコンテンツ変更後の更新方針を併せて設計する必要があります。","description":null},"es":{"alt":"Un hombre revisa un rack de servidores con cables morados ordenados en haces","caption":"La caché HTML de las páginas públicas requiere definir su alcance y cómo se actualizará tras modificar el contenido.","description":null},"id":{"alt":"Seorang pria memeriksa rak server dengan kabel ungu yang tertata rapi","caption":"Cache HTML untuk halaman publik memerlukan penetapan cakupan dan kebijakan pembaruan setelah konten diubah.","description":null},"pt":{"alt":"Um homem inspeciona um rack de servidores com cabos roxos organizados em feixes","caption":"O cache HTML de páginas públicas exige definir seu escopo e como será atualizado após alterações no conteúdo.","description":null},"zh-hant":{"alt":"一名男子在伺服器機架旁檢查設備，機架內的紫色線纜整齊成束","caption":"公開頁面的 HTML 快取需要同時規劃適用範圍與內容修改後的更新政策。","description":null},"de":{"alt":"Ein Mann prüft ein Serverrack mit ordentlich gebündelten violetten Kabeln","caption":"Für den HTML-Cache öffentlicher Seiten müssen der Geltungsbereich und die Aktualisierung nach Inhaltsänderungen festgelegt werden.","description":null}}},{"id":2452,"url":"https://injoys.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzgxNzIsInB1ciI6ImJsb2JfaWQifX0=--6d794cafac94909fa4ac95705b51dc5bde79c2df/ai-9e2e0147.webp","is_representative":false,"generation_method":"ai_semi","license":"ai_generated","mime_type":"image/webp","width":1536,"height":1024,"translations":{"ko":{"alt":"두 태블릿의 웹페이지를 비교하는 여성과 문서 갱신이 두 브라우저로 이어지는 도식","caption":"콘텐츠 수정 후에는 재생성한 HTML이 캐시에도 반영됐는지 확인해야 합니다.","description":null},"en":{"alt":"A woman compares web pages on two tablets beside a diagram linking a document refresh to two browser windows.","caption":"After content changes, verify that the cache also reflects the regenerated HTML.","description":null},"ja":{"alt":"2台のタブレットでウェブページを比較する女性と、文書の更新から2つのブラウザーへつながる図","caption":"コンテンツの修正後は、再生成したHTMLがキャッシュにも反映されているか確認する必要があります。","description":null},"es":{"alt":"Una mujer compara páginas web en dos tabletas junto a un diagrama de actualización de un documento.","caption":"Tras modificar el contenido, hay que comprobar que la caché también refleje el HTML regenerado.","description":null},"id":{"alt":"Seorang perempuan membandingkan halaman web di dua tablet di samping diagram pembaruan dokumen.","caption":"Setelah konten diubah, pastikan cache juga mencerminkan HTML yang dibuat ulang.","description":null},"pt":{"alt":"Uma mulher compara páginas web em dois tablets ao lado de um diagrama de atualização de um documento.","caption":"Após alterar o conteúdo, é preciso verificar se o cache também reflete o HTML regenerado.","description":null},"zh-hant":{"alt":"一名女性比較兩台平板上的網頁，旁邊的圖示呈現文件更新後連向兩個瀏覽器視窗","caption":"修改內容後，應確認快取也已反映重新產生的 HTML。","description":null},"de":{"alt":"Eine Frau vergleicht Webseiten auf zwei Tablets neben einem Diagramm zur Dokumentaktualisierung.","caption":"Nach Inhaltsänderungen muss geprüft werden, ob auch der Cache das neu generierte HTML enthält.","description":null}}}],"published_at":"2026-11-05T07:45:55+09:00","updated_at":"2026-11-05T07:45:55+09:00","license":"cc_by","translation_status":"reviewed","available_locales":["ko","en","ja","es"],"data_locales":["ko","en","ja","es","id","pt","zh-hant","de"],"url":"https://injoys.com/en/articles/low-involvement-web-static-generation-html-cache"}