Cara Benar Meningkatkan Waktu Load Page Website

Ini ialah fakta yang terkenal bahwa waktu buka halaman lambat sebahagian besar dapat mempengaruhi orang bagi meninggalkan sebuah situs. Menurut survei yang dilakukan oleh KISSmetrics, “hampir 40 pengguna persen meninggalkan sebuah situs yang memakan waktu lebih dari 3 detik bagi mengandung.”

Kecepatan laman telah menjadi jauh faktor penentu yang sangat urgen bagi mencapai sukses di pasar online goyah dan kompetitif ketika ini.

Ketika kita berbicara mengenai cara mengoptimalkan performa laman beberapa tahun yang lalu, kita hanya difokuskan di mengoptimalkan server-side yang hanya karena sebahagian besar situs yang statis dan diproses bagi server-side. Namun, munculnya web 2.0 teknologi merancang pemakaian program web dinamis lumayan populer.

Dan, itu telah menjadi keharusan bagi memperhatikan karena bagaimana situs yang` menjalankan di sisi klien seperti pemrosesan di sisi server.

Dikala ini, masalah performa ditemui di sisi klien mesti segera diatasi dibandingi dengan masalah performa server-side, sejak mantan dapat mempengaruhi pengalaman pengguna. Meskipun benar bahwa 10% dari performa program web secara keseluruhan dapat ditingkatkan dengan meningkatkan performa back-end sebesar 50%, tak dapat dipungkiri bahwa 40% atau persentase peningkatan lebih dapat dibangun bagi performa program Kamu dengan berfokus di front-end dan mengurangi waktu buka bagi setengah.

Apalagi apabila dibandingi dengan proyek bagi back-end, teman-teman perlu menghabiskan banyak waktu kurang dan sumber daya pada merancang perbaikan bagi front-end Kamu. Inilah sebabnya kenapa urgen untuk pemilik situs bagi membayar pertimbangan pada meningkatkan performa front-end dari situs web mereka.

Berikut ialah beberapa praktik terbaik berikut yang akan menolong meningkatkan performa front-end teman-teman bagi sebahagian besar:

• Pertama-tama, Mengukur Beban Halaman

Ada beberapa alat yang bermanfaat terdapat secara online yang dapat menolong mengidentifikasi performa front-end situs teman-teman, seperti Page Speed, Y-Lambat dan Firebug bagi beberapa nama.

• Mengurangi ukuran CSS, HTML dan JavaScript sumber daya via minification

Ketika menulis kode CSS, kita sering menggunakan format yang lebih gampang dimengerti. Di dasarnya, kita lebih suka menggunakan format ramah-manusia yang terlihat seperti:

.center {
margin: auto;
width: 80%;
border:6px solid #d3d3d3;
padding: 8px;
}

Pada contoh di atas, kita dapat dengan jelas melihat bahwa kami pusat keselarasan menggunakan margin dan properti CSS lainnya. CSS di atas pun dapat ditulis selaku:

.center {margin: auto;width:80%;border:6px solid #d3d3d3; padding:8px;}

• Bundel CSS dan file JavaScript bersama-sama bagi mengurangi overhead HTTP

Ketika mengandung situs web ada permintaan HTTP dikirim ke server jauh, dan segala file laman seperti CSS dan JavaScript mesti didownload ke browser web teman-teman.

Jadi, seandainya teman-teman mempunyai 4 file CSS, Akan membutuhkan setidaknya empat “GET” permintaan bagi merancang segala file tersebut. Hal ini di akhirnya akan meningkatkan overhead yang diperlukan bagi menghasilkan halaman web. Namun, dengan bundling CSS dan file JavaScript bersama-sama, dapat menolong pada meningkatkan kecepatan halaman yang lumayan.

• Optimalkan gambar bagi mengurangi permintaan server

Men-download beberapa gambar dapat merancang situs teman-teman benar-benar lambat terlepas dari citra mereka. Itu karena, setiap gambar di situs Kamu akan merancang permintaan HTTP bagi mengandung. Dengan demikian, lebih banyak gambar Kamu akan mempunyai di laman.

• Menggunakan Data URI bagi Optimasi

Ada sistem lain yang dapat digunakan bagi mengoptimalkan gambar bagi mengurangi permintaan HTTP, yang disebut selaku Data URI. Bila menggunakan faktor img pada dokumen HTML atau mendefinisikan latar belakang-gambar pada CSS, Kamu mesti menghubungkan faktor yang ke file gambar eksternal.

Dengan data URI, Kamu dapat menghilangkan keperluan bagi browser bagi mengandung data gambar dari sumber eksternal, seperti embeds data ke pada HTML atau CSS

Sekarang ini, mari kita lihat contoh dimana data URI pada format “image background” di CSS:

body {
background-image:url<em>('data:image/png;base64,');
background-repeat: repeat;
}
</em>

Semoga bermanfaat.

Sumber https://kursuswebsite.org