PWA ve AMP: Hangisi Daha İyi ve Birbirlerinden Nasıl Farklılar?

İlk iPhone'un piyasaya sürülmesinden yaklaşık on yıl sonra, mobil web nihayet kullanıcılarının yaşam tarzlarını yakalıyor. Tutturma ve yakınlaştırma, duyarlı sayfalar tarafından silindi. AMP ve yerel uygulamalar yavaş yükleme süreleriyle mücadele eder…

Ancak mobil web için hala önemli bir sorun alanı var: etkileşim. En iyi 1.000 mobil web sitesi, en iyi 1.000 yerel uygulamadan 4 kat daha fazla kişiye ulaşıyor. Bununla birlikte, bu web siteleri, kullanıcılarla mobil uygulamalardan ortalama olarak 20 kat daha az etkileşimde bulunur.

Görünüşe göre mobil web siteleri ziyaretçileri çekebilir, ancak onları tutamaz. Bu sorunu çözen daha yeni teknolojilerden biri, aşamalı web uygulamalarıdır.

Aşamalı web uygulamaları nelerdir?

Aşamalı web uygulamaları, yerel mobil uygulamaların yaptığı gibi görünmek, hissetmek ve çalışmak üzere tasarlanmış mobil web sitesi deneyimleridir. Kullanıcılar, herhangi bir mobil web sitesinde olduğu gibi bir tarayıcıda bunlarla karşılaşır. Bu siteyle etkileşim kurduktan sonra, kullanıcıdan web uygulamasını cihazına yüklemesi istenir. Yüklemeyi seçerlerse uygulama, yerel bir uygulamanın yapacağı şekilde cihaza indirilir.

"Aşamalı web uygulamaları" terimi, 2015 yılında Google tarafından ortaya atıldı. Şirket, aşamalı web uygulamalarının üç kriteri karşıladığını söylüyor:

• Güvenilir – Anında yükleyin ve belirsiz ağ koşullarında bile asla downasaur'u göstermeyin.
• Hızlı – İpeksi pürüzsüz animasyonlarla ve sarsıntılı kaydırma olmadan kullanıcı etkileşimlerine hızla yanıt verin.
• İlgi Çekici – Etkileyici bir kullanıcı deneyimi ile cihazda doğal bir uygulama gibi hissedin.

Bu gereksinimler karşılandıktan sonra mobil web uygulaması indirilebilir olarak kullanıcılara sunulabilir. Aşamalı web uygulamalarına daha derinlemesine dalmadan önce, kısaca yüzeye çıkalım ve yerel uygulamaları ve mobil web'i hızlandıran başka bir teknoloji olan Hızlandırılmış Mobil Sayfaları (AMP) tanımlayalım.

Yerel uygulama nedir?

Yerel uygulamalar, App Store veya Google Play gibi bir pazar yeri aracılığıyla yüklenir ve bir cihazın ana ekranında simgeler olarak yaşar. Belirli bir cihaz için özel olarak tasarlanmıştır ve GPS, kamera, kişi listesi ve daha fazlası gibi tüm özelliklerini kullanabilirler. Bunlar, Google Haritalar, Gmail veya Instagram gibi şu anda cihazınızda olması muhtemel uygulamalardır.

AMP nedir?

Açık kaynaklı Hızlandırılmış Mobil Sayfalar projesi (kısaca AMP), geliştiricilerin benzersiz bir kodlama diliyle neredeyse anında yüklenen web sayfaları oluşturmasına olanak tanır. Bu dil, JavaScript kullanımını kısıtlayan, HTML ve CSS'nin soyulmuş bir sürümüdür. Bu sayfalar, bir kullanıcı tarafından ziyaret edildiğinde sayfanın önbelleğe alınmış bir sürümünü sunan bir CDN'de barındırılır.

Aşamalı web uygulamaları ve yerel uygulamalar

Yerel uygulamalar anında ve sorunsuz kullanıcı deneyimleri sunar ve App Store ve Google Play gibi büyük pazarlar tarafından desteklenir, peki neden geleneksel yerel sürüm yerine aşamalı bir web uygulamasını tercih etmelisiniz? Forbes için yazdığı bir makalede Andrew Gazdecki üst düzey bir açıklama sunuyor:

Mobil web sitelerine ulaşmak hızlı ve kolaydır, ancak kullanıcı deneyimi açısından daha az hoş olma eğilimindedirler. Yerel uygulamalar en iyi kullanıcı deneyimini sağlar, ancak belirli cihazlarla sınırlıdır ve benimsemenin önünde yüksek engeller vardır. Yerel uygulamaların indirilmesi gerekir, bu da öncelikle tüketicilerden önemli ölçüde katılım sağlanması ve dürtüsel davranışın avantajını kaybetmesi anlamına gelir. Bu seçenekler arasında oturmak en yeni mobil çözümdür: PWA.

Daha ayrıntılı bir açıklama için yerel uygulamalar ile aşamalı web uygulamaları arasındaki en büyük farklardan bazılarına göz atalım:

• Özellik kullanımı: Şu anda, web uygulamaları bir cihazın özelliklerinden yararlanabilirken, yerel uygulamalar daha fazlasını yapabilir. GPS, anında iletme bildirimleri ve hareketler gibi şeyler yerel bir uygulamada daha kolay kullanılabilir.
• İçerik kısıtlamaları: Uygulamanıza Google Play veya App Store'da rekabet etme şansı vermek için pazarın kurallarına uymanız gerekir. İçerik kısıtlamaları ve ücretleri, bazı web sitelerinin başarılı yerel uygulamalar oluşturmasını zorlaştırır. Ancak web uygulamaları için ne içerik kısıtlaması ne de ücret uygulanmaz, bu da içerik türünden bağımsız olarak herkesin uygulama oluşturmasını kolaylaştırır.
• Çevrimdışı bağlantı: Burada uç, HTML5'te yerleşik aşamalı web uygulamalarından daha eksiksiz önbelleğe alma sunan yerel uygulamalara gider. Uygulamanızın çevrimdışı çalışması gerekiyorsa, şu anda daha iyi seçenek yereldir.
• Yükleme: Yerel bir uygulamanın yüklenmesi, kullanıcı adına önemli bir işlem gerektirir. Bir pazar yeri açmaları ve bir uygulama aramaları ve ardından indirmeleri gerekiyor. Ciddi bir niyet olmalı. Aşamalı bir web uygulamasının yüklenmesi için çok daha az sürtünme vardır. Cihazınıza bir tane eklemek, ana ekranınızda bir yer imi oluşturmaya benzer. Aşamalı bir web uygulaması yüklemek daha kolaydır, ancak süreç çok daha az tanıdıktır ve bu da erken benimsemeyi engelleyebilir.

• Hız: Şu anda, aşamalı web uygulamaları yerel uygulamaların gerisinde kalıyor. Ancak aradaki farkı sürekli kapatıyorlar. Bir sonraki karşılaştırmayı düşündüğünüzde bu özellikle doğrudur.

Aşamalı web uygulamaları ve AMP karşılaştırması

Gazdecki gibi insanlar, ilerici web uygulamalarının nihayetinde yerel uygulamaların yerini alacağına inanıyor, peki ya AMP? Hızlandırılmış mobil sayfalar burada nerede devreye giriyor ve her ikisi için de bir yer var mı? Bu ikisi arasındaki birkaç önemli fark:

• Keşfedilebilirlik: AMP bu savaşı kazanır. AMP, Google arama sonuçlarında, aşamalı web uygulamalarının arama motorunun keşfedilebilirliğinde bir artış sağlayamadığı bir atlıkarıncanın yardımını alır.
• Etkileşim: Aşamalı web uygulamaları, AMP HTML veya CSS kullanmakla sınırlı değildir, bu nedenle AMP'den çok daha fazla ilgi çekici içerik içerebilirler. JavaScript gerektiren etkileşimli hiçbir şey AMP çerçevesi kullanılarak oluşturulamaz. AMP için dinamik içerik masanın dışındadır.
• Hız: Buradaki avantaj, aşamalı web uygulamalarının etkileşim kazanmasıyla aynı nedenle AMP'ye gidiyor. AMP yalnızca hafif içeriği destekleyebilir, ancak bu, daha hızlı yükleme süreleri sağlar.

Paul Bakaus, Smashing Magazine'de iki format arasındaki farkı çok iyi özetliyor:

Deneyimi güvenilir bir şekilde hızlandırmak için AMP sayfalarını uygularken bazı kısıtlamalarla yaşamanız gerekir. AMP, Anında Bildirimler veya Web Ödemeleri gibi yüksek düzeyde dinamik işlevlere veya ek JavaScript gerektiren herhangi bir şeye ihtiyacınız olduğunda kullanışlı değildir.

Ayrıca, AMP sayfaları genellikle bir AMP Önbelleğinden sunulduğundan, kendi Service Worker'ınız çalışamayacağından, o ilk tıklamada en büyük Aşamalı Web Uygulaması avantajlarını elde edemezsiniz. Öte yandan, platformlar AMP sayfalarını güvenli ve ucuz bir şekilde önceden oluşturabileceğinden, Aşamalı bir Web Uygulaması asla o ilk tıklamada AMP kadar hızlı olamaz; bu özellik, yerleştirmeyi de basitleştirir (örneğin, satır içi görüntüleyiciye).

Ama sonunda, gerçekten birini diğerine tercih etmek zorunda mıyız?

Rekabet üzerinde işbirliği

AMP'yi yalnızca hızlı ama basit bir deneyim oluşturmak için kullanmayı seçebilirsiniz. Dinamik ancak daha yavaş bir kullanıcı deneyimi oluşturmak için aşamalı bir web uygulamasına güvenebilirsiniz. Veya her ikisini de web tasarımınıza dahil ederek hızlı başlayabilir ve hızlı kalabilirsiniz.

Bugün, geliştiricilerin her iki yoldan da yararlanmasıyla birlikte AMP'nin ilerici web uygulamalarıyla birlikte kullanımı daha yaygın hale geliyor.

1. Aşamalı bir web uygulaması olarak AMP

İçeriğiniz öncelikle statikse ve AMP'nin sınırlı işlevselliğine razıysanız, bu seçenek, aşamalı bir web uygulaması olarak ışık hızında deneyimler oluşturmanıza olanak tanır. Örnek olarak AMP, bu şekilde oluşturulmuştur - tamamen AMP ücretli aşamalı web uygulaması. Çevrimdışı erişime izin veren bir hizmet çalışanının yanı sıra “Ana ekrana ekle” başlığını isteyen bir bildirime sahiptir.

2. Aşamalı bir web uygulamasına AMP

AMP ve aşamalı bir web uygulamasını birlikte kullanmanın başka bir yolu, AMP sayfanızı web sitenizin kancası olarak düşünmektir. Kullanıcıyı anlık bir yük ile yakalar ve ardından onları aşamalı web uygulamanıza çeker. Bu, hızlı yüklenen AMP sayfalarını ilk seçeneğe göre daha dinamik bir PWA ile birleştirmenize olanak tanır.

3. Aşamalı bir web uygulamasında AMP

AMP ve PWA'da olduğu gibi, ya hep ya hiç olmak zorunda değildir. Tüm sayfalarınızı AMP ile oluşturmanız gerekmez; ayrıca AMP ve PWA'ları kanca ve çubuk olarak ayırmanıza da gerek yoktur. Artık, aslında tek bir sayfanın yalnızca küçük bir alt bölümünü AMP yapabilir, böylece dinamik işlevsellikten tam bir ödün vermeden boyutunu küçültebilir ve yükleme süresini azaltabilirsiniz.

Bu, AMP'nin bir web sayfasının bir alanı içinde yuvalanmasına izin veren "Gölge AMP" adlı başka bir AMP biçiminin kullanılmasını içerir. Sonuçlar, aşamalı bir web uygulamasının kabuğundaki AMP'dir. Eylem halinde görmek için, Google'ın oluşturduğu ShadowReader adlı demoya göz atın:

Kendi ilerici web uygulamanızı oluşturmaya hazır mısınız?

Web'in keşfedilebilirliği ile hızlı, yerel uygulama benzeri bir deneyim oluşturmak, Google'ın PWA'lar için ölçütlerini karşılamak için kontrol etmeniz gereken tüm kutuları öğrenebileceğiniz buradan başlar. AMP ve PWA'ları birlikte kullanma hakkında daha fazla bilgi için şu adrese göz atın:

• Ben Morss'tan bu konuşma
• Eric Lindley'den bu konuşma

Hazır olduğunuzda, şimdiye kadarki en hızlı kullanıcı deneyiminizi sunmak için Instapage'deki AMP tıklama sonrası açılış sayfası oluşturucuyu kullanmaya başlayın.