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:
Selain itu, nilai CLS dalam rentang "Buruk" dikurangi sebesar 65%, dan nilai CLS dalam rentang "Baik" meningkat sebesar 20% dalam jangka waktu yang sama:
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.
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.
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.
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.
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.
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.