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.
![Son bir yılda Angular web siteleri için LCP](https://developer.chrome.com/static/blog/angular-image-directive/image/lcp-angular-websites-th-313c9b6e8afd2.png?authuser=6&hl=tr)
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:
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.Kritik görüntülere öncelik verme
Kaynak ipuçları (ör.
preload
veyapreconnect
) 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. Öğepriority
olarak işaretlenmezse bir hata verilir. Bu hata, geliştiriciden LCP resminepriority
özelliğini eklemesi gerektiğini belirtir.Sonuç olarak, bu otomasyon ve uygunluk kombinasyonu, LCP görüntüsünün
preconnect
ipucuna vehigh
olanfetchpriority
özellik değerine sahip olmasını ve geç yüklenmemesini sağlar.- Resmin getirme önceliğini
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.
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.
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
veheight
özelliklerinin belirtilmesidir.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,- Yanlışlıkla farklı boyutları (genişlik ya da yükseklik) tanımlamışsınızdır veya
- 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çinheight: auto
değerine ihtiyaç duyar).
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
vesizes
özelliklerinin kullanılmasını öneren bir uyarı görüntüler.Resim yoğunluğu:
srcset
içine3x
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:
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>
öğesinepreload
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çinpreconnect
vefetchpriority
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.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.
![Film şeridi karşılaştırması: Yerel resim etiketleri içeren Birinci Web Sitesi ile Angular resim yönergesi içeren İkinci Web Sitesi karşılaştırması.](https://developer.chrome.com/static/blog/angular-image-directive/image/filmstrip-comparison-web-c03e5b7f51387.png?authuser=6&hl=tr)
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 andasrcset
kullanımını desteklemektedir ancaksrcset
vesizes
özelliklerinin her resim için manuel olarak sağlanması gerekir. Gelecekte, yönerge otomatik olaraksrcset
vesizes
ö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çinwidth
veheight
ö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:- 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. - CLI entegrasyonunu kullanarak resmin gerçek boyutlarını belirleyerek yerel görüntülerin genişliğini ve yüksekliğini otomatik olarak ayarlayabilirsiniz.
- Açık genişlik/yüksekliğin tanımlanmasını gerektirmeyen ek bir modu (Next.js'deki"
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.