Performa Front-End 2021: Kemenangan Cepat

Diterbitkan: 2022-03-10

Ringkasan cepat Ayo buat 2021… cepat! Daftar periksa kinerja front-end tahunan dengan semua yang perlu Anda ketahui untuk menciptakan pengalaman cepat di web hari ini, mulai dari metrik hingga perkakas dan teknik front-end. Diperbarui sejak 2016.

Daftar isi

Persiapan: Perencanaan Dan Metrik
Menetapkan Tujuan yang Realistis
Mendefinisikan Lingkungan
Pengoptimalan Aset
Membangun Optimasi
Pengoptimalan Pengiriman
Jaringan, HTTP/2, HTTP/3
Pengujian Dan Pemantauan
Kemenangan Cepat
Semuanya dalam satu halaman
Unduh Daftar Periksa (PDF, Halaman Apple, MS Word)
Semuanya dalam satu halaman
Unduh Daftar Periksa (PDF, Halaman Apple, MS Word)
Berlangganan buletin email kami agar tidak ketinggalan panduan berikutnya.

Kemenangan Cepat

Daftar ini cukup lengkap, dan menyelesaikan semua pengoptimalan mungkin memakan waktu cukup lama. Jadi, jika Anda hanya memiliki 1 jam untuk mendapatkan peningkatan yang signifikan, apa yang akan Anda lakukan? Mari kita rebus semuanya menjadi 17 buah gantung rendah . Jelas, sebelum Anda mulai dan setelah Anda selesai, ukur hasilnya, termasuk Cat Terbesar dan Waktu Untuk Interaktif pada koneksi 3G dan kabel.

Ukur pengalaman dunia nyata dan tetapkan tujuan yang sesuai. Bertujuan untuk menjadi setidaknya 20% lebih cepat dari pesaing tercepat Anda. Tetap dalam Cat Contentful Terbesar <2,5 detik, Penundaan Input Pertama < 100 md, Waktu Interaktif < 5 d pada 3G lambat, untuk kunjungan berulang, TTI < 2 d. Optimalkan setidaknya untuk First Contentful Paint dan Time To Interactive.
Optimalkan gambar dengan Squoosh, mozjpeg, guetzli, pingo dan SVGOMG, dan sajikan AVIF/WebP dengan CDN gambar.
Siapkan CSS penting untuk template utama Anda, dan sebariskan di <head> setiap template. Untuk CSS/JS, operasikan dalam anggaran ukuran file kritis maks. 170KB gzip (0.7MB didekompresi).
Pangkas, optimalkan, tunda, dan muat skrip lambat. Investasikan dalam konfigurasi bundler Anda untuk menghapus redundansi dan memeriksa alternatif yang ringan.
Selalu hosting sendiri aset statis Anda dan selalu pilih untuk menghosting sendiri aset pihak ketiga. Batasi dampak skrip pihak ketiga. Gunakan fasad, muat widget saat berinteraksi, dan waspadai cuplikan anti-kedip.
Selektif saat memilih kerangka kerja. Untuk aplikasi satu halaman, identifikasi halaman penting dan sajikan secara statis, atau setidaknya lakukan prarender, dan gunakan hidrasi progresif pada tingkat komponen dan impor modul pada interaksi.
Render sisi klien saja bukanlah pilihan yang baik untuk kinerja. Prarender jika halaman Anda tidak banyak berubah, dan tunda booting framework jika Anda bisa. Jika memungkinkan, gunakan rendering sisi server streaming.
Sajikan kode lawas hanya ke browser lawas dengan <script type="module"> dan pola modul/nomodule.
Bereksperimenlah dengan mengelompokkan ulang aturan CSS Anda dan uji CSS dalam-tubuh.
Tambahkan petunjuk sumber daya untuk mempercepat pengiriman dengan dns-lookup , preconnect , prefetch , preload , dan prerender yang lebih cepat.
Subset font web dan muat secara asinkron, dan gunakan font-display di CSS untuk rendering pertama yang cepat.
Periksa apakah header cache HTTP dan header keamanan diatur dengan benar.
Aktifkan kompresi Brotli di server. (Jika itu tidak memungkinkan, setidaknya pastikan kompresi Gzip diaktifkan.)
Aktifkan kemacetan TCP BBR selama server Anda berjalan pada kernel Linux versi 4.9+.
Aktifkan stapel OCSP dan IPv6 jika memungkinkan. Selalu sajikan sertifikat DV yang dijepret OCSP.
Aktifkan kompresi HPACK untuk HTTP/2 dan pindah ke HTTP/3 jika tersedia.
Aset cache seperti font, gaya, JavaScript, dan gambar dalam cache pekerja layanan.

Unduh Daftar Periksa (PDF, Halaman Apple)

Dengan mengingat daftar periksa ini, Anda harus siap untuk segala jenis proyek kinerja front-end. Jangan ragu untuk mengunduh PDF siap cetak dari daftar periksa serta dokumen Apple Pages yang dapat diedit untuk menyesuaikan daftar periksa untuk kebutuhan Anda:

Unduh PDF daftar periksa (PDF, 166 KB)
Unduh daftar periksa di Apple Pages (.pages, 275 KB)
Download checklist di MS Word (.docx, 151 KB)

Jika Anda memerlukan alternatif, Anda juga dapat memeriksa daftar periksa front-end oleh Dan Rublic, "Daftar Periksa Kinerja Web Desainer" oleh Jon Yablonski dan Daftar Periksa Frontend.

Ayo kita pergi!

Beberapa pengoptimalan mungkin berada di luar cakupan pekerjaan atau anggaran Anda atau mungkin terlalu berlebihan mengingat kode lama yang harus Anda tangani. Tidak apa-apa! Gunakan daftar periksa ini sebagai panduan umum (dan mudah-mudahan komprehensif), dan buat daftar masalah Anda sendiri yang sesuai dengan konteks Anda. Tetapi yang paling penting, uji dan ukur proyek Anda sendiri untuk mengidentifikasi masalah sebelum mengoptimalkan. Hasil kinerja yang bahagia di tahun 2021, semuanya!

Daftar isi

Persiapan: Perencanaan Dan Metrik
Menetapkan Tujuan yang Realistis
Mendefinisikan Lingkungan
Pengoptimalan Aset
Membangun Optimasi
Pengoptimalan Pengiriman
Jaringan, HTTP/2, HTTP/3
Pengujian Dan Pemantauan
Kemenangan Cepat
Semuanya dalam satu halaman
Unduh Daftar Periksa (PDF, Halaman Apple, MS Word)
Semuanya dalam satu halaman
Unduh Daftar Periksa (PDF, Halaman Apple, MS Word)
Berlangganan buletin email kami agar tidak ketinggalan panduan berikutnya.

Terima kasih banyak untuk Guy Podjarny, Yoav Weiss, Addy Osmani, Artem Denysov, Denys Mishunov, Ilya Pukhalski, Jeremy Wagner, Colin Bendell, Mark Zeman, Patrick Meenan, Leonardo Losoviz, Andy Davies, Rachel Andrew, Anselm Hannemann, Barry Pollard, Patrick Hamann, Gideon Pyzer, Andy Davies, Maria Prosvernina, Tim Kadlec, Rey Bango, Matthias Ott, Peter Bowyer, Phil Walton, Mariana Peralta, Pepijn Senders, Mark Nottingham, Jean Pierre Vincent, Philipp Tellis, Ryan Townsend, Ingrid Bergman, Mohamed Hussain SH, Jacob Groß, Tim Swalling, Bob Visser, Kev Adamson, Adir Amsalem, Aleksey Kulikov dan Rodney Rehm untuk meninjau artikel ini, serta komunitas fantastis kami yang telah berbagi teknik dan pelajaran dari pekerjaannya dalam pengoptimalan kinerja untuk digunakan semua orang . Anda benar-benar menghancurkan!