Kullanıcı Deneyimini Daha Hızlı Sayfa Yükleme Hızlarının Ötesinde Geliştiren En Son 9 AMP Güncellemesi

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

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

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

Henüz farkında olmadığınız 9 AMP güncellemesi

1. İmzalı değiş tokuşlar

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ı yerine "google.com/amp" ile başlamasıydı:

Bu, en belirgin AMP eleştirilerinden biriydi. İşletmeler, markalama ve içerik yayınlamak için alan adları çok önemli olduğundan, Google'ın içeriğin geldiği alan yerine AMP URL'sini görüntülemesini 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ı değiş tokuşlardır.

Google şunları belirtir:

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

Yine de en önemlisi, imzalı değiş tokuşlar, insanlar Google Arama'yı kullandığında ve bir "http//google.com/amp" bağlantısı yerine bir AMP bağlantısını tıkladığı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 kolay

(Not: Google, yalnızca yayıncı, tarayıcı ve arama bağlamının tümü bunu desteklediğinde imzalı exchange'lere 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ının daha da hızlı yüklenmesini sağlamak için uygulayabileceğiniz bir tekniktir - hatta %50'ye kadar daha hızlı.

SSR, sayfayı istemci tarafında oluşturan çerçeveler için ilk içerikli boyama sürelerini (FCP) iyileştirerek çalışır. İstemci tarafı oluşturmanın dezavantajı, sayfayı oluşturmak için gereken 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 ortak 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, AMP çerçevesi indirilene ve sayfa düzeni oluşturulana kadar içeriği gizlemek için mevcuttur. Bu nedenle AMP sayfaları, diğer istemci tarafı çerçeveleriyle aynı sorundan muzdariptir. JavaScript indirilene kadar engellenir.)

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

SSR'li AMP optimizasyonları, AMP spesifikasyonunun kurallarını ihlal ederek belgeyi geçersiz kılar. Ancak, kurulum sırasında bir bayrakla belirtildiği sürece AMP doğrulayıcısı, SSR'd AMP'yi geçerli AMP olarak işlemeye devam eder.

Şu anda AMP SSR için kullanılabilen iki araç vardır:

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

Formları çevrimiçi olarak doldurmak o kadar zahmetli olabilir ki, kullanıcıların bunu yapmasını engeller. Bu, ekranın daha küçük olduğu 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 hayati öneme sahiptir.

Form tamamlama sürecini daha kolay ve daha verimli hale getirmeye yardımcı olmak için AMP, giriş maskelemeyi etkinleştirdi. Bu özellik, geliştiricilerin, özellikle kullanıcılar tarihleri, ödeme ayrıntılarını, telefon numaralarını vb. doldururken kullanışlı olan, boşluklar ve geçiş reklamı karakterleri gibi biçimlendirme eklemelerine olanak tanı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 tüm farkı yaratabilir.

4. Video optimizasyonu

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

yerleştirme
Optimizasyon düzgün bir şekilde uygulanmazsa, mobil web sayfalarındaki videolar genellikle kullanıcının görüşünü engeller. Bu, kolayca kötü bir kullanıcı deneyimine yol açabilir ve gelecekteki içeriği görüntülemelerini engelleyebilir.

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

Ayrıca, videonuzu kullanıcıya sunmanın en iyi yolunu bulmak için videonun nereye ve nasıl yerleştirileceğini özelleştirebilirsiniz.

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

Video reklamlar
Video reklamlar ayrıca IMA SDK'yı destekleyen herhangi bir video reklam ağından AMP'ye entegre edilebilir ve optimize edilebilir, böylece hem reklamları hem de geliri izleyebilirsiniz.

5. Optimize edilmiş listeler

AMP kısa süre önce 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 (örneğin, <amp-list> bir kullanıcının dokunduğu bir <amp-accordion> içerdiğinde) kullanıcı etkileşiminde liste kapsayıcısının ne zaman yeniden boyutlandırılmasını istediğinizi belirtmenize olanak tanır. ).

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

Bu, kullanıcılara "ileri" 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 birlikte, veri izni ve gizlilik kuralları tüm sitelerde daha katı hale geldi ve düzenlendi. Bu, birçok yayıncının GDPR başına veri toplamak için üçüncü taraf Rıza Yönetim Platformlarına (CMP'ler) güvenmesine yol açtı.

Bunu akılda tutarak, AMP, CMP'lerin AMP ile kolayca entegre olabilmesi için <amp-consent>'i başlattı. Yani, AMP özellikli web siteleri artık uyumluluk sorunları olmadan kullanıcı verilerini toplamak ve yönetmek için CMP'leri kullanmaya devam edebilir. Ayrıca, veri onayı kullanıcı arayüzünü entegre edebilir ve kullanıcılara bilgilerini vermeden önce 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 daha yaygın hale geliyor. Ancak, farklı konum ve boyutlardaki iki görüntü arasında enterpolasyon yapmayı gerektirdiğinden, geliştiricilerin ışık kutusu moduna yumuşak bir geçiş sağlaması 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örüntülemelerini 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 iş parçacığında çalıştırma seçeneği sunan <amp-script>'in kullanılabilirliğidir.

Yeni <amp-script>, önceden var olan AMP bileşenleriyle mümkün olmayan kullanım örneklerini kapsamanıza olanak tanır. 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 MVC Todo
• Bir şifre denetleyicisi
• D3.js kullanarak 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:

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

• İçerik atlama — Beklenmeyen içerik atlamaları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ında tüm API'ler desteklenmez ve bazı DOM yöntemleri ve özellikleri henüz uygulanmamıştır.

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

9. AMP Araç Kutusu

AMP Toolbox, AMP sayfası yayınını basitleştirmek için bir komut satırı araçları ve JS API'leri koleksiyonudur. Araç kutusundaki her araç ayrı ayrı indirilebilir ve kullanılabilir:

AMP CLI
AMP Toolbox'ta bulunan çoğu özellik için kullanılabilen ve NPM aracılığıyla global olarak kurulabilen bir komut satırı arayüzü.

AMP Linter
Yeni araç kutusu-linter, yaygın hatalar ve en iyi uygulamalar için AMP belgelerinizi kontrol eder.

AMP Optimize Edici
AMP Optimizer sunucu tarafı, AMP performansına ilişkin en iyi uygulamaları uygulayarak AMP sayfalarının oluşturma performansını iyileştirir.

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

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

AMP KORSLARI
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 ekleyen bir bağlantı/ekspres ara yazılımıdır.

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

Tıklama sonrası bir Instapage AMP açılış sayfası demosu edinin

AMP, mobil optimizasyonda yaygın hale geldiğinden, bunun gibi tutarlı güncellemeler hayati önem taşır ve geliştiriciler, yayıncılar ve reklamverenler için faydalıdır. Yukarıdaki en yeni güncellemelerin tümü, kullanıcı deneyimini geliştirmek ve markalara, web sitelerinin özelliklerini ve sayfa içi etkileşimi geliştirmek için deneme ve test etme konusunda daha fazla seçenek sunmak için mükemmeldir.

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