Single page application memiliki user experience yang lebih baik dibandingkan dengan website konvensional pada umumnya. Namun, Single page application (SPA) memiliki initial loading time yang cukup lama dikarenakan seluruh resources diload pada pertama kali user membuka aplikasi.
Selayang pandang
Ulasan ini akan membahas perbandingan antara tiga provider hosting untuk SPA dengan harapan kita dapat mengetahui mana yang paling baik. Aplikasi yang akan diuji coba adalah angular note. Untuk spesifikasi detail dapat dilihat pada bagian spesifikasi aplikasi. Sedangkan aplikasi yang digunakan untuk menguji coba / benchmark / komparasi yaitu gtmetrix dan google page insight. Ketiga provider (yang digunakan) tersebut adalah
- Digital ocean dengan menggunakan apache
- Firebase hosting
- Roast.io
Sebelum membahas lebih lanjut , kami akan menegaskan bahwa provider digital ocean tersebut merupakan server yang saat ini kami gunakan untuk degananda.com. Sehingga perlu dicatat bahwa konfigurasi apache ataupun OS pada VPS tersebut merupakan konfigurasi yang kami lakukan. Sehingga tidak dapat digeneralisir untuk seluruhnya (digitalocean secara general). Beda konfigurasi OS ataupun Software yang digunakan dapat menghasilkan hasil yang berbeda.
Spesifikasi aplikasi
Aplikasi yang dihosting merupakan aplikasi sederhana untuk mengelola note. Berikut ini adalah tabel terkait dengan modul-modul yang digunakan
| Framework | Angular 4.0 |
| UI | Angular material design |
| Database | Local (singleton). Tidak ada http request ke API manapun |
| Form | Reactive Form Module dengan form builder. |
| Shared services | Yes |
| AOT / build for production | Yes |
Hal tersebut perlu cantumkan dan hukumnya adalah wajib mengingat benchmark seperti ini sangat subjektif. Jika anda menguji coba dengan aplikasi lain yang anda buat tentunnya hasil benchmark terhadap ketiga provider hosting diatas dapat berbeda.
Spesifikasi VPS digital ocean
Berikut ini adalah spesifikasi vps yang kami gunakan untuk menghosting aplikasi diatas.
| Operating system | Ubuntu 14.04 |
| Plan | Paket $5 |
| Ram | 512 |
| Software terinstall | Apache & Mysql |
Jika anda menggunakan spesifikasi VPS dan software yang digunakan berbeda dari diatas maka hasil dari benchmark dapat berbeda. Perlu kami ingatkan lagi bahwa ini sangat subjektif terutama mengenai VPS digital ocean karena kami yang mengkonfigurasi.
Hasil benchmark
Berikut ini adalah hasil benchmark dari ketiga provider diatas yang digunakan untuk menghosting aplikasi angular note. Kami hanya mengambil satu buah parameter yakni terkait dengan page speed. Tetapi concern utamannya adalah fully loaded times karena angular akan tetap melakukan loading sampai halaman tersebut telah selesai di load sepenuhnya sehingga page speed dan fully loaded times adalah dua hal yang berbeda. Anda dapat secara online mengakses url dari aplikasi angular note pada provider tersebut.
- VPS DO : http://demo.degananda.com/angular/chapter-8/
- Firebase Hosting : https://angular-note-9a26a.firebaseapp.com/
- Roast.io : https://new-door-6796.roast.io/
Firebase dan DO melakukan render pada sisi client(client side rendering) sedangkan roast melakukan render pada sisi server atau Server side rendering. Sebenarnya ada tools yang bernama angular universal yang dapat kita gunakan pada VPS untuk menghosting angular secara server side namun hal tersebut tidak dijadikan object pada komparasi saat ini. Mungkin next time.
1.Page speed
2. Fully loaded times
3. Page size
Kesimpulan
Berdasarkan ketiga grafik diatas secara page speed firebase dan DO mengungguli roast. Namun pada Fully loaded times roast io memiliki hasil yang terbaik yakni 50% lebih cepat dibandingkan dengan DO. Namun firebase hanya selisih sedikit jika dibandingkan dengan Roast. DO dan Firebase hosting memiliki intial load yang lebih cepet dibandingkan dengan roast , namun DO sangat lama sekali untuk mencapai fully loaded jika dibandingkan dengan Firebase hosting ataupun Roast.
Singlepage application seperti angular akan melakukan loading hingga seluruh page diload artinnya, berdasarkan grafik diatas loading yang akan tampil akan sangat lama jika kita menghosting SPA Aplikasi angular(angular note) pada DO. Sehingga sangat disarankan untuk melakukan hosting Aplikasi SPA pada provider yang memang dikhususkan untuk menhosting SPA. Google mengklaim bahwa jika suatu website membutuhkan waktu lebih dari tiga detik untuk dapat terbuka maka 90% user akan menutup tap / website tersebut. Sehingga kecepatan load memang sangat penting.
Selanjutnya perhatikan gambar dibawah ini untuk mengetahui perbedaan antara page speed dan fully loaded time.
secara page speed, DO dan Firebase hosting sangat mengungguli roast. Itu artinnya initial time yang tercepat agar aplikasi dapat terbuka (muncul loading pada aplikasi angular). Namun, aplikasi angular akan benar-benar terbuka jika seluruh resources telah terload sepenuhnya sehingga pada case ini yang terbaik adalah roast. Namun, jika dikombinasikan keduannya antara page speed dan fully loaded times Firebase hosting mendapatkan hasil yang terbaik.