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 birlikte çalışacaklarını duyurdu. Direktif, Angular 14.2 sürümünün bir parçası olarak kısa süre önce geliştirici önizlemesi için yayınlandı. Bu yayında, yeni resim yönergesinin (NgOptimizedImage) Angular'da resim optimizasyonunu nasıl desteklediğinden bahsedilmektedir.

Arka plan

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

Resimler, sayıları ve boyutlarındaki artış nedeniyle web sayfalarının performansını düşürebilir ve Önemli Web Verileri metriklerini etkileyebilir. 2021'de masaüstü sayfalarının% 79,4'ünde bir resim, Largest Contentful Paint (LCP) öğesiydi. Dolayısıyla, optimize edilmiş resimler oluşturmak birçoğumuz için sürekli bir uğraş haline geldi.

Aurora ekibi, geliştiricilerin karşılaştığı yaygın sorunlara yerleşik çözümler sağlamak için çerçevelerin gücünden yararlanmanın önemli olduğuna inanıyor. Resim optimizasyonu alanındaki ilk girişimleri, Next.js resim bileşeni oldu. Bu bileşeni, resim optimizasyonunun geliştirici deneyimini (DX) iyileştirmenin, çerçeveleri kullanan daha fazla uygulama için performans kazancı sağlayıp sağlayamayacağına dair bir test alanı olarak değerlendirdiler.

Next.js kullanıcısı Leboncoin'in verdiği 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) gözlemledi. Toplulukta daha sonra next/image kullanılması, Next.js kaynaklarının LCP eşiklerine ulaşmasında önemli bir rol oynadı. Kısa süre içinde diğer çerçevelerdeki benzer özellikler için istekler almaya başladılar ve bunlardan biri Angular oldu.

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

Fırsat

Angular, günümüzde geliştiricilerin kullandığı önde gelen JavaScript çerçevelerinden biridir. Mobil cihazlarda HTTPArchive tarafından taranan kaynakların 50 binden fazlası tarafından kullanılıyor ve NPM'de haftalık 3 milyon indirme sayısına ulaşılıyor.

Core Web Vitals puanlarına bakıldığında, "iyi" LCP eşiklerini karşılayan Angular kaynakları yüzdesi için hâlâ çalışma yapılması gerekiyor. Haziran 2022'de Angular sitelerinin yalnızca% 18,74'ü mobil cihazlarda iyi LCP değerine sahipti. Mobil ve masaüstündeki web sayfalarının% 70'inden fazlası için resimler LCP öğesi olduğundan, optimize edilmemiş LCP resimleri, Angular web sitelerinde düşük LCP'nin ana nedenlerinden biri olabilir.

Angular resim yönergesi, bu sayıları artırmaya yardımcı olmak için tasarlanmıştır.

NgOptimizeImage direktifi için MVP

Angular resim yönergesinin MVP'si, tasarımı Angular'ın istemci tarafı oluşturma deneyimine uyarlarken Aurora'nın bugüne kadar oluşturduğu resim bileşenlerinden alınan derslere dayanarak geliştirilmiştir. Standart resim optimizasyonu sorunlarının çoğu, aşağıdaki adımlardan biri kullanılarak giderilmiştir:

• Güçlü varsayılanlar sağlama.
• En iyi uygulamalara uygunluğu sağlamak için hata veya uyarı verme.

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

1. Akıllı geç yükleme

   Sayfa yüklendiğinde kullanıcının göremeyeceği resimler (örneğin, ekranın alt kısmındaki resimler veya gizli dönen resimler) ideal olarak geç yüklenmiş olmalıdır. Geç yükleme, tarayıcı kaynaklarını diğer önemli metin, medya veya komut dosyalarını yükleyebilmesi için serbest bırakır. Çoğu resim kritik değildir ve geç yüklenmesi gerekir.Bununla birlikte, 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şaretlenen resimleri etraflıca yükler. Bu, çoğu resmin optimum yükleme davranışını sergilemesini sağlar.

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

   Kaynak ipuçları eklemek (ör. preload veya preconnect) kullanmak önerilen en iyi uygulamalardan biridir. Ancak çoğu uygulama bunları kullanmamaktadır. 2021 Web Almanağı'na göre mobil sayfaların sadece% 12,7'si önceden bağlantı ipuçlarını, mobil sayfaların yalnızca% 22,1'i önceden yükleme ipuçlarını kullanır.

   Resimler öncelikli olarak işaretlendiğinde resim yönergesi iki ön tarafta çalışır.

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

   Geliştirme modunda direktif, LCP görüntüsünün beklendiği gibi priority olarak işaretlendiğini doğrulamak için PerformanceObserver API'yi de kullanır. priority olarak işaretlenmemişse bir hata verilir ve geliştiriciden, LCP görüntüsüne priority özelliğini eklemesi istenir.

   Sonuçta bu otomasyon ve uygunluk kombinasyonu, LCP resminde preconnect ipucuna, high değerine sahip 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 resim CDN'leri kullanması önerilir.

   Bu direktif, resim CDN'lerinin uygulamada yapılandırılması için özellikle cazip bir geliştirici deneyimi (DX) sunarak kullanılmasını teşvik eder. 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, işaretlemede öğe adını tanımlamanız yeterlidir. Ö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 eklemeye eşdeğerdir ve geliştiricilerin her resme 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, yerleşik yükleyicilere en popüler görüntü CDN'leri için optimum yapılandırma sunar. Bu yükleyiciler, her CDN'de önerilen resim biçimi ve sıkıştırma ayarlarının kullanılmasını sağlamak için resim URL'lerini otomatik olarak biçimlendirir.

4. Yerleşik hatalar ve uyarılar

   Direktif, yukarıdaki yerleşik optimizasyonlara ek olarak, geliştiricilerin resim işaretlemede önerilen en iyi uygulamalara uyduğundan emin olmayı sağlayan yerleşik denetimler de içerir. Resim yönergesi aşağıdaki kontrolleri gerçekleştirir.

   1. Boyutlandırılmamış resimler: Resim işaretlemesi açık bir genişlik ve yükseklik tanımlamamışsa resim yönergesi hata bildirir. Boyutlandırılmamış resimler düzen kaymalarına neden olabilir ve bu durum 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 bir hata göndererek HTML'de tanımlanan width:height en boy oranının, oluşturulan resmin asıl en boy oranına yakın olup olmadığını geliştiricilere bildirir. Bu durum, görüntünün ekranda bozuk görünmesine neden olabilir. Bu, aşağıdaki durumlarda gerçekleşebilir:

      1. Yanlışlıkla farklı boyutlar (genişlik veya yükseklik) tanımlamışsınızdır veya
      2. CSS'nizde bir boyutu yüzdeye göre tanımlarken diğerini tanımlamadıysanız (örneğin, width: 100%, resmin her iki boyutta da büyütülebilmesi için height: auto gerekir).

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

   4. Resim yoğunluğu: srcset içine, piksel yoğunluğu 3x üzerinde olan bir resim eklemeye çalışırsanız yönerge hata verir. 2x üzerindeki tanımlayıcılar, yüksek çözünürlüklü mobil cihazları büyük boyutlu resimleri indirmeye zorlamak gibi istenmeyen bir sonuç doğuracağından genellikle önerilmez. Dahası, insan gözü 2x'in üzerindeki bir farkı ayırt edemez.

Meydan okumalar

NgOptimizedImage tasarlanırken en büyük zorluk, resim optimizasyonu stratejilerini istemci tarafı çerçeveyle çalışacak şekilde uyarlamaktı. Next.js'de Sunucu Tarafında Oluşturma (SSR) veya Statik Site Oluşturma (SSG), Angular'da ise İstemci Tarafında Oluşturma (CSR) varsayılan oluşturma deneyimidir. Angular, SSR kitaplığını (angle/universal) desteklese de Angular uygulamalarının çoğu (~%60) CSR'yi kullanır.

Resim yönergesi, tamamen CSR'nin Angular uygulamalarındaki genel kullanım senaryosuna uyacak şekilde oluşturulmuştur. Bu durum ek kısıtlamaları beraberinde getirdi ve ekip, MT uygulamaları için özel optimizasyonların nasıl geliştirileceğini yeniden düşünmek zorunda kaldı.

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

1. Destekleyici kaynak ipuçları

   Kritik öğeleri önceden yüklemek, tarayıcının bu öğeleri daha erken keşfetmesine yardımcı olur. Ancak, Angular uygulamalarında kaynak ipuçları eklemek 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 tek bir paylaşılan index.html dosyası kullanır. Bu nedenle, dokümanın <head> özelliği her rota için aynıdır (en azından servis zamanında). <head> öğesine herhangi bir preload ipucu eklemek, gerekli olmadığında bile kaynağın 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: Bir CSR uygulamasında oluşturma sırasında dokümanın başına önceden yükleme ipuçları eklemek üzere çerçeveyi kullanmak işe yaramaz. Oluşturma işlemi JavaScript indirilip yürütüldükten sonra gerçekleştiğinden <head> öğesi herhangi bir değer içermeyecek kadar geç oluşturulur.

   Direktifin ilk sürümünde, preconnect ve fetchpriority ipuçlarının bir kombinasyonu preload yerine resme öncelik verir. Ancak Aurora, derleme zamanında kaynak ipuçlarının otomatik olarak eklenmesini etkinleştirmek için Angular CLI ekibiyle şu anda çalışıyor. Bizi izlemeye devam edin.

2. Sunucudaki resim boyutunu ve biçimini optimize etme

   Angular uygulamaları genellikle istemci tarafında oluşturulduğu için dosya sistemindeki resimler istek zamanında sıkıştırılamaz ve olduğu 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.

   Bu yönerge, görüntü CDN'lerinin kullanılmasını zorunlu kılmasa da yönergeyle birlikte kullanılması kesinlikle önerilir. Dahili yükleyiciler doğru yapılandırma seçeneklerinin kullanılmasını sağlar.

Etki

Aşağıdaki demo, Angular resim yönergesinin resim performansında oluşturabileceği farkı gösterir. İki web sitesini karşılaştırır:

Web Sitesi Bir: Imgix CDN üzerinden sunulan görüntülerle (varsayılan yapılandırma seçenekleriyle) yerel <img> öğeleri kullanır.

Web Sitesi İki: Tüm resimler için resim yönergesini kullanın. Ayrıca, yönergenin verdiği hatalar veya uyarılar tarafından doğrudan önerilen optimizasyonları da içerir.

Başarı: Bu demoları fiziksel bir Moto G4 cihazda WebPageTest laboratuvar testleriyle çalıştırdığınızda LCP'de% 56'lık önemli bir iyileşme elde ediliyor. Yerel resim etiketlerinin kullanıldığı Web Sitesi Bir'de 4,5 saniyelik orijinal LCP, resim yönergesi kullanılarak İkinci Web Sitesi'nde 2 saniyeye indirilir.

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'di. Sitelerinin, gerçek uygulamaların karşılaşabileceği sonuçlar açısından iyi bir test senaryosu olması bekleniyordu.

Ekiplerin kalite güvencesi ortamlarında Lighthouse laboratuvar testi, görüntü yönergesi kullanılmadan önce ve kullanıldıktan sonra gerçekleştirildi. Masaüstünde ortalama LCP değeri 12, 0 saniyeden 3, 0 saniyeye düştü. Bu da LCP'de% 75'lik bir iyileşme sağladı. Mobil cihazlarda ortalama LCP 20,2 saniyeden 12,0 saniyeye düştü (%40,6 iyileşme).

Not: Yukarıdaki laboratuvar testinin yalnızca yönergenin potansiyeline dair genel bir gösterim amaçlı olduğunu unutmayın. Performans etkisini doğrulamak için daha çok alan verileri tercih edilir. Aurora ekibi, bu verilere ulaşmak için şu anda birkaç prodüksiyon iş ortağıyla çalışıyor. Mevcut olduğu anda blog yayını da güncellenecektir.

Geleceğin Yol Haritası

Bu, Angular resim yönergesinin tasarımının yalnızca ilk bölümüdür. Gelecekteki sürümler için planlanan birçok başka özellik bulunmaktadır. Bunlardan bazıları:

• Duyarlı resimler için daha iyi destek:

  NgOptimizedImage şu anda srcset kullanımını desteklemektedir ancak srcset ve sizes özellikleri her resim için manuel olarak sağlanmalıdır. Gelecekte, direktif srcset ve sizes özelliklerini otomatik olarak oluşturabilir.

• Kaynak ipuçlarını otomatik olarak yerleştirme

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

• Angular SSR desteği

  MVP sürümü, Angular MT kısıtlamaları dikkate alınarak tasarlanmıştır, ancak Angular SSR (açısal/evrensel) için resim optimizasyonu çözümlerini araştırmak da önemli olacaktır.

• Geliştirici deneyimiyle ilgili iyileştirmeler

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

  1. Tanımlanması için açık bir genişlik/yükseklik gerektirmeyen ek bir modu (Next.js'deki"fill" resim düzeni seçeneğine benzer) destekleyin.
  2. Resmin gerçek boyutlarını belirleyerek yerel görüntülerin genişliğini ve yüksekliğini otomatik olarak ayarlamak için CLI entegrasyonunu kullanma.

Sonuç

Angular resim yönergesi, 14.2.0 sürümündeki geliştirici önizleme sürümünden itibaren aşamalı olarak geliştiricilere sunulacaktır. NgOptimizedImage adlı satıcıyı deneyin ve geri bildirim gönderin.

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