CSS untuk Web Vital

Teknik terkait CSS untuk mengoptimalkan Web Vitals

Sebuah Kravet

Cara Anda menulis gaya dan membangun tata letak dapat berdampak besar pada Data Web Inti. Hal ini terutama berlaku untuk Pergeseran Tata Letak Kumulatif (CLS) dan Cat Konten Terbesar (LCP).

Artikel ini membahas teknik terkait CSS untuk mengoptimalkan Web Vitals. Pengoptimalan ini dipecah menurut berbagai aspek halaman: tata letak, gambar, font, animasi, dan pemuatan. Sepanjang jalan, kami akan menjelajahi peningkatan halaman contoh:

Tangkapan layar contoh situs

Tata letak #

Memasukkan konten ke dalam DOM #

Memasukkan konten ke halaman setelah konten di sekitarnya dimuat akan mendorong semua hal lain 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 perubahan tata letak ini saat memuat termasuk iklan dan penyematan.

Identifikasi #

Audit Lighthouse “Hindari pergeseran tata letak yang besar” mengidentifikasi elemen halaman yang telah bergeser. Untuk demo ini, hasilnya terlihat seperti ini:

Audit 'Hindari pergeseran tata letak yang besar' dari Mercusuar

Pemberitahuan cookie tidak tercantum dalam temuan ini karena pemberitahuan cookie itu sendiri tidak berubah saat dimuat. Sebaliknya, itu menyebabkan item di bawahnya pada halaman (yaitu, div.hero dan article) untuk bergeser. Untuk informasi selengkapnya tentang mengidentifikasi dan memperbaiki pergeseran tata letak, lihat Men-debug Pergeseran Tata Letak.

Lighthouse hanya menganalisis kinerja halaman hingga peristiwa “pemuatan halaman”. Spanduk cookie, iklan, dan widget lainnya terkadang tidak dimuat hingga halaman dimuat. Pergeseran tata letak ini masih memengaruhi pengguna—meskipun mereka tidak ditandai oleh Lighthouse.

Perbaiki #

Tempatkan pemberitahuan cookie di bagian bawah halaman menggunakan posisi absolut atau tetap.

Pemberitahuan cookie ditampilkan di bagian bawah halaman

Sebelum:

.banner {
position: sticky;
top: 0;
}

Setelah:

.banner {
position: fixed;
bottom: 0;
}

Cara lain untuk memperbaiki perubahan tata letak ini adalah dengan menyediakan ruang untuk pemberitahuan cookie di bagian atas layar. Pendekatan ini sama efektifnya. Untuk informasi selengkapnya, lihat Praktik terbaik pemberitahuan cookie.

Pemberitahuan cookie adalah salah satu dari beberapa elemen halaman yang memicu perubahan tata letak saat dimuat. Untuk membantu kami melihat lebih dekat elemen halaman ini, langkah demo selanjutnya tidak akan menyertakan pemberitahuan cookie.

Gambar-gambar #

Gambar dan Contentful Paint (LCP) Terbesar #

Gambar biasanya merupakan elemen Cat Isi Terbesar (LCP) pada halaman. Elemen halaman lain yang dapat menjadi elemen LCP termasuk blok teks dan gambar poster video. Waktu di mana elemen LCP memuat menentukan LCP.

Penting untuk dicatat bahwa elemen LCP halaman dapat bervariasi dari pemuatan halaman ke pemuatan halaman tergantung pada konten yang terlihat oleh pengguna saat halaman pertama kali ditampilkan. Misalnya, dalam demo ini, latar belakang pemberitahuan cookie, gambar pahlawan, dan teks artikel adalah beberapa elemen LCP yang potensial.

Diagram yang menyoroti elemen LCP halaman dalam skenario yang berbeda.

Di situs contoh, gambar latar belakang pemberitahuan cookie sebenarnya adalah gambar besar. Untuk meningkatkan LCP, Anda bisa melukis gradien di CSS, daripada memuat gambar untuk membuat efek.

Perbaiki #

Mengubah .banner CSS untuk menggunakan gradien CSS daripada gambar:

Sebelum:

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701_960_720.jpg")

Setelah:

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 disediakan untuk gambar, pergeseran tata letak terjadi saat gambar muncul. Dalam demo, gambar pahlawan menyebabkan perubahan tata letak saat dimuat.

Fenomena gambar yang menyebabkan pergeseran tata letak lebih jelas dalam situasi di mana gambar lambat dimuat – misalnya, pada koneksi yang lambat atau saat memuat gambar dengan ukuran file yang sangat besar.

Identifikasi #

Untuk mengidentifikasi gambar tanpa eksplisit width dan height, gunakan audit “Elemen gambar memiliki lebar dan tinggi eksplisit” dari Lighthouse.

Audit 'Elemen gambar memiliki lebar dan tinggi eksplisit' dari Lighthouse

Dalam contoh ini, gambar pahlawan dan gambar artikel tidak ada width dan height atribut.

Perbaiki #

Mengatur width dan height atribut 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">

Setelah:

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

Pendekatan lain untuk memuat gambar adalah dengan menggunakan srcset dan sizes atribut dalam hubungannya dengan menentukan width dan height atribut. Ini memiliki keunggulan kinerja tambahan yang memungkinkan Anda menyajikan gambar dengan ukuran berbeda ke perangkat yang berbeda. Untuk informasi selengkapnya, lihat Menayangkan gambar responsif.

Font #

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

Render teks tertunda #

Secara default, browser tidak akan segera merender elemen teks jika font web terkaitnya belum dimuat. Ini dilakukan untuk mencegah “flash of unstyled text” (FOUT). Dalam banyak situasi, ini menunda First Contentful Paint (FCP). Dalam beberapa situasi, ini menunda Largest Contentful Paint (LCP).

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

Pergeseran tata letak #

Pertukaran font, meskipun sangat baik untuk menampilkan konten kepada pengguna dengan cepat, berpotensi menyebabkan perubahan tata letak. Pergeseran tata letak ini terjadi ketika font web dan font cadangannya menggunakan jumlah ruang yang berbeda pada halaman. Menggunakan font dengan proporsi yang sama akan meminimalkan ukuran pergeseran tata letak ini.

Diagram yang menunjukkan pergeseran tata letak yang disebabkan oleh pertukaran fontDalam contoh ini, pertukaran font menyebabkan elemen halaman bergeser ke atas sebanyak lima piksel.

Identifikasi #

Untuk melihat font yang sedang dimuat pada halaman tertentu, buka Jaringan tab di DevTools dan filter menurut jenis huruf. Font bisa berupa file besar, jadi hanya menggunakan lebih sedikit font biasanya lebih baik untuk kinerja.

Tangkapan layar font yang ditampilkan di DevTools

Untuk melihat berapa lama waktu yang dibutuhkan untuk meminta font, klik pada Waktu tab. Semakin cepat font diminta, semakin cepat dapat dimuat dan digunakan.

Tangkapan layar tab 'Waktu' di DevTools

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

Tangkapan layar tab 'Inisiator' di DevTools

Perbaiki #

Demo ini menggunakan Google Fonts API. Google Fonts menyediakan opsi untuk memuat font melalui <link> tag atau @import pernyataan. Itu <link> cuplikan kode termasuk a preconnect petunjuk sumber daya. Ini akan menghasilkan pengiriman stylesheet yang lebih cepat daripada menggunakan @import Versi: kapan.

Pada tingkat yang sangat tinggi, Anda dapat menganggap petunjuk sumber daya sebagai cara untuk memberi petunjuk kepada browser bahwa ia perlu menyiapkan koneksi tertentu atau mengunduh sumber daya tertentu. Akibatnya, browser akan memprioritaskan tindakan ini. Saat menggunakan petunjuk sumber daya, ingatlah bahwa memprioritaskan tindakan tertentu menghilangkan sumber daya browser dari tindakan lain. Dengan demikian, petunjuk sumber daya harus digunakan dengan bijaksana dan tidak untuk semuanya. Untuk informasi lebih lanjut, lihat Membangun koneksi jaringan lebih awal untuk meningkatkan kecepatan halaman yang dirasakan.

Hapus yang berikut ini @import pernyataan dari stylesheet Anda:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&family=Roboto:[email protected]&display=swap');

Tambahkan berikut ini <link> tag ke <head> dari 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:[email protected]&display=swap" rel="stylesheet">

Tag tautan ini menginstruksikan browser untuk membuat koneksi awal ke asal yang digunakan oleh Google Font dan memuat lembar gaya yang berisi deklarasi font untuk Montserrat dan Roboto. Ini <link> tag harus ditempatkan sedini mungkin <head> mungkin.

Untuk hanya memuat subset font dari Google Font, tambahkan add ?text= parameter API. Sebagai contoh, ?text=ABC hanya memuat karakter yang diperlukan untuk membuat “ABC”. Ini adalah cara yang baik untuk mengurangi ukuran file font.

Animasi #

Cara utama animasi memengaruhi Web Vitals adalah ketika mereka menyebabkan perubahan tata letak. Ada dua jenis animasi yang harus Anda hindari menggunakan: animasi yang memicu tata letak dan efek “seperti animasi” yang memindahkan elemen halaman. Biasanya animasi ini dapat diganti dengan performa yang lebih setara dengan menggunakan properti CSS seperti transform, opacity, dan filter. Untuk informasi selengkapnya, lihat Cara membuat animasi CSS performa tinggi.

Identifikasi #

Audit Lighthouse “Hindari animasi non-komposit” mungkin berguna untuk mengidentifikasi animasi non-performa.

Audit 'Hindari animasi non-komposit' dari Lighthouse

Peringatan:

Audit Lighthouse “Avoid non-composited animations” hanya mengidentifikasi non-performan animasi CSS; Animasi berbasis JavaScript (misalnya, menggunakan setInterval() untuk “menghidupkan” suatu elemen) buruk untuk kinerja tetapi tidak akan ditandai oleh audit ini.

Perbaiki #

Mengubah slideIn urutan animasi untuk digunakan transform: translateX() daripada mentransisikanmargin-left Properti.

Sebelum:

.header {
animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}

Setelah:

.header {
animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
from {
transform: translateX(-100%);
}

to {
transform: translateX(0);
}
}

CSS penting #

Stylesheet memblokir render. Ini berarti bahwa browser menemukan stylesheet, itu akan berhenti mengunduh sumber daya lain hingga browser mengunduh dan menguraikan stylesheet. Ini dapat menunda LCP. Untuk meningkatkan performa, pertimbangkan untuk menghapus CSS yang tidak digunakan, menyisipkan CSS penting, dan menangguhkan CSS yang tidak penting.

Kesimpulan #

Meskipun masih ada ruang untuk perbaikan lebih lanjut (misalnya, menggunakan kompresi gambar untuk mengirimkan gambar lebih cepat), perubahan ini telah meningkatkan Web Vitals secara signifikan dari situs ini. Jika ini adalah situs nyata, langkah selanjutnya adalah mengumpulkan data kinerja dari pengguna nyata untuk menilai apakah situs tersebut memenuhi ambang Vital Web untuk sebagian besar pengguna. Untuk informasi lebih lanjut tentang Web Vitals, lihat Mempelajari Web Vitals.

Terakhir diperbarui: Perbaiki artikel