- PageSpeed Insights
Melalui situs yang disediakan oleh Google
kinerja web dapat diukur dengan mudah.
https://pagespeed.web.dev/
Anda dapat memasukkan URL untuk pengukuran, atau menginstal Lighthouse sebagai ekstensi Chrome untuk pengukuran.
Apa keuntungan dari meningkatkan metrik?
Situs web Anda dapat muncul lebih baik di mesin pencari. SEO sering menggunakan server-side rendering, tetapi
jika metrik kinerja di atas rendah, efektivitasnya akan menurun drastis.
Bagaimana cara meningkatkannya?
Situs web.dev menjelaskan secara detail bagaimana meningkatkan setiap metrik.
Terutama, 3 metrik memiliki pengaruh besar pada skor. (Web Core Vitals)
Saya ingin mencatat upaya yang telah saya lakukan untuk meningkatkan metrik.
Bagaimana cara mengukurnya secara lokal?
Sisipkan kode di atas. Untuk Nuxt, tempatkan di plugins dan periksa log konsol.
Cumulative Layout Shift (CLS)
Ini adalah pengukuran seberapa banyak tata letak berubah saat rendering.
Misalnya, anggap saja ada halaman yang merender gambar 400x400 berdasarkan URL gambar yang diterima dari respons API,
maka posisi tertentu pada tata letak akan bergeser 400px karena rendering gambar.
Ini adalah pergeseran yang tidak diharapkan pengguna, yang berdampak buruk pada UX dan secara tidak langsung berdampak buruk pada browser saat merender layar.
secara tidak langsung juga berdampak buruk pada browser saat merender layar.
Ada dua cara mudah untuk memperbaikinya.
1. Terapkan UI Skeleton
- Sebagian besar situs web menggambar kerangka yang sesuai dengan ukuran gambar atau komponen. Pertimbangkan hal ini saat mengembangkan layar. Untuk Vue, gambar kerangka yang sesuai untuk setiap elemen menggunakan v-if dan v-else.
2. Reservasi Tinggi
- Jika terlalu banyak gaya yang diterapkan pada kerangka, pemeliharaan akan menjadi rumit dan dapat berdampak negatif. Hanya dengan menetapkan min-height untuk elemen yang akan dirender saja sudah cukup efektif.
- Sulit untuk menetapkan tinggi secara tetap untuk situs web responsif di mana ukuran gambar berbeda untuk setiap perangkat. Dalam kasus ini, Anda dapat menggunakan perangkat terkecil sebagai referensi atau menggunakan vh atau vw.
3. Tentukan lebar dan tinggi untuk elemen gambar
- Anda dapat memasukkan lebar dan tinggi ke dalam elemen gambar sebagai berikut.
<img src="image.jpg" width="400" height="400">
Meskipun ukuran gambar sebenarnya bukan 400x400, ini memberi tahu browser tentang ukuran yang diharapkan dari gambar.
4. Gunakan font-display: swap untuk mencegah perubahan tata letak akibat font web
- Dengan menunjukkan font pengganti, Anda dapat mencegah pergeseran tata letak.
Largest Contentful Paint(LCP)
Waktu yang dibutuhkan untuk merender elemen terbesar di layar. Biasanya gambar, jadi secara intuitif, Anda perlu mempercepat kecepatan pemuatan.
1. Kurangi ukuran gambar.
- Periksa apakah ukuran gambar tidak lebih besar dari ukuran render.
- Optimalkan rendering gambar menggunakan ekstensi seperti webp. WebP dapat mengurangi ukuran file hingga 30% dibandingkan dengan format JPEG jika menggunakan kompresi lossy, dan hingga 20% dibandingkan dengan PNG jika menggunakan kompresi lossless.
- Anda juga dapat mempertimbangkan lazy loading yang memuat gambar berdasarkan posisi gulir.
2. Gunakan caching atau CDN.
3. Hapus elemen yang memblokir rendering.
- Karena sebagian besar metrik pengukuran terpengaruh, pastikan untuk menghapusnya. Browser mengambil skrip di bagian tag head terlebih dahulu sebelum merender layar, jadi periksa apakah skrip (biasanya skrip eksternal) di dalam tag head perlu dirender terlebih dahulu. Anda dapat dengan mudah mengelolanya menggunakan tag async dan defer.
* Saya akan menulis postingan lain tentang atribut skrip di dalam head nanti.
4. Minimalkan ukuran bundle.
- Terlepas dari kecepatan rendering gambar, jika transfer dari server lambat, Anda perlu memperbaikinya.
Jika Anda menggunakan server proxy seperti nginx, Anda dapat menggunakan kompresi gzip.
* Saya akan menulis postingan lain tentang konfigurasi nginx nanti.
First Contentful Paint(FCP)
Ini menunjukkan waktu ketika konten pertama dirender pada halaman.
1. Sama seperti sebelumnya, hapus elemen yang memblokir rendering.
2. Minimalkan ukuran HTML.
- Jika Anda membungkusnya dengan tag div div secara sembarangan, itu akan menghasilkan pohon yang sangat bersarang dan ukuran file akan meningkat.
3. Font web eksternal mungkin menjadi masalah. Gunakan font-display: swap; secara aktif untuk merender font default terlebih dahulu.
First Input Delay(FID)
Ini menunjukkan waktu yang dibutuhkan browser untuk memproses input pertama pengguna (klik, gulir, dll.) di halaman. Terkadang, ketika Anda menekan tombol, tombol tersebut tidak merespons, tetapi sebenarnya bukan tidak merespons, melainkan menunggu respons API.
1. Manfaatkan asynchronous dengan baik agar thread utama JavaScript tidak terikat pada tugas yang berat.
2. Anda dapat menggunakan web worker untuk menjalankan tugas lain yang terpisah dari thread utama.
* Saya akan menulis postingan lain tentang web worker nanti.
Karena batasan jumlah karakter, saya akan akhiri di sini.
Komentar0