DIARI PROGRAMMER #2, Web: Berapa Page Size -nya?

Akhir-akhir ini saya merasa tidak nyaman setiap saya mulai men-develop sebuah game, atau website, terutama yang akan menjadi portfolio saya, termasuk website Anandastoon ini. Apa sih memang kekhawatiran itu?

Saya ingat, dulu tahun 2011 atau 2012, sewaktu website saya masih memakai blogspot (anandastoon.blogspot.com), saya sering menemukan artikel tentang ukuran website yang ideal. Di tahun-tahun itu, merupakan hal yang cukup membuat saya stress jika ternyata ukuran satu halaman blog saya mencapai lebih dari 100KB (tidak termasuk gambar konten).

Saya terus-menerus mengganti template hingga berhasil menurunkan berat badan, eh ukuran website saya dari 111KB menjadi 67KB. Mengapa kok seketat itu? You know, dulu menabung untuk membeli kuota internet adalah sesuatu yang sangat berharga. Saya ingat zaman kartu AX*S menawarkan quota harian 10MB untuk 1 hari senilai Rp1.000. Jadi saya tidak perlu ke warnet hanya untuk ngerjain PR 1 soal.

Lagipula, dahulu masih jauh dari kata 4G. Dapat sinyal HSDPA/3.5G saja sudah bersyukur kepalang gatruk. Jadi mendapatkan website yang cepat dan simpel benar-benar jadi andalan. Ditambah, waktu itu kebanyakan elemen tambahan memakai Alm. Shockwave Flash, yang loadnya bisa belakangan setelah websitenya termuat sempurna.

Tetapi fakta hari ini? Average page size is around 3MB! Rata-rata ukuran sebuah halaman website adalah 3MB hari ini (2018) dan diprediksi menjadi 4MB tahun 2019. Pantas saja kuota internet saya cepat sekali melambaikan tangan ke kamera. _{padahal baru gajian, hix…}

Cache, perlu kah?

Cache, yang jika dibahasaindonesiakan menjadi tembolok (teman saya tertawa setiap mendengar kata ini), menjadi senjata pamungkas untuk menghindari besarnya ukuran halaman.

Bagi yang belum paham, jika kita membuka website, biasanya gambar atau komponen-komponen yang termuat di simpan dalam browser sehingga komponen-komponen tersebut sudah tidak perlu dimuat lagi ketika kita membuka kembali website yang bersangkutan. Jadi, bisa menghemat kuota internet.

Sisi gelap terlalu mengandalkan cache? Tembolok browser bisa ‘meledak’ ukurannya bow! Google Chrome contohnya, memiliki ruang penampungan cache sekitar 2GB, yang jika lebih besar dari itu tidak menjadi cache. Makanya jangan heran kok tiba-tiba disk komputer/gadget kita tiba-tiba menyusut kayak ada setannya. Padahal tidak ada banyak foto, musik, apalagi video porno, ehm, maksudnya video horor dan film Korea.

Bisa jadi itu cache.

Yang jika kalian bersihkan semua cache itu, maka kalian harus memuat lagi seluruh komponen-komponen website yang jika di-load itu buat waktu dan kuota kalian habis.

Lagi, dengan cache, kadang kita tidak dapat update fitur terbaru karena yang kita pakai adalah fitur lama yang kita simpan di-cache. Jika programmer web tidak waspada akan hal ini, maka kejadian customer yang komplain “fitur saya kok gak update” bisa jadi bencana.

Makanya seringkali ada orang, atau customer service yang menyarankan agar “clear cache” dahulu sebelum menggunakan aplikasinya kembali.

Faktor biang kerok dan pencegahannya

Untuk para web developer, please, meskipun di zaman ini internet sudah cepat lagi murah, namun tidak ada salahnya kita ‘berbaik hati’ dengan saudara-saudara kita yang tidak merasakan kenikmatan-kenikmatan tersebut. Apa salahnya website yang kita buat dan kembangkan lebih ramah kuota internet.

Memang apa saja sih faktornya yang dapat mengganggu optimasi website?
(Perlu dicatat, saya sedang membahas komponen di luar dari konten atau artikel yang di muat di website itu sendiri)

• HTML kasar (DOM)

Bagi yang terlalu perfeksionis dan terlalu apik sehingga untuk menyelimuti elemen H1 saja perlu ribuan elemen div, tidak perlu meniru situs-situs pro yang lain, kecuali kalian ada maksud yang jelas. Setiap tab dan spasi memakan ukuran sendiri. Selama masih memungkinkan ditulis sebaris, maka tulislah sebaris selama masih dapat dibaca dengan mudah.

• File CSS

Jangan membuat banyak lembar gaya hanya untuk definisi yang belum pasti kalian gunakan. Misal, kalian mendefinisikan warna merah dengan #F30 dan kuning dengan dst… dst… Ok, itu mungkin masih wajar. Namun tidak perlu hingga mendefinisikan warna Hijau dongker, warna helm Star Wars, dan lain sebagainya.

Apalagi jika definisi-definisi yang kalian tulis tersebut bersinggungan dengan definisi gaya yang ada di CSSnya Bootstrap jika kalian menggunakannya.

Lagi, sama seperti di atas, jangan definisikan gaya di sebuah file CSS besar hanya untuk satu halaman saja dan bukan pada halaman yang lain. Itu akan memakan waktu dan kuota untuk memuat file CSS kalian. Jika masih dapat diimplementasi secara inline (langsung di atribut HTMLnya sebagai pengecualian), maka lakukanlah yang itu.

Sudah lelah saya melihat website-website yang baru file CSSnya saja, sudah memakan memori hingga 2MB. Padahal yang tampil di depan muka pengunjung, tidak sampai setengahnya.

• Framework/Library

Server kalian memakai Framework semisal CI/YII/Laravel? Hati-hati dalam menulis kode. Jangan gunakan fungsi-fungsi yang tidak perlu. Terutama Javascript. Sebenarnya JQuery/Angular/React dan Bootstrap saja sudah cukup jadi library tersendiri. Tidak perlu tambahan yang lain seperti library animasi yang meledak-ledak atau semacamnya (jika hanya untuk alay-alayan), atau library agen pengawasan FBI yang memuat seluruh databasenya.

Tidak perlu.

Karena sebuah library itu sendiri banyak yang ukurannya mencapai lebih 100KB. Jadi lebih baik hindari yang tidak perlu, atau jika dibutuhkan parsial atau sebagian, lebih baik muat hanya di halaman yang membutuhkan.

• Bijak mengolah template

Bagi yang senang membuat website non wordpress untuk dirinya, temannya, atau customernya melalui template-template yang beredar di internet, baik yang gratis maupun yang berbayar, harap bijak dalam mengolah kembali struktur template.

Maksudnya apa?

Terkadang setiap script, library, dan css yang disajikan oleh para author/pencipta template yang kalian lihat demonya, kebanyakan tidak akan kalian pakai. Jadi, sebelum langsung membuat website dengan template yang telah kalian dapatkan tersebut, lebih baik backup dahulu templatenya supaya ke depannya kalian dapat gunakan lagi dengan tujuan berbeda.

Saya pun demikian. Jika ada klien saya perlu website dengan kadar deadline. Maka saya gunakan template yang saya ambil dari luar, membackupnya, dan menghapus library, baris js dan css yang benar-benar tidak perlu sehingga ukuran halamannya menjadi jauh lebih ringan.

• Jangan banyak pajang foto sebagai latar belakang/background

Atau boleh pajang banyak foto seperti beberapa situs profesional, namun syaratnya harus dikompres dahulu. Jika formatnya JPG, maka kompres di ukuran 70 sudah cukup sebenarnya.

Hindari format PNG sebagai foto, apalagi foto narsis yang langsung diambil dari kamera DSLR dengan ukuran maksimum, dan dibuat berubah-ubah setiap beberapa detik. O mi got, web developer yang begitu lebih baik ke goa saja ya, karena di laut sudah banyak orang-orangnya.

Terlebih, jika situs kalian bukan situs profesional, jangan pajang video apalagi musik ke dalam background.

• Perhatikan komponen kalian, di mana mereka diletakkan

Jangan taruh banyak library di elemen head, taruh itu semua di elemen body paling bawah atau di elemen footer. Jangan sampai website kalian seakan ngehang karena terlalu sibuk meload skripnya dahulu di head sebelum load kontennya.

Perhatikan juga urutan penempatannya. Ada baiknya CSS di muat dahulu sebelum skrip.

• Jangan banyak menaruh komentar

Lho kok? Saya sudah buat hal ini di artikel saya yang terpisah, pada poin terakhir. Baca di sini. Karena komentar-komentar yang kalian tulis apalagi sampai berbaris-baris, dapat melambungkan ukuran halaman kalian byte demi byte. Iya kalo porsinya wajar, kalo sekali komentar bisa sepanjang kali monyet ya hancurlah kuota modemkoe.

• Selalu tes website kalian

Ada banyak situs yang dibuat untuk mengecek situs kalian, salah duanya adalah situs GTMetrix dan SiteChecker. Di sana kalian dapat mengukur bagaimana website kalian teroptimasi. Jika ukurannya masih kalian rasa besar, maka lakukanlah optimisasi-optimisasi lebih untuk kenyamanan setiap orang.

• Perhatikan faktor-faktor lain

Terakhir, jika kalian menggunakan AJAX, atau kasarnya, memanggil file PHP lewat JS, pastikan dalam porsi yang wajar untuk nilai kembalian. Misalnya, kalian ingin mengupdate porsi artikel, atau mengirimkan form tanpa harus memuat ulang keseluhan halaman, pastikan nilai return tidak terlalu banyak dan tidak dipanggil dalam waktu sering.

Dan pastikan, AJAX kalian bukan tipe async(hronous), alias semua transaksi skrip kalian akan tertahan hingga AJAXnya selesai. Tapi jangan khawatir, nilai defaultnya false kok.

 Yang terpenting

Saran saya jangan jadi programmer setengah-setengah. Jangan jadi programmer template. Maksudnya, programmer yang bisanya hanya pakai library dan template tanpa menambahkan apa pun kecuali sedikit.

Sepertinya bangsa ini terlalu mengedepankan ‘keren’nya dibandingkan dengan teknisnya. Entah itu fotografi, desain, bahkan hingga programming sekalipun. Mungkin ingin dianggap bisa atau dipuji saya tidak tahu, dan mereka pun berhasil dapat pujian dari orang lain tanpa orang lain tahu bahwa karyanya hanya sebatas template dan kopas.

Makanya hari ini saya tidak auto-kagum terhadap orang-orang kita yang mendadak terkenal karena kemampuan program, fotografi, atau desainnya.

Kalian tahu? Saya kenal orang yang ketika ditanya tentang teknis PHP, mereka tidak tahu. Namun jika ditanya tentang Laravel, mereka berhasil menjawab semuanya. Guys, guys, itu seperti kalian bangun rumah tapi tidak tahu bagaimana pondasinya. Dan ketika kalian menghadapi masalah-masalah teknis, ‘kelar’ semuanya.

Hehe…