Teknik terkait CSS untuk mengoptimalkan Data Web
Cara Anda menulis gaya dan membuat tata letak dapat berdampak besar terhadap Data 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. Dalam prosesnya, kita akan mempelajari cara meningkatkan contoh halaman:
Tata Letak
Menyisipkan konten ke DOM
Menyisipkan konten ke halaman setelah konten di sekitarnya dimuat akan mendorong hal lain yang ada di halaman ke bawah. Hal ini menyebabkan pergeseran tata letak.
Pemberitahuan cookie, terutama yang ditempatkan di bagian atas halaman, adalah contoh umum dari masalah ini. Elemen halaman lain yang sering menyebabkan jenis pergeseran tata letak ini saat dimuat mencakup iklan dan sematan.
Identifikasi
Audit "Hindari pergeseran tata letak besar" Lighthouse mengidentifikasi elemen halaman yang telah digeser. Untuk demo ini, hasilnya akan terlihat seperti ini:
Pemberitahuan cookie tidak tercantum dalam temuan ini karena cookie melihat
itu sendiri tidak berubah saat dimuat. Sebaliknya, hal ini menyebabkan item di bawahnya pada
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 penentuan posisi 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 notifikasi cookie.
Gambar
Gambar dan Largest Contentful Paint (LCP)
Gambar biasanya merupakan elemen Largest Contentful Paint (LCP) di suatu halaman. Elemen halaman lainnya yang dapat menjadi elemen LCP menyertakan blok teks dan gambar poster video. Waktu pemuatan elemen LCP menentukan LCP.
Penting untuk diperhatikan bahwa elemen LCP halaman dapat bervariasi dari satu pemuatan halaman ke pemuatan halaman lainnya, bergantung pada konten yang terlihat oleh pengguna saat halaman pertama kali ditampilkan. Misalnya, dalam demo ini, latar belakang pemberitahuan cookie, banner besar, dan teks artikel adalah beberapa kemungkinan elemen LCP.
Pada situs contoh, gambar latar pemberitahuan cookie sebenarnya adalah gambar besar. Untuk meningkatkan LCP, Anda dapat melukis 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%);
Pergeseran gambar dan tata letak
Browser hanya dapat menentukan ukuran gambar setelah gambar dimuat. Jika pemuatan gambar terjadi setelah halaman dirender, tetapi tidak ada ruang yang dicadangkan untuk gambar, pergeseran tata letak terjadi saat gambar muncul. Dalam demo ini, banner besar menyebabkan pergeseran tata letak saat dimuat.
Identifikasi
Untuk mengidentifikasi gambar tanpa width dan height eksplisit, gunakan audit
"Elemen gambar memiliki lebar dan tinggi eksplisit" di Lighthouse.
Dalam contoh ini, banner besar dan gambar artikel tidak memiliki atribut width dan
height.
Perbaiki
Setel 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 pergeseran tata letak. Karenanya, penting untuk mengirim font dengan cepat.
Rendering teks tertunda
Secara default, browser tidak akan langsung merender elemen teks jika font web terkaitnya belum dimuat. Hal ini dilakukan untuk mencegah "flash of unstyled text" (FOUT). Dalam banyak situasi, hal ini menunda First Contentful Paint (FCP). Dalam beberapa situasi, hal ini akan menunda Largest Contentful Paint (LCP).
Pergeseran tata letak
Pertukaran font, meskipun sangat baik untuk menampilkan konten kepada pengguna dengan cepat, memiliki potensi menyebabkan pergeseran tata letak. Pergeseran tata letak ini terjadi saat font web dan font penggantinya menggunakan jumlah ruang yang berbeda di halaman. Menggunakan font yang memiliki proporsi serupa akan meminimalkan ukuran pergeseran tata letak ini.
Identifikasi
Untuk melihat font yang dimuat di halaman tertentu, buka tab Jaringan di DevTools dan filter berdasarkan Font. Font dapat berupa file besar, jadi umumnya penggunaan font yang lebih sedikit akan menghasilkan performa yang lebih baik.
Untuk melihat berapa lama waktu yang dibutuhkan font yang diminta, klik tab Timing. Semakin cepat font diminta, akan semakin cepat font tersebut dapat dimuat dan digunakan.
Guna melihat rantai permintaan untuk font, klik tab Inisiator. Secara umum, makin pendek rantai permintaan, makin 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 level yang sangat tinggi, Anda dapat menganggap petunjuk resource sebagai cara untuk memberi petunjuk ke 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 menghilangkan resource browser dari tindakan lainnya. Dengan demikian, petunjuk resource harus digunakan dengan cermat dan bukan untuk semuanya. Untuk mengetahui informasi selengkapnya, lihat Membuat 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 memerintahkan browser untuk membuat koneksi awal ke
asal 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 Data Web adalah saat menyebabkan pergeseran
tata letak. Ada dua jenis animasi yang harus Anda hindari:
animasi yang memicu tata letak dan
efek "mirip animasi" yang memindahkan elemen halaman. Biasanya, animasi ini dapat
diganti dengan padanan yang berperforma lebih baik menggunakan properti CSS seperti
transform,
opacity, dan
filter. Untuk mengetahui informasi selengkapnya, lihat Cara membuat animasi CSS berperforma tinggi.
Identifikasi
Audit "Hindari animasi yang tidak digabungkan" pada Lighthouse mungkin berguna untuk mengidentifikasi animasi yang tidak berperforma.
Perbaiki
Ubah urutan animasi slideIn untuk menggunakan transform: translateX(), bukan
mentransisikan properti margin-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 Kritis
Stylesheet bersifat memblokir perenderan. Artinya, browser menemukan stylesheet dan akan berhenti mendownload resource lain hingga browser mendownload dan mengurai stylesheet. Hal ini dapat menunda LCP. Untuk meningkatkan performa, pertimbangkan untuk menghapus CSS yang tidak digunakan, menyejajarkan CSS penting, dan menunda CSS yang tidak penting.
Kesimpulan
Meskipun masih ada ruang untuk peningkatan lebih lanjut (misalnya, menggunakan kompresi gambar untuk menayangkan gambar dengan lebih cepat), perubahan ini telah meningkatkan Data Web situs ini secara signifikan. Jika situs ini adalah situs sungguhan, langkah berikutnya adalah mengumpulkan data performa dari pengguna sebenarnya untuk menilai apakah situs tersebut memenuhi nilai minimum Data Web untuk sebagian besar pengguna. Untuk informasi selengkapnya tentang Data Web, lihat artikel Mempelajari Tanda Vital Web.