Mengapa Halaman Web Tidak Segera Menampilkan Teks Mereka?

Jika Anda cenderung menonton panel browser dengan mata elang, Anda mungkin telah memperhatikan bahwa halaman sering memuat gambar dan tata letak mereka sebelum memuat teks mereka - pola pemuatan yang berlawanan persis yang kami alami selama tahun 1990-an. Apa yang sedang terjadi?

Sesi Tanya Jawab hari ini datang kepada kami berkat SuperUser-subdivisi Stack Exchange, pengelompokan situs web Q&A berbasis komunitas.

Pertanyaan

Pembaca SuperUser Laurent sangat ingin tahu tentang mengapa sebenarnya halaman tampaknya memuat elemen yang sama sekali berbeda dari yang pernah mereka lakukan pada suatu waktu. Dia menulis:

Saya perhatikan bahwa baru-baru ini banyak situs web yang lambat menampilkan teksnya. Biasanya, latar belakang, gambar dan sebagainya akan dimuat, tetapi tidak ada teks. Setelah beberapa waktu, teks mulai muncul di sana-sini (tidak selalu semuanya pada waktu yang sama).

Ini pada dasarnya bekerja sebaliknya seperti dulu, ketika teks ditampilkan pertama kali, kemudian gambar dan sisanya dimuat setelahnya. Teknologi baru apa yang menciptakan masalah ini? Ada ide?

Perhatikan bahwa saya berada di koneksi yang lambat, yang mungkin menonjolkan masalah.

Lihat [di atas] untuk contoh - semuanya dimuat tetapi butuh beberapa detik lagi sebelum teks akhirnya ditampilkan.

Jadi apa yang menyebabkannya? Laurent, dan banyak dari kita, ingat saat teks dimuat pertama kali dan semua yang lain - menghiasi GIF animasi, latar belakang ubin, dan semua artefak lain dari penelusuran web akhir tahun 90-an - datang kemudian. Apa yang menyebabkan situasi elemen desain saat ini pertama, teks kemudian?

Jawabannya

Kontributor SuperUser Daniel Andersson menawarkan jawaban yang luar biasa terperinci dan langsung menjadi dasar mengapa-the-fonts-load-last mystery:

Salah satu alasannya adalah bahwa perancang web saat ini suka menggunakan font web (biasanya dalam format WOFF), mis. melalui font Web Google.

Sebelumnya, satu-satunya font yang dapat ditampilkan di situs adalah font yang telah diinstal pengguna secara lokal. Sejak mis. Pengguna Mac dan Windows tidak harus memiliki font yang sama, desainer secara naluriah selalu mendefinisikan aturan sebagai
font-family: Arial, Helvetica, sans-serif; 
di mana, jika font pertama tidak ditemukan pada sistem, browser akan mencari font kedua, dan terakhir font "sans-serif" yang mundur.

Sekarang, seseorang dapat memberikan URL font sebagai aturan CSS untuk membuat browser mengunduh font, seperti:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400.700); 
dan kemudian memuat font untuk elemen tertentu dengan mis .:
font-family: 'Droid Serif', sans-serif; 
Ini sangat populer untuk dapat menggunakan font khusus, tetapi juga mengarah pada masalah bahwa tidak ada teks yang ditampilkan sampai sumber daya telah dimuat oleh browser, yang meliputi waktu pengunduhan, waktu pemuatan font dan waktu render. Saya berharap ini adalah artefak yang Anda alami.

Sebagai contoh: salah satu surat kabar nasional saya, Dagens Nyheter, menggunakan font web untuk berita utama mereka, tetapi bukan lead mereka, jadi ketika situs itu dimuat saya biasanya melihat lead terlebih dahulu, dan setengah detik kemudian semua ruang kosong di atas diisi dengan tajuk berita (setidaknya ini berlaku di Chrome dan Opera. Belum mencoba yang lain).

(Juga, para desainer memercikkan JavaScript dengan benar-benar ke mana-mana akhir-akhir ini, jadi mungkin seseorang mencoba melakukan sesuatu yang pintar dengan teks, itulah sebabnya mengapa ia ditunda. Itu akan sangat spesifik untuk situs, meskipun: kecenderungan umum untuk teks akan tertunda dalam kali adalah masalah font web yang dijelaskan di atas, saya percaya.)

Tambahan:

Jawaban ini menjadi sangat terangkat, meskipun saya tidak terlalu detail, atau mungkin karena ini. Ada banyak komentar di utas pertanyaan, jadi saya akan mencoba sedikit memperluas [...]

Fenomena ini rupanya dikenal sebagai "flash konten tanpa gaya" pada umumnya, dan "flash teks tanpa gaya" pada khususnya. Mencari "FOUC" dan "FOUT" memberikan lebih banyak info.

Saya dapat merekomendasikan posting desainer web Paul Irish di FOUT sehubungan dengan font web.

Apa yang dapat dicatat adalah bahwa browser yang berbeda menangani ini secara berbeda. Saya menulis di atas bahwa saya telah menguji Opera dan Chrome, yang keduanya berperilaku serupa. Semua yang berbasis WebKit (Chrome, Safari, dll.) Memilih untuk menghindari FOUT by tidak rendering teks font web dengan font fallback selama periode pemuatan font web. Bahkan jika font web di-cache, di sana akan menjadi penundaan render. Ada banyak komentar di utas pertanyaan ini yang mengatakan sebaliknya dan itu salah bahwa font yang di-cache berperilaku seperti ini, tetapi mis. dari tautan di atas:

Dalam kasus apa Anda akan mendapatkan FOUT

Akan: Mengunduh dan menampilkan remote ttf / otf / woff

Akan: Menampilkan ttf / otf / woff yang di-cache

Akan: Mengunduh dan menampilkan data-uri ttf / otf / woff

Akan: Menampilkan data cache-uri ttf / otf / woff

Tidak akan: Menampilkan font yang sudah diinstal dan dinamai dalam tumpukan font tradisional Anda

Tidak akan: Menampilkan font yang diinstal dan dinamai menggunakan lokasi lokal ()

Karena Chrome menunggu hingga risiko FOUT hilang sebelum rendering, ini memberikan penundaan. Yang tingkat efeknya terlihat (terutama ketika memuat dari cache) tampaknya tergantung antara lain jumlah teks yang perlu dirender dan mungkin faktor lain, tetapi caching tidak sepenuhnya menghilangkan efeknya.

Irish juga memiliki beberapa pembaruan tentang perilaku peramban pada 2011-04-14 di bagian bawah pos:

Firefox (per FFb11 dan Final FF4) tidak lagi memiliki FOUT! Wooohoo! Http: //bugzil.la/499292 Pada dasarnya teks tidak terlihat selama 3 detik, dan kemudian mengembalikan font fallback. Webfont mungkin akan dimuat dalam tiga detik itu ... semoga ...

IE9 mendukung WOFF dan TTF dan OTF (meskipun itu membutuhkan bitet embedding-kebanyakan diperdebatkan jika Anda menggunakan WOFF). NAMUN!!! IE9 memiliki FOUT. :(

Webkit memiliki tambalan yang menunggu untuk mendarat untuk menampilkan teks mundur setelah 0,5 detik. Jadi perilaku yang sama seperti FF tetapi 0,5 bukannya 3s.

Jika ini adalah pertanyaan yang ditujukan untuk para desainer, orang dapat mencari cara untuk menghindari masalah seperti ini webfontloader, tapi itu akan menjadi pertanyaan lain. Tautan Paul Irish menjelaskan lebih lanjut tentang masalah ini.

Punya sesuatu untuk ditambahkan ke penjelasan? Berbunyi dalam komentar. Ingin membaca lebih banyak jawaban dari pengguna Stack Exchange yang mengerti teknologi lainnya? Lihat utas diskusi lengkap di sini.