Mengoptimalkan Data Web Inti di situs The Economic Times secara signifikan meningkatkan pengalaman pengguna dan secara signifikan mengurangi rasio pantulan di seluruh situs.
Dengan peningkatan kecepatan internet dari hari ke hari, pengguna berharap situs merespons dan berperilaku lebih cepat dari sebelumnya. The Economic Times menangani lebih dari 45 juta pengguna aktif bulanan. Dengan mengoptimalkan Data Web Inti di seluruh domain, baik di halaman AMP maupun non-AMP, kami berhasil mengurangi rasio pantulan secara signifikan dan meningkatkan pengalaman membaca.
Mengukur Dampak
Kami berfokus pada Largest Contentful Paint (LCP) dan Cumulative Layout Shift (CLS), karena keduanya sangat penting dalam memberikan pengalaman membaca yang memuaskan kepada pengguna kami. Setelah menerapkan berbagai perbaikan performa seperti yang dijelaskan di bawah, The Economic Times berhasil meningkatkan metrik laporan Chrome User Experiments (CrUX) secara signifikan dalam beberapa bulan.
Secara keseluruhan, CLS meningkat sebesar 250% dari 0,25 menjadi 0,09. Secara keseluruhan, LCP meningkat sebesar 80% dari 4,5 detik menjadi 2,5 detik.
Selain itu, nilai LCP dalam rentang "Buruk" berkurang sebesar 33% dari Oktober 2020 hingga Juli 2021:
![Distribusi LCP yang dikelompokkan berdasarkan bulan, mulai dari Oktober 2020 dan berakhir pada Juli 2021. Jumlah nilai LCP yang diklasifikasikan sebagai 'Buruk' berkurang dari 15,03% menjadi 10,08%.](https://web.dev/static/case-studies/economic-times-cwv/image/lcp-distributions-grouped-1665cedb8a1c1.png?authuser=19&hl=id)
Selain itu, nilai CLS dalam rentang "Buruk" dikurangi sebesar 65%, dan nilai CLS dalam rentang "Baik" meningkat sebesar 20% dalam jangka waktu yang sama:
![Distribusi CLS yang dikelompokkan berdasarkan bulan, mulai dari Oktober 2020 dan berakhir pada Juli 2021. Jumlah nilai CLS yang terklasifikasi sebagai 'Buruk' berkurang dari 25,92% menjadi 9%, dan jumlah nilai CLS yang terklasifikasi baik' meningkat dari 62,62% menjadi 76,5%.](https://web.dev/static/case-studies/economic-times-cwv/image/cls-distributions-grouped-8c9f113c949f8.png?authuser=19&hl=id)
Hasilnya adalah The Economic Times—yang sebelumnya tidak memenuhi nilai minimum Data Web Inti—kini berhasil mencapai nilai minimum Data Web Inti di seluruh asalnya dan mengurangi rasio pantulan sebesar 43% secara keseluruhan.
Apa itu LCP dan bagaimana cara meningkatkannya?
Elemen terbesar adalah elemen yang paling relevan untuk meningkatkan pengalaman pengguna dan mengenali kecepatan pemuatan. Metrik performa seperti First Contentful Paint (FCP) hanya mencatat pengalaman awal pemuatan halaman. Di sisi lain, LCP melaporkan waktu render bagian gambar, teks, atau video terbesar yang terlihat oleh pengguna.
Selain beralih ke penyedia DNS yang lebih cepat dan mengoptimalkan gambar, berikut beberapa teknik yang telah kita terapkan untuk meningkatkan LCP.
Permintaan penting terlebih dahulu
Karena semua browser modern membatasi jumlah permintaan serentak, developer perlu memprioritaskan pemuatan konten penting terlebih dahulu. Untuk memuat halaman web yang kompleks, kita harus mendownload aset seperti elemen header, CSS, aset JavaScript, banner besar, isi artikel, komentar, berita terkait lainnya, footer, dan iklan. Kami mengevaluasi elemen apa yang diperlukan untuk LCP, dan memberikan preferensi untuk memuat item tersebut terlebih dahulu guna meningkatkan LCP. Kami juga menunda panggilan yang bukan bagian dari rendering halaman awal.
Tampilan teks
Kami bereksperimen dengan properti font-display
karena hal ini memengaruhi LCP dan CLS. Kami mencoba font-display: auto;
, lalu beralih ke font-display: swap;
. Tindakan ini akan merender teks pada awalnya dalam font yang paling cocok dan tersedia, lalu beralih ke font ketika telah didownload. Hal ini mengakibatkan teks kami dirender dengan cepat, terlepas dari kecepatan jaringan.
Kompresi Lebih Baik
Brotli adalah algoritma kompresi alternatif untuk Gzip dan Deflate yang dikembangkan oleh Google. Kami mengganti font dan aset serta mengubah kompresi server dari Gzip menjadi Brotli untuk mencapai jejak yang lebih kecil:
- Ukuran file JavaScript 15% lebih kecil dibandingkan dengan Gzip.
- Ukuran file HTML 18% lebih kecil dibandingkan dengan Gzip.
- Ukuran file CSS dan font 17% lebih kecil dibandingkan dengan Gzip.
Prakoneksi ke domain pihak ketiga
preconnect
harus digunakan dengan hati-hati karena masih dapat menghabiskan waktu CPU yang berharga, dan menunda resource penting lainnya, terutama di koneksi yang aman.
Namun, jika diketahui bahwa pengambilan resource di domain pihak ketiga akan terjadi, preconnect
adalah hal yang baik. Jika hanya terjadi sesekali di situs dengan traffic tinggi, preconnect
dapat memicu pekerjaan TCP dan TLS yang tidak perlu. Karena itu, dns-prefetch
lebih cocok untuk resource pihak ketiga—misalnya, media sosial, analisis, dll.—untuk melakukan pencarian DNS terlebih dahulu.
Memecah kode menjadi potongan-potongan
Secara sekilas, kami hanya memuat resource yang berisi bagian penting dari logika bisnis atau penting untuk rendering halaman paruh atas. Selain itu, kita membagi kode menjadi beberapa bagian dengan pemisahan kode. Hal ini membantu kami meningkatkan kualitas LCP halaman lebih lanjut.
Penyimpanan dalam cache yang lebih baik
Untuk semua rute front-end, kami menambahkan lapisan Redis yang menyajikan template dari cache. Tindakan ini akan mengurangi waktu komputasi di server dan mem-build seluruh UI dalam setiap permintaan, sehingga mengurangi LCP dalam permintaan berikutnya.
Meringkas Sasaran dan pencapaian LCP
Sebelum memulai project pengoptimalan, tim membandingkan skor LCP mereka pada 4,5 detik (untuk persentil ke-75 pengguna mereka, berdasarkan data kolom laporan CrUX). Setelah project pengoptimalan dilakukan, durasinya dikurangi menjadi 2,5 detik.
![Distribusi LCP dari September 2020 hingga Juni 2021. Secara keseluruhan, persentil ke-75 nilai LCP yang diamati dalam laporan Pengalaman Pengguna Chrome menunjukkan penurunan nilai LCP 'Buruk' sebesar 8,97%. Penurunan keseluruhan waktu LCP pada persentil ke-75 adalah 200 milidetik, dengan 77,63% nilai LCP yang berada dalam rentang 'Baik'.](https://web.dev/static/case-studies/economic-times-cwv/image/lcp-distributions-septem-dba1967fe2b85.png?authuser=19&hl=id)
Apa itu CLS dan bagaimana cara meningkatkannya?
Pernahkah Anda melihat perpindahan konten halaman yang tidak terduga saat menjelajahi situs web? Salah satu penyebabnya adalah pemuatan media (gambar, video, iklan, dll.) asinkron pada halaman dengan dimensi yang tidak diketahui. Segera setelah resource media dimuat, tata letak halaman akan bergeser.
Kita akan membahas langkah-langkah yang diambil untuk meningkatkan CLS di situs The Economic Times.
Menggunakan placeholder
Kami menggunakan placeholder bergaya untuk unit iklan dan elemen media dari dimensi yang diketahui guna menghindari pergeseran tata letak saat library iklan dimuat dan merender iklan halaman. Hal ini memastikan pergeseran tata letak dihilangkan dengan menyediakan ruang untuk iklan.
![Perbandingan berdampingan dari situs The Economic Times seperti yang ditampilkan di ponsel. Di sebelah kiri, placeholder abu-abu digunakan untuk banner besar artikel. Di sebelah kanan, placeholder diganti dengan gambar yang dimuat.](https://web.dev/static/case-studies/economic-times-cwv/image/a-side-side-comparison-7fa833805779e.jpg?authuser=19&hl=id)
Dimensi penampung yang ditentukan
Kami menentukan dimensi eksplisit untuk semua gambar dan penampung sehingga mesin browser tidak perlu menghitung lebar dan tinggi elemen DOM setelah tersedia. Tindakan ini akan menghindari pergeseran tata letak yang tidak perlu dan pekerjaan pengecatan tambahan.
Meringkas sasaran dan pencapaian CLS
Sebelum memulai project pengoptimalan, tim tolok ukur skor CLS mereka sebesar 0,25. Kami dapat menguranginya secara signifikan sebesar 90% menjadi 0,09.
![Distribusi CLS yang ditampilkan di Laporan Pengalaman Pengguna Chrome. 76% nilai CLS adalah 'Baik', 15% adalah 'Cukup', dan 9% adalah 'Buruk'. Persentil ke-75 pengalaman pengguna di situs The Economic Times secara keseluruhan mengalami CLS 0,09.](https://web.dev/static/case-studies/economic-times-cwv/image/cls-distributions-shown-24bb04e5f1222.png?authuser=19&hl=id)
Apa itu Penundaan Input Pertama (FID) dan bagaimana cara meningkatkannya?
Penundaan Input Pertama adalah metrik yang melacak responsivitas situs terhadap input pengguna. Penyebab utama buruknya skor FID adalah pekerjaan JavaScript yang berat yang membuat utas utama browser tetap sibuk, yang dapat menunda interaksi pengguna. Kami meningkatkan FID dalam beberapa cara.
Memecah tugas JavaScript yang panjang
Tugas yang panjang adalah tugas yang berdurasi 50 milidetik atau lebih. Tugas yang panjang menempati thread utama browser dan mencegahnya merespons input pengguna. Kami memecah tugas yang berjalan lama menjadi tugas-tugas yang lebih kecil jika memungkinkan sesuai permintaan pengguna, yang membantu mengurangi ukuran JavaScript yang berlebihan.
![Waktu CPU yang diperinci berdasarkan jenis aktivitas di panel performa DevTools Chrome. Waktu 143 milidetik telah dihabiskan untuk menjadwalkan pemuatan resource. 4.553 milidetik dihabiskan untuk JavaScript. 961 milidetik dihabiskan untuk pekerjaan rendering. 191 milidetik dihabiskan untuk operasi pengecatan. 1488 milidetik pada tugas sistem, dengan 3877 milidetik waktu tidak ada aktivitas. Total jangka waktu adalah 11212 milidetik.](https://web.dev/static/case-studies/economic-times-cwv/image/cpu-broken-down-activit-755810742b7d6.png?authuser=19&hl=id)
Tunda JavaScript yang tidak digunakan
Kami memprioritaskan konten halaman daripada skrip pihak ketiga seperti analytics untuk menjaga agar halaman lebih responsif. Namun, ada batasan tertentu pada beberapa library karena library tersebut harus dimuat dalam <head>
dokumen untuk melacak perjalanan pengguna secara akurat.
Mengurangi polyfill
Kami mengurangi dependensi pada polyfill dan library tertentu, karena browser menyediakan dukungan untuk API modern, dan lebih sedikit pengguna yang menggunakan browser lama, seperti Internet Explorer.
Iklan pemuatan lambat
Pemuatan iklan paruh bawah yang lambat membantu mengurangi waktu pemblokiran thread utama sehingga FID menjadi lebih baik.
Meringkas sasaran dan pencapaian FID
Dari eksperimen rutin, kami berhasil mengurangi FID dari 200 md menjadi di bawah 50 md saat ini.
![Distribusi FID yang ditampilkan di Laporan Pengalaman Pengguna Chrome. 86% nilai CLS adalah 'Baik', 10% adalah 'Cukup', dan 4% adalah 'Buruk'. Persentil ke-75 pengalaman pengguna di situs The Economic Times secara keseluruhan mengalami FID 44 milidetik.](https://web.dev/static/case-studies/economic-times-cwv/image/fid-distributions-shown-aef0cbd6725b6.png?authuser=19&hl=id)
Mencegah regresi
The Economics Times berencana untuk memperkenalkan pemeriksaan performa otomatis dalam produksi untuk menghindari regresi performa halaman. Mereka berencana mengevaluasi Lighthouse-CI untuk mengotomatiskan uji lab, yang dapat mencegah regresi pada cabang produksi mereka.