WP Görüntü İşleme Sırasıyla Tanışın – Anında Görüntü İşleme Doğru Yapıldı

Temel katkıda bulunanları ve eklenti yazarlarını bir buçuk yıldır arka plan işleme konusunda rahatsız ediyorum. Krogsgard'ın partiden sonra WordCamp EU'da bunun için benimle dalga geçtiği noktaya kadar. "İşte Brad, tekrar arka plan işleme hakkında konuşuyor." Şaka yapıyordu ama bu doğru. Açıkçası bunun önemli bir konu olduğunu düşünüyorum, ancak bu blogda bundan hiç bahsetmediğimi fark ettiğimde şaşırdım.

Ash, bir yıldan biraz uzun bir süre önce arka plan işleme hakkında yazdı. WP Offload S3 için kodladığı harika bir kitaplık sundu ve başkalarının kullanması için GitHub'da bağımsız bir kitaplık olarak yayınladı. Etkilenen tek kişi ben değildim. WooCommerce ve Ninja Forms da bunu kullanıyor.

Kütüphane harika, ama bir sorun olduğunu fark ettim. Her tema/eklenti, bir kuyruğu paylaşmak yerine kendi arka plan işleme kuyruğunu uygularsa, aynı anda birçok işi çalıştırabilir ve sunucu performansını etkileyebiliriz. Gittikçe daha fazla tema/eklenti kendi arka plan işlemlerini yapmaya başladıkça (bu kitaplığı kullansınlar veya kendi işlerini yapsınlar), bu sorun o kadar büyüyecektir.

Tüm temaların/eklentilerin tek bir kuyruğu paylaşabilmesi ve sunucu performansını etkilemememizi sağlamak için en iyi çözümün arka planda işlemeyi WordPress çekirdeğine almak olduğunu düşünüyorum. Ve böylece haçlı seferim başladı.

PressNomics'te Mike Schroder ile harika bir sohbetim oldu. Çekirdeğe giden çok iyi bir yol sundu: WordPress çekirdeğinin ihtiyaç duyduğu ve arka planda işlemeye ihtiyaç duyan bir özellik bulun. Başka bir deyişle, sırt üstü! Geçen yıl görüntü optimizasyonu tam olarak bu şekilde çekirdek haline geldi: duyarlı görüntüleri bindirerek. Arka plan işleme için, anında görüntü işlemeye (OTFIP) bir alternatif bulmayı önerdi. OTFIP'nin WP Boşaltma S3 için de düzenli olarak uğraştığımız bir sorun olduğu ortaya çıktı. Bu, "iki kuş – bir taş" türünden bir şey olabilir. Yıldızlar sıraya giriyordu.

Anında Görüntü İşleme (OTFIP)

OTFIP hakkında birkaç ay önce yazdık ve çözdüğünden daha fazla soruna neden olma eğiliminde olduğunu açıkladık. Özetlemek gerekirse, OTFIP'in çözdüğü ana sorun, asla kullanılmayacak görüntülerin oluşturulmasını (ve depolanmasını) azaltmaktır. Her tema/eklenti, ihtiyaç duydukları görüntü boyutlarını oluşturmak için add_image_size() kullanırsa, görüntü boyutlarının sayısı hızla artar.

Bana inanmıyor musun? En kayıtlı görüntü boyutlarına sahip WordPress kurulumunu tespit etmek için ekip üyeleri arasında küçük bir rekabet var. Ash şimdiye kadar 49 puanla kazanıyor!

Açık olmak gerekirse, WordPress kurulumuna bir resim yüklendiğinde WordPress çeşitli boyutlarda 49 resim oluşturur. Bu, görüntü oluşturma işleminin tamamlanması için bir dakikalık bekleme süresidir. Bir uzuvdan çıkacağım ve bu oluşturulan görüntülerin 29'unun hiçbir zaman kullanılmayacağını ve yine de sabit diskte yer kapladığını tahmin edeceğim. Bu uç bir örnek, ancak WordPress kurulumlarını genellikle 20 kadar kayıtlı görüntü boyutuyla görüyoruz.

OTFIP FTW

Bu sorunu çözmek için bazı geliştiriciler, temalarına/eklentilerine OTFIP kitaplıkları ekler ve ihtiyaç duyduklarında tam olarak ihtiyaç duydukları boyutta görüntüler oluşturur. Örneğin, popüler Aqua Resizer kitaplığını kullandıysanız, temanızda/eklentinizde aşağıdaki işlevi çağırabilirsiniz:

 <?php $resized_image_url = aq_resize( $image_url, $width, $height, $crop ); ?>

Yeniden boyutlandırılmış görüntü henüz mevcut değilse, dosya sisteminde orijinalin yanında oluşturulur ve kaydedilir. Bu kulağa harika geliyor, ancak sayfa yüklenmeden önce görüntünün oluşturulmasını beklemesi gerektiğinden sayfa yükleme süresi büyük ölçüde zarar görüyor. Ve bir sayfada bu çağrılardan bir demet varsa (örneğin, bir arşiv sayfasındaki her blog yazısı için bir tane) bu gülünç derecede uzun bir bekleyiş ve hatta muhtemelen zaman aşımı olabilir. Ayrıca, görüntü yeniden boyutlandırma, CPU ve bellek yoğun bir işlemdir. Peki bu sayfalardan birkaçı aynı anda yüklendiğinde sunucuya ne olur? Hata.

Son olarak, orijinal görüntü Ortam Kitaplığından kaldırıldığında ne olduğunu tahmin edin. Evet, yeniden boyutlandırılan görüntü geride kalıyor çünkü WordPress çekirdeği bunu bilmiyor. Artı WordPress çekirdeği, yeniden boyutlandırılmış görüntüleri srcset , bu nedenle duyarlı görüntüler olmaz.

İhtiyacımız olan, sayfa yükleme süresini etkilemeyen, sunucu kaynaklarına dikkat eden ve bugün olduğu gibi WordPress çekirdeği ile sorunsuz çalışan bir çözüm.

Görüntü İşleme Kuyruğu Doğuyor

Geçen Aralık ayındaki WordCamp ABD Katılımcı Günü'nde, OTFIP'in tüm avantajlarına sahip olacak, ancak hiçbir olumsuzluk içermeyen bir görüntü işleme kitaplığını bir araya getirmeye karar verdim. Ve işte, birkaç saat sonra Görüntü İşleme Kuyruğu doğdu.

Bunu kullanmak oldukça basittir. Görüntü İşleme Sırasını ve bağımlılıklarını yüklemek için bir dosya eklemeniz yeterlidir:

 require_once TEMPLATEPATH . '/image-processing-queue/image-processing-queue.php';

Ardından, bir görüntünün çıktısını almak için tema/eklenti şablonlarınızdaki ipq_get_theme_image() işlevini çağırabilirsiniz:

 echo ipq_get_theme_image( $post_id, array( array( 600, 600, false ), array( 1280, 1280, false ), array( 1600, 1600, false ), ), array( 'class' => 'header-banner' ) );

Tüm görüntüler zaten oluşturulmuşsa, çıktı şöyle görünür:

 <img class="alignnone size-full wp-image-22495 header-banner" width="4096" height="3072" src="https://domain.com/wp-content/uploads/2017/03/image.jpg">

Henüz bir görüntü oluşturulmamışsa, dışarıda bırakılır ve arka planda oluşturulmak üzere kuyruğa alınır. Bu nedenle, yukarıdaki işlev çağrısını ilk kez çalıştırıyorsanız, şu çıktıyı elde edebilirsiniz:

 <img class="alignnone size-full wp-image-22495 header-banner" width="4096" height="3072" src="https://domain.com/wp-content/uploads/2017/03/image.jpg">

Görsellerin var olup olmamasından bağımsız olarak hemen sayfayı yüklüyoruz ve görsel üretimini arka plana atıyoruz. Görüntü oluşturmak için sayfa yüklemesini durdurmak yok.

Ayrıca, yeni bir görüntü boyutu oluşturulduğunda, WordPress çekirdeğinin yeniden boyutlandırılmış görüntünün var olduğunu anlaması için eke meta veriler ekleriz. Bu, WordPress çekirdeğinin, görüntü etiketini oluştururken oluşturulan görüntü boyutlarını srcset otomatik olarak eklemesini sağlar. Ayrıca, orijinal görüntü Medya Kitaplığından kaldırıldığında WordPress çekirdeğinin oluşturulan görüntüleri silmesine izin verir. Meta veriler, add_image_size() ile kayıtlı resim boyutları için eklenen meta verilerle tam olarak aynı biçimdedir. Görüntü boyutu meta verilerini kullanan tüm temalar/eklentiler de bunu kullanabilir ve bu nedenle oluşturulan görüntü boyutlarını kullanabilir.

Sonraki Durak, WordPress Çekirdeği

Bunun arka plan işleme kitaplığıyla birlikte WordPress çekirdeğine dahil edildiğini görmek isterim. WordPress tema/eklenti geliştiricileri için görüntüleri yönetmeyi çok daha kolay hale getirecek ve umarız OTFIP kitaplıklarının tamamen terk edilmesiyle sonuçlanacaktır. Bunun gibi bir şeyin WordPress çekirdeğinin yeni sürüm döngülerine nasıl uyacağından emin değilim, ancak eminim ki insanları bu konuda rahatsız etmeye devam edeceğim.

Bir tema/eklenti yazarıysanız, lütfen bir dahaki sefere OTFIP kitaplığı yerine Görüntü İşleme Kuyruğu kullanmayı düşünün. Herhangi bir olumsuzluk olmadan tüm avantajları elde edersiniz. Ve bu kitaplık ne kadar çok kullanılırsa, onu WordPress çekirdeğine yerleştirmek o kadar kolay hale getirilebilir.

Tabii ki burada hala iyileştirme için çok yer var. Ash şu anda arka plan işleme kitaplığı üzerinde çalışıyor ve HTTP çalışanını devre dışı bırakma ve CLI aracılığıyla birden çok kuyruk çalışanı oluşturma özelliğini ekliyor. Bu, daha güvenilir çalışanlar isteyen sunucuları üzerinde tam denetime sahip kişiler için harikadır. Ayrıca kuyruk arka ucunu yeniden oluşturarak işleri varsayılan olarak veritabanına kaydediyor, ancak herhangi bir kuyruk arka ucunda değiş tokuş yapmanıza izin veriyor. Örneğin, işlerinizi depolamak için Redis'i kullanabilirsiniz.

Görüntü İşleme Sırasında veya WP Arka Plan İşleme'de bir hata bulursanız, lütfen uygun GitHub deposunda bir sorun (veya bir çekme isteği) açın.

OTFIP kitaplıklarını kullandınız mı? Bunun yerine Görüntü İşleme Kuyruğuna bir şans verir misiniz? Peki ya arka planda işleme? Orada ne olduğunu görmek istersin? Yorumlarda bize bildirin.

Güncelleme 2017-03-08: Bu kitaplığı WordPress.org'a eklenti olarak ekledim.