Website utama sekolah RA Mutiara Islam Kendari berjalan di Blogger, tapi alih-alih memakai tema generik, situsnya dibangun penuh dari template custom-coded sendiri. Template ini mencakup homepage, blog dinamis yang mendokumentasikan kehidupan sekolah sehari-hari, sampai halaman khusus untuk Kontak, Profil, dan Galeri, menghadirkan sekolah yang sudah berdiri sejak 2006 dengan lebih dari 600 alumni ke orang tua yang mencari informasi sekolah secara organik.
Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.
Desktop
Mobile
Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.
Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.
Tinjauan lebih dekat soal apa yang ditawarkan produk jadinya, hambatan di sepanjang jalan, dan hasil akhirnya.
Membangun di Dalam CMS Tanpa Build Pipeline
Blogger tidak mendukung proses build eksternal, jadi seluruh template harus ditulis pakai sintaks templating Blogger sendiri. Tailwind CSS yang sudah dikompilasi pun harus disuntikkan manual ke style block template tiap kali ada perubahan.
Menghindari Redirect Loop di Mobile
Blogger otomatis menambahkan parameter URL mobile dan terus menambahkannya lagi di tiap navigasi. Redirect full-page yang naif untuk menghapusnya justru menyebabkan infinite reload loop, jadi diperbaiki dengan menulis ulang URL secara diam-diam sebagai gantinya.
Mencapai Skor Google PageSpeed Sempurna
Mendapatkan skor hijau di keempat kategori PageSpeed membutuhkan optimasi hati-hati untuk delivery gambar, JS, dan CSS, di atas keterbatasan template Blogger sendiri.
Memproduksi dan Meng-embed Testimoni Video
Footage testimoni orang tua yang mentah butuh diedit dulu sebelum bisa dipakai, lalu harus dipublikasikan dan di-embed dengan cara yang tidak memperlambat homepage.
Bagaimana proyek ini mengubah keadaan bagi bisnis dan penggunanya setelah rilis.
Informasi lengkap di satu tempat
Nol redirect loop
Gambar di bawah 200KB
PageSpeed hijau di keempat kategori
Workflow penyuntikan CSS otomatis
Halaman 1 Google untuk keyword target
Testimoni video yang rapi
Publikasi artikel berkelanjutan
Sebelum
Website sebelumnya sudah mencakup hal dasar, tapi program, jadwal, fasilitas, dan testimoni belum terorganisir bersama di satu tempat yang jelas.
Sesudah
Situs hasil redesain sekarang menyatukan semua itu, membuat orang tua jauh lebih mudah mendapatkan gambaran lengkap dalam satu kunjungan.
Sebelum
Blogger otomatis menambahkan parameter untuk pengunjung mobile, dan perbaikan awal menggunakan redirect full-page menyebabkan pengunjung terjebak dalam infinite reload loop.
Sesudah
URL sekarang ditulis ulang secara diam-diam menggunakan history API browser sendiri alih-alih redirect, menghapus parameter tanpa reload dan tanpa loop sama sekali.
Sebelum
Gambar beresolusi tinggi di seluruh situs, bukan cuma satu bagian, berisiko memperlambat setiap halaman.
Sesudah
Setiap gambar di seluruh situs dikompres ke WebP dan dijaga di bawah 200KB, menjaga halaman tetap cepat tanpa penurunan kualitas yang terlihat.
Sebelum
Performa awal tidak konsisten di keempat kategori Google PageSpeed.
Sesudah
Optimasi berkelanjutan untuk delivery gambar, JS, dan CSS membawa keempat kategori jadi hijau semua.
Sebelum
Blogger tidak menyediakan cara untuk menjalankan proses build eksternal, jadi styling baru apapun tidak punya jalan untuk benar-benar sampai ke template yang live.
Sesudah
Script otomatis kecil mengompilasi Tailwind CSS terbaru dan menyuntikkannya langsung ke style block template, menjaga workflow ala-build meski ada keterbatasan Blogger.
Sebelum
Situs sebelumnya punya optimasi SEO yang terbatas, menyisakan ruang untuk memperbaiki seberapa mudah sekolah ditemukan di hasil pencarian.
Sesudah
Google Search Console dan Analytics sekarang melacak traffic organik, dengan optimasi SEO berkelanjutan yang membawa situs ke halaman pertama Google untuk "TK Kendari" dan "TK Islami Kendari".
Sebelum
Video testimoni orang tua yang mentah belum siap membangun kepercayaan dengan sendirinya.
Sesudah
Diedit jadi video yang rapi, dipublikasikan di YouTube, dan di-embed langsung di homepage.
Sebelum
Update blog cuma sesekali, menyisakan celah dalam catatan publik kegiatan dan pencapaian sekolah sehari-hari.
Sesudah
Artikel blog rutin sekarang mendokumentasikan acara sekolah lebih konsisten, membangun sejarah kehidupan sekolah yang terus bertambah dan bisa dicari.
