Sebagai seorang programmer ASP, Anda tidak akan meragukan pentingnya meningkatkan kinerja aplikasi Web Anda. Untuk membuat program Anda berjalan lebih cepat, Anda mungkin sibuk mengoptimalkan database atau komponen COM. Jika Anda sudah melakukan semua ini, pernahkah Anda berpikir untuk meningkatkan kinerja dengan mempercepat kecepatan tampilan kode HTML akhir yang dihasilkan di browser? Bagi pengguna akhir, jika halaman dapat ditampilkan lebih cepat, Anda akan mendapatkan lebih banyak pujian.
Meningkatkan kecepatan tampilan HTML di browser Anda dapat dicapai melalui beberapa teknik yang kurang diketahui.
1. Gunakan tabel bersarang?
Membangun struktur kompleks di halaman umumnya dicapai dengan menempatkan tabel HTML di halaman. Jika Anda ingin membuat halaman seperti ini: Halaman ini memiliki bilah navigasi atas, bilah navigasi kiri, dan area konten kanan. Anda dapat membuatnya menggunakan tabel besar dengan dua baris dan dua kolom. Di baris pertama, gabungkan dua kolom dan masukkan bilah navigasi atas. Di kolom kiri baris kedua, sisipkan tabel untuk menampilkan tombol navigasi. Di kolom kanan, letakkan tabel untuk menampilkan konten sebenarnya. (Lihat Gambar 1) Kode yang dihasilkan oleh tabel bersarang tersebut adalah sebagai berikut:
<TABLE BORDER="0">
<TR>
<TD COLSPAN="2"><!-- konten untuk bilah navigasi atas --></TD>
</TR>
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- konten untuk bilah navigasi kiri --></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- konten untuk isi halaman --></TD>
</TR>
</TABLE>
Namun kenyataannya, ketika browser menemukan tag <TABLE>, browser tidak langsung menampilkan halaman tersebut di layar kecuali ia menemukan tag penutup yang sesuai </TABLE>. Oleh karena itu, jika seluruh halaman Anda ada dalam tabel, tidak ada yang akan ditampilkan hingga </TABLE> terakhir diterima. Dengan cara ini, halaman tersebut tidak akan terlihat oleh pengguna hingga seluruh file diunduh. Ketika jumlah data halaman relatif besar (seperti hasil pencarian mesin pencari), fitur ini akan menyebabkan jeda sementara. Untuk mencegah situasi ini, halaman dapat dibagi menjadi banyak tabel kecil selama produksi. Ketika kode HTML dari masing-masing <TABLE> ke </TABLE> yang sesuai diunduh, browser akan menampilkannya. Dari sudut pandang pengunjung, halaman tersebut muncul secara bertahap, bagian demi bagian, semakin banyak muncul di layar. Rasanya kecepatan menampilkan halaman seperti itu lebih cepat daripada mengunduh seluruh file dan menampilkannya kembali.
Mengikuti prinsip mempelajari contoh sebelumnya, seluruh tabel besar di halaman harus dibagi menjadi tiga tabel terpisah. Gunakan tabel pertama untuk menampilkan bilah navigasi atas, sesuaikan lebarnya sehingga cukup besar untuk menampung semua konten, dan selesaikan dalam blok <TABLE></TABLE>. Di bagian bawah halaman, tabel kedua dari kiri berjajar. Gunakan tabel ketiga untuk menampung konten sebenarnya. (Lihat Gambar 2) Karena setiap bagian merupakan tabel lengkap, setiap bagian kode akan segera ditampilkan setelah diunduh. Dengan cara ini, bilah navigasi atas dan kiri akan lebih menonjol dibandingkan halaman lainnya. Pengguna akan membayangkan bahwa halaman tersebut akan mulai diunduh saat ini dan akan segera ditampilkan di layar. Ini jauh lebih baik daripada membiarkan pengguna menghadapi layar kosong untuk waktu yang lama.
Kode yang dimodifikasi adalah sebagai berikut:
<TABLE BORDER="0" WIDTH="100%">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP"><!-- konten untuk bilah navigasi atas --></TD>
</TR>
</TABEL>
<TABEL BORDER="0" ALIGN="LEFT">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- konten untuk bilah navigasi kiri --></TD>
</TR>
</TABEL>
<PERBATASAN TABEL="0">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- konten untuk badan halaman --></TD>
</TR>
</TABLE>
2. Ingatlah juga untuk menutup tag lainnya.
Pada contoh di atas, kita dapat membuat halaman ditampilkan lebih cepat di browser hanya dengan menutup tag <TABLE> tadi. Secara analogi, ada beberapa tag serupa yang memiliki karakteristik yang sama.
Misalnya, buat tag <OPTION> untuk kotak daftar dan kotak kombo serta tag <LI> untuk item daftar. Biasanya pemrogram ASP mengakses database dan mengirimkan data ke dalam kotak daftar atau kotak kombo yang dibuat melalui <OPTION>. Pada saat ini, tag penutup <OPTION> ditulis dalam kode di peramban.
Jangan gunakan kode seperti ini:
Lakukan saat bukan objRS.EOF
strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") &_""">"& _objRS("Nama Produk")
objRS.MoveNext
Loop
Response.Tulis "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"
Untuk menggunakan kode seperti ini:
Lakukan sambil tidak objRS.EOF
strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") & _ """>" & objRS("Nama Produk") & "</OPTION>"
objRS.MoveNext
Loop
Response.Tulis "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"
Jangan gunakan kode seperti ini:
<UL>
<LI>Apel
<LI>Jeruk
<LI>Pisang
</UL>
Gunakan kode seperti ini:
<UL>
<LI>Apel</LI>
<LI>Jeruk</LI>
<LI>Pisang</LI>
</UL>
Sekarang lihat, apakah halaman Anda ditampilkan lebih cepat di browser?
Harap jangan meremehkan pentingnya perubahan ini dalam meningkatkan kinerja aplikasi ASP. Mungkin, di buku-buku atau materi online jenis "Tips dan Tips" yang bisa Anda temukan, jarang disebutkan tentang optimasi kode HTML agar program Anda berjalan lebih cepat. Namun, menerapkan teknologi ini dalam praktiknya memang dapat meningkatkan kinerja program secara signifikan.