Penghitung yang tidak merusak tata letak

Memasukkan gambar eksternal ke dalam halaman web yang disusun dengan cermat selalu membawa risiko mengganggu struktur visual yang sudah ada. Ketika peramban menyusun halaman, peramban menghitung posisi setiap blok teks dan grafik untuk menciptakan pengalaman membaca yang lancar.

Jika gambar tidak disertai petunjuk ukuran yang tegas, peramban tidak dapat menyediakan ruang yang diperlukan terlebih dahulu. Peramban harus menunggu sampai berkas gambar selesai diunduh untuk mengetahui tinggi dan lebarnya secara tepat. Penundaan ini menimbulkan fenomena yang dikenal sebagai pergeseran tata letak (layout shift).

Teks tiba-tiba melompat ke bawah atau ke samping untuk memberi ruang bagi grafik yang baru tiba. Bagi siapa pun yang sedang membaca artikel, gerakan mendadak ini sangat mengganggu dan menimbulkan kesan bahwa situs tidak stabil secara teknis.

Dua angka di dalam tag menahan ruang

Cara mencegah pergeseran tata letak sangat sederhana, yaitu dengan menambahkan atribut tetap langsung ke kode HTML. Setiap tag gambar dapat menerima nilai tinggi dan lebar tertentu dalam satuan piksel. Jika ukuran ini dicantumkan sejak awal di kode sumber, peramban langsung tahu persis berapa banyak ruang kosong yang harus dicadangkan di layar, bahkan sebelum berkas gambar mulai diunduh.

Ruang itu tetap kosong sampai grafik tiba, sehingga teks di sekitarnya tetap kokoh di tempatnya. Untuk mengetahui ukuran yang benar, lihatlah desain tertentu yang dipilih dari katalog.

Setiap desain memiliki ukuran yang pasti dan tidak berubah. Menuliskan angka yang tepat ini ke dalam kode menghilangkan efek melompat sepenuhnya. Hal ini menjamin pemuatan halaman yang lancar tanpa gangguan, berapa pun kecepatan jaringannya.

Apa yang muncul jika gambar tidak muncul

Dalam situasi ketika koneksi jaringan tersendat atau putus sama sekali, gambar yang hilang dapat meninggalkan ikon rusak yang tidak sedap dipandang di layar. Untuk menanganinya dengan baik, atribut teks alternatif yang dikenal sebagai atribut alt memegang peran penting.

Jika gambar tidak dapat ditampilkan, peramban akan menampilkan teks yang diberikan dalam atribut ini sebagai gantinya. Untuk elemen yang murni dekoratif atau teknis seperti penghitung pengunjung, teks ini sebaiknya dibuat sangat singkat atau dibiarkan kosong sama sekali dengan dua tanda petik tanpa spasi di antaranya.

Teks alternatif yang panjang dan deskriptif akan meregangkan kotak tata letak yang telah dicadangkan dengan cara yang tidak terduga jika gambar gagal dimuat. Atribut yang kosong hanya menyisakan ruang kosong yang tidak mengganggu, sehingga struktur footer atau sidebar tetap utuh.

Sengaja dimuat paling akhir

Standar web modern menawarkan sarana tambahan untuk mengendalikan pengaruh grafik eksternal terhadap kecepatan pemuatan dokumen secara keseluruhan. Dua atribut khusus, loading dan decoding, memberi tahu peramban cara memprioritaskan gambar.

Menetapkan atribut loading ke nilai lazy memberi tahu peramban untuk menunda pengambilan berkas sampai pembaca benar-benar menggulir ke dekat lokasinya. Menetapkan atribut decoding ke nilai async memungkinkan peramban memproses teks utama dan tata letak tanpa menunggu data gambar selesai diinterpretasikan.

Karena grafik statistik jarang menjadi informasi terpenting di halaman paroki atau klub, atribut-atribut ini memastikan konten yang sebenarnya selalu tampil lebih dulu. Alat ukur mengambil tempatnya dengan tenang di latar belakang dan tidak pernah memperlambat penyampaian pesan utama.