Web menjadi salah satu teknologi yang saat ini berkembang sangat pesat memiliki berbagai macam karakteristik yang hendaknya dapat kita ukur sebagai bahan analisis akan sebuah kinerja yang didapatkan. Di era yang semakin canggih ini beberapa aspek diperlukan dalam sebuah web, maka dari itu sebuah web harus memiliki kinerja yang dapat diukur agar kinerja tersebut dapat kita optimalkan sebagaimana mestinya.
Dalam dekade pertama atau lebih keberadaan Web, peningkatan kinerja web difokuskan terutama pada mengoptimalkan kode situs dan mendorong keterbatasan hardware. Menurut buku Web Performance Tuning oleh Patrick Killelea, beberapa teknik awal yang digunakan adalah menggunakan servlets sederhana atau CGI, meningkatkan memori server, dan mencari packet loss dan transmisi. Meskipun prinsip-prinsip ini sekarang dioptimalkan dari banyak dasar aplikasi internet, hal ini berbeda dari teori optimasi saat ini dimana jauh lebih sedikit upaya untuk meningkatkan kecepatan tampilan browser.
Steve Souders menciptakan istilah "web performance optimization" pada tahun 2004. Pada waktu itu Souders membuat beberapa prediksi mengenai dampak WPO sebagai "emerging industry" yang akan dibawa ke web, seperti situs menjadi lebih cepat secara default, konsolidasi, standar web untuk kinerja, dampak lingkungan dari optimasi, dan kecepatan sebagai pembeda.
Satu titik utama yang Souders buat adalah bahwa setidaknya 80% dari waktu yang dibutuhkan untuk men-download dan melihat website dikendalikan oleh struktur front-end. Jeda waktu ini dapat dikurangi melalui kesadaran perilaku browser, serta bagaimana HTTP bekerja.
Pada tahun 2006, Amazon melaporkan bahwa untuk setiap 100ms peningkatan waktu respon, mereka menerima kenaikan 1% pendapatan. Pada tahun 2008, Shopzilla mengurangi beban halaman dari 7 detik menjadi 2 detik dan melihat 7% - 12% peningkatan di tingkat konversi. Pada tahun 2010 Mozilla mencukur 2,2 detik dari halamannya dan meningkatkan Download sebesar 15,4% - menghasilkan tambahan 60 juta download. Sementara statistik ini jelas mengukur nilai optimasi, hal ini tidak memberitahu kita seberapa cepat.
Secara teknis, waktu respon adalah waktu yang dibutuhkan bagi pengguna untuk mengirim perintah (misalnya, permintaan halaman) dan browser untuk menyelesaikan loading HTML terkait. Cukup sederhana, tetapi ketika Anda mempertimbangkan bagaimana sebuah halaman yang modern dirancang, dengan begitu banyak objek tambahan, waktu respon tidak memberitahu Anda banyak tentang pengalaman pengguna.
Response Time
Response Time terdiri dari komponen-komponen berikut:
- DNS resolution time
- TCP connection time
- HTTP redirect time
- Time to first byte
- HTML content time
- Full page object load time
Komponen-komponen ini dapat menemukan penyebab pasti perlambatan web yang harus diketahui sebagaimana komponen ini beroperasi - baik secara individu maupun bersama-sama.
Page Load Time dan User Experience
Ketika berbicara tentang peningkatan kecepatan yang diterjemahkan ke dalam pendapatan, kita sedang berbicara tentang persepsi pengguna - bagaimana pengguna sebenarnya menggunakan situs dan aplikasi. Sementara metrik backend ini dapat memberikan wawasan sekitar masalah teknis tertentu yang mungkin atau mungkin tidak mempengaruhi keseluruhan beban halaman dan response times, tidak ada hubungan langsung antara pengukuran dan user experience. Sementara hal ini terus menjadi daerah metrik yang berkembang untuk kinerja, ada beberapa metrik yang lebih baru yang harus kita manfaatkan untuk memantau persepsi pengguna web, kinerja dan pengalaman secara keseluruhan.
Hal ini termasuk:- Page Load Time
- DOM Load Time
- First paint Time
- Above-The-Fold Time
Secara teknis, Halaman Load Time dan DOM Load Time adalah timing peramban, bukan timing pengguna, tetapi mereka membantu mengatur panggung untuk apa user experience.
Cara Mengukur Kinerja Front-end Website
Berbicara tentang proses optimasi hampir tidak ada di antara web usia desainer baru. Bahkan banyak web desainer yang telah dalam bisnis satu dekade atau lebih tidak sepenuhnya memahami pentingnya optimasi situs. Setelah jangka waktu lama sebuah website akan mulai menurun kinerjanya. File-file frontend mungkin berisi kode blok yang berlebihan atau terkunci dan bit yang tersembunyi. Hal ini paling sering terlihat pada file JavaScript atau gambar. Ini mungkin penting untuk membuat website menarik untuk pengalaman pengguna tetapi tanpa sebuah situs yang dioptimalkan desain kemungkinan web tidak memiliki kesempatan untuk sepenuhnya termuat dan para pengguna yang tidak sabar akhirnya meninggalkan web.
Tips di bawah ini untuk pengembang web pemula-menengah yang tertarik dalam mengoptimalkan halaman mereka dengan penuh. Ada banyak teknik yang tersedia dan masing-masing akan berperilaku berbeda tergantung pada apa masalah website.
HTTP Requests
Setiap kali website mengirimkan permintaan HTTP ke server. Jenis transfer data disebut protokol jaringan yang digunakan khusus untuk mendistribusikan dan menyimpan file plaintext. Hal Ini termasuk kode frontend dasar seperti HTML, CSS, dan JavaScript. Setelah permintaan tersebut dikirim, browser Anda akan mengurai setiap elemen halaman. Tergantung pada mesin parsing setiap situs web akan memuat hal berbeda dan elemen yang akan muncul dalam berbagai urutan berdasarkan kecepatan transfer. Misalnya, Internet Explorer akan membuat halaman web yang berbeda dari Chrome atau Safari, dan semua ini berjalan pada mesin parsing sedikit berbeda dari Firefox atau Opera.
Apa yang harus dipertimbangkan adalah berapa lama waktu permintaan untuk setiap file yang dibutuhkan. Pertimbangan untuk menerima 100.000 atau 1 juta pengunjung dalam sebulan. Ini adalah tugas browser untuk mengumpulkan setiap elemen halaman dan memuat file eksternal ke dalam memori. Seringkali faktor ini menahan kecepatan referensi yang dioptimalkan sebuah website meliputi JavaScript atau file gambar yang besar. Dengan mempopulerkan Verizon FiOS yang umum untuk kecepatan internet 600kbps dan terus meningkat! Sayangnya, bahkan dengan koneksi kecepatan tinggi itu ada kemungkinan mengalami kesalahan optimasi.
Remedies to Site Performance
Kita tidak sendirian di bidang pengembangan web dan optimasi frontend. Untuk pekerjaan yang tepat akan selesai ada alat tertentu yang diperlukan untuk menangani pekerjaan tersebut. Google telah merilis sebuah proyek berjudul Page Speed yang dibangun untuk membantu pengembang mengoptimalkan situs Web mereka dan memeriksa tingkat terbaik kinerja. Awalnya proyek dimulai sebagai Firebug open-source add-on dan kini diterima sebagai acuan pihak ke-3 untuk pengujian situs . Pilihan lain bagi pengguna Firebug adalah YSlow Yahoo! 's add-on . Script menganalisa setiap permintaan halaman web dan menunjukkan cara yang paling umum untuk meningkatkan kinerja. Saran ini didasarkan pada sumber daya Yahoo! Developer untuk praktek optimasi terbaik dalam desain web. Program ini mungkin sedikit kasar pada awalnya karena mengandung begitu banyak informasi. Hanya menempel dasar-dasar dan dengan mengikuti dokumentasi proses sederhana.
Speed Techniques
Di sisi lain memindahkan semua file JavaScript ke situs footer Anda dapat secara dramatis mengatasi kali hangup. Banyak browser memblokir download paralel yang berarti sebelum menampilkan halaman web browser pengguna dapat berhenti selama 4 detik untuk sepenuhnya memuat eksternal JS termasuk.
Hal ini tidak selalu mungkin juga tidak selalu diperlukan untuk setiap website. Jika halaman Anda memuat sama dengan waktu respon yang sama tanpa termasuk penempatan berkas maka jangan repot-repot manuver setiap drama.
Konten dinamis tidak dapat memuat sampai seluruh DOM selesai, tapi kadang-kadang ini akan kembali kesalahan. Menguji CSS / JS termasuk untuk melihat apakah Anda dapat kembali manfaat optimasi.
File Size Compression
Ada banyak layanan gratis lainnya di web untuk membantu dengan tugas ini juga. Mengecilkan CSS memiliki seluruh antarmuka kompresi CSS untuk membuat proses yang sederhana. Website yang sama juga memiliki kebiasaan JavaScript kompresor yang melakukan banyak tugas yang sama namun tetap scripting terorganisir.
Anda juga dapat mempertimbangkan mengompresi gambar terbesar di halaman web Anda. Hal ini dapat dilakukan dengan mengedit foto perangkat lunak seperti Adobe Photoshop atau GIMP hanya dengan resampling gambar pada resolusi yang lebih rendah. Gambar PNG akan mengekspor jauh lebih kecil daripada rata-rata jpg atau TIFF format. Ada juga banyak alat online seperti Gambar Optimizer untuk membantu dalam proses kompresi.
Source Checking and Metrics
Ini adalah rutin tidak sering dilakukan oleh pengembang web yang dapat menawarkan hasil yang luar biasa. Dengan menganalisis semua elemen halaman di situs Anda, Anda dapat melihat yang mengambil terpanjang untuk memuat dan urutan di mana masing-masing bagian itu dimuat.
Yang paling populer alat Mozilla Firebug adalah plug-in untuk browser Firefox. Aplikasi ini menginstal toolbar kecil di bagian bawah browser Anda untuk memeriksa waktu respon, informasi header, elemen halaman, dan skrip untuk setiap situs. Script juga telah porting ke Firebug Lite sebagai ekstensi untuk Google Chrome.
Apache dengan mod_pagespeed
Tidak semua setup akan menjalankan web server Apache, jadi opsi ini tidak selalu tersedia. Modul ini terkait langsung ke monitor Page Speed Google disebutkan sebelumnya. Bahkan, kode untuk mod_pagespeed awalnya didasarkan dari berbagai perpustakaan dari database Google Code ini.
Apache memungkinkan administrator server untuk menginstal paket kecil yang disebut modul untuk meningkatkan kinerja server mereka. Mod_pagespeed adalah salah satu modul yang melakukan teknik optimasi otomatis pada saat runtime. Ada terlalu banyak proses untuk daftar, meskipun beberapa aplikasi utama termasuk on-the-fly HTML / CSS / JS kompresi dan citra caching.
Proyek ini saat ini bertempat di Google dan terbuka untuk pengembang. Google telah bekerja sama dengan GoDaddy untuk melaksanakan mod_pagespeed ke semua account hosting menjalankan server Apache HTTP.
Meskipun banyak pilihan lain yang tersedia pekerjaan pembangunan frontend adalah beberapa yang paling intens, terutama mengingat pra-optimasi untuk halaman web penting. Mengoptimalkan untuk header situs dan gambar yang besar bisa menjadi tugas yang sangat membosankan belum bermanfaat.
Pertimbangkan beberapa teknik yang diperkenalkan dalam artikel ini dan melihat bagaimana hal ini dapat diterapkan dalam proyek-proyek web Anda. Seringkali pengembang tidak mengambil cukup waktu untuk menghargai pekerjaan mereka dan membersihkan bit lama kode. Jika Anda masih mendambakan untuk beberapa tips yang harus Anda baca kami web panduan optimasi utama untuk petunjuk tentang pemeliharaan frontend dan peningkatan kinerja nyaman.
Source
http://blog.smartbear.com/web-performance/an-introductory-course-to-web-performance-metrics/
http://www.hongkiat.com/blog/how-to-measure-front-end-website-performance/
