Kullanıcı Deneyimini İyileştiren En Son 9 Amfi Güncellemesi

Google, sayfa yükleme hızlarını artırmak ve genel mobil kullanıcı deneyimini iyileştirmek için 2015'te AMP'yi duyurduğundan beri açık kaynak çerçevesinin popülaritesi artmaya devam etti.

Sadece bu da değil, çerçeve, kullanıcı deneyimini iyileştirmeye devam etmek için çok çeşitli sayfa içi öğeleri, daha iyi özellikleri ve seçenekleri ve geliştirilmiş arayüzleri desteklemek için önemli ölçüde güncellendi.

İşte en yeni AMP güncellemelerinden bazıları.

Henüz farkında olmayabileceğiniz 9 AMP güncellemesi

1. İmzalı borsalar

AMP ortaya çıktığında Google, gizliliği koruyan anında yüklenen web içeriği sunmak için ödünler verdi. Birincisi, adres çubuklarında görüntülenen URL'lerin yayıncının alan adı yerine "google.com/amp" ile başlamasıydı:

Bu, en öne çıkan AMP eleştirilerinden biriydi. İşletmeler, marka bilinci oluşturma ve içerik yayınlama için alan adları çok önemli olduğundan, Google'ın içeriğin gerçekte geldiği alan adı yerine AMP URL'sini göstermesini istemedi.

Nisan 2019'da Google, anında yükleme özelliklerini korurken içeriğin orijinal URL'sini göstermenin bir yolu olan bir çözüm duyurdu. Bu çözüm, imzalı borsalardır.

Google şunları belirtir:

İmzalı değişim, web paketleme belirtiminde tanımlanan ve tarayıcının bir belgeye kaynağınıza aitmiş gibi güvenmesine izin veren bir dosya biçimidir. Bu, içeriği özelleştirmek ve analiz entegrasyonunu basitleştirmek için birinci taraf tanımlama bilgilerini ve depolamayı kullanmanıza olanak tanır.

Ancak en önemlisi, imzalı değiş tokuşlar, insanlar Google Arama'yı kullandıklarında ve bir "http//google.com/amp" bağlantısı yerine bir AMP bağlantısını tıkladıklarında yayıncının gerçek URL'sini görüntüler:

Bu iki nedenden dolayı çok önemli:

1. Alan adı, marka kimliğinin temel bir parçasıdır
2. AMP analizlerini kendi URL'nizle almak daha kolaydır

(Not: Google, yalnızca yayıncı, tarayıcı ve arama bağlamı desteklediğinde imzalı değiş tokuşlara bağlantı verir. Bu, içeriğinizin hem imzalı değişim sürümünü hem de imzasız değişim sürümünü yayınlamanız gerektiği anlamına gelir.)

2. Sunucu tarafı oluşturma (SSR)

Sunucu tarafı oluşturma (SSR), AMP sayfalarına uygulayabileceğiniz bir tekniktir ve sayfaların daha da hızlı yüklenmesini sağlar — aslında %50'ye kadar daha hızlı.

SSR, sayfayı istemci tarafında işleyen çerçeveler için ilk içerik dolu boyama sürelerini (FCP) iyileştirerek çalışır. İstemci tarafı oluşturmanın dezavantajı, sayfayı oluşturmak için gerekli tüm JavaScript'in önce indirilmesi gerekmesidir, bu da sayfa içeriğinin yüklenme süresini geciktirir ve potansiyel olarak hemen çıkma oranlarını artırabilir.

Çözüm olarak AMP SSR, AMP standart kodunu kaldırır ve sunucudaki sayfa düzenini oluşturur.

(Not: AMP standart kodu, sayfa yükleme sırasında içerik atlamalarını önlemek ve AMP çerçevesi indirilene ve sayfa düzeni kurulana kadar içeriği gizlemek için mevcuttur. Bu nedenle AMP sayfaları, diğer istemci tarafı çerçevelerle aynı sorundan muzdariptir; JavaScript indirilene kadar engellenir.)

Standart kodu kaldırarak, AMP SSR %50 daha hızlı FCP süreleri sağlar.

SSR'li AMP optimizasyonları, belgeyi geçersiz kılan AMP spesifikasyonunun kurallarını çiğner. Ancak, kurulum sırasında bir işaretle belirtildiği sürece AMP doğrulayıcı, SSR'li AMP'yi geçerli AMP olarak değerlendirmeye devam eder.

Şu anda AMP SSR için iki araç mevcuttur:

1. AMP Optimizer — Optimize edilmiş AMP üretmek için bir NodeJs kitaplığı
2. AMP Paketleyici — İmzalı değiş tokuşların sunulmasıyla kullanılabilen Ago komut satırı aracı

3. Giriş maskeleme

Çevrimiçi formları doldurmak, kullanıcıların bunu yapmasını engelleyecek kadar külfetli olabilir. Bu, ekranın daha küçük ve navigasyonun daha zor olduğu mobil cihazlarda daha doğrudur. Ancak bildiğiniz gibi, formlar olası satışları toplamak ve satışları tamamlamak için çok önemlidir.

Form tamamlama sürecini daha kolay ve zamandan daha verimli hale getirmeye yardımcı olmak için AMP, giriş maskelemeyi etkinleştirdi. Bu özellik, geliştiricilerin boşluklar ve geçiş reklamı karakterleri gibi biçimlendirmeler eklemesine olanak tanır; bu, özellikle kullanıcılar tarihleri, ödeme ayrıntılarını, telefon numaralarını vb. doldururken kullanışlıdır:

Günümüzün dijital dünyasında giderek daha fazla insanın bilgilerini çevrimiçi olarak göndermesiyle, daha kolay ve daha hızlı bir sisteme sahip olmak büyük fark yaratabilir.

4. Video optimizasyonu

AMP'nin birçok faydasını artırmak için çeşitli video iyileştirmeleri yapılmıştır.

yanaşma
Mobil web sayfalarındaki videolar, optimizasyon düzgün bir şekilde uygulanmadıysa, genellikle kullanıcının görüşünü engeller. Bu, kolayca zayıf bir kullanıcı deneyimine yol açabilir ve onları gelecekteki herhangi bir içeriği görüntülemekten caydırabilir.

Bu yeni dock özelliği, kullanıcılar sayfayı aşağı kaydırdığında o anda izlenmekte olan videoyu en aza indirerek, içerik ve videoları herhangi bir engelleme olmadan aynı anda görüntülemelerine olanak tanır:

Videonuzu kullanıcıya sunmanın en iyi yolunu bulmak için videonun nerede ve nasıl yerleştirileceğini de özelleştirebilirsiniz.

Video oynatıcı
Başka bir yeni güncelleme de, istediğiniz tüm AMP Video Arayüzü özelliklerini (otomatik oynatma, yerleştirme vb.)

video reklamlar
Video reklamlar, hem reklamları hem de geliri izleyebilmeniz için IMA SDK'yı destekleyen herhangi bir video reklam ağından AMP'ye entegre edilebilir ve optimize edilebilir.

5. Optimize edilmiş listeler

AMP yakın zamanda web sayfalarındaki listeleri optimize etmek için iki yeni bileşen ekledi:

yeniden boyutlandırma
<amp-list>, farklı içerik türlerine daha iyi uyması için (ör. <amp-list>, kullanıcının dokunduğu bir <amp-accordion> içerdiğinde) kullanıcı etkileşiminde liste kabının ne zaman yeniden boyutlandırılmasını istediğinizi belirtmenize olanak tanır. ).

sonsuz kaydırma
Sonsuz kaydırma artık kullanılabilir, bu nedenle kullanıcılar bir öğe listesinin (arama sonuçları, ürün kartları vb.) sonuna ulaştıklarında, liste otomatik olarak daha fazla öğeyle doldurulur:

Bu, kullanıcılara "sonraki" düğmesini tıklayıp başka bir liste sayfasını ziyaret etmek yerine tek bir sayfadan daha fazla içeriğe sorunsuz erişim sağlar.

6. Üçüncü taraf entegrasyonu

Çerezler ve veri toplama, markaların kullanıcı bilgilerini kaydetmesi için gereklidir. Bununla birlikte, GDPR ile veri izni ve mahremiyete ilişkin kurallar tüm sitelerde daha katı ve düzenlenmiş hale geldi. Bu, birçok yayıncının GDPR uyarınca veri toplamak için üçüncü taraf Rıza Yönetim Platformlarına (CMP'ler) güvenmesine yol açtı.

Bunu akılda tutarak, AMP <amp-consent>'i başlattı, böylece CMP'ler AMP ile kolayca entegre olabildi. Yani, AMP özellikli web siteleri artık kullanıcı verilerini uyumluluk sorunları olmadan toplamak ve yönetmek için CMP'leri kullanmaya devam edebilir. Ayrıca, veri izni kullanıcı arayüzünü entegre edebilir ve bilgilerini sağlamadan önce kullanıcılara bilgi verebilirler.

7. Işık Kutusu modu

Görüntüleri bir ışık kutusundan görüntüleme — bir öğeyi, kullanıcı tarafından tekrar kapatılana kadar ekranı dolduracak şekilde genişletmek giderek yaygınlaşıyor. Yine de, farklı konum ve boyutlardaki iki görüntü arasında enterpolasyon yapmayı gerektirdiğinden, geliştiricilerin lightbox moduna yumuşak bir geçiş yapması zor olabilir.

Bu, AMP UI Çalışma Grubunun ışık kutusu geçişlerini optimize etmesine ve resim görüntülenebilirliğini iyileştirmesine yol açtı:

Artık <amp-lightbox-gallery>, reklamverenlere web siteleri için farklı boyutları deneme ve kullanıcıların resimlerini nasıl görmesini istediklerini optimize etme fırsatı sunuyor.

8. Özel JavaScript'in kullanılabilirliği

En yeni Google AMP güncellemelerinden biri, reklamverenlerin hızlı yükleme hızını korurken AMP sayfalarına özel JavaScript ekleyebilmeleri için JavaScript'i ayrı bir çalışan dizide çalıştırma seçeneği sağlayan <amp-script>'in kullanıma sunulmasıdır.

Yeni <amp-script>, önceden var olan AMP bileşenleriyle mümkün olmayan kullanım durumlarını ele almanızı sağlar. Ayrıca, AMP ve AMP olmayan sayfalarınız arasında kod paylaşmanıza ve bir JavaScript çerçevesi kullanmanıza olanak tanır.

AMP ekibinin <amp-script> için oluşturduğu bazı örnekler şunları içerir:

• Vue kullanarak Todo MVC
• Bir şifre denetleyicisi
• D3.js kullanan bir makalede veri görselleştirme
• Bir sonraki bölüme geçmeden önce her bölümün doğrulanması gereken çok sayfalı formlar:

Ancak AMP'nin performans garantisini korumak için bazı kısıtlamalar vardır:

• İçerik atlama — Beklenmeyen içerik atlamasını önlemek için <amp-script>, sayfa içeriğini değiştirmek için kullanıcı etkileşimi gerektirir.
• Sayfa yükleme — <amp-script> kullanıcı etkileşimi olmadan sayfa içeriğini değiştirmediğinden, sayfa yükleme sırasında da içeriği değiştirmez.
• Komut dosyası boyutu — Tek bir <amp-script> içinde kullanılan komut dosyası 150 kB'den küçük olmalıdır.
• API desteği — Bir Web Çalışanı içinde tüm API'ler desteklenmez ve bazı DOM yöntemleri ve özellikleri henüz uygulanmamıştır.

(Not: <amp-script>, halihazırda kullanıyor olabileceğiniz React, Preact, Angular, Vue.js, jQuery ve D3.js gibi çerçevelerle uyumludur.)

9. AMP Araç Kutusu

AMP Araç Kutusu, AMP sayfası yayınlamayı basitleştirmek için komut satırı araçları ve JS API'lerinden oluşan bir koleksiyondur. Araç kutusundaki her araç ayrı ayrı indirilebilir ve kullanılabilir:

AMP CLI'sı
AMP Toolbox'ta yer alan ve NPM aracılığıyla küresel olarak kurulabilen çoğu özellik için kullanılabilen bir komut satırı arabirimi.

AMP Linteri
Yeni toolbox-linter, AMP belgelerinizi yaygın hatalar ve en iyi uygulamalar açısından kontrol eder.

AMP Optimize Edici
AMP Optimizer sunucu tarafı, AMP performansıyla ilgili en iyi uygulamaları uygulayarak AMP sayfalarının oluşturma performansını artırır.

AMP Önbellek URL'leri
Bir AMP sayfasının tüm AMP önbelleklerinde çalışıp çalışmadığını kontrol etmek iyi bir fikirdir ve bir kaynak URL'yi AMP Önbellek URL biçimine çevirdiği için bunu yapmak için toolbox-cache-url bileşenini kullanabilirsiniz.

AMP Önbellek Listesi
Bu, AMP belgelerini bir AMP Önbelleğinden hızlı bir şekilde güncellerken veya kaldırırken faydalı olabilecek tüm resmi AMP Önbelleklerinin bir listesini sağlar.

AMP CORS
Birçok AMP bileşeni (amp-list veya amp-state gibi), CORS isteklerini kullanarak uzak uç noktalardan yararlanır. AMP CORS, AMP sayfalarınızın gerektirdiği tüm CORS başlıklarını otomatik olarak ekleyecek bir bağlantı/ekspres ara yazılımıdır.

AMP Doğrulama Kuralları
Bu, AMP doğrulayıcı kurallarını sorgulamak için basit bir JavaScript kitaplığıdır.

Bir Instapage AMP tıklama sonrası açılış sayfası demosu edinin

AMP, mobil optimizasyonda sıradan hale geldiğinden, bunun gibi tutarlı güncellemeler geliştiriciler, yayıncılar ve reklamverenler için çok önemlidir ve faydalıdır. Yukarıdaki en yeni güncellemelerin tümü, kullanıcı deneyimini iyileştirmek ve markalara web sitelerinin özelliklerini ve sayfa etkileşimini geliştirmek için denemeleri ve test etmeleri için daha fazla seçenek sağlamak için mükemmeldir.

Reklam tıklaması sonrası AMP deneyimleri için, tasarımcı dostu bir oluşturucu, yerleşik doğrulayıcı, gelişmiş analitik ve daha fazlasını kullanarak dakikalar içinde hızlı yüklenen sayfaları nasıl oluşturabileceğinizi görmek için özelleştirilmiş bir Instapage AMP demosu edinin.