SpeedUpWebsiteFastReliable
•Download as PPTX, PDF•
2 likes•581 views
Dokumen ini memberikan tips untuk mempercepat situs web dengan cara mengurangi permintaan server, mengoptimalkan semua konten seperti gambar, skrip dan style sheet, menggunakan teknologi terbaru, dan menggunakan CDN. Dokumen ini juga menyarankan untuk memperhatikan pertumbuhan video, metrik kinerja yang lebih baik, terapkan praktik terbaik, gunakan beberapa CPU, dan mengaktifkan caching untuk mempercepat situs web.
Recommended
Recommended
More Related Content
Featured
Featured (20)
SpeedUpWebsiteFastReliable
- 1. Make Your Website Faster and Reliable
- 6. The Problem Server too heavy !
- 8. Speed Up Your Website 1. Minimize every request 2. Reduce server response time 3. Optimize everythings (images, script, stylesheet) 4. Use latest technology 5. Use CDN
- 12. Good Bad
- 17. Use CDN
- 19. The scores
- 20. The list
- 21. The web is fast enough WE A’RE DONE
- 23. Speed Up Your Website 1. Watch video growth 2. Better performance metric 3. Push best practices 4. Multiple CPUs 5. Caching
- 24. Thank you contact us: fathan@kudo.co.id
Editor's Notes
- Salam. Perkenalkan saya Fathan sebagai web dev lead kudo bersama teman saya Aristo. Hari ini kita akan mengulas topik how to “Make your website faster and reliable”, bagaimana cara mempercepat web dan tentunya lebih dapat diandalkan
- Ada yang suka macet-macetan? Menunggu terlalu lama sering membuat kita frustrasi. Bahkan tidak jarang putar balik ke arah lain.
- Sama halnya dengan mengantri. Menunggu, menunggu dan menunggu. Muka kucel, kaki pegel, membosankan, dan ingin cepat-cepat pergi.
- Sekarang coba bayangkan ketika Anda sedang naik rollercoaster super cepat. Anda akan merasa exciting, menarik, menyenangkan dan bisa tertawa lepas.
- Sama halnya saat menaiki banana boat, jika Anda pernah naik ini, saya yakin akan Anda sangat senang, tersenyum lebar, menarik, menyenangkan ditarik dengan perahu dengan sangat cepat.
- Bagaimana dengan web? Disaat produk-produk lain mempromosikan diri mereka menganggap lebih cepat, seperti chip A6 yang diklaim lebih cepat 2x lipat, Windows 10 yang juga diklaim lebih cepat dari versi sebelumnya. Bagaimana dengan web? Ya hal inilah yang jarang sekali orang memikirkannya. Sama halnya dengan web, terlalu lama menunggu saat mengakses website membuat kita frustrasi, sebal, greget dan membosankan. Ternyata di dunia website, ada hal-hal yang selalu menjadi masalah utama diantaranya performance. Web yang sangat lambat akan membuat kita sulit untuk melakukan aktivitas online. Hal ini juga bisa memperberat kinerja server, sehingga kadang website down, user pergi dan revenue pun hilang. Apa sebenarnya yang membuat website menjadi sangat lambat? Mari kita liat graphic berikut ini -> (Next Slide)
- Kita bisa melihat jelas sebagian besar komponen yang diserap pada satu halaman website adalah images atau gambar, kemudian script, disusul yang lainnya. Saat dahulu tahun 2015 kita melakukan scan menggunakan tools gtmetrix, terlihat performance scores kita adalah 69% atau D, kita bisa bilang Damn, load time kita tinggi 11 detik, page size 3mb dan total request ada 114. Wow sangat buruk untuk sebuah website. Dari situ kita mencoba mencari root causes atau penyebab kenapa dan bagaimana cara mengatasinya. Setelah kita lakukan best practice, berbagai macam metode mulai dilakukan untuk mempercepat website kita. Ada 5 poin utama yang akan kita bahas disini, selanjutnya akan jelaskan oleh teman saya Aristo.
- Ada 5 poin utama yang akan kita bahas disini. Yang pertama -> (Next Slide)
- Kurangi setiap request. Kurangi penggunaan image, script dan style yang terlalu banyak. Jadikan satu atau perkecil kemungkinan di proses pada satu halaman website.
- Semakin banyak request (kiri vertical) maka semakin tinggi load time (bawah horizontal) yang dibutuhkan.
- Resonse time adalah waktu yang dibutuhkan server untuk meload satu halaman website
- Terdapat perbedaan response time yang di hasilkan dari 2 website yang berbeda. Disebelah kiri (Good) dibutuhkan waktu 31ms untuk menyambungkan, 31ms menunggu dan 0ms menerima. Sedangkan disebelah kanan (Bad) dibutuhkan waktu 186ms untuk menyambungkan, 378ms menunggu dan 369ms menerima.
- Optimize segalanya mulai dari gambar, image, script, style, html dan lain sebagainya.
- Semakin banyak request, maka semakin tinggi size yang dirender/diproses
- Dengan menggunakan teknik optimized dan gzip, terlihat jelas penurunan size yang cukup signifikan. Hal ini tidak terjadi pada file JS, karena file ini khusus dan hanya perlu di minify atau di sederhankan menjadi satu line.
- Gunakan selalu teknologi terbaru, update versi jquery, atau gunakan framework-framework yang sudah diuji performance-nya. Seperti javascript framework angular dan react, server caching REDIS dan html/css framework materialize.
- Gunakan system CDN (Content Delivery Network) CDN adalah sebuah sistem jaringan server untuk mendistribusikan konten yang ada dalam sebuah aplikasi/web ke berbagai pengakses/pengguna di berbagai belahan dunia agar data/konten yang dikirim diterima lebih cepat
- Contoh ilustrasi cara akses konten menggunakan CDN (Kanan) dan tanpa CDN (kiri). Dengan menggunakan CDN, maka konten yang diakses menjadi semakin cepat karena jarak yang ditempuh semakin dekat. Sebaliknya tanpa menggunakan CDN, jarak yang ditempuh jauh sehingga konten yang diakses menjadi sangat lambat.
- Setelah kita melakukan 5 poin tersebut, kemudian pada tahun ini kita melakukan scan dengan menggunakan tools yang sama yaitu gtmetrix, terlihat perubahan yang cukup signifikan. Performance score kita menjadi 96% atau grade A, page load time kita 2.8s dengan page size 2.3mb, dan request yang tahun lalu 114 menjadi 70. Dilihat dari video growth, terjadi penurunan rata-rata load time yang cukup signifikan dari > 1.5s menjadi 0.5s. Dan ini menjadikan website kita lebih cepat dari tahun lalu, bahkan 4x lipat lebih cepat. Apa yang sebenarnya kita kerjakan secara step by step bisa di lihat di slide berikut ini -> (Next Slide)
- Kita bisa melihat list recommendation, grade, type dan priority, dimana masing-masing dari list ini menunjukkan step-by-step task yang harus kita lakukan sesuai rekomendasi. Sebagai contoh minify javascript yang diharuskan untuk membuat halaman script menjadi lebih singkat dari tadinya contoh 100 line menjadi satu line memanjang. Pada intinya membuat script tersebut menjadi lebih kecil atau sederhana.
- Web sekarang sudah cepat, dan we’re done. Kita sudah selesai?
- Tapi ternyata kita kena April Fools day…. Kita belum selesai!, tidak ada diantara kita yang selesai. Target kita adalah 100% dengan load time 0s. Apakah ini memungkinkan, ya.. Kalau disekolah kita bisa dapet 100, maka disini juga kita bisa. Jika aplikasi android bisa memuat halaman tanpa jeda, ya kita juga bisa. Hal inilah yang menjadi penyemangat tim kita untuk terus meningkatkan performa.
- Sebagai kesimpulan ada 5 hal yang perlu kita lakukan untuk menjaga performa kita: Watch video growth, kita pantau hasil performa kita setiap hari, setiap minggu, setiap bulan. Kita lihat dimana letak naik atau turunnya. Kita terus tingkatkan dengan menggunakan data-data/metric dari berbagai macam tools seperti gtmetrix Terus ingatkan tim untuk melakukan best practice. Ingatkan developer yang bandel membuat script terlalu banyak atau tidak sesuai aturan. Gunakan multiple CPU untuk mempercepat kinerja server. Saat traffic tinggi, multiple CPU bisa menghandle banyak aktivitas dalam satu waktu Gunakan teknologi caching baik di client (browser) ataupun di server (menggunakan Redis)
- Dan yang tak kalah penting adalah selalu apresiasi kinerja tim. Terlihat kita sedang berada di restoran sebagai tanda kesuksesan kita me-launch produk Web Agent. Mungkin ini terlihat seperti sebuah makan-makan kecil, tapi bagi kita ini sangat bermakna banyak. Ini adalah kesuksesan kecil dari kesuksesan-kesuksesaan lainnya yang insya Allah akan kita terus capai. Terima Kasih, Semoga bermanfaat. Jika ada pertanyaan, saran, atau masukkan silahkan hubungi Fathan@kudo.co.id Wassalam.