Pertanyaan Mengapa situs web tidak segera menampilkan teks mereka hari ini?


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 bawah untuk contoh - semuanya dimuat tetapi perlu beberapa detik lagi sebelum teks akhirnya ditampilkan:

enter image description here


440
2018-02-07 06:22


asal


Dalam kasus khusus ini, PortableApps.com menggunakan font "Ubuntu". John mencoba OpenSans pertama, tetapi kami beralih ke Ubuntu dengan cepat. Saya adalah pendukung utama switching ... salah satu cara di mana Anda dapat menghapus masalah adalah dengan menginstal keluarga font sendiri. Jika Anda menginstalnya font.ubuntu.com itu akan segera bekerja. - Chris Morgan
Jawaban oleh Daniel adalah pembuka mata. Saya pikir ini sengaja dilakukan agar kita dapat melihat semua iklan di halaman. - Manoj R
Seperti yang telah ditunjukkan oleh beberapa orang di sini, ada alasan yang tak terbatas untuk teks yang dibuat dengan cara yang tidak terduga, karena rendering halaman hanya dibatasi oleh imajinasi pengembang / desainer, yang telah terjadi setidaknya sejak kode posisi ANSI memungkinkan buletin 1980-an papan untuk menerapkan obrolan dan UI multiuser dengan jendela tumpang tindih dengan bayangan drop. Meebo adalah salah satu yang pertama untuk mereproduksi beberapa efek ini di browser tanpa Applet. "Bekerja kebalikannya seperti dulu" terlalu menyederhanakan Internet dan bahkan tidak mengacu pada periode waktu tertentu. - PJ Brunet
Jadi mengapa membuat generalisasi menyeluruh tentang Internet berdasarkan pada satu tutup layar acak dari situs web dengan peringkat Alexa yang rendah? Jawaban terbaik juga membuat klaim yang berani: "desainer saat ini melakukan XYZ" harus didukung dengan beberapa bilangan real, seperti "5% situs web menggunakan Google Web Fonts pada 2012" atau apa pun itu. - PJ Brunet
Tetapi file font disimpan dalam cache, situs ini sudah lama menunggu memuat m.aspx mereka mungkin memeriksa bagian itu - user613326


Jawaban:


Salah satu alasannya adalah bahwa desainer web saat ini suka menggunakan font web (biasanya di WOFF format), 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" 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);

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, gunakan font web untuk judulnya, tetapi bukan prospeknya, jadi ketika situs itu dimuat, saya biasanya melihat prospeknya terlebih dahulu, dan setengah detik kemudian semua ruang kosong di atas diisi dengan tajuk berita (ini benar di Chrome dan Opera, di 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 mungkin karena ini. Ada banyak komentar di utas pertanyaan, jadi saya akan mencoba memperluas sedikit (banyak komentar tampaknya telah menghilang beberapa saat setelah topik itu dilindungi - beberapa moderator mungkin secara manual membersihkannya). Juga, baca jawaban lain di utas ini karena semuanya berkembang dengan caranya sendiri.

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

Saya dapat merekomendasikan posting web designer Paul Irish 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 oleh tidak render teks font web dengan font fallback selama periode pemuatan font web. Bahkan jika font web di-cache, di sana akan 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. Yang tingkat 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 diperlukan sedikit embedding  mengatur hal- Sebagian besar diperdebatkan jika Anda menggunakan WOFF). NAMUN!!! IE9 memiliki FOUT. :(
  • Webkit memiliki sebuah patch yang menunggu untuk mendarat untuk menampilkan teks fallback setelah 0,5 detik. Jadi perilaku yang sama seperti FF tetapi 0,5 bukannya 3s.
  • Tambahan: Blink punya bug yang terdaftar untuk ini juga, tetapi tampaknya konsensus akhir belum tercapai mengenai apa yang harus dilakukan dengan itu - saat ini implementasi yang sama dengan WebKit.

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


484
2018-02-07 07:54



Apakah ada peramban yang mencoba merender teks pertama dalam font yang tersedia, dan merendernya kembali setelah font yang diinginkan diunduh? - Steve Bennett
Oh, ya, komentari jawaban selanjutnya: paulirish.com/2009/fighting-the-font-face-fout - Steve Bennett
@ scratchetfreak akan membingungkan untuk memformat ulang halaman karena font mungkin tidak memiliki metrik yang sama - Samuel Edwin Ward
beberapa orang lebih suka pergi ke bagian membaca dari browsing halaman web, bukan menunggu usia untuk mendapatkan font dimuat - ratchet freak
@SteveBennett Saya cukup yakin itulah yang Internet Explorer 10 lakukan. Saya belum pernah melihat teks yang bermunculan di kemudian hari. Bagi saya itu selalu teks muncul di beberapa "font standar" dan beberapa detik kemudian berubah menjadi gaya / diunduh. Saya tidak yakin apakah itu memilih CSS yang berikutnya atau hanya sistem defaultnya. Edit: Ah, bagus, jadi hanya Webikit dengan teks tersembunyi? Saya akan menganggap bahwa perilaku menjengkelkan dan buruk. Apakah ada browser yang mengabaikan / menyembunyikan pemuatan gambar progresif? - Mario


Alasannya adalah teks yang belum bisa Anda baca sedang diterjemahkan font web yang masih dalam perjalanan menyusuri pipa ke browser Anda.

Juga, karena peramban Anda adalah Google Chrome, yang menggunakan WebKit untuk merender laman, diputuskan oleh mereka (WebKit itu) yang terbaik bagi Anda untuk tidak melihat teks sama sekali sampai font web diunduh. Namun, jika Anda seorang pengembang yang lebih memilih teks untuk dibaca dalam font sistem fall-back yang sesuai, maka Anda dapat menggunakan sesuatu seperti Pemuat WebFont Google untuk mencapai ini.


117
2018-02-07 11:46



Sayangnya itu adalah jawaban yang salah, jika Anda akan mengunjungi halaman ini sekali, file font akan berada di kas web Anda; untuk halaman lain di situs ini atau situs web lain menggunakan font ini akan diambil dari uang tunai. - user613326


Jawaban singkat: AJAX atau WOFF

Ada beberapa penyebab situs web menjadi "lambat untuk menampilkan teks mereka". Kelambatan pada portableapps.com disebabkan oleh unduhan WOFF font. Namun, apa yang Anda gambarkan sebagai "teks mulai muncul di sana-sini" lebih sering disebabkan oleh AJAX.

Sebuah situs web terdiri dari banyak bagian. Bagaimana bagian-bagian ini diunduh dan dirakit adalah a pilihan desain di bawah kendali desainer web. Kelambatan ini disebabkan oleh bagaimana pengembang memilih untuk merakit blok bangunan berikut:

  • Halaman HTML awal
  • CSS
  • JS
  • Gambar
  • Font WOFF
  • Permintaan AJAX
  • Manipulasi DOM

Situs web tradisional:

Secara tradisional, itu biasa bagi para pengembang untuk menempatkan konten teks dalam halaman HTML awal dan menampilkannya segera setelah tersedia. HTML akan mereferensikan beberapa sumber daya yang kemudian akan diunduh. Peramban akan kemudian progresif redraw layar untuk memasukkan gaya dan gambar saat tersedia. AJAX dan WOFF tidak tersedia.


Situs Web WOFF:

Font WOFF memungkinkan situs web untuk menggunakan font yang biasanya tidak tersedia untuk browser, oleh mengunduh font dengan situs web. Beberapa pengembang menginstruksikan browser untuk tidak menampilkan konten teks sampai semua font WOFF telah diunduh. Menurut pengalaman saya, pendekatan ini belum digunakan secara luas.


Situs Web AJAX:

Beberapa pengembang memilih untuk tidak menyertakan konten teks di halaman HTML awal. Sebaliknya, mereka memilih untuk mengunduh konten teks menggunakan AJAX. Ini terjadi setelah halaman dasar telah dimuat. Menurut pengalaman saya, metode ini telah mendapatkan banyak adopsi yang lebih luas dari font WOFF dan paling sering penyebab kelambanan yang Anda gambarkan.


Menentukan Penyebab

Untuk menentukan penyebab situs tertentu membutuhkan analisis menggunakan alat seperti Pembakar atau Alat Pengembang Chrome. Atau sebagai alternatif, Anda dapat membuka situs menggunakan Internet Explorer 8, yang mendukung AJAX tetapi bukan WOFF. Jika situs masih lambat, masalahnya adalah AJAX dan bukan WOFF.


19
2018-02-08 13:40





Saya sering mungkin pilihan yang disengaja untuk menghindari "flash konten yang tidak ditata". Jika teks yang ditampilkan sebelum CSS dimuat, Anda akan melihatnya sebagai mentah, dan kemudian flash saat browser menggambar ulang. Dengan memasukkan beberapa gaya dasar sebaris untuk awalnya menyembunyikan konten, yang ditimpa dalam stylesheet aktual, atau menggunakan JS, pengembang menghindari flash ini.


14
2018-02-07 08:26



Sembilan dari sepuluh tidak akan disengaja, itu hanya efek samping dari embedding web-font dengan cara yang paling sederhana. Bahkan, diperlukan upaya ekstra untuk menghadirkan alternatif yang terlihat sementara font web turun pipa. Lihat developers.google.com/webfonts/docs/webfont_loader - Marcel
@Marcel - ini dapat disebabkan oleh stylesheet yang lambat serta font yang lambat, lihat phpied.com/css-and-the-critical-path - r3m0t
Kode untuk mencegah "flash konten yang bermanfaat", cenderung untuk mencegah gambar muncul serta teks. - Jon Hanna
Saya berjuang untuk memahami mengapa teks yang tidak ditata lebih buruk daripada tidak ada teks sama sekali. Saya lebih baik dapat mulai membaca sebuah menerima bahwa itu mungkin bergoyang sedikit. Saya merasa lebih menggelegar ketika tiba-tiba muncul ke mana-mana dan itu sangat membuat frustrasi ketika sebuah halaman telah dimuat dan Anda terpaksa menunggu font. - Richard Le Poidevin


Seperti yang orang lain telah catat, font kustom kemungkinan berkontribusi pada penundaan.

Untuk memberikan sedikit lebih banyak latar belakang, peramban melakukan kira-kira hal-hal berikut sebelum dapat merender konten laman ke layar:

  1. ambil HTML (beberapa perjalanan pulang pergi untuk DNS, TCP, permintaan / respons)
  2. mulai menguraikan HTML, temukan sumber eksternal seperti CSS eksternal dan JS. Perhatikan bahwa CSS memblokir tata letak, dan JS memblokir penguraian. Jadi sumber daya eksternal seperti CSS dan JS dimuat di awal dokumen (misalnya di kepala) memperlambat waktu yang diperlukan untuk halaman untuk menampilkan konten di layar.
  3. ambil CSS dan JS eksternal (beberapa perjalanan pulang pergi: DNS dan TCP jika sumber daya ini berada di domain yang berbeda seperti CDN, serta RTT untuk permintaan / tanggapan)
  4. setelah CSS dan JS eksternal selesai memuat, mengurai / mengeksekusi JS, mem-parsing / menerapkan gaya
  5. jika CSS membuat referensi ke font kustom, font tersebut sekarang harus diunduh juga, menghasilkan penundaan round trip tambahan untuk merender setiap bagian halaman yang bergantung pada font kustom

Meskipun bukan tentang penundaan yang disebabkan oleh font khusus secara khusus, saya menulis posting blog baru-baru ini yang memberikan informasi tambahan tentang penyebab penundaan render. Ini memberikan beberapa saran untuk meminimalkan waktu untuk melukis pertama untuk halaman Anda. Semoga ini berguna bagi pembaca yang tertarik untuk membuat halaman mereka menampilkan konten lebih cepat, termasuk halaman-halaman yang ingin menggunakan font kustom: http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/


8
2018-02-07 18:26





Jawaban singkat: Pengembang.

Ketika tautan dan tag skrip yang merujuk dokumen eksternal (seperti file .css atau .js) ditempatkan di kepala dokumen (lebih tinggi dalam aliran daripada badan, dan elemennya), mereka dimuat pertama. JavaScript mengeksekusi dari markup yang mereferensikannya; jika ada banyak kode untuk diproses, atau kode rumit, atau lebih umum jika teks yang Anda harapkan untuk dilihat sedang ditampilkan di server dan diisi ke dalam dokumen saat dimuat - dan kode sisi server tersebut juga rumit, besar, atau memblokir I / O karena pemrosesan beberapa permintaan bersamaan, Anda mungkin melihat downtime sebelum HTML memiliki kesempatan untuk merender. Beberapa pengembang memilih untuk memuat JavaScript yang tidak terkait tampilan setelah markup dan gaya (di ujung badan), dan upaya terbaik untuk lebih sadar tentang bagaimana keputusan teknologi mereka akan mempengaruhi pengalaman pengguna secara berlebihan ketika diimplementasikan.

Kecepatan koneksi internet memainkan peran dalam pengunduhan data yang lambat, cukup jelas, tetapi kode yang ditulis dengan buruk, atau tumpukan teknologi yang dirancang dengan buruk (untuk jenis situs web) memainkan peran yang semakin sentral dalam pemuatan konten dinamis yang lambat, karena koneksi jaringan yang lebih cepat pendekatan di mana-mana.


4
2018-02-07 10:04



Tidak - apa yang Anda jelaskan dapat memblokir elemen DOM dari menampilkan tetapi tidak hanya teks. Jawabannya ada hubungannya dengan penggantian font dan kesalahan para desainer, bukan pengembang. - Toby
+1 @Toby karena ini benar-benar kesalahan perancang. Ini sangat menjengkelkan juga jika Anda berada di link yang lambat (seperti, oh saya tak tahu, ponsel saya atau telepon rumah di rumah). Hal-hal seperti itu hanya membuat situs web lebih lambat dan mengganggu pengguna tanpa manfaat sama sekali. - Magnus
Jawaban panjang: Pengembang, pengembang, pengembang, pengembang. - iono
@Toby Para desainer menentukan font mana yang akan digunakan, ya, tetapi tugas dari setiap pengembang yang baik untuk membuat pilihan yang tepat selama implementasi teknis. Pengembang yang baik juga akan memahami mengapa terjadi (dijelaskan dalam jawaban di atas), pilihan apa yang dapat dibuat untuk menghindari masalah (Google Webfont Loader), dan bagaimana hal itu memengaruhi pengalaman. - arbales


Singkatnya, terlalu banyak objek yang dapat dimuat yang perlu dimuat dari HTTP GET yang terpisah sebelum halaman dapat ditampilkan, dan ketergantungan berlebihan pada latensi rata-rata sebagai ukuran kesehatan situs.

Yang pertama mengacu pada semua .css, .js, dan webfonts yang dimuat halaman tersebut, belum lagi fakta bahwa banyak situs juga perlu mengambil objek JSON viea permintaan XHR dan kemudian menghasilkan HTML dari yang menggunakan semacam templating.

Tapi mengapa mereka tidak memperhatikan bahwa situs itu lambat?

Mungkin karena mereka memiliki memecache di suatu tempat untuk mempercepat (atau hanya mengandalkan cache filesystem) dan mengukur kesehatan situs mereka menggunakan latensi rata-rata. Dengan demikian objek yang di-cache dikembalikan dengan latensi 6 mircrosecond dan menutupi fakta bahwa banyak permintaan GET memerlukan 5000 milidetik untuk diselesaikan. Rata-rata harus mati. Panjang umur penghitungan RTT di atas ambang batas maksimum yang dapat diterima! Angka itu harus 0 atau, menurut definisi, RTT tidak dapat diterima.


3
2018-02-13 04:25





Ada beberapa alasan. Salah satu alasannya adalah bahwa perintah untuk mendefinisikan latar belakang atau di atas halaman html sering Atau diambil dalam CSS terpisah yang dimuat pertama. sebelum badan dokumen dimuat yang berisi teks.

Penyebab lain adalah bahwa meskipun dimungkinkan untuk mengetik ukuran gambar dalam banyak kasus web designer tidak menggunakan itu. Jadi brouwser harus memuat seluruh gambar terlebih dahulu di halaman sehingga ia tahu cara membungkus teks di sekitarnya.

Beberapa desainer, juga ingin menunjukkan gambar pertama dan teks berikutnya, mereka mencapai itu dengan beberapa javascript jadi misalnya halaman sederhana pertama akan menampilkan spanduk dan kemudian segala sesuatu yang lain di atasnya.

Tetapi jika Anda bertanya-tanya mengapa ada begitu banyak hal-hal komersial spam di halaman saya sementara saya hanya ingin membaca berita, maka ada solusi untuk Anda. Anda dapat menggunakan spam-blocker jika Anda menggunakan firefox. Dengan addon semacam itu, webrowser mengetahui situs yang menyediakan spam, dan hanya memblokirnya, sehingga menghasilkan pemuatan halaman yang jauh lebih cepat, sementara Anda masih dapat melihat gambar-gambar penting yang berhubungan dengan artikel yang Anda baca.

Saya akan merekomendasikan kepada Anda semua yang berurusan dengan pemuatan halaman yang lambat untuk mencoba fidler. fidler dapat digunakan dengan IEexplorer atau dengan FireFox (menggunakan fungsi proxy-nya) Fidler benar-benar akan menunjukkan Anda berapa lama sebenarnya dan kapan bagian halaman web dimuat. Ini adalah alat debugging HTML.


-1
2018-02-07 11:41



sehingga Anda mencoba untuk membantu orang dan turun memilih yang tidak menyenangkan? Ok saya akan berpikir dua kali lagi sebelum menjelaskan barang-barang teknis dalam istilah laymens di sini. - user613326
Anda menjelaskan hal yang salah, itu sebabnya Anda semakin downvoted. Seperti yang Anda lihat di tangkapan layar, halaman penuh, hanya teks yang tidak ditampilkan. Ini tidak ada hubungannya dengan gambar. - Femaref
Tubuh dokumen hampir selalu dimuat sebelum CSS eksternal. Browser tidak berhenti mengurai halaman hanya untuk memuat konten eksternal. Berusaha membantu hanya berguna jika Anda benar-benar membantu. Informasi yang salah lebih buruk daripada tidak ada informasi. - raylu
@raylu Saya tidak tahu tentang kesalahan informasi itu. Melihat jawaban dengan banyak downvote terkadang bisa sangat membantu. :-) - LarsTech
Hai @ user613326: kami mendorong downvoting jujur ​​di sini, karena kami terutama di sini untuk memberikan jawaban yang bermanfaat bagi komunitas. Jangan tersinggung! - Flimm