CSS untuk Data Web

Teknik terkait CSS untuk mengoptimalkan Data Web

Katie Hempenius
Katie Hempenius
X
Una Kravets

Cara Anda menulis gaya dan membuat tata letak dapat berdampak besar pada Data Vital Web Inti. Hal ini terutama berlaku untuk Cumulative Layout Shift (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 situs contoh

Tata Letak

Menyisipkan konten ke dalam DOM

Memasukkan 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 ada 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.

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 notifikasi cookie tidak berubah 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 posisi absolut atau tetap.

Notifikasi 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 mencadangkan 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 lainnya 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, hero image, dan teks artikel adalah beberapa potensi elemen LCP.

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 melukiskan gradien di CSS, daripada memuat gambar untuk membuat efek.

Perbaiki

Ubah CSS .banner agar 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 pergeseran 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 kini dimuat tanpa menyebabkan pergeseran tata letak.

Font

Font dapat menunda rendering teks dan menyebabkan pergeseran tata letak. Oleh karena itu, penting untuk mengirimkan font dengan cepat.

Rendering teks 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, tindakan ini akan menunda Largest Contentful Paint (LCP).

Perubahan tata letak

Pertukaran font, meskipun sangat cocok untuk menampilkan konten kepada pengguna dengan cepat, memiliki potensi menyebabkan pergeseran tata letak. Pergeseran tata letak ini terjadi saat font web dan font penggantinya menempati 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, pertukaran 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 waktu yang diperlukan hingga font diminta, klik tab Timing. Semakin cepat {i>font<i} diminta, semakin cepat pula {i>font<i} 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 memberikan petunjuk ke browser bahwa browser perlu menyiapkan koneksi tertentu atau mendownload resource tertentu. Oleh karena itu, 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 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 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 berperforma tinggi.

Identifikasikan

Audit "Hindari animasi non-komposit" di Lighthouse mungkin berguna untuk mengidentifikasi animasi yang tidak berperforma baik.

Audit &#39;Hindari animasi non-gabungan&#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 menemukan stylesheet, dan browser akan berhenti mendownload resource lain hingga browser mendownload dan menguraikan stylesheet. Tindakan ini dapat menunda LCP. Untuk meningkatkan performa, pertimbangkan untuk menghapus CSS yang tidak digunakan, menyelaraskan 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 nyata, langkah berikutnya adalah mengumpulkan data performa dari pengguna nyata 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.