Optimasi Web Request : ASP.NET MVC 4 Menggunakan C#

ASP.NET

ASP.NET

Minggu ini gw dapet kerjaan dari kantor buat mempelajari teknologi ASP.NET, karena kemungkinan proyek selanjutnya akan menggunakan ASP.NET. Langsung saja gw cari-cari tutorial tentang ASP.NET, ternyata mereka menyediakan framework juga. ASP.NET MVC generasi ke 4. Sebenarnya ada dua pilihan bahasa, VB dan C#. Berhubung gw dulu pernah belajarnya cuma C#, ya udah gw abaikan si VB.

Hal yang gw cari tahu pertama adalah kemudahan membuat Model, Helper, serta Library. Kalau untuk Controller dan View pasti ya gitu-gitu aja. Hal pertama yang membuat frustasi gw adalah tentang IDE, ya Visual Studio. Disuruh ng-install Visual Studio 2012 Express, yang ternyata sangat minim sumber dayanya. Bahkan gw ga bisa nambah sumber buat basis data, mereka hanya menyediakan basis data keluarga dari Microsoft. MySQL tidak ada. Frustasi tidak berhenti disitu saja, setelah dapat koneksi dengan MySQL, hal kedua yang bikin gw frustasi adalah konsep Model di ASP.NET MVC 4, karena bukan seperti ini konsep Model yang gw pelajari di CodeIgniter (PHP framework). Namun memang gw ga bisa mengharapkan standarisasi dari produsen yang berbeda, kan? Akhirnya semua itu teratasi. Damn, I am good!

Sebagai end-user gw peduli akan berapa lama waktu yang gw butuhkan untuk memuat suatu halaman web. Oleh karena itu hal yang pertama gw lakukan setelah memahami konsep dasar MVC di ASP.NET ini adalah memikirkan bagaimana compressing dan caching bisa dilakukan di environment baru ini. Tentu saja, StackOverflow dan Google masih menjadi salah dua sahabat terbaik gw. Setelah ngubek-ubek selama beberapa jam, akhirnya nemu juga solusi buat compressing dan caching.

Gw belum begitu ngerti dengan konsep caching di ASP.NET, tapi kelihatannya mereka sudah nge-cache secara otomatis. Oleh karena itu terlebih dahulu gw pengen bahas bagaimana ngelakuin kompresi di environment ini. Kompresi pada halaman web bisa dilakukan oleh 2 tipe, yaitu DEFLATE dan gzip. DEFLATE melakukan kompresi lebih baik dibanding gzip, tapi tidak semua bisa nerima encoding tipe ini. Oleh karena itu gw bikin class baru (Compress.cs) untuk melakukan kompresi ini. Setelah itu gw pun mengubah berkas FilterConfig.cs yang terdapat pada folder App_Start. FilterConfig.cs berguna untuk menyaring semua request sebelum diproses oleh Controller, sehingga semua response akan terkompresi. Mekanisme berkas Compress.cs adalah mendeteksi Accept-Encoding terlebih dahulu, baru menentukan apakah akan dikompress dengan metode DEFLATE atau gzip. Gw akan tampilkan hasil sebelum dan sesudah kompresi, gw pake FireBug buat ngelihat data-datanya.

before-compress

Sebelum dikompres.

Diatas tertera Content-Length adalah 1950 bytes.

after-compress

Setelah dikompres.

Content-Length-nya telah berubah menjadi 1615 bytes, memang tidak terlalu jauh perbedaannya, namun akan terasa kalau kontennya banyak.

Selanjutnya adalah tentang caching. Metode cache yang gw gunain kali ini adalah metode HTTP ETag. Gw akan bikin class baru (ETag.cs). Dan gw akan merubah lagi berkas FilterConfig.cs. Gw letakkan filter untuk objek ETag terlebih dahulu, lalu baru gw letakkan filter untuk objek Compress. Urutan sangat penting disini. Sebenarnya cache pun akan disimpan oleh penjelajah web secara otomatis, selama berkas tersebut tidak berubah, atau selama berkas itu tidak meminta untuk tidak menyimpan cache-nya.

before-cache

Sebelum di-cache

Sebelum berkas di-cache (CTRL+F5 (force reload)) dalam satu halaman web, dia bisa berisi 20 berkas sebesar 836 KB dan memakan waktu 2.34 detik untuk memuat semuanya.

after-cache

Setelah di-cache

Setelah berkas di-cache, dia hanya memuat halaman HTML-nya saja, semua berkas static (Javascript, CSS, dll) akan diambil dari cache. Dia hanya memuat 1 berkas, sebesar 1.5 KB dan hanya dalam waktu 747 milidetik. Dan akan tertambah header atribut Etag di Response Header.

ETag Response Header

ETag Response Header

Hal selanjutnya yang perlu dipikirkan adalah bagaimana caranya agar request itu tidak terlalu banyak, bayangkan saja 20 request, itu tentu akan mempengaruhi performansi. Ini gw kutip dari penjelasan tentang Make fewer HTTP requests di Best Practices for Speeding Up Your Web Site YSlow.

Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.

Sebelum melakukan bundling / combine, gw akan melakukan apa yang disebut dengan Minification. Untuk penjelasan lebih tentang bagaimana cara Bundling and Minification di ASP.NET MVC silakan dibaca disini. Kali ini gw akan eksperimen dengan berkas jQuery.

jquery-before-minification

Sebelum Minification

Diatas tertera Content-Length-nya adalah 252881 bytes.

jquery-after-minification

Setelah Minification

Setelah di gzip dan di minification, Content-Length-nya menjadi 42610 bytes. Kurang lebih 75% terkompresi dari berkas aslinya.

Um, minification sudah, sekarang tinggal bundling. Bagaimana caranya agar tidak perlu me-request berkas terlalu banyak, agar lebih mempercepat proses pemuatan halaman. Kalau lupa silakan baca lagi Bundling and Minification. Pertama kali tadi, proses pemuatan halaman memerlukan 20 berkas untuk melengkapi data. Namun setelah di bundling dan minification, hanya berisi 5 berkas. 1 berkas HTML, 2 berkas CSS, dan 2 berkas Javascript. Sebenarnya berkas Javascript dan CSS bisa dijadikan masing-masing 1, namun karena ada berkas yang bersifat dinamis, selalu berubah-ubah, maka terpaksa gw pisah menjadi masing-masing 2.

Sebelumnya terdapat 20 berkas, sebesar 836.6 KB dan memerlukan waktu 2.34 detik. Setelahnya, viola!

after-bundling

Setelah Bundling

Setelah di-minification, di-bundling, dikompres, menghasilkan 5 berkas, sebesar 195.7 KB dan memerlukan waktu 2.11 detik. Dan terimakasih pada teknologi cache, menghasilkan 1 berkas, sebesar 1.5 KB dan hanya memerlukan waktu 747 milidetik.

Untuk mengolah bundling dan minification gw taruh di berkas BundleConfig.cs yang terdapat pada folder App_Start. Diberkas tersebut gw juga ngatur untuk mengambil dari CDN bila ada koneksi internet.

Terakhir adalah, mengatasi cache untuk halaman yang memerlukan autentifikasi. Kasus ini terjadi ketika gw mencet tombol Sign Out (keluar), dia akan redirect ke halaman yang diinginkan, permasalahannya adalah, ketika dia memencet tombol back (kembali), halaman cache yang terdapat di penjelajahlah yang ditampilkan. I don’t want that. Untuk mengakali itu terpaksa gw bikin method baru, gw bikin class baru (UtilsHelper.cs) beserta methodnya (NoCache), gw bikin static method-nya, karena gw butuhnya ya static. Setelah itu gw bikin Controller baru (PercobaanController.cs) dan gw taruhlah method NoCache disana.

before-no-cache

Sebelum NoCache()

Bisa dilihat diatas, Cache-Control adalah private.

after-no-cache

Setelah NoCache()

Setelah diimplementasi method NoCache, Cache-Control-nya menjadi no-cache, no-store, must-revalidate. Penjelajah akan selalu mengambil data dari server daripada mengambil data dari penyimpanan cache-nya. Namun tidak dianjurkan untuk berkas static seperti CSS, Javascript, gambar.

P.S : Gambar zombie diambil dari Animate It.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s