Jika Anda cenderung melihat panel browser dengan mata elang, Anda mungkin telah memperhatikan bahwa halaman sering memuat gambar dan tata letaknya sebelum memuat teksnya – pola pemuatan yang sangat berlawanan dengan yang kami alami selama tahun 1990-an. Apa yang sedang terjadi?
Sesi Tanya & Jawab hari ini hadir atas kebaikan SuperUser — subdivisi Stack Exchange, pengelompokan situs web Tanya Jawab berbasis komunitas.
Pertanyaan
Pembaca SuperUser Laurent sangat ingin tahu tentang mengapa sebenarnya halaman memuat elemen dengan cara yang sama sekali berbeda dari yang dulu pernah mereka lakukan. Dia menulis:
Saya perhatikan bahwa akhir-akhir ini banyak situs web lambat dalam 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, kemudian gambar dan sisanya dimuat sesudahnya. Teknologi baru apa yang menciptakan masalah ini? Ada ide?
Perhatikan bahwa koneksi saya lambat, yang mungkin menonjolkan masalahnya.
Lihat [above] sebagai contoh - semuanya sudah dimuat tetapi butuh beberapa detik lagi sebelum teks akhirnya ditampilkan.
Jadi apa yang menyebabkannya? Laurent, dan banyak dari kita, ingat saat ketika teks dimuat terlebih dahulu dan yang lainnya — GIF animasi yang menghiasi, latar belakang berubin, dan semua artefak lain dari penjelajahan web akhir tahun 90-an — datang kemudian. Apa yang menyebabkan situasi elemen desain saat ini dulu, teks nanti?
Jawabannya
Kontributor SuperUser Daniel Andersson menawarkan jawaban yang sangat mendetail yang langsung menuju ke dasar misteri mengapa-the-font-load-last:
Salah satu alasannya adalah desainer web saat ini suka menggunakan font web (biasanya dalam format WOFF format), mis. melalui Font Google Web .
Sebelumnya, satu-satunya font yang dapat ditampilkan di situs adalah font yang diinstal pengguna secara lokal. Sejak mis. Pengguna Mac dan Windows tidak selalu 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 font kedua, dan terakhir font "sans-serif" fallback.
Sekarang, seseorang dapat memberikan URL font sebagai aturan CSS agar browser mendownload font, seperti:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);dan kemudian memuat font untuk elemen tertentu dengan misalnya:
font-family: 'Droid Serif', sans-serif;Ini sangat populer untuk dapat menggunakan font khusus, tetapi juga menyebabkan masalah bahwa tidak ada teks yang ditampilkan sampai sumber daya dimuat oleh browser, yang meliputi waktu download, waktu pemuatan font, dan waktu render. Saya berharap ini adalah artefak yang Anda alami.
Sebagai contoh: salah satu surat kabar nasional saya, Berita hari ini , gunakan font web untuk judulnya, tetapi bukan prospeknya, jadi saat situs itu dimuat, saya biasanya melihat prospeknya terlebih dahulu, dan setengah detik kemudian semua ruang kosong di atas diisi dengan judul (ini berlaku di Chrome dan Opera, di Setidaknya. Belum mencoba orang lain).
(Selain itu, desainer benar-benar memercikkan JavaScript di mana-mana akhir-akhir ini, jadi mungkin seseorang mencoba melakukan sesuatu yang pintar dengan teks, itulah mengapa hal itu ditunda. Namun, itu akan sangat spesifik untuk situs: kecenderungan umum untuk teks tertunda dalam teks ini. kali adalah masalah font web yang dijelaskan di atas, saya yakin.)
Tambahan:
Jawaban ini menjadi sangat disukai, meskipun saya tidak menjelaskan secara mendetail, atau mungkin karena ini. Ada banyak komentar di utas pertanyaan, jadi saya akan mencoba memperluas sedikit […]
Fenomena tersebut rupanya dikenal sebagai “flash of unstyled content” secara umum, dan “flash of unstyled text” pada khususnya. Menelusuri "FOUC" dan "FOUT" memberikan info lebih lanjut.
Saya dapat merekomendasikan postingan desainer web Paul Irish di FOUT sehubungan dengan font web .
Apa yang dapat diperhatikan adalah bahwa browser yang berbeda menangani ini secara berbeda. Saya tulis di atas bahwa saya telah menguji Opera dan Chrome, yang keduanya berperilaku serupa. Semua yang berbasis WebKit (Chrome, Safari, dll.) Memilih untuk menghindari FOUT oleh tidak merender teks font web dengan font pengganti 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 sangat salah bahwa font yang di-cache berperilaku seperti ini, tetapi mis. dari tautan di atas:
Dalam kasus apa Anda akan mendapatkan FOUT
- Akan: Mendownload dan menampilkan ttf / otf / woff jarak jauh
- Akan: Menampilkan ttf / otf / woff yang di-cache
- Akan: Mendownload 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 diberi nama menggunakan lokasi local ()
Karena Chrome menunggu hingga EMPAT risiko hilang sebelum rendering, ini memberikan penundaan. Yang tingkat efeknya terlihat (terutama saat memuat dari cache) tampaknya bergantung antara lain pada jumlah teks yang perlu dirender dan mungkin faktor lain, tetapi caching tidak sepenuhnya menghapus efeknya.
Irish juga memiliki beberapa pembaruan terkait perilaku browser mulai 2011–04–14 di bagian bawah pos:
- Firefox (mulai FFb11 dan FF4 Final) tidak lagi memiliki FOUT! Wooohoo! http://bugzil.la/499292 Pada dasarnya teks tidak terlihat selama 3 detik, dan kemudian mengembalikan font fallback. Font web mungkin akan dimuat dalam tiga detik itu… semoga ..
- IE9 mendukung WOFF dan TTF dan OTF (meskipun membutuhkan sedikit embedding mengatur hal - kebanyakan diperdebatkan jika Anda menggunakan WOFF). NAMUN!!! IE9 memiliki FOUT. :(
- Webkit memiliki tambalan menunggu untuk mendarat untuk menampilkan teks fallback setelah 0,5 detik. Jadi perilaku yang sama seperti FF tetapi 0,5s, bukan 3s.
Jika ini adalah pertanyaan yang ditujukan untuk desainer, seseorang dapat mencari cara untuk menghindari masalah seperti ini
webfontloader, tapi itu pertanyaan lain. Tautan Paul Irish menjelaskan lebih detail tentang masalah ini.
Punya sesuatu untuk ditambahkan ke penjelasannya? Suarakan di komentar. Ingin membaca lebih banyak jawaban dari pengguna Stack Exchange yang paham teknologi? Lihat utas diskusi lengkap di sini .
