Performa web adalah aspek penting pengembangan web yang berfokus pada kecepatan halaman dimuat, serta seberapa responsif halaman tersebut terhadap input pengguna. Saat mengoptimalkan performa situs, Anda memberikan pengalaman yang lebih baik kepada pengguna. Pengalaman pengguna yang lebih baik sangat membantu Anda mencapai sasaran yang Anda inginkan untuk situs Anda.
Performa web mungkin tampak seperti topik khusus, tetapi sebenarnya, itu luas dan cukup mendalam. Mengingat kedalamannya sebagai bidang subjek, kursus tentang performa web harus mudah dipahami, tetapi informatif. Rilis awal kursus ini berfokus pada dasar-dasar performa web yang sebaiknya dianggap informatif oleh pemula.
Setiap modul dalam rangkaian ini bertujuan untuk memiliki, jika secara praktis memungkinkan, serangkaian demo yang melengkapi konten di setiap modul dan menunjukkan konsep performa utama. Mengingat kursus ini adalah penawaran awal, modul tambahan saat ini sedang direncanakan untuk dipublikasikan dalam beberapa bulan mendatang.
Berikut adalah hal yang tercakup dalam penawaran kursus awal untuk Learn Performance:
Mengapa kecepatan itu penting
Sebelum memulai performa pembelajaran, Anda harus terlebih dahulu memahami perannya dalam pengalaman pengguna, dan bagaimana hal itu dapat memberikan hasil yang lebih baik bagi pengguna. Kursus ini dimulai dengan pengenalan singkat tentang topik-topik ini, memberikan konteks penting tentang pentingnya mempelajari performa.
Pertimbangan performa umum HTML
Setiap situs dimulai dengan permintaan dokumen HTML. Permintaan tersebut berperan penting dalam kecepatan pemuatan situs Anda. Modul ini membahas konsep penting seperti caching HTML, pemblokiran parser, pemblokiran render, dan lainnya, sehingga Anda dapat memastikan permintaan pertama untuk HTML situs tidak berjalan dengan tepat.
Memahami jalur kritis
Jalur rendering kritis adalah konsep dalam performa web yang berkaitan dengan seberapa cepat rendering awal halaman muncul di browser. Modul ini membahas teori di balik jalur rendering penting, yang mencakup konsep-konsep seperti resource pemblokir render dan pemblokir parser, serta caranya berperan penting dalam seberapa cepat halaman muncul di browser.
Mengoptimalkan pemuatan resource
Saat halaman dimuat, banyak resource yang direferensikan dalam HTML-nya menyediakan tampilan dan tata letak halaman melalui CSS, serta interaktivitasnya melalui JavaScript. Dalam modul ini, kami akan membahas sejumlah konsep penting yang terkait dengan resource ini dan pengaruhnya terhadap waktu pemuatan halaman.
Membantu browser dengan petunjuk resource
Resource hints adalah kumpulan fitur yang tersedia pada HTML yang dapat membantu browser memuat resource lebih awal dan bahkan mungkin dengan prioritas resource yang lebih tinggi. Dalam modul ini, beberapa petunjuk resource yang dapat membantu halaman Anda memuat lebih cepat telah dibahas.
Performa gambar
Gambar mewakili sebagian besar data yang ditransfer di banyak halaman web saat ini. Modul ini membahas cara mengoptimalkan gambar, serta menayangkannya secara efisien sehingga Anda meminimalkan byte yang sia-sia, terlepas dari perangkat pengguna.
Performa video
Video adalah jenis media yang sering digunakan di halaman web—tetapi mengetahui cara menyajikannya secara efisien adalah salah satu aspek performa yang tidak boleh Anda abaikan. Modul ini membahas beberapa teknik utama untuk menyematkan video sedemikian rupa sehingga situs Anda tetap cepat, serta pertimbangan performa yang berdekatan yang dapat muncul selama penggunaannya.
Mengoptimalkan font web
{i>Font<i} web adalah sumber daya yang umum digunakan di web—dan memang seharusnya—saat mereka menambahkan ke desain situs web dengan cara yang tidak dapat dilakukan oleh sumber lain. Meski begitu, font web tetap memiliki biaya performa. Dalam modul ini, sejumlah pertimbangan dan teknik performa seputar {i>font<i} web akan dibahas.
JavaScript pemisahan kode
Beberapa resource tidak penting untuk pemuatan awal halaman web. JavaScript adalah salah satu resource yang dapat ditangguhkan hingga saat dibutuhkan melalui teknik yang dikenal sebagai pemisahan kode. Dengan demikian, Anda dapat meningkatkan performa dengan menurunkan bandwidth dan pertentangan CPU—pertimbangan penting untuk meningkatkan kecepatan pemuatan halaman awal dan responsivitas input selama startup.
Gambar pemuatan lambat dan elemen <iframe>
Gambar dan elemen <iframe> dapat menghabiskan bandwidth dan waktu pemrosesan CPU secara signifikan. Namun, tidak semua gambar dan
elemen <iframe> harus dimuat selama pemuatan halaman
awal, dan dapat ditangguhkan di lain waktu saat pengguna kemungkinan akan
melihatnya. Teknik ini dikenal sebagai pemuatan lambat. Dalam modul ini,
dijelaskan pemuatan lambat gambar dan elemen <iframe> agar
halaman Anda dimuat lebih cepat dan hanya menggunakan bandwidth serta
waktu pemrosesan hanya saat diperlukan.
Prefetching, pra-rendering, dan precaching pekerja layanan
Meskipun sebagian besar performa berkaitan dengan apa yang dapat Anda lakukan untuk mengoptimalkan dan menghilangkan resource yang tidak perlu, hal ini mungkin terasa agak paradoksal untuk menyarankan bahwa beberapa resource harus dimuat sebelum dibutuhkan. Namun, ada beberapa kasus yang mungkin sesuai untuk memuat resource tertentu terlebih dahulu. Dalam modul ini, aspek performa akan dibahas, karena pengambilan data, pra-rendering, dan precache pekerja layanan juga akan dibahas.
Ringkasan tentang pekerja web
Sebagian besar hal yang dilihat pengguna di browser terjadi di satu thread yang dikenal sebagai thread utama. Namun, ada peluang saat Anda dapat memulai thread baru untuk melakukan pekerjaan yang mahal secara komputasi sehingga thread utama dapat mengakomodasi tugas-tugas penting yang dihadapi pengguna. API yang melakukan hal ini dikenal sebagai Web Worker API, dan dalam modul ini, dasar-dasarnya dibahas.
Kasus penggunaan pekerja web konkret
Setelah Anda memiliki pemahaman dasar tentang pekerja web serta kemampuan dan keterbatasannya, kini saatnya melihat kasus penggunaan konkret untuk pekerja web. Dalam demo ini, web worker digunakan untuk mengambil file JPEG, mengekstrak metadatanya, dan mengirimkannya kembali ke thread utama agar pengguna dapat melihatnya di browser.
Siap mulai mempelajari performa web? Mulailah dengan membaca terlebih dahulu Mengapa kecepatan itu penting.