CSS untuk Data Web

Teknik terkait CSS untuk mengoptimalkan Data Web

Katie Hempenius
Katie Hempenius

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:

Screenshot contoh situs

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:

Audit 'Hindari peralihan tata letak berukuran besar' Lighthouse

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.

Pemberitahuan cookie ditampilkan di bagian bawah halaman

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.

Diagram yang menyoroti elemen LCP halaman dalam berbagai skenario.

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".

Audit 'Elemen gambar memiliki lebar dan tinggi yang jelas' Lighthouse

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">
Gambar sekarang dimuat tanpa menyebabkan pergeseran tata letak.

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.

Diagram yang menunjukkan pergeseran tata letak yang disebabkan oleh penggantian font
Dalam contoh ini, penggantian font menyebabkan elemen halaman bergeser ke atas sebesar lima piksel.

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.

Screenshot font yang ditampilkan di DevTools

Untuk melihat berapa lama font diminta, klik tab Timing. Semakin cepat font diminta, semakin cepat font tersebut dapat dimuat dan digunakan.

Screenshot tab &#39;Timing&#39; di DevTools

Untuk melihat rantai permintaan font, klik tab Pemrakarsa. Secara umum, semakin pendek rantai permintaan, semakin cepat font dapat diminta.

Screenshot tab &#39;Pemrakarsa&#39; di DevTools

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.

Audit &#39;Hindari animasi yang tidak digabungkan&#39; Lighthouse

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.