Skip to main content

ArtinTech Solution

Serving Newspaper Pages Fast: WebP, a Medium Size and Zoom on Demand

Satu halaman akhbar dalam e-akhbar ialah imej yang besar: 2,000 piksel pada sisi panjang dan penuh dengan tulisan kecil. Pembaca menyelak sepuluh atau dua puluh halaman, selalunya di telefon dengan sambungan yang tidak stabil. Ketika kami membina versi 1.1 Inkfold, platform e-akhbar hos sendiri kami, kelajuan halaman ialah perkara pertama yang kami tulis semula.

Simpan setiap halaman tiga kali

Semasa dimuat naik, setiap halaman dikodkan semula dengan GD kepada tiga fail: halaman penuh, versi sederhana kira-kira 1,100 piksel lebar dan imej kecil untuk jalur halaman. Format dipilih sekali bagi setiap pelayan: WebP jika PHP menyokongnya, JPEG jika tidak. Pada edisi ujian kami, WebP mengurangkan saiz halaman kira-kira satu pertiga dengan kualiti visual yang sama, dan bagi laman yang penuh dengan halaman, itu lebih penting daripada pengoptimuman lain.

Pengekodan semula juga membuang perkara yang tidak diperlukan, seperti profil warna terbenam dan metadata kamera, dan meratakan ketelusan di atas latar putih supaya eksport PNG daripada perisian reka letak tidak pernah berlatar hitam.

Saiz sederhana dahulu, saiz penuh hanya apabila perlu

Pembaca e-akhbar memaparkan imej sederhana secara lalai. Pada saiz biasa ia tidak dapat dibezakan daripada yang asal dan jauh lebih kecil. Apabila pembaca zum masuk, skrip membandingkan lebar paparan, didarab dengan nisbah piksel peranti, dengan lebar sebenar imej. Sebaik sahaja halaman dipaparkan jelas lebih besar daripada yang mampu ditampung fail sederhana, ia memuatkan imej penuh di latar belakang dan menggantikannya apabila sudah tiba.

Halaman akhbar yang dizum dalam pembaca e-akhbar Inkfold
Ketika zum, halaman saiz penuh hanya dimuatkan apabila piksel tambahan dapat dilihat.

Pembaca yang tidak pernah zum tidak akan memuat turun halaman penuh. Pembaca yang zum mendapat halaman yang tajam tanpa menunggu, kerana imej sederhana kekal di skrin sehingga imej besar siap. Halaman seterusnya dalam edisi dimuatkan awal dalam saiz sederhana, jadi menyelak halaman terasa serta-merta.

Potong berita sekali, kemudian simpan dalam cache

Setiap kawasan berita boleh dibuka sebagai imej tersendiri, untuk tetingkap timbul dan untuk dikongsi. Dahulu potongan ini dijana pada setiap permintaan. Kini permintaan pertama memotong kawasan itu dan menyimpannya pada cakera media dengan nama yang mengandungi hash kawasan dan imej halaman, jadi kawasan yang dilukis semula atau halaman yang diganti akan mendapat fail baharu secara automatik. Respons membawa pengepala cache selama seminggu.

Media pada mana-mana cakera atau di belakang CDN

Semua akses fail melalui satu fungsi pembantu, bukan cakera tempatan yang ditetapkan. Dengan INKFOLD_DISK=s3, imej halaman, PDF dan keratan berpindah ke Amazon S3, Cloudflare R2 atau DigitalOcean Spaces. Penerbit yang mahu menyimpan fail secara tempatan boleh menggunakan INKFOLD_MEDIA_URL untuk menyalurkan URL imej melalui CDN jenis pull seperti Cloudflare atau Bunny dengan laman sebagai asal. Nama fail mengekalkan bahagian rawak 20 aksara, jadi halaman premium tidak dapat diteka walau apa jua storan yang digunakan.

Perkara utama

  • Kodkan sekali semasa muat naik, dalam tiga saiz, dan biarkan pelayan memilih WebP jika boleh.
  • Paparkan imej sederhana dahulu; muatkan halaman penuh hanya apabila zum menjadikan perbezaannya nyata.
  • Simpan potongan yang dijana dalam cache dengan kunci yang berubah apabila sumbernya berubah.
  • Salurkan semua akses fail melalui satu abstraksi supaya S3 atau CDN hanyalah konfigurasi.

Seterusnya dalam siri ini: paparan dua halaman yang menyamakan ketinggian kedua-dua halaman. Anda boleh mencuba semua ini dalam demo langsung Inkfold, dan perisiannya boleh didapati di Charming Theme.

Menerbitkan akhbar atau majalah dalam talian dan bergelut dengan halaman yang perlahan? Mari berbincang — ArtinTech Solution membina dan menala perisian penerbitan seperti ini.

Share this article

Tinggalkan Balasan

Alamat e-mel anda tidak akan disiarkan. Medan diperlukan ditanda dengan *