Mengapa Halaman Web Tidak Segera Menampilkan Teks Mereka?

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

Sesi Tanya & Jawab hari ini hadir untuk memberi kami hak milik SuperUser-sub divisi Stack Exchange, pengelompokan situs web Q & A berbasis komunitas.

Pertanyaan

Pembaca SuperUser Laurent sangat penasaran mengapa laman yang tepat tampaknya memuat elemen dengan sangat berbeda dari yang pernah mereka lakukan pada suatu waktu. Dia menulis:

Saya telah memperhatikan bahwa baru-baru ini banyak situs web lambat untuk menampilkan teks mereka. 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 saat yang sama).

Pada dasarnya berfungsi kebalikannya seperti dulu, ketika teks ditampilkan pertama, lalu gambar dan sisanya dimuat setelahnya. Apa teknologi baru yang menciptakan masalah ini? Ada ide?

Perhatikan bahwa saya memiliki koneksi yang lambat, yang mungkin menonjolkan masalah.

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

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

Jawabannya

Kontributor SuperUser, Daniel Andersson, menawarkan jawaban mendetail yang luar biasa tepat ke bagian bawah misteri mengapa-the-font-load-last:

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

Sebelumnya, satu-satunya font yang dapat ditampilkan di situs adalah font yang dipasang secara lokal oleh pengguna. Karena 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 di sistem, browser akan mencari yang kedua, dan terakhir adalah font “sans-serif” fallback.

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

lalu muat font untuk elemen tertentu dengan misalnya:

font-family: 'Droid Serif', sans-serif; 

Ini sangat populer untuk dapat menggunakan font kustom, tetapi juga mengarah ke masalah bahwa tidak ada teks yang ditampilkan sampai sumber daya telah dimuat oleh browser, yang termasuk waktu unduh, 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 prospek mereka, jadi ketika situs itu dimuat saya biasanya melihat arahan pertama, dan setengah detik kemudian semua ruang kosong di atas diisi dengan judul (ini benar di Chrome dan Opera, setidaknya. Belum mencoba yang lain).

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

Tambahan:

Jawaban ini menjadi sangat terbarui, meskipun saya tidak memerinci, atau mungkinkarena ini. Ada banyak komentar di utas pertanyaan, jadi saya akan mencoba untuk memperluas sedikit […]

Fenomena ini rupanya dikenal sebagai "flash of unstyled content" secara umum, dan "flash of unstyled text" pada khususnya. Mencari "FOUC" dan "FOUT" memberikan info lebih lanjut.

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

Apa yang dapat dicatat adalah bahwa browser yang berbeda menangani hal ini secara berbeda. Saya tulis di atas bahwa saya telah menguji Opera dan Chrome, yang keduanya berperilaku sama. Semua yang berbasis WebKit (Chrome, Safari, dll.) Memilih untuk menghindari FOUT olehtidak render teks font web dengan font fallback selama periode pemuatan font web.Bahkan jika font web di-cache, di sanaakan jadilah penundaan render. Ada banyak komentar di utas pertanyaan ini yang mengatakan sebaliknya dan itu salah karena font tembolok berperilaku seperti ini, tapi mis. dari tautan di atas:

Dalam kasus apa Anda akan mendapatkan FOUT

• Akan: Mengunduh dan menampilkan ttf / otf / woff jarak jauh
• 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 di tumpukan font tradisional Anda
• Tidak akan: Menampilkan font yang diinstal dan dinamai menggunakan lokal () lokasi

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

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

• Firefox (seperti dari FFb11 dan FF4 Final)tidak lagi memiliki FOUT! Wooohoo! Http: //bugzil.la/499292 Pada dasarnya teks tidak terlihat selama 3 detik, dan kemudian membawa kembali font fallback.The webfont mungkin akan memuat dalam tiga detik meskipun ... mudah-mudahan ...
• IE9 mendukung WOFF dan TTF dan OTF (meskipun membutuhkan bitet penyematan-kebanyakan diperdebatkan jika Anda menggunakan WOFF).NAMUN!!! IE9 memiliki FOUT. :(
• Webkit memiliki tambalan yang menunggu untuk mendarat untuk menampilkan teks penggantian setelah 0,5 detik. Jadi perilaku yang sama seperti FF tetapi 0,5 bukannya 3s.

Jika ini adalah pertanyaan yang ditujukan untuk desainer, seseorang dapat pergi ke cara-cara untuk menghindari masalah seperti iniwebfontloader, tapi itu akan menjadi pertanyaan lain. The Paul Irish link masuk ke detail lebih lanjut tentang masalah ini.

Memiliki sesuatu untuk ditambahkan ke penjelasan? Bicaralah di komentar. Ingin membaca lebih banyak jawaban dari pengguna Stack Exchange yang paham teknologi lainnya? Lihat diskusi lengkap di sini.