CSS untuk Data Web

Teknik terkait CSS untuk mengoptimalkan Data Web

Katie Hempenius

Una Kravets

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.

Catatan: Lighthouse hanya menganalisis performa halaman hingga peristiwa "pemuatan halaman". Banner cookie, iklan, dan widget lainnya terkadang tidak dimuat hingga halaman dimuat. Pergeseran tata letak ini tetap memengaruhi pengguna—meskipun mereka tidak ditandai oleh Lighthouse.

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.

Catatan: Pemberitahuan cookie adalah salah satu dari beberapa elemen halaman yang memicu pergeseran tata letak saat dimuat. Untuk membantu kami mempelajari lebih lanjut elemen halaman tersebut, langkah demo berikutnya tidak akan menyertakan pemberitahuan 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.

Catatan: Fenomena gambar yang menyebabkan pergeseran tata letak akan lebih jelas dalam situasi ketika gambar dimuat dengan lambat - misalnya, pada koneksi yang lambat atau saat memuat gambar dengan ukuran file yang sangat besar.

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

Gambar sekarang dimuat tanpa menyebabkan pergeseran tata letak.

Catatan: Pendekatan lain untuk memuat gambar adalah dengan menggunakan atribut srcset dan sizes bersamaan dengan menentukan atribut width dan height. Hal ini memiliki keuntungan performa tambahan yang memungkinkan Anda menyajikan gambar dengan ukuran yang berbeda ke perangkat yang berbeda. Untuk mengetahui informasi selengkapnya, lihat Menayangkan gambar responsif.

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

Catatan: Secara default, browser berbasis Chromium dan Firefox akan memblokir rendering teks hingga 3 detik jika font web yang terkait belum dimuat; Safari akan memblokir rendering teks tanpa batas waktu. Periode pemblokiran dimulai saat browser meminta font web. Jika font masih belum dimuat pada akhir periode pemblokiran, browser akan merender teks menggunakan font pengganti dan menukar font web setelah tersedia.

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.

Dalam contoh ini, pertukaran font menyebabkan elemen halaman bergeser ke atas sebesar lima piksel.

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

Catatan: Untuk memuat sebagian font dari Google Fonts saja, tambahkan parameter API ?text=. Misalnya, ?text=ABC hanya memuat karakter yang diperlukan untuk merender "ABC". Ini adalah cara yang baik untuk mengurangi ukuran {i>font<i}.

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.

Perhatian: Audit "Hindari animasi yang tidak digabungkan" di Lighthouse hanya mengidentifikasi animasi CSS yang tidak berperforma baik; animasi berbasis JavaScript (misalnya, menggunakan setInterval() untuk "menganimasikan" elemen) buruk bagi performa, tetapi tidak akan ditandai oleh audit ini.

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.