Ini adalah fakta yang terkenal bahwa waktu buka halaman lambat sebagian besar dapat mempengaruhi orang untuk meninggalkan sebuah situs. Menurut survei yang dilakukan oleh KISSmetrics, “hampir 40 pengguna persen meninggalkan sebuah situs yang memakan waktu lebih dari 3 detik untuk memuat.”
Kecepatan website telah menjadi jauh faktor penentu yang paling penting untuk mencapai sukses di pasar online goyah dan kompetitif saat ini.
Ketika kita berbicara tentang cara mengoptimalkan kinerja website beberapa tahun yang lalu, kita hanya difokuskan pada mengoptimalkan server-side yang hanya karena sebagian besar situs yang statis dan diproses untuk server-side. Namun, munculnya web 2.0 teknologi membuat penggunaan aplikasi web dinamis cukup populer.
Dan, itu sudah menjadi keharusan untuk memperhatikan karena bagaimana situs yang` melakukan pada sisi klien seperti pemrosesan di sisi server.
Saat ini, masalah kinerja ditemui di sisi klien harus segera diatasi dibandingkan dengan masalah kinerja server-side, sejak mantan dapat mempengaruhi pengalaman pengguna. Meskipun benar bahwa 10% dari kinerja aplikasi web secara keseluruhan dapat ditingkatkan dengan meningkatkan kinerja back-end sebesar 50%, tidak dapat dipungkiri bahwa 40% atau persentase peningkatan lebih dapat dibuat untuk kinerja aplikasi Anda dengan berfokus pada front-end dan mengurangi waktu buka untuk setengah.
Apalagi apabila dibandingkan dengan proyek untuk back-end, teman-teman perlu menghabiskan banyak waktu kurang dan sumber daya dalam membuat perbaikan untuk front-end Anda. Inilah sebabnya mengapa penting bagi pemilik situs untuk membayar pertimbangan dalam meningkatkan kinerja front-end dari situs web mereka.
Berikut adalah beberapa praktik terbaik berikut yang akan membantu meningkatkan kinerja front-end teman-teman untuk sebagian besar:
- Pertama, Mengukur Beban Halaman
Ketika menulis kode CSS, kita sering menggunakan format yang lebih mudah dimengerti. Pada dasarnya, kita lebih suka menggunakan format ramah-manusia yang terlihat seperti:
.center {
margin: auto;
width: 80%;
border:6px solid #d3d3d3;
padding: 8px;
}
Dalam contoh di atas, kita dapat dengan jelas melihat bahwa kami pusat keselarasan menggunakan margin dan properti CSS lainnya. CSS di atas juga dapat ditulis sebagai:
.center {margin: auto;width:80%;border:6px solid #d3d3d3; padding:8px;}
- Bundel CSS dan file JavaScript bersama-sama untuk mengurangi overhead HTTP
Jadi, jika teman-teman memiliki 4 file CSS, Akan membutuhkan setidaknya empat “GET” permintaan untuk membuat semua file tersebut. Hal ini pada akhirnya akan meningkatkan overhead yang diperlukan untuk menghasilkan halaman web. Namun, dengan bundling CSS dan file JavaScript bersama-sama, dapat membantu dalam meningkatkan kecepatan halaman yang cukup.
Men-download beberapa gambar dapat membuat situs teman-teman sangat lambat terlepas dari citra mereka. Itu karena, setiap gambar di situs Anda akan membuat permintaan HTTP untuk memuat. Dengan demikian, lebih banyak gambar Anda akan memiliki di website.
- Menggunakan Data URI untuk Optimasi
Ada metode lain yang dapat digunakan untuk mengoptimalkan gambar untuk mengurangi permintaan HTTP, yang disebut sebagai Data URI. Bila menggunakan elemen img dalam dokumen HTML atau mendefinisikan latar belakang-gambar dalam CSS, Anda harus menghubungkan elemen yang ke file gambar eksternal.
Dengan data URI, Anda dapat menghilangkan kebutuhan untuk browser untuk memuat data gambar dari sumber eksternal, seperti embeds data ke dalam HTML atau CSS
Sekarang, mari kita lihat contoh dimana data URI dalam bentuk “image background” di CSS:
body {
background-image:url<em>('data:image/png;base64,');
background-repeat: repeat;
}
</em>
Semoga bermanfaat.