Mobil Deneyimde Hız Beklentileri – Need For Speed

Günümüzde insanların mobil deneyimden beklentileri gittikçe yükselmekte ve buna bağlı olarak sayfaların olabildiğince hızlı açılması, ve kullanıcının beklentisini karşılayacak şekilde kurgulanmış olması gerekmektedir.

DoubleClick, 2016 Eylül’de yayınladığı çalışmasında yüklenmesi 3 saniyeden fazla süren mobil sayfaların %53 oranında terk edildiğini açıklamıştır.

Yine aynı makalede 5 saniye ile 19 saniyede yüklenen sayfaların karşılaştırması yapılmış.

Sonuç olarak 5 saniyede yüklenen sayfadan 19 saniyede yüklenen sayfaya oranla:

• %70 daha uzun oturum süresi,
• %35 daha düşük hemen çıkma oranı (bounce rate),
• 2X daha fazla gelir yakalandığı tespit edilmiştir.

Bu nedenle Google’ın son dönemde Mobile First Indexing’in yanı sıra AMP ve PWA için de kolları sıvaması pek de şaşırtmıyor.

Progressive Web Apps Nedir?

Google, Progressive Web Apps’i, muhteşem bir kullanıcı deneyimi oluşturmanın yeni yolu olarak tanımlıyor.

Öne çıkardığı en temel özellikler ise;

Güvenilir: Sürekli olmayan internet bağlantılarında bile anında yükleniyor, asla downasaur (internet bağlantısı olmadığında çıkan dinozor) göstermiyor,
Hızlı: Kullanıcının hareketlerine “janky scrolling” denilen, gecikmeli şekilde cevap vermiyor, tam tersine pürüzsüz bir akıcılık söz konusu.
Kullanıcıyı bağlar nitelikte: Klasik bir uygulama gibi davranmasına rağmen daha iyi bir deneyim yaşatıyor.

Tüm bunların dışında tabii ki en çok üstünde durulan, iki önemli özelliği daha var:

Kullanıcının cihazının ana ekranına eklenebilmeleri ve push notification gönderebilmeleri.

Kısaca PWA (Progressive Web Apps) için şöyle diyebiliriz: bir web sitesi düşünün, hem app gibi davranabilsin hem de web teknolojilerini kullanabilsin.

Peki bu PWA web ve mobil uygulamaların en iyi yanlarını bir araya getirmeyi nasıl başarıyor?

Aslında çok basit, hızlı ve offline çalışması cache, ve bildirim yollayabilmesi Push API sayesinde.

Progressive Web Apps Avantajları

• Hızlı, güvenilir, kullanıcıyı bağlayabilen ve etkileşime geçiren özellikte olması,
• Klasik uygulamalara göre hem yapım aşaması hem bakım aşamalarının çok daha kolay olması,
• İlerici (progressive) olması: kullanıcının cihaz ve tarayıcısından maksimum düzeyde yararlanabiliyor olması,
• Keşfedilebilir olması: PWA’ler aslında bir web sitesi olduğu için, arama motorları tarafından keşfedilebilecekler. Bu da klasik uygulamalara göre önemli bir artı.
• Bağlanılabilir olmaları (linkable):Yine web sitesinden geçen önemli bir özellik. URL olarak paylaşılabilir ya da yer imlerine eklenebilirler.
• Responsive olmaları,
• Bağlantıya bağımlı olmamaları: cache sayesinde internet bağlantısı olmadan da çalışabiliyorlar.
• Güvenilir olmaları: HTTPS kullanmak zorunlu.
• Kolay yüklenebilir olmaları: App Store, Google Play ya da başka bir yere gitmeye gerek kalmadan ekranımızda yerlerini almaları.

İyi Bir PWA Nasıl Olmalı?

Yukarıda sıralanan bir çok artı özelliğin gerçekleşebilmesi PWA’lerin doğru kurgulanıp hayata geçirilmesine bağlı.

İyi bir PWA,

Bağlantı olmadan da çalışabilen,
Kullanıcıların tarayıcı özelliklerini en iyi şekilde kullanabilen,
Kullanıcıları uğraştırmadan hızlı içerik sunup,
Aynı zamanda ana ekranlarına yine fazla efora gerek kalmadan inebilen
Doğru kurgusu sayesinde arama motorlarınca taranıp indexlenebilen yapıda olmalıdır.

Gereksinimler:

• Geçerli HTTPS bağlantısı,
• Geçerli ve yüklenmiş JSON Manifest,
• Service Worker.

Peki Neden PWA?

Google’ın kendi sözüyle:

• Kullanıcıların ana ekranında yer etmenin önemi,
• Bağlantı koşulları ne olursa olsun istikrarlı bir şekilde çalışması,
• Daha fazla kullanıcı bağlılığı sağlaması,
• ve daha fazla dönüşüm getirme olasılığı var

Google’dan Gabor Cselle’in çalışmasına göre, klasik uygulamaların her aşamasında %20 kullanıcı kaybediliyor.

Bu noktada PWA, bu aşamaları içermediği için çok daha verimli hale geliyor.

• Üçüncü parti bir sistem kullanmadan push notification gönderme,
• Hız,
• Offline çalışabilme,
• Geofence (Service Workers ile coğrafi sınırlama özelliği kullanılabilir)

Başarılı PWA Örnekleri

Flipkart – Hindistan’ın en büyük e-Ticaret sitesi

Sonuçlar:

–3x sitede geçirilen zaman

–%40 daha yüksek yeniden bağlanma

–%70 daha yüksek dönüşüm oranı

–3x daha az data kullanımı

Housing.com – Hindistan’ın en büyük start-uplarından biri

Sonuçlar

– %38 daha fazla dönüşüm

– %40 daha düşük hemen çıkma oranı

– %10 daha uzun oturum süresi

– %30  daha hızlı yüklenme

AliExpress

Sonuçlar

– %104 tüm tarayıcılarda; %82 de iOS dönüşüm artışı

– 2X oturum başına ziyaret edilen sayfa sayısı

– %74 oturum başına harcanan zamandaki artış

eXtra Electronics – Suudi Arabistan e-Ticaret sitesi

Results

-%12 CTR artışı

– %100 push notification sayesinde aran satış

Jumia – e- Ticaret Sitesi, Afrika

Sonuçlar

– 9X push notification sayesinde terk edilen sepetlerdeki dönüşüm artışı

BaBe – Endonezya’nın En Büyük Haber Kaynağı

Sonuçlar

-Klasik uygulamaya göre sitede geçirilen sürede artış

-Klasik uygulamaya göre makale okunma sayılarında artış

Washington Post

Kullanıcılarının karşısına PWA ile çıkan ilk sitelerden biri oldu, sayfa açılma hızı 80 milisaniye olarak ölçüldü.

Türkiye’den bir örnek: Mynet

%76 daha hızlı sayfalar, %22 sayfa derinliği ve sitede geçirilen sürede %36 artış metriklerine ulaştı. Mynet’i Add to Home Screen ile 1K’dan fazla kullanıcı ana ekranına ekledi. Bu kullanıcılardan 2.4 kat daha fazla oturum kazanıldı.

PWA Hangi Bileşenlerden Oluşur?

PWA henüz yeni, fakat buna rağmen çoğu platformu (aslında tarayıcıyı desek daha doğru olur) desteklemekte.

Microsoft, Progressive Web Apps’i desteklediklerini ve Edge için de yakında kullanılabilir olacağını duyurmuştu, 6 Şubat 2018’de de kendi blogundan müjdeyi verdi.

Apple ise Safari tarayıcı için beş senelik roadmaplerine eklediklerini belirtmiş.

PWA için HTTPS dışında gereken bileşenler şunlar:

• Service Workers,
• Application shell,
• Cache API ve Push API kullanımı,
• JSON Manifest: Tarayıcıya klasik app gibi yüklenebilir olduğunu söylemek için yazılıyor.

Service Workers

Service Workers, Progressive Web Apps’in arkasındaki biraz karışık ama bir o kadar da güçlü teknolojidir.

Bu JavaScript dosyası sayesinde, offline çalışabilme, push notification gönderme, içeriklerin cachelenmesi, güncellenmesi ve daha birçok önemli iş gerçekleşir.

Service Workers’ın yaptıkları:

-Push notifications: kullanıcılara yeni bir içerik ya da offer sunulabilir.

-Arkaplan eşlemesi: kullanıcılar uygulamayı kullanmıyorken güncelleme,

-Offline caching: kullanıcıların internet bağlantısı yokken de kullanabilmelerini sağlama,

-Konum belirleme, ya da cihazın jiroskop datası gibi diğer hardware-querying datalarını işleme.

App Shell

Minimum düzeyde HTML, CSS ve JavaScript kullanan bileşendir. App Shell modeli sayesinde uygulamanın arayüzü (UI elementi) ve içeriği ayrı tutulur ve ayrı ayrı cachelenir.

İdeal olan, uygulamamızın kabuğu olan App Shell’i bir kere cache’letip sonraki her ziyarette çok hızlı açılmasını ve böylece kullanıcının hızı fark etmesini sağlamaktır.

Kısaca Application Shell mimarisi doğru kurgulandığında beklenti:

-Hızlı yüklenmesi,

-Cachelenmesi,

-Dinamik olarak içerik gösterebilmesidir.

PWA ve SEO’nun Geleceği

Peki bu yeni teknoloji GoogleBot gibi robotlar tarafından crawl edilebilecek mi?

Bunun cevabı çok da kolay değil. Öncelikle belirtmek lazım ki, Google AMP gibi bu teknolojiyi de epey öne çıkarıyor ve kullanılması için teşvik ediyor. Bu da aslında belki şu an için tamamıyla crawl edilemese bile ilerde kesinlikle bu sorunun çözüleceğini, hatta belki de sıralama algoritmasında artı puan kazandıracak şekilde yerini alacağını düşündürtüyor.

Şu anki duruma baktığımızda ise, PWA JavaScript frameworkü kullandığı için hali hazırda JavaScript ve AJAX’a nasıl davranıyorsa Progressive Web Apps’lere de öyle davranacaktır.

Dolayısıyla bu noktada, karışık ve yüklü JavaScript yapıları yerine bu makaledeki en iyi kullanım şekillerini izlemekte, ve yayınlandıktan sonra da yine uygulamayı takip ederek optimizasyon yapmak gerekeceğini belirtmekte fayda var.

PWA Checklist – Sitenizi PWA’a Adapte Etmeden Önce Kontrol Etmeniz Gerekenler

1. Sitenizi HTTPS‘e geçirin
2. Tarayıcı önbelleklemeden yararlanın
3. Açılmayı geciktiren JavaScript elementlerini kaynak kodunda öteleyin
4. Kullanılmayan JavaScript kütüphanelerine verilen linkleri kaldırın
5. Birden fazla JavaScript kütüphanesi kullanmaktan kaçının
6. Kullanılmayan CSS ve JavaScript elementlerini kaldırın
7. JavaScript bağımlılıklarını azaltın
8. Doğru görsel formatlarını kullanın (fotoğraflar için JPEG ya da WebP, logolar ve ikonlar için SVG ya da PNG)
9. Görselleri ImageOptim gibi programlarla sıkıştırın (küçük görsellerin 10, büyüklerin 100 KB’dan fazla olmamasına özen gösterin)
10. Görselleri doğru boyutlandırın
11. Video çözünürlüklerini optimize edin
12. Meta viewport etiketini kullanın: <meta name=”viewport” content=”width=device-width,minimum- scale=1.0”>

PWA İçin Faydalı Araçlar ve Kaynaklar

Burada bahsettiğimiz maddelerin çoğunun uygulanıp uygulanmadığını, sayfanızı sağ tıkladıktan sonra inspect -> audits sekmesine gelip ”perform an audit” seçeneğini seçerek Lighthouse içerisinden de kontrol edebilirsiniz.

Aynı kontrolleri Google Chrome Web Store’dan Lighthouse uygulamasını yükleyerek de gerçekleştirebilirsiniz.

Aklınıza takılan sorular için bizlere mesaj gönderebileceğiniz gibi,

Progressive Web App Summit 2016 videolarını da izleyebilir:

Ya da Stackoverflow üzerinden de çeşitli PWA soru cevaplarını inceleyebilirsiniz.

---

Kaynaklar

1. https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
2. https://developers.google.com/web/progressive-web-apps/checklist
3. https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
4. https://www.awwwards.com/brain-food-perceived-performance/
5. https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https
6. https://developers.google.com/web/progressive-web-apps/
7. https://sites.google.com/view/progressivewebapps/case-studies
8. https://developers.google.com/speed/docs/insights/rules
9. https://developers.google.com/web/showcase/
10. https://images.guide/
11. https://pwa.rocks/

AMP (Accelerated Mobile Pages) konferansının ikincisi bu sene 13-14 Şubat’ta Amsterdam’da gerçekleştirildi

Ekim 2015’te duyurusu yapılmaya başlanan ve Şubat 2016 itibariyle resmi olarak mobil sonuçlarda yer alan AMP, yani hızlandırılmış mobil sayfalar, Türkiye’de Haziran 2016’da aktif olmuştu hatırlarsanız.

Sayfalarınızın 1 saniyeden daha kısa bir zamanda açılmasını sağlayan AMP projesinin ilk konferansı  AMP Conf ’17 ise 7-8 Mart 2017’de NYC’de gerçekleşmişti. Tüm dünyadan 400’ten fazla yazılımcının, girişimcinin ve geliştiricinin katıldığı ve her sene daha fazla rağbet gören bu muhteşem faydalı konferansın ikincisi AMP Conf ’18 ise bu sene 13-14 Şubat’ta Amsterdam’da gerçekleştirildi.

Spiegel Daily ve Eski.Mobi gibi AMP teknolojisini kullanan sitelerde de deneyimleyebileceğiniz üzere, konferansın ev sahipliğini yapan Avrupa, aynı zamanda birçok AMP sitesinin de öncüsü niteliğinde. Sonuç olarak şu an e-ticaret, turizm ve haber sektörleri başta olmak üzere AMP kullanan 31 milyon websitesi ve buna bağlı olarak 5 milyar sayfa var. Gelin hep birlikte ikinci konferansta neler tanıtıldığına yakından bakalım:

AMP Stories: Görsel Hikayeler ve Dikkat Çekici Reklamlar Yaratmak

Facebook ve Instagram’dan sonra Google’ın da el atacağı hikayeler (AMP stories) kısmında da hızlandırılmış mobil sayfalar teknolojisini görmeye başlayacağız. Özellikle mobil ortamlarda sürekli gelişmeye devam eden içerik tüketimi, bazen metin ile daha iyi yapılırken bazen de hikaye anlatımı teknolojisiyle en iyi şekilde yapılıyor. İşte bu yüzden AMP hikaye formatı üzerinde de çalışılıyor:

AMP Stories’de de, web üzerinde güvenilir ve hızlı bir deneyim sağlamak için AMP’nin teknik altyapısını kullanılıyor. Web’de yayınlanan ve yayıncıların sitesinde barındırılan AMP hikayeleri kolayca paylaşılabilir ve bağlantı kurulabilir durumda.

Ampproject.org/stories adresinden AMP hikaye örneklerine göz atabilir ve henüz deneme aşamasında olan ve herkesin kullanabileceği, ücretsiz ve açık kaynak kodlu AMP stories’den siz de yararlanabilirsiniz.

Güçlendirilmiş AMP E-ticaret Özellikleri

Duyurulduğu ilk günden bu yana, e-ticaret websiteleri AMP ile çok büyük ilerlemeler kaydetti. Kamyon şoförü alımı için AMP sayfalarını kullanarak yıllık 1 milyon dolar tasarruf etmeyi planlayan US Xpress ve AMP sayfalar ile dönüşüm oranlarını %20 artıran Event Tickets Center ise bu örneklerden sadece birkaçı.

AMP ekibi, AMP sitelerini daha da kullanışlı kılmak için tarih takibi ve ödeme yöntemleri gibi yeni işlevler içeren e-ticaret web sitelerini sağlamayı taahhüt ediyor. Özellikle yeni AMP mobil sitesini yayına alan ve yüklenme süresini %40 azaltarak yeni kullanıcılar için dönüşüm oranlarını %4.3 artıran AliExpress, AMP ekibinin e-ticaret sektörü özelinde gurur duyduğu markalardan biri olma özelliğini taşıyor.

Yenilenen ve Büyümeye Devam Eden AMP Ekosistemi

AMP, Baidu, Sogou, VK (Rusya), 360 Search ve Twitter gibi AMP sayfalarına bağlantı veren platformlar ve hizmetler sayesinde web ekosisteminden bütüncül olarak da bir destek gördüğü için büyümeye daha kolay devam ediyor.

Özellikle Twitter, AMP desteği ile AMP sayfalarında yüklenme hızından dolayı sayfadan çıkma oranlarında % 10 azalma görerek olumlu sonuçlar aldığını belirtiyor. Çoğu yayıncı ve işletmenin bir CMS platformuna dayanan web siteleri var bildiğiniz gibi. Drupal, BigCommerce ve Squarespace gibi platformlardaki siteler de AMP sayfalarını yayınlayabiliyor. Ama asıl bomba haber WordPress tarafında.

Google, XWP ve Automattic ile birlikte WordPress’deki AMP deneyimini daha iyi desteklemek için WordPress AMP eklentisinin 0.7 sürümünü yayımladığını duyurdu. Yenilenen AMP eklentisi sayesinde artık:

• Sayfalar, widgetlar ve özel gönderi tipleri de destekleniyor
• Standart formattaki tüm embed’ler destekleniyor
• WordPress şablon sistemine entegrasyon sağlanıyor

E-postalar İçin AMP Deneyimi

AMP konferasında geçtiğimiz ay e-posta için AMP deneyimi de duyurulmuş oldu. Artık mailler üzerinden gönderilen linkleri tıkladığınızda uçak rezervasyonu, çeşitli etkinlikler, haberler ve satın alma işlemleriniz için yeni bir sayfanın açılmasını beklemek yerine direkt mail içinden işlemlerinizi hızlı bir şekilde gerçekleştirebileceğiniz gibi daha etkileyici ve daha etkileşimli e-mailler de gönderebileceksiniz:

Pinterest, Booking.com ve Doodle gibi şirketlerin şimdiden kullanmaya başladığı ve yeni deneyimler sunduğu AMP e-posta etkileşimini, Gmail’in ise bu sene içerisinde desteklemesi planlanıyor. Geliştirici olarak erişmek isterseniz de şuradaki formu doldurmanız gerekiyor.

Sizin en çok ilginizi çeken video hangisi oldu?

Sorularınızı ve her türlü görüşlerinizi yorum alanından bekliyoruz.