Açısal Resim Yönergesi ile Resimleri Optimize Etme

Kara Erickson

Leena Sohoni

Mayıs 2022'de Aurora ve Angular ekipleri, Angular için bir resim yönergesi üzerinde ortak çalışma yapacaklarını duyurdu. Yönerge kısa süre önce Angular 14.2 sürümünün bir parçası olarak geliştirici önizlemesi için yayınlandı. Bu gönderide, yeni resim yönergesinin (NgOptimizedImage) Angular'da resim optimizasyonunu nasıl desteklediği açıklanmaktadır.

Arka plan

Resimler, web kullanıcı deneyiminin ortak ve çok önemli bir bileşenidir.Web sayfalarının %99,9'u bir veya daha fazla resim için istek oluşturur. Ayrıca resimler, sayfa başına 982 kilobayt ortanca değeri ile sayfa ağırlığına en fazla katkıda bulunan faktörlerdir.

Resimler, sayıların ve boyutlarının artması nedeniyle web sayfalarının performansını düşürebilir ve Core Web Vitals metriklerini etkileyebilir. Masaüstü sayfalarının% 79,4'ünde resim, 2021'de Largest Contentful Paint (LCP) öğesi olarak kullanılmıştır. Dolayısıyla optimize edilmiş resimler arayışı, çoğumuz için sürekli bir uğraş haline geldi.

Aurora ekibi, yaygın geliştirici sorunlarına yerleşik çözümler sağlamak için çerçevelerin gücünden yararlanmanın gerekli olduğuna inanıyor. Resim optimizasyonu alanına ilk girişimleri Next.js resim bileşeni oldu. Bu bileşenin, görüntü optimizasyonunda geliştirici deneyimini (DX) iyileştirmenin çerçeve kullanan daha fazla uygulamanın performansını kazanıp kazanmayacağını test etmek için kullandığı bir test alanı olarak düşünülmüştür.

Next.js kullanıcısından Leboncoin'den elde edilen ilk sonuç grubu cesaret vericiydi. Leboncoin, next/image kullanmaya başladıktan sonra LCP'de önemli bir iyileşme (2,4 saniyeden 1,7 saniyeye) elde etti. next/image ürününün toplulukta daha sonra benimsenmesi, LCP eşiklerini karşılayan Next.js kaynaklarının artışında rol oynadı. Yakında diğer çerçevelerdeki benzer özellikler için istekler yaşandı. Taleplerden biri Angular'dı.

Sonuç olarak Aurora, bu çerçevelere yönelik görüntü bileşenlerinin prototipini oluşturmak için Angular ve Nuxt'e danıştı. Nuxt resim bileşeni geçen yıl kullanıma sunuldu. Resim optimizasyonu varsayılanlarını Angular'a getirmek için Angular resim yönergesi (NgOptimizedImage) yayınlandı.

Fırsat

Angular, günümüzde geliştiriciler tarafından kullanılan önde gelen JavaScript çerçevelerinden biridir. Mobil cihazlarda HTTPArchive tarafından taranan 50 binden fazla kaynak tarafından kullanılıyor ve NPM'de haftada neredeyse 3 milyon indirme sayısına sahip.

Core Web Vitals puanlarına bakıldığında, "iyi" LCP eşiklerini karşılayan Angular kaynaklarının yüzdesinin yine de üzerinde çalışılması gerekiyor. Haziran 2022'de, Angular sitelerinin yalnızca% 18,74'ü mobil cihazlarda iyi bir LCP değerine sahipti. Resimler, mobil ve masaüstündeki web sayfalarının% 70'inden fazlasının LCP öğesi olduğundan, optimize edilmemiş LCP resimleri Angular web sitelerindeki düşük LCP'nin birincil nedenlerinden biri olabilir.

Angular image yönergesi, bu sayıları iyileştirmeye yardımcı olmak için tasarlanmıştır.

NgOptimizedImage yönergesi için MVP

Angular görüntü yönergesinin MVP'si, Aurora'nın bugüne kadar oluşturduğu resim bileşenlerinden elde edilen dersleri temel alır ve tasarımı Angular'ın istemci tarafı oluşturma deneyimine uyarlar. Standart resim optimizasyonu problemlerinin birçoğu, aşağıdaki yöntemlerden hangisiyle giderilmiştir?

• Güçlü varsayılan ayarlar sağlama.
• En iyi uygulamalara uygunluğu sağlamak için hata veya uyarı gönderme.

Tasarımın öne çıkan özellikleri şunlardır:

1. Akıllı geç yükleme

   Sayfa yüklendiğinde kullanıcının göremediği resimler (örneğin, ekranın alt kısmındaki resimler veya gizli dönen resimler) ideal olarak geç yüklenmelidir. Geç yükleme, diğer önemli metin, medya veya komut dosyalarını yüklemek için tarayıcı kaynaklarını serbest bırakır. Çoğu resim kritik değildir ve geç yüklenmesi gerekir.Ancak 2021'de sayfaların yalnızca% 7, 8'inde yerel geç yükleme kullanılmıştır.

   Angular resim yönergesi, kritik olmayan resimleri varsayılan olarak geç yükler ve yalnızca priority olarak işaretlenmiş resimleri hevesle yükler. Bu, çoğu resmin en iyi yükleme davranışını göstermesini sağlar.

2. Kritik görüntülere öncelik verme

   Kaynak ipuçları (ör. preload veya preconnect) kritik resimlerin yüklenmesine öncelik vermek için önerilen en iyi uygulamadır. Ancak çoğu uygulama bunları kullanmıyor. 2021 Web Almanağı'na göre mobil sayfaların yalnızca% 12,7'si önceden bağlanma ipuçlarını kullanır. Mobil sayfaların yalnızca% 22,1'i ise önceden yükleme ipuçlarını kullanır.

   Resimler öncelikli olarak işaretlendiğinde, image yönergesi iki cephe üzerinde çalışır.

   • Resmin getirme önceliğini "high" olarak ayarlar, böylece tarayıcının resmi yüksek öncelikli olarak indirmesi gerektiğini bilir.
   • Geliştirme modunda, bir çalışma zamanı kontrolü, görüntünün kaynağına karşılık gelen bir preconnect kaynak ipucunun eklendiğini onaylar.

   Geliştirme modunda, yönerge, LCP resminin beklendiği gibi priority olarak işaretlendiğini doğrulamak için PerformanceObserver API'yi de kullanır. Öğe priority olarak işaretlenmezse bir hata verilir. Bu hata, geliştiriciden LCP resmine priority özelliğini eklemesi gerektiğini belirtir.

   Sonuç olarak, bu otomasyon ve uygunluk kombinasyonu, LCP görüntüsünün preconnect ipucuna ve high olan fetchpriority özellik değerine sahip olmasını ve geç yüklenmemesini sağlar.

3. Popüler resim araçları için optimize edilmiş yapılandırma

   Angular uygulamalarının, genellikle varsayılan olarak optimizasyon hizmetleri sağlayan görsel CDN'lerini kullanması önerilir.

   Direktif, özellikle çekici bir geliştirici deneyimi (DX) sağlayarak resim CDN'lerinin kullanılmasını teşvik eder. Bu yönerge, yapılandırmanızda CDN sağlayıcısını ve temel URL'nizi tanımlamanıza olanak tanıyan bir yükleyici API'sini destekler. Yapılandırıldıktan sonra, yalnızca işaretlemede öğe adını tanımlamanız gerekir. Örneğin,

   // in module providers:
   provideImgixLoader('https://mysite.net/assets/')
   
   // in markup
   <img ngSrc="image.png" >
   <img ngSrc="image2.png" >
   

   Bu, aşağıdaki resim etiketlerini eklemekle eşdeğerdir ve geliştiricilerin her resim için eklemesi gereken işaretlemeyi azaltır.

   <img src="https://mysite.net/assets/image.png">
   <img src="https://mysite.net/assets/image2.png">
   

   Görüntü yönergesi, en popüler resim CDN'leri için optimum yapılandırmaya sahip yerleşik yükleyiciler sağlar. Bu yükleyiciler, her CDN için önerilen resim biçimi ve sıkıştırma ayarlarının kullanıldığından emin olmak için resim URL'lerini otomatik olarak biçimlendirir.

4. Yerleşik hatalar ve uyarılar

   Yönergede, yukarıdaki yerleşik optimizasyonlara ek olarak geliştiricilerin resim işaretlemede önerilen en iyi uygulamaları izlemesini sağlayan yerleşik denetimler de bulunur. Image yönergesi aşağıdaki kontrolleri gerçekleştirir.

   1. Boyutu değiştirilmemiş resimler: Resim işaretlemesinde açık bir genişlik ve yükseklik tanımlanmamışsa image yönergesi hata verir. Boyutlandırılmamış resimler düzen kaymalarına neden olarak sayfanın Cumulative Layout Shift (CLS) metriğini etkileyebilir. Bunu önlemek için önerilen en iyi uygulama, resimlerde width ve height özelliklerinin belirtilmesidir.

   2. En boy oranı: Resim yönergesi, HTML'de tanımlanan width:height en boy oranının, oluşturulan resmin gerçek en boy oranına yakın olmadığını bildirmek için bir hata mesajı verir. Bu durum, resmin ekranda bozuk görünmesine neden olabilir. Bu durum,

      1. Yanlışlıkla farklı boyutları (genişlik ya da yükseklik) tanımlamışsınızdır veya
      2. CSS'nizde yüzde olarak bir boyut tanımladınız ancak diğerini tanımlamadıysanız (örneğin, width: 100%, resmin her iki boyutta da büyümesini sağlamak için height: auto değerine ihtiyaç duyar).

   3. Büyük boyutlu resimler: Resim bir srcset tanımlamıyorsa ve içsel resim, oluşturulan resimden önemli ölçüde daha büyükse yönerge, srcset ve sizes özelliklerinin kullanılmasını öneren bir uyarı görüntüler.

   4. Resim yoğunluğu: srcset içine 3x değerinin üzerinde piksel yoğunluğuna sahip bir resim eklemeye çalışırsanız yönerge hata verir. 2x değerinden yüksek tanımlayıcılar genellikle önerilmez. Bunun nedeni, yüksek çözünürlüklü mobil cihazları büyük resimleri indirmeye zorlamak istemeden istenmeyen bir sonuç olmasıdır. Dahası, insan gözü 2x'in üzerinde büyük bir farkı söyleyemez.

Meydan okumalar

Görüntü optimizasyonu stratejilerini istemci tarafı çerçevesine uygun şekilde uyarlamak, NgOptimizedImage tasarımının yapılmasını gerektiren temel zorluklardan biriydi. Next.js'de varsayılan oluşturma deneyimi Sunucu Tarafı Oluşturma (SSR) veya Statik Site Oluşturma (SSG), Angular'da ise İstemci Tarafı Oluşturma (CSR) şeklindedir. Angular bir SSR kitaplığını (angle/universal) desteklese de çoğu Angular uygulaması (yaklaşık %60) CSR kullanır.

Görüntü yönergesi, tamamen CSR'nin Angular uygulamalarındaki tipik kullanım alanıyla uyumlu olması için oluşturulmuştur. Bu durum ek kısıtlamalara yol açtı ve ekibin MT uygulamaları için belirli optimizasyonların nasıl oluşturulacağını yeniden düşünmesi gerekti.

Karşılaşılan zorluklardan bazıları şunlardır:

1. Destekleyici kaynak ipuçları

   Kritik öğeleri önceden yüklemek, tarayıcının bunları daha önce keşfetmesine yardımcı olur. Ancak, Angular uygulamalarında kaynak ipuçlarını dahil etmek karmaşık bir işlemdir, çünkü:

   Manuel Ekleme: Geliştiricilerin, preload kaynak ipucunu manuel olarak eklemeleri zordur. Angular, projenin tamamı veya web sitesindeki tüm rotalar için, paylaşılan tek bir index.html dosyası kullanır. Dolayısıyla, dokümanın <head> her rota için aynıdır (en azından sunum zamanında). <head> öğesine preload ipucu eklenmesi, kaynağın gerekli olmadığı durumlarda bile tüm rotalar için önceden yükleneceği anlamına gelir. Bu nedenle, preload ipuçlarının manuel olarak eklenmesi önerilmez.

   Oluşturma sırasında otomatik ekleme: CSR uygulamasında oluşturma sırasında dokümanın başına önceden yükleme ipuçları eklemek için çerçevenin kullanılması işe yaramaz. Oluşturma işlemi, JavaScript indirilip yürütüldükten sonra gerçekleştiği için <head>, herhangi bir değer olamayacak kadar geç oluşturulur.

   Yönergenin ilk sürümünde, preload yerine resme öncelik verilmesi için preconnect ve fetchpriority ipuçlarının bir kombinasyonu kullanılır. Ancak Aurora, derleme sırasında kaynak ipuçlarının otomatik olarak eklenmesini sağlamak için Angular KSA ekibiyle birlikte çalışıyor. Gelişmeler için takipte kalın.

2. Sunucudaki resim boyutunu ve biçimini optimize etme

   Angular uygulamaları genellikle istemci tarafında oluşturulduğundan, dosya sistemindeki resimler istek sırasında sıkıştırılamaz ve oldukları gibi sunulur. Bu nedenle, resimleri sıkıştırmak ve isteğe bağlı olarak WebP veya AVIF gibi modern biçimlere dönüştürmek için resim CDN'lerinin kullanılması önerilir.

   Yönerge, resim CDN'lerinin kullanımını zorunlu kılmasa da, bunların yönergeyle birlikte kullanılması önemle tavsiye edilir ve yerleşik yükleyicileri, doğru yapılandırma seçeneklerinin kullanıldığından emin olur.

Etki

Aşağıdaki demoda, Angular resim yönergesinin resim performansı üzerinde yaratabileceği fark gösterilmektedir. İki web sitesini karşılaştırır:

Birinci Web Sitesi: Imgix CDN üzerinden yayınlanan resimlerle birlikte yerel <img> öğeleri kullanır (varsayılan yapılandırma seçenekleriyle).

İkinci Web Sitesi: Tüm resimler için image yönergesini kullanın. Ayrıca, doğrudan yönerge tarafından oluşturulan uyarılar veya hatalar tarafından önerilen optimizasyonları da içerir.

Ekip, görüntü yönergesinin gerçek kurumsal Angular uygulamaları üzerindeki performans etkisini doğrulamak için iş ortaklarıyla birlikte çalıştı.

Bu iş ortaklarından biri de Land's End'dir. Sitelerinin gerçek uygulamalarda görebileceği sonuçlar için iyi bir test durumu olması bekleniyordu.

Lighthouse laboratuvar testi, görüntü yönergesi kullanılmadan önce ve kullanıldıktan sonra KG ortamında gerçekleştirilmiştir. Masaüstünde ortalama LCP değeri 12, 0 saniyeden 3, 0 saniyeye düştü ve LCP değeri% 75 iyileşti. Mobilde ortanca LCP değeri 20,2 saniyeden 12,0 saniyeye düştü (%40,6 iyileşme).

Gelecek Yol Haritası

Bu, Angular resim yönergesinin tasarımının yalnızca ilk bölümüdür. Gelecekteki sürümlerde kullanılması planlanan birçok özellik vardır. Bunlardan bazıları:

• Duyarlı resimler için daha iyi destek:

  NgOptimizedImage, şu anda srcset kullanımını desteklemektedir ancak srcset ve sizes özelliklerinin her resim için manuel olarak sağlanması gerekir. Gelecekte, yönerge otomatik olarak srcset ve sizes özelliklerini oluşturabilir.

• Otomatik kaynak ipuçlarını yerleştirme

  Kritik LCP görüntüleri için önceden bağlanma ve önceden yükleme etiketleri oluşturmak amacıyla Angular KSA ile entegrasyon yapmak mümkün olabilir.

• Angular SSR desteği

  MVP sürümü Angular CSR kısıtlamaları dikkate alınarak tasarlanmıştır, ancak Angular SSR (açısal/evrensel) için görüntü optimizasyonu çözümlerinin araştırılması da önemlidir.

• Geliştirici deneyimindeki iyileştirmeler

  NgOptimizedImage, her resim için width ve height özelliklerinin belirtilmesini gerektirir. Ancak, her görüntü için bunları belirtmek bazı geliştiriciler için yorucu olabilir. Bir sonraki iterasyonda buradaki geliştirici deneyimini aşağıdaki şekilde iyileştirme potansiyeli var:

  1. Açık genişlik/yüksekliğin tanımlanmasını gerektirmeyen ek bir modu (Next.js'deki"fill" resim düzeni seçeneğine benzer) destekler.
  2. CLI entegrasyonunu kullanarak resmin gerçek boyutlarını belirleyerek yerel görüntülerin genişliğini ve yüksekliğini otomatik olarak ayarlayabilirsiniz.

Sonuç

Angular resim yönergesi, 14.2.0 sürümündeki geliştirici önizleme sürümünden itibaren geliştiricilere aşama aşama sunulacaktır. NgOptimizedImage adlı ürünü deneyip geri bildirim gönderin.

Katkıları için Katie Hempenius ve Alex Castle'a özel teşekkürlerimizi sunuyoruz.