Teknik terkait CSS untuk mengoptimalkan Data Web
Cara Anda menulis gaya dan membuat tata letak dapat berdampak besar pada Data Vital Web Inti. Hal ini terutama berlaku untuk Pergeseran Tata Letak Kumulatif (CLS) dan Largest Contentful Paint (LCP).
Artikel ini membahas teknik terkait CSS untuk mengoptimalkan Data Web. Pengoptimalan ini dikelompokkan berdasarkan berbagai aspek halaman: tata letak, gambar, font, animasi, dan pemuatan. Selama prosesnya, kita akan mempelajari cara meningkatkan kualitas halaman contoh:
Tata Letak
Menyisipkan konten ke dalam DOM
Menyisipkan konten ke dalam halaman setelah konten di sekitarnya dimuat akan mendorong semua konten lainnya di halaman ke bawah. Hal ini menyebabkan perubahan tata letak.
Pemberitahuan cookie, terutama yang ditempatkan di bagian atas halaman, adalah contoh umum masalah ini. Elemen halaman lain yang sering menyebabkan jenis pergeseran tata letak ini saat dimuat mencakup iklan dan penyematan.
Identifikasikan
Audit "Hindari peralihan tata letak besar" Lighthouse mengidentifikasi elemen halaman yang telah bergeser. Untuk demo ini, hasilnya akan terlihat seperti ini:
Pemberitahuan cookie tidak tercantum dalam temuan ini karena pemberitahuan cookie
itu sendiri tidak bergeser saat dimuat. Sebaliknya, hal ini menyebabkan item di bawahnya di
halaman (yaitu, div.hero dan article) bergeser. Untuk informasi selengkapnya tentang
mengidentifikasi dan memperbaiki pergeseran tata letak, lihat Men-debug Pergeseran
Tata Letak.
Perbaiki
Tempatkan pemberitahuan cookie di bagian bawah halaman menggunakan pemosisian absolut atau tetap.
Sebelum:
.banner {
position: sticky;
top: 0;
}
Sesudah:
.banner {
position: fixed;
bottom: 0;
}
Cara lain untuk memperbaiki pergeseran tata letak ini adalah dengan menyediakan ruang untuk pemberitahuan cookie di bagian atas layar. Pendekatan ini sama efektifnya. Untuk mengetahui informasi selengkapnya, lihat Praktik terbaik pemberitahuan cookie.
Gambar
Gambar dan Largest Contentful Paint (LCP)
Gambar biasanya merupakan elemen Largest Contentful Paint (LCP) di halaman. Elemen halaman lain yang dapat menjadi elemen LCP mencakup blok teks dan gambar poster video. Waktu pemuatan elemen LCP menentukan LCP.
Penting untuk diperhatikan bahwa elemen LCP halaman dapat bervariasi dari pemuatan halaman ke pemuatan halaman, bergantung pada konten yang terlihat oleh pengguna saat halaman pertama kali ditampilkan. Misalnya, dalam demo ini, latar belakang pemberitahuan cookie, gambar hero, dan teks artikel adalah beberapa elemen LCP potensial.
Di situs contoh, gambar latar pemberitahuan cookie sebenarnya adalah gambar besar. Untuk meningkatkan LCP, Anda dapat menggambar gradien di CSS, bukan memuat gambar untuk membuat efek.
Perbaiki
Ubah CSS .banner untuk menggunakan gradien CSS, bukan gambar:
Sebelum:
background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
Sesudah:
background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
Gambar dan perubahan tata letak
Browser hanya dapat menentukan ukuran gambar setelah gambar dimuat. Jika pemuatan gambar terjadi setelah halaman dirender, tetapi tidak ada ruang yang disediakan untuk gambar, pergeseran tata letak akan terjadi saat gambar muncul. Dalam demo, gambar hero menyebabkan pergeseran tata letak saat dimuat.
Identifikasikan
Untuk mengidentifikasi gambar tanpa width dan height yang jelas, gunakan audit Lighthouse
"Elemen gambar memiliki lebar dan tinggi yang jelas".
Dalam contoh ini, gambar hero dan gambar artikel tidak memiliki atribut width dan
height.
Perbaiki
Tetapkan atribut width dan height pada gambar ini untuk menghindari pergeseran tata letak.
Sebelum:
<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
Sesudah:
<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
Font
Font dapat menunda rendering teks dan menyebabkan perubahan tata letak. Oleh karena itu, pengiriman font harus dilakukan dengan cepat.
Rendering teks yang tertunda
Secara default, browser tidak akan langsung merender elemen teks jika font web terkait belum dimuat. Hal ini dilakukan untuk mencegah "flash teks tanpa gaya" (FOUT). Dalam banyak situasi, hal ini menunda First Contentful Paint (FCP). Dalam beberapa situasi, hal ini menunda Largest Contentful Paint (LCP).
Perubahan tata letak
Meskipun sangat bagus untuk menampilkan konten kepada pengguna dengan cepat, penggantian font memiliki potensi untuk menyebabkan pergeseran tata letak. Pergeseran tata letak ini terjadi saat font web dan font penggantinya menggunakan jumlah ruang yang berbeda di halaman. Menggunakan font dengan proporsi yang sama akan meminimalkan ukuran pergeseran tata letak ini.
Identifikasikan
Untuk melihat font yang dimuat di halaman tertentu, buka tab Jaringan di DevTools dan filter menurut Font. Font dapat berupa file berukuran besar, sehingga hanya menggunakan lebih sedikit font umumnya lebih baik untuk performa.
Untuk melihat berapa lama font diminta, klik tab Timing. Semakin cepat font diminta, semakin cepat font tersebut dapat dimuat dan digunakan.
Untuk melihat rantai permintaan font, klik tab Pemrakarsa. Secara umum, semakin pendek rantai permintaan, semakin cepat font dapat diminta.
Perbaiki
Demo ini menggunakan Google Fonts API. Google Fonts menyediakan opsi untuk memuat font melalui tag <link> atau pernyataan @import. Cuplikan kode <link>
menyertakan petunjuk resource preconnect. Hal ini akan menghasilkan pengiriman
stylesheet yang lebih cepat daripada menggunakan versi @import.
Pada tingkat yang sangat tinggi, Anda dapat menganggap petunjuk resource sebagai cara untuk memberi tahu browser bahwa browser perlu menyiapkan koneksi tertentu atau mendownload resource tertentu. Akibatnya, browser akan memprioritaskan tindakan ini. Saat menggunakan petunjuk resource, perlu diingat bahwa memprioritaskan tindakan tertentu akan mengurangi resource browser dari tindakan lain. Dengan demikian, petunjuk resource harus digunakan dengan cermat dan tidak untuk semuanya. Untuk informasi selengkapnya, lihat Membangun koneksi jaringan lebih awal untuk meningkatkan kecepatan halaman yang dirasakan.
Hapus pernyataan @import berikut dari stylesheet Anda:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
Tambahkan tag <link> berikut ke <head> dokumen:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
Tag link ini menginstruksikan browser untuk membuat koneksi awal ke
origin yang digunakan oleh Google Fonts dan memuat stylesheet yang
berisi deklarasi font untuk Montserrat dan Roboto. Tag <link> ini
harus ditempatkan sedini mungkin di <head>.
Animasi
Cara utama animasi memengaruhi Web Vitals adalah saat animasi menyebabkan pergeseran
tata letak. Ada dua jenis animasi yang sebaiknya tidak Anda gunakan:
animasi yang memicu tata letak dan
efek "seperti animasi" yang memindahkan elemen halaman. Biasanya, animasi ini dapat diganti dengan yang setara dan berperforma lebih baik menggunakan properti CSS seperti transform, opacity, dan filter. Untuk mengetahui informasi
selengkapnya, lihat Cara membuat animasi CSS
performa tinggi.
Identifikasikan
Audit "Hindari animasi non-gabungan" Lighthouse dapat membantu mengidentifikasi animasi yang tidak berperforma.
Perbaiki
Ubah urutan animasi slideIn agar menggunakan transform: translateX(), bukan
mentransisikan propertimargin-left.
Sebelum:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}
Sesudah:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
CSS Penting
Stylesheet memblokir render. Artinya, browser akan berhenti mendownload resource lain hingga browser mendownload dan mengurai stylesheet saat menemukan stylesheet. Hal ini dapat menunda LCP. Untuk meningkatkan performa, pertimbangkan untuk menghapus CSS yang tidak digunakan, menyisipkan CSS penting, dan menunda CSS yang tidak penting.
Kesimpulan
Meskipun masih ada ruang untuk peningkatan lebih lanjut (misalnya, menggunakan kompresi gambar untuk mengirimkan gambar lebih cepat), perubahan ini telah meningkatkan Web Vitals situs ini secara signifikan. Jika ini adalah situs sungguhan, langkah berikutnya adalah mengumpulkan data performa dari pengguna sungguhan untuk menilai apakah situs tersebut memenuhi nilai minimum Data Web untuk sebagian besar pengguna. Untuk mengetahui informasi selengkapnya tentang Web Vitals, lihat Mempelajari Web Vitals.