Giri Magna Jaya: Situs Perusahaan Bilingual Tanpa Bundel JavaScript

CV. Giri Magna Jaya adalah perusahaan konsultansi di Gresik, Jawa Timur yang bergerak di sembilan bidang kegiatan usaha — jasa survey, studi kelayakan, perencanaan daerah, telematika dan software, hingga pengadaan barang — untuk instansi pemerintah, universitas, rumah sakit, dan perusahaan swasta.

Mereka membutuhkan profil perusahaan yang terbaca kredibel oleh pejabat pengadaan yang sedang menilai mereka, dalam bahasa Indonesia dan Inggris, dan yang tetap ringan di koneksi kantor instansi.

Dibangun dengan apa

Astro dengan Tailwind CSS v4 dan TypeScript, dikompilasi menjadi keluaran sepenuhnya statis — tiga belas halaman HTML, satu berkas stylesheet, tanpa runtime di server dan tanpa apa pun yang perlu ditambal.

Statis di sini adalah pilihan yang tepat, bukan batasan yang harus diakali. Profil perusahaan jauh lebih sering dibaca daripada diubah, setiap halamannya perlu dapat di-crawl, dan kliennya berada di shared hosting. Tidak ada basis data dan tidak ada server aplikasi, sehingga permukaan serangannya hanya berupa satu direktori berisi berkas.

Bilingual, dan dijamin tetap selaras secara struktur

Bahasa Indonesia menjadi bahasa default dan disajikan dari root; bahasa Inggris berada di bawah /en/. Slug dilokalkan di kedua sisi — /tentang/ dan /en/about/, /portofolio/ dan /en/portfolio/ — sehingga URL-nya terbaca wajar bagi masing-masing audiens alih-alih satu bahasa meminjam jalur bahasa lainnya. Tag hreflang dan canonical dikeluarkan per rute, dan pengalih bahasa memindahkan Anda ke halaman yang sama alih-alih melempar kembali ke beranda.

Bagian yang layak disebut adalah jaminannya. Seluruh teks untuk kedua bahasa berada di balik satu antarmuka TypeScript bersama, sehingga type checker menolak build jika satu bahasa memperoleh field yang belum ada di bahasa lainnya. CI menjalankan type-check sebelum build, artinya halaman yang setengah diterjemahkan gagal di pull request alih-alih ikut tayang. Situs bilingual biasanya lapuk satu bahasa lebih dulu; yang ini tidak bisa.

SEO

Setiap rute mendeklarasikan title dan meta description miliknya sendiri, lalu disusun menjadi meta tag, tag Open Graph, dan JSON-LD oleh layout bersama. Sitemap dihasilkan saat build alih-alih dipelihara manual.

Structured data mencakup apa yang dibutuhkan mesin pencari untuk mengklasifikasikan usaha ini:

• ProfessionalService di seluruh tiga belas halaman, memuat alamat, wilayah layanan, dan OfferCatalog berisi sembilan bidang kegiatan usaha
• FAQPage di halaman beranda, dihasilkan dari konten yang sama dengan yang merender akordeon tampaknya, sehingga keduanya tidak mungkin berbeda
• BreadcrumbList di setiap halaman di bawah beranda
• noindex, follow pada halaman 404, agar tautan yang tersesat tidak menempatkan halaman error di indeks

Title dipakai apa adanya, dan nama brand hanya ditambahkan bila title-nya belum memuatnya — sehingga terhindar dari masalah sufiks berulang yang diam-diam merusak satu baris yang justru ditampilkan Google.

Lighthouse menilai hasilnya 100 untuk SEO.

Performa

Audit dari Google sendiri, dijalankan terhadap situs live — PageSpeed Insights pada profil mobile, yang mencekik CPU sekaligus jaringan dan merupakan profil yang lebih ketat di antara keduanya:

Accessibility di angka 93 adalah satu-satunya yang masih menyisakan ruang perbaikan. Tiga lainnya sudah berada di atau mendekati batas atas. Laporannya sendiri adalah gambar terakhir pada galeri di atas — di sana juga tampak pemeriksaan eksperimental Agentic Browsing, yang masih terlalu baru untuk saya jadikan patokan.

Itu skor lab dari satu kali pengukuran, bukan data lapangan — situsnya masih terlalu baru sehingga Chrome belum memiliki data pengguna nyata untuknya. Yang dicerminkannya adalah bentuk build di bawahnya, diukur pada keluaran produksi:

Tidak ada bundel JavaScript. Interaktivitas yang ada — menu mobile, akordeon FAQ, penghitung statistik — hanyalah beberapa modul inline kecil, bukan framework yang menghidrasi halaman yang sebetulnya sudah lengkap saat tiba.

Fonta di-host sendiri, diambil dan diberi fingerprint saat build alih-alih ditarik dari Google saat runtime. Tanpa analitik, tanpa skrip pihak ketiga, tanpa peta yang disematkan. Itu menjaga situsnya tetap cepat di koneksi lambat, dan membuat kebijakan privasinya menggambarkan apa yang benar-benar dilakukan build-nya alih-alih apa yang diasumsikan sebuah template.

Desain diturunkan dari brand, bukan dari pustaka stok

Tidak ada satu pun foto stok di situs ini. Setiap elemen visualnya berasal dari identitas klien sendiri:

• Paletnya diambil dari logo mereka — navy dan merah bata adalah dua warna milik mark itu sendiri, lalu dikembangkan menjadi skala penuh alih-alih dipilih agar sekadar cocok di sebelahnya.
• Logonya dibangun ulang sebagai vektor dari satu sumber geometri, yang kemudian memasok mark utuh di header, mark yang sama sebagai tekstur latar di balik seksi hero, serta kartu pratinjau media sosial. Satu definisi, sehingga tidak ada yang bisa melenceng.
• Sembilan ilustrasi SVG flat orisinal, satu untuk setiap proyek portofolio, digambar dalam bahasa geometris yang sama dengan mark-nya agar grid-nya terbaca sebagai satu set alih-alih sembilan gambar tak berhubungan.
• Dua belas emblem instansi klien dalam band “dipercaya oleh”, masing-masing disertai nama institusinya.
• Fraunces untuk display, Inter untuk teks isi — serif dengan bobot yang cukup untuk membawa otoritas judul, berpasangan dengan sans netral untuk naskah panjang.

Ketiga bagian animasinya — band emblem yang bergulir, baris statistik yang menghitung, dan glow yang mengapung di balik hero — semuanya memiliki fallback prefers-reduced-motion yang layak, diuji alih-alih diasumsikan. Band-nya menjadi grid statis, penghitungnya menampilkan nilai akhir, glow-nya diam. Salah satu tangkapan layar di slider di atas adalah kondisi reduced-motion itu.

Dua dari empat statistik utamanya dihitung saat build alih-alih ditulis manual, sehingga tidak bisa kedaluwarsa: tahun pengalaman dihitung dari tahun berdirinya, dan jumlah bidang usaha diambil dari panjang daftar layanannya.

Deployment

GitHub Actions menjalankan type-check, build, lalu men-deploy keluaran statisnya ke shared hosting klien. Job deploy mengirimkan artifact yang persis dihasilkan job build, sehingga yang mendarat di server adalah yang lolos type-check — bukan hasil build kedua yang bisa berbeda.

Yang akan saya bawa ke depan

Trik antarmuka bersama itulah gagasan yang bisa dipakai ulang. Di situs multibahasa mana pun, titik gagalnya bukan penerjemahan awal — melainkan pembaruan konten ketiga, saat satu bahasa diam-diam tertinggal. Menjadikan hal itu sebagai error kompilasi alih-alih kebiasaan code review tidak memakan biaya apa pun dan menutup seluruh kategori masalahnya.

Sisanya adalah argumen sederhana untuk keluaran statis di tempat yang memang cocok: enam halaman dalam dua bahasa, tanpa runtime framework, dan berat halaman yang tidak perlu ditunggu oleh pejabat pengadaan di koneksi kantor instansi.

Kunjungi situsnya atau hubungi saya jika ingin membangun yang serupa.