Dalam cache, PHP membuat Gambar Mini memuat dengan lambat

Pertanyaan Bagian A ▉ (100 hadiah, diberikan)
Pertanyaan utama adalah bagaimana membuat situs ini, memuat lebih cepat. Pertama, kami perlu membaca air terjun ini. Terima kasih atas saran Anda tentang analisis pembacaan air terjun. Terbukti dari berbagai grafik air terjun yang ditampilkan di sini adalah hambatan utama: thumbnail yang dihasilkan PHP. Pemuatan protokol-kurang jquery dari CDN yang disarankan oleh David mendapatkan hadiah saya, meskipun membuat situs saya hanya 3% lebih cepat secara keseluruhan, dan sementara tidak menjawab hambatan utama situs. Saatnya untuk klarifikasi pertanyaan saya, dan, hadiah lain:

Pertanyaan Bagian B ▉ (hadiah 100, diberikan)
Fokus baru sekarang adalah untuk menyelesaikan masalah yang dimiliki gambar 6 jpg, yang menyebabkan penundaan pemuatan paling banyak. 6 gambar ini adalah thumbnail yang dihasilkan PHP, kecil dan hanya 3 ~ 5 kb, tetapi memuat relatif sangat lambat. Perhatikan " waktu untuk byte pertama " pada berbagai grafik. Masalahnya tetap belum terpecahkan, tetapi hadiah pergi ke James, yang memperbaiki kesalahan header yang digarisbawahi RedBot : "Permintaan bersyarat-Jika-Dimodifikasi-Karena mengembalikan konten lengkap tidak berubah." .

Pertanyaan Bagian C ▉ (hadiah terakhir saya: 250 poin)
Sayangnya, bahkan setelah kesalahan header REdbot.org diperbaiki, penundaan yang disebabkan oleh gambar yang dihasilkan PHP tetap tidak tersentuh. Apa yang dipikirkan thumbnail kecil 3 ~ 5Kb kecil ini? Semua informasi header itu dapat mengirim roket ke bulan dan kembali. Setiap saran tentang hambatan ini sangat dihargai dan diperlakukan sebagai jawaban yang mungkin, karena saya terjebak pada masalah kemacetan ini sudah tujuh bulan sekarang. Terima kasih sebelumnya.

[Beberapa info latar belakang di situs saya: CSS ada di atas. JS di bagian bawah (Jquery, JQuery UI, membeli mesin menu awm / menu.js, mesin tabs js, video swfobject.js) Garis hitam pada gambar kedua menunjukkan apa yang memulai apa yang akan dimuat. Robot yang marah adalah hewan peliharaan saya "ZAM". Dia tidak berbahaya dan sering lebih bahagia.]

Load Waterfall: Kronologis | http://webpagetest.org

Domain Paralel yang Dikelompokkan | http://webpagetest.org

Air Terjun Situs-Perf | http://site-perf.com

Air Terjun Pingdom Tools | http://tools.pingdom.com

Air Terjun GTmetrix | http://gtmetrix.com

Pertama, menggunakan beberapa domain tersebut membutuhkan beberapa pencarian DNS. Sebaiknya Anda menggabungkan banyak gambar-gambar itu menjadi sprite daripada menyebarkan permintaan.

Kedua, ketika saya memuat halaman Anda, saya melihat sebagian besar pemblokiran (~ 1,25s) di all.js. Saya melihat itu dimulai dengan (versi lama) jQuery. Anda harus merujuknya dari Google CDN, untuk tidak hanya mengurangi waktu muat , tetapi juga berpotensi menghindari permintaan HTTP untuk itu .

Khususnya, pustaka jQuery dan jQuery UI terbaru dapat dirujuk di URL ini (lihat posting ini jika Anda tertarik mengapa saya menghapusnya http:):

//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js

Jika Anda menggunakan salah satu tema UI jQuery default, Anda juga dapat menarik CSS dan gambarnya dari Google CDN .

Dengan hosting jQuery dioptimalkan, Anda juga harus menggabungkan awmlib2.jsdan tooltiplib.jsmenjadi satu file.

Jika Anda mengatasi hal-hal itu, Anda akan melihat peningkatan yang signifikan.

Aku punya masalah yang sama beberapa hari yang lalu & saya menemukan head.js . Ini adalah Plugin Javascript yang memungkinkan Anda untuk memuat semua file JS paralell. Semoga itu bisa membantu.

Saya jauh dari ahli tetapi ...

Sehubungan dengan ini: "Permintaan bersyarat-Jika-Dimodifikasi-Sejak mengembalikan konten lengkap tidak berubah." dan komentar saya.

Kode yang digunakan untuk menghasilkan Gambar Kecil harus memeriksa hal-hal berikut:

1. Apakah ada versi thumbnail yang di-cache.
2. Apakah versi yang di-cache lebih baru dari gambar aslinya.

Jika salah satu dari ini salah, thumbnail harus dibuat dan dikembalikan tidak peduli apa. Jika keduanya benar maka pemeriksaan berikut harus dilakukan:

1. Apakah ada tajuk HTTP_IF_MODIFIED_SINCE
2. Apakah waktu terakhir versi yang di-cache itu sama dengan HTTP_IF_MODIFIED_SINCE

Jika salah satu dari ini salah, thumbnail yang di-cache harus dikembalikan.

Jika keduanya benar maka status 304 http harus dikembalikan. Saya tidak yakin apakah ini diperlukan tetapi saya juga secara pribadi mengembalikan header Cache-Control, Expires, dan Last-Modified bersama dengan 304.

Sehubungan dengan GZipping, saya telah diberitahu bahwa tidak perlu gambar GZip jadi abaikan bagian komentar saya itu.

Sunting: Saya tidak melihat tambahan Anda pada kiriman Anda.

session_cache_limiter('public');
header("Content-type: " . $this->_mime);
header("Expires: " . gmdate("D, d M Y H:i:s", time() + 2419200) . " GMT");
// I'm sure Last-Modified should be a static value. not dynamic as you have it here.
header("Last-Modified: " . gmdate("D, d M Y H:i:s",time() - 404800000) . " GMT");

Saya juga yakin bahwa kode Anda perlu memeriksa tajuk HTTP_IF_MODIFIED_SINCE dan bereaksi terhadapnya. Hanya dengan mengatur header ini dan file .htaccess Anda tidak akan memberikan hasil yang diperlukan.

Saya pikir Anda perlu sesuatu seperti ini:

$date = 'D, d M Y H:i:s T'; // DATE_RFC850
$modified = filemtime($filename);
$expires = strtotime('1 year'); // 1 Year

header(sprintf('Cache-Control: %s, max-age=%s', 'public', $expires - time()));
header(sprintf('Expires: %s', date($date, $expires)));
header(sprintf('Last-Modified: %s', date($date, $modified)));
header(sprintf('Content-Type: %s', $mime));

if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
    if(strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) === $modified) {
        header('HTTP/1.1 304 Not Modified', true, 304);
        // Should have been an exit not a return. After sending the not modified http
        // code, the script should end and return no content.
        exit();
    }
}
// Render image data

Wow, sulit untuk menjelaskan hal-hal menggunakan gambar itu .. Tapi di sini, beberapa mencoba:

• file 33-36 memuat selambat itu, karena mereka dimuat secara dinamis di dalam swf, dan swf (25) dimuat terlebih dahulu sepenuhnya sebelum memuat konten tambahan apa pun
• file 20 & 21 mungkin (saya tidak tahu, karena saya tidak tahu kode Anda) pustaka yang dimuat oleh all.js (11), tetapi untuk 11 untuk mengeksekusi, ia menunggu seluruh halaman (dan aset) untuk memuat (Anda harus mengubahnya ke domready)
• file 22-32 dimuat oleh dua pustaka itu, sekali lagi setelah itu sepenuhnya dimuat

Hanya tebakan sederhana karena analisis semacam ini membutuhkan banyak pengujian A / B: domain .ch Anda tampaknya sulit dijangkau (panjang, pita hijau sebelum byte pertama tiba).

Ini berarti bahwa situs web .ch di-host dengan buruk atau ISP Anda tidak memiliki rute yang baik untuk mereka.

Mengingat diagram, ini bisa menjelaskan hit kinerja besar.

Di samping catatan, ada alat keren ini cuzillion yang dapat membantu Anda memilah hal-hal tergantung pada pemesanan Anda memuat sumber daya.

Coba jalankan tes Y! Lambat dan Kecepatan Halaman di situs / halaman Anda, dan ikuti panduan untuk menyelesaikan kemungkinan hambatan kinerja. Anda harus mendapatkan keuntungan kinerja yang sangat besar setelah skor Anda lebih tinggi di Y! Lambat atau Kecepatan Laman.

Tes ini akan memberi tahu Anda apa yang salah dan apa yang harus diubah.

Jadi skrip PHP Anda menghasilkan thumbnail pada setiap pemuatan halaman? Pertama, jika gambar yang sedang di-thumbnail tidak sering berubah, dapatkah Anda mengatur cache sehingga tidak harus diuraikan setiap kali halaman dimuat? Kedua, apakah skrip PHP Anda menggunakan sesuatu seperti imagecopyresampled()untuk membuat thumbnail? Itu adalah downsample non-sepele dan skrip PHP tidak akan mengembalikan apa pun sampai selesai menyusut. Menggunakan imagecopymerged()malah akan mengurangi kualitas gambar, tapi mempercepat proses. Dan berapa banyak pengurangan yang Anda lakukan? Apakah thumbnail ini 5% ukuran gambar asli atau 50%? Ukuran yang lebih besar dari gambar asli kemungkinan mengarah ke perlambatan karena skrip PHP harus mendapatkan gambar asli dalam memori sebelum dapat mengecilkannya dan menghasilkan thumbnail yang lebih kecil.

Saya telah menemukan URL situs web Anda dan memeriksa satu file jpg dari beranda. Sementara waktu memuat masuk akal sekarang (161ms), itu menunggu 126ms, yang terlalu banyak.

Header terakhir Anda yang dimodifikasi siap untuk Sabtu, 01 Jan 2011 12:00:00 GMT, yang terlihat terlalu "bulat" untuk menjadi tanggal sesungguhnya dari generasi ;-)

Karena kontrol Cache adalah "publik, maks-usia = 14515200", header yang dimodifikasi terakhir secara sewenang-wenang akan dapat menyebabkan masalah setelah 168 hari.

Bagaimanapun, ini bukan alasan sebenarnya untuk penundaan.

Anda harus memeriksa apa yang generator thumbnail lakukan ketika thumbnail sudah ada dan apa yang bisa menghabiskan banyak waktu untuk memeriksa dan mengirimkan gambar.

Anda dapat menginstal xdebug ke profil skrip dan melihat di mana kemacetannya.

Mungkin semuanya menggunakan kerangka kerja atau menghubungkan ke beberapa database tanpa biaya. Saya telah melihat sangat lambat mysql_connect () pada beberapa server, sebagian besar karena mereka terhubung menggunakan TCP dan bukan socket, kadang-kadang dengan beberapa masalah DNS.

Saya mengerti Anda tidak dapat memposting generator berbayar Anda di sini, tetapi saya khawatir ada terlalu banyak masalah yang mungkin terjadi ...

Jika tidak ada alasan yang sangat bagus (biasanya tidak ada) gambar Anda seharusnya tidak memanggil penerjemah PHP.

Buat aturan penulisan ulang untuk server web Anda yang server gambar langsung jika ditemukan pada sistem file. Jika tidak, arahkan ulang ke skrip PHP Anda untuk menghasilkan gambar. Saat Anda mengedit gambar, ubah nama file gambar untuk memaksa pengguna yang memiliki versi cache untuk mengambil gambar yang baru diedit.

Jika tidak bekerja setidaknya Anda sekarang tidak akan ada hubungannya dengan cara gambar dibuat dan diperiksa.

Selidiki penggunaan data sesi PHP. Mungkin (mungkin saja), skrip PHP penghasil gambar sedang menunggu untuk mendapatkan kunci pada data sesi, yang dikunci oleh halaman utama yang masih render atau skrip rendering gambar lainnya. Ini akan membuat semua optimasi JavaScript / browser hampir tidak relevan, karena browser menunggu server.

PHP mengunci data sesi untuk setiap skrip yang berjalan, dari saat penanganan sesi dimulai, hingga saat skrip selesai, atau ketika session_write_close () dipanggil. Ini secara efektif membuat cerita bersambung banyak hal. Lihat halaman PHP pada sesi, terutama komentar, seperti ini .

Ini hanya tebakan liar karena saya belum melihat kode Anda tetapi saya menduga sesi mungkin berperan di sini, berikut ini dari entri Manual PHP pada session_write_close():

Data sesi biasanya disimpan setelah skrip Anda dihentikan tanpa perlu memanggil session_write_close (), tetapi karena data sesi dikunci untuk mencegah penulisan bersamaan, hanya satu skrip yang dapat beroperasi pada suatu sesi kapan saja. Saat menggunakan bingkai bersama dengan sesi Anda akan mengalami bingkai memuat satu per satu karena penguncian ini. Anda dapat mengurangi waktu yang diperlukan untuk memuat semua frame dengan mengakhiri sesi segera setelah semua perubahan pada variabel sesi dilakukan.

Seperti yang saya katakan, saya tidak tahu apa kode Anda lakukan tetapi grafik itu anehnya mencurigakan. Saya memiliki masalah serupa ketika saya mengkodekan fungsi melayani file multi-bagian dan saya memiliki masalah yang sama. Saat menyajikan file besar, saya tidak bisa menjalankan fungsionalitas multi bagian atau membuka halaman lain hingga pengunduhan selesai. Panggilan session_write_close()memperbaiki kedua masalah saya.

Sudahkah Anda mencoba mengganti php yang dihasilkan dengan gambar biasa untuk melihat apakah ada perbedaan? Masalahnya bisa sekitar - bug dalam kode php Anda mengarah ke regenerasi thumbnail pada setiap permintaan server - penundaan dalam kode Anda (sleep ()?) Yang terkait dengan masalah jam - masalah hardrive yang menyebabkan kondisi balapan yang sangat buruk karena semua thumbnail dimuat / dihasilkan pada saat yang sama.

Saya pikir alih-alih menggunakan skrip thumbnail-generator, Anda harus mencoba TinySRC untuk pembuatan thumbnail cepat yang cepat dan di-host cloud. Ini memiliki API yang sangat sederhana dan mudah digunakan, Anda dapat menggunakan seperti: -

http://i.tinysrc.mobi/ [height] / [width] /http://domain.tld/path_to_img.jpg

[lebar] (opsional): - Ini adalah lebar dalam piksel (yang mengesampingkan ukuran adaptif atau keluarga). Jika diawali dengan '-' atau 'x', itu akan mengurangi, atau menyusut menjadi persentase dari, ukuran yang ditentukan.

[tinggi] (opsional): - Ini adalah tinggi dalam piksel, jika lebar juga ada. Ini juga mengesampingkan ukuran adaptif atau keluarga dan dapat diawali dengan '-' atau 'x'.

Anda dapat memeriksa ringkasan API di sini

Faq

Berapa biaya tinySrc bagi saya?

Tidak ada.

Kapan saya bisa mulai menggunakan tinySrc?

Sekarang.

Seberapa andal layanan ini?

Kami tidak membuat jaminan tentang layanan tinySrc. Namun, ini berjalan pada infrastruktur cloud terdistribusi utama , sehingga menyediakan ketersediaan tinggi di seluruh dunia. Itu harus cukup untuk semua kebutuhan Anda.

Seberapa cepat?

cache kecilSrc mengubah ukuran gambar dalam memori dan di datastore kami hingga 24 jam , dan itu tidak akan mengambil gambar asli Anda setiap kali. Ini membuat layanan sangat cepat dari perspektif pengguna. (Dan mengurangi beban server Anda sebagai efek samping yang bagus.)

Semoga berhasil. Hanya saran, karena Anda tidak menunjukkan kepada kita kode: p

Karena beberapa browser hanya mengunduh 2 parallel unduhan per domain, Anda tidak dapat menambahkan domain tambahan untuk membatalkan permintaan lebih dari dua hingga tiga nama host yang berbeda. mis. 1.imagecdn.com 2.imagecdn.com

Pertama-tama, Anda perlu menangani If-Modified-Sincepermintaan dan hal itu dengan tepat, seperti yang dikatakan James. Kesalahan itu menyatakan bahwa: "Ketika saya bertanya kepada server Anda apakah gambar itu dimodifikasi sejak terakhir kali, ia mengirim seluruh gambar alih-alih ya / tidak sederhana".

Waktu antara koneksi dan byte pertama biasanya adalah waktu yang dibutuhkan skrip PHP Anda untuk menjalankannya. Jelas ada sesuatu yang terjadi ketika skrip itu mulai berjalan.

1. Sudahkah Anda mempertimbangkan untuk membuat profil? Mungkin ada beberapa masalah.
2. Dikombinasikan dengan masalah di atas, skrip Anda mungkin berjalan lebih banyak dari yang dibutuhkan. Idealnya, ini hanya menghasilkan jempol jika gambar asli dimodifikasi dan mengirim jempol yang di-cache untuk setiap permintaan lainnya. Sudahkah Anda memeriksa bahwa skrip menghasilkan gambar yang tidak perlu (mis. Untuk setiap permintaan)?

Menghasilkan tajuk yang tepat melalui aplikasi agak sulit, ditambah lagi mereka mungkin ditimpa oleh server. Dan Anda terkena penyalahgunaan karena siapa pun yang mengirim beberapa header permintaan tanpa cache akan menyebabkan generator thumbnail Anda berjalan terus menerus (dan meningkatkan beban). Jadi, jika mungkin, cobalah untuk menyimpan jempol yang dihasilkan, panggil gambar yang disimpan langsung dari halaman Anda dan kelola tajuk dari .htaccess. Dalam hal ini, Anda bahkan tidak perlu apa pun di .htaccessserver Anda jika server Anda dikonfigurasi dengan benar.

Selain itu, Anda dapat menerapkan beberapa ide optimisasi cerah dari bagian kinerja dari keseluruhan pertanyaan SO yang bagus tentang cara melakukan situs web dengan cara yang benar , seperti membagi sumber daya Anda ke dalam subdomain yang tidak bisa memasak, dll. Tetapi bagaimanapun, gambar 3k seharusnya tidak mengambil detik untuk memuat, ini jelas bila dibandingkan dengan item lain dalam grafik. Anda harus mencoba mengenali masalahnya sebelum mengoptimalkan.

Sudahkah Anda mencoba menyiapkan beberapa subdomain di bawah server web NGINX khusus untuk menyajikan data statis seperti gambar dan stylesheet? Sesuatu yang bermanfaat dapat ditemukan dalam topik ini .

Mengenai thumbnail yang tertunda, coba lakukan panggilan flush () segera setelah panggilan terakhir ke header () di skrip pembuatan thumbnail Anda. Setelah selesai, buat kembali grafik air terjun Anda dan lihat apakah penundaannya sekarang ada di tubuh alih-alih tajuk. Jika demikian, Anda perlu melihat panjang pada logika yang menghasilkan dan / atau menampilkan data gambar.

Skrip yang menangani thumbnail semoga semoga menggunakan semacam caching sehingga tindakan apa pun yang dilakukan pada gambar yang Anda sajikan hanya akan terjadi ketika benar-benar diperlukan. Sepertinya beberapa operasi mahal terjadi setiap kali Anda melayani thumbnail yang menunda output apa pun (termasuk header) dari skrip.

Mayoritas masalah lambat adalah TTFB Anda (Waktu ke byte pertama) terlalu tinggi. Ini adalah hal yang sulit untuk diatasi tanpa menjadi akrab dengan file konfigurasi server Anda, kode dan perangkat keras yang mendasarinya, tetapi saya bisa melihat itu merajalela pada setiap permintaan. Anda mendapat terlalu banyak bilah hijau (buruk) dan sangat sedikit bilah biru (bagus). Anda mungkin ingin berhenti sedikit mengoptimalkan frontend, karena saya yakin Anda telah melakukan banyak hal di area itu. Meskipun ada pepatah yang mengatakan bahwa " 80% -90% dari waktu respons pengguna akhir dihabiskan di frontend ", saya yakin milik Anda terjadi di backend.

TTFB adalah barang backend, barang server, pra-pemrosesan sebelum output dan handshaking.

Atur waktu eksekusi kode Anda untuk menemukan hal-hal yang lambat seperti permintaan basis data yang lambat, waktu memasukkan dan keluar dari fungsi / metode untuk menemukan fungsi yang lambat. Jika Anda menggunakan php, coba Firephp . Kadang-kadang itu adalah satu atau dua permintaan lambat dijalankan selama startup atau inisialisasi seperti menarik info sesi atau memeriksa otentikasi dan apa yang tidak. Mengoptimalkan kueri dapat menyebabkan beberapa peningkatan kinerja yang baik. Terkadang kode dijalankan menggunakan php prepend atau spl autoload sehingga mereka berjalan pada segalanya. Di lain waktu, konfigurasi ap dan konfigurasi apache yang mal dapat disimpan yang menghemat waktu.

Cari loop yang tidak efisien. Cari panggilan cache yang lambat atau operasi i / o lambat yang disebabkan oleh drive disk yang salah atau penggunaan ruang disk yang tinggi. Cari penggunaan memori dan apa yang digunakan dan di mana. Jalankan pengujian berulang 10 kali pada webpagetest pada satu gambar atau file menggunakan hanya tampilan pertama dari berbagai lokasi di seluruh dunia dan bukan pada lokasi yang sama. Dan baca akses dan log kesalahan Anda, terlalu banyak pengembang mengabaikannya dan hanya mengandalkan kesalahan pada layar yang dihasilkan. Jika host web Anda memiliki dukungan, minta bantuan mereka, jika mereka tidak meminta bantuan dengan sopan, itu tidak akan merugikan.

Anda dapat mencoba DNS Prefetching untuk memerangi banyak domain dan sumber daya, http://html5boilerplate.com/docs/DNS-Prefetching/

Apakah server Anda sendiri server yang bagus / layak? Terkadang server yang lebih baik dapat memecahkan banyak masalah. Saya seorang penggemar dari ' hardware itu murah, mentalitas programmer mahal ', jika Anda punya kesempatan dan uang upgrade server. Dan / Atau gunakan CDN seperti maxcdn atau cloudflare atau serupa.

Semoga berhasil!

(ps saya tidak bekerja untuk salah satu dari perusahaan-perusahaan ini. Juga tautan cloudflare di atas akan berpendapat bahwa TTFB tidak begitu penting, saya melemparkannya ke sana sehingga Anda bisa mendapatkan kesempatan lain.)

Maaf untuk mengatakan, Anda menyediakan beberapa data. Dan Anda sudah memiliki beberapa saran bagus.

Bagaimana Anda menyajikan gambar-gambar itu? Jika Anda streaming itu melalui PHP, Anda melakukan hal yang sangat buruk, bahkan jika itu sudah dihasilkan.

GAMBAR TIDAK PERNAH STREAM DENGAN PHP. Ini akan memperlambat server Anda, tidak peduli bagaimana Anda menggunakannya.

Tempatkan mereka di folder yang dapat diakses, dengan URI yang bermakna. Kemudian panggil mereka langsung dengan URI mereka yang sebenarnya. Jika Anda membutuhkan pembuatan fly, Anda harus meletakkan .htaccess di direktori gambar yang dialihkan ke skrip php generator hanya jika gambar permintaan tidak ada. (ini disebut strategi cache-on-request).

Melakukan hal itu akan memperbaiki sesi php, browser-proxy, caching, ETAGS, apa pun sekaligus.

WP-Supercache menggunakan strategi ini, jika dikonfigurasi dengan benar.

Saya menulis ini beberapa waktu yang lalu ( http://code.google.com/p/cache-on-request/source/detail?r=8 ), revisi terakhir rusak, tetapi saya kira 8 atau kurang seharusnya berfungsi dan Anda dapat ambil .htaccess sebagai contoh hanya untuk menguji berbagai hal (walaupun ada cara yang lebih baik untuk mengkonfigurasi .htaccess daripada cara saya dulu).

Saya menggambarkan strategi itu dalam posting blog ini ( http://www.stefanoforenza.com/need-for-cache/ ). Mungkin ditulis dengan buruk tetapi dapat membantu memperjelas segalanya.

Bacaan lebih lanjut: http://meta.wikimedia.org/wiki/404_handler_caching