AMP nedir? Hızlandırılmış Mobil Sayfalar İçin Eksiksiz Kılavuz
Yayınlanan: 2018-08-22BÖLÜM 1: Hızlandırılmış Mobil Sayfalar nedir?
Mobil öncelikli zihniyet kalıcı olmaya devam ediyor - bu ifade hem iş hem de tüketici açısından geçerlidir.
Kullanıcıların bir satın alma işlemi yapmadan önce cep telefonlarına danışın demek çok büyük bir eksiklik olur. Mobil internet kullanımı tüm dünyada masaüstü mobil kullanımını geride bıraktı. Hindistan, Meksika ve Endonezya gibi ülkelerde bile akıllı telefon kullanımı masaüstü kullanımına göre 4 kattan fazla:
Yalnızca ABD'de her gün 30 milyar mobil an (bir müşterinin telefonuna baktığı ve anında yanıt beklediği an) vardır. Bu, markanızın her gün kullanıcılara istedikleri bir şeyi sunmak için 30 milyar mobil fırsatı olduğu anlamına gelir.
Ve yine de mobil reklam harcamaları, mobil medya tüketiminin gerisinde kalıyor:
Kullanıcıların satın almak yerine mobil cihazlarda gezinmek için daha fazla zaman harcamasının bir nedeni var - kullanıcılar mobil cihazlarındayken daha fazla anlık tatmin arzuluyor.
Bu soruyu yanıtlayın – bir mobil web sayfasının yüklenmesi için ne kadar beklersiniz?
Google ve SOASTA tarafından toplanan verilere göre, tüketicilerin %40'ı yüklenmesi üç saniyeden uzun süren bir sayfadan ayrılıyor.
Üç saniye.
Reklamınızı beğenen ve tıklayan bir kullanıcının dikkatini çekmeniz gereken süre budur. Ve web sayfanız yukarıda belirtilen süre içinde yüklenmezse, reklamı ne kadar zorlayıcı olursa olsun boşuna yarattınız. Kötü haber şu ki, verilere göre çoğu perakende mobil sitenin yüklenmesi yaklaşık 6.9 saniye sürüyor, bu da kullanıcıların %40'ının sayfayı terk etmeden önce beklediği sürenin iki katından fazla.
Web sayfası hızı hemen çıkma oranını nasıl etkiler?
Mobil web sayfaları için hemen çıkma oranını ölçerken hız önemli bir faktördür. Bu konuyu daha derinlemesine incelemeden önce, mobil site hemen çıkma oranları için hızın öncelikle iki açıdan ele alındığını, yani DOM'ye hazır olma süresi ve tam sayfa yükleme süresinin dikkate alındığını açıklamak önemlidir:
1. DOM hazır süresi: DOM hazır süresi, sayfanın HTML kodunun tarayıcı tarafından alınması ve ayrıştırılması için geçen süredir – hemen çıkma oranının en büyük göstergesidir. Kullanıcı HTML kodunun ne zaman alındığını ve ayrıştırıldığını bilmese de, resimler gibi sayfa öğelerinin yüklenebilmesi için kodun yüklenmesi gerekir. HTML kodu çok uzun sürerse, web sitesi yükleme süresi yavaştır. Mobil web sayfanızın DOM hazır olma süresini hızlandırmak için, bir tarayıcının HTML kodunu ayrıştırmasını engelleyen ve engelleyen JavaScript kullanımından kaçınmak en iyisidir. JavaScript kullanan sayfa öğeleri, sayfa yüklenmeden önce harici bir sunucudan alınması gereken üçüncü taraf reklamları ve sosyal widget'ları içerir.
2. Tam sayfa yükleme süresi: Tam sayfa yükleme süresi, görüntülerin, yazı tiplerinin, CSS kodlarının vb. bir web sayfasına yüklenmesi için geçen süreyi içerir. Daha hızlı tam sayfa yükleme, daha düşük hemen çıkma oranına yol açar:
Web sayfanızın tam sayfa yükleme süresinin daha hızlı olmasını sağlamak için resimleri, yazı tiplerini optimize etmeli ve yükleme süresini yavaşlatma potansiyeline sahip üçüncü taraf dosyalarından kaçınmalısınız.
Sayfa yükleme süresi, sayfa hemen çıkmanın en güçlü nedenlerinden biridir. Daha da kötüsü, kullanıcıların yalnızca sayfayı terk etmekle kalmayıp, araştırmalara göre, kullanıcıların %79'u bir web sayfasında yavaş bir deneyim yaşadıktan sonra geri dönmeyeceklerdir.
Sayfa yükleme hızıyla ilgili şu şaşırtıcı açıklamaları bir düşünün:
- Ortalama bir mobil sitenin 3G bağlantısı üzerinden yüklenmesi 19 saniye sürer ve mobil sitelerin %77'sinin yüklenmesi 10 saniyeden uzun sürer.
- Google, bir web sayfasının yüklenmesi için geçen her ek saniye için dönüşümlerin %20 azaldığını tespit etti. Karşılaştırmak gerekirse, 5 saniyede yüklenen siteler, 19 saniyede yüklenen sitelere göre 2 kat daha fazla mobil reklam geliri elde etti.
- Kullanıcıların %61'i, erişimde sorun yaşadıkları bir mobil siteye geri dönme olasılığı düşük.
Ne anlama geliyor?
Mobil sayfa yüklemesi anında gerçekleşmezse, kullanıcı için yeterince hızlı değilse, sayfalar geri döner ve muhtemelen geri gelmez.
Bunun mobil web sayfanızın başına gelmemesini sağlamak için mobil web sitelerinizi ve tıklama sonrası açılış sayfalarınızı AMPlifiye etmeniz önemlidir.
AMP nedir?
Google, mobil web sayfalarının optimum hızda çalışmasını sağlamak için Accelerated Mobile Pages açık kaynaklı projesini başlattı.
AMP projesi, cihazlar ve dağıtım platformları arasında sürekli olarak hızlı, güzel ve yüksek performanslı web sayfaları ve reklamlar oluşturmanıza olanak sağlayarak 'geleceğin web'ini birlikte oluşturmayı' amaçlar.
AMP, binlerce geliştirici, yayıncı, web sitesi, dağıtım şirketi ve teknoloji şirketi ile işbirliği içinde oluşturulmuştur. Bugüne kadar 1,5 milyardan fazla AMP sayfası oluşturuldu ve 100'den fazla önde gelen analiz, reklam teknolojisi ve CMS sağlayıcısı AMP biçimini destekliyor.
AMP biçiminde mobil sayfalar oluşturduğunuzda şunları elde edersiniz:
1. Daha yüksek performans ve etkileşim: AMP açık kaynak projesinde oluşturulan sayfalar neredeyse anında yüklenerek kullanıcılara hem cep telefonlarında hem de masaüstü bilgisayarlarında sorunsuz, daha ilgi çekici bir deneyim sunar.
2. Esneklik ve sonuçlar: İşletmeler, KPI'ları korurken ve geliştirirken içeriklerini nasıl sunacaklarına ve hangi teknoloji satıcılarının kullanacaklarına karar verme fırsatına sahiptir.
Muhtemelen daha önce bir AMP sayfasına tıkladınız, ancak bunun farkında değildiniz. Fark etmiş olabileceğiniz tek şey, tıkladıktan sonra sayfanın ne kadar hızlı olduğuydu. AMP tarafından oluşturulmuş web sayfalarının arama sonuçlarında bir şimşek göstergesi bulunur.
Arama sonuçlarında AMP'yi şu şekilde tanıyabilirsiniz:
Normal bir web sayfasına kıyasla bir AMP sayfası şu şekilde görünür:
AMP sayfalarının anında yüklenmesinin nedeni, AMP'nin HTML/CSS ve JavaScript'i kısıtlaması ve mobil web sayfalarının daha hızlı oluşturulmasına olanak sağlamasıdır. Normal mobil sayfaların aksine, AMP sayfaları, Google aramasında daha hızlı yükleme süreleri için Google AMP Önbelleği tarafından otomatik olarak önbelleğe alınır.
Kullanıcıların mobil cihazlarındayken belirli beklentileri vardır, anlamlı, alakalı ve daha hızlı deneyimler isterler - hedef kitlenizin beklentilerinin karşılandığından emin olmak için AMP en iyi seçeneğinizdir.
Bu kılavuz, AMP açık kaynak projesi hakkında bilmeniz gereken her şeyi size anlatacaktır. AMP'lerin nasıl çalıştığı ve sayfaların bu kadar hızlı yüklenmesini sağlayan şeyin tam prosedürünü inceleyeceğiz.
Kılavuz ayrıca, AMP'leri kullanmanın çeşitli sektörlerdeki işletmeler için dönüşümleri artırmaya nasıl yardımcı olduğuna ve sayfalarınızı AMPlifiye ettiğinizde elde edeceğiniz avantajlara ilişkin örnek olay incelemelerini de içerecektir. Son bölüm, Hızlandırılmış Mobil tıklama sonrası açılış sayfalarının ne olduğunu ve ziyaretçilere daha hızlı ve daha alakalı bir tıklama sonrası açılış sayfası sunmak için sayfaları neden oluşturmanız gerektiğini tartışacaktır.
BÖLÜM 2: AMP nasıl çalışır?
Google, Şubat 2016'da Hızlandırılmış Mobil Sayfalar (AMP) açık kaynak çerçevesini başlattı. Çerçeve, kullanıcıların günlük olarak uğraştığı hantal ve yavaş mobil deneyimler yerine optimize edilmiş, sıkı bir şekilde entegre edilmiş kullanıcı deneyimleri oluşturmaya ihtiyaç duyulduğu için oluşturuldu. temel.
Google, optimize edilmiş mobil web sayfası deneyimleri oluşturmak için kesin bir yol sağlayacak bir çerçeve oluşturmak için AMP projesini başlattı. AMP açık kaynak projesi iyi belgelenmiştir, kolayca dağıtılabilir, doğrulanabilir ve kullanıcıyı web sayfası tasarımında ilk sıraya koyma konusunda fikir sahibidir.
Neredeyse iki yıl önce piyasaya sürülmesinden bu yana 25 milyon alan, 4 milyardan fazla AMP sayfası yayınladı:
Lansmanından yalnızca AMP sayfalarının sayısı değil, hızları da arttığından, bir AMP sayfasının Google aramadan yüklenmesi için geçen medyan süre artık yarım saniyeden az.
AMP, sayfada geçirilen süreyi 2 kat artırarak web sitesi trafiğinde %10 artış sağlar. AMP kullanan e-ticaret web siteleri, AMP olmayan sayfalara kıyasla satışlarda ve dönüşümlerde %20 artış yaşar:
AMP, işletmelerin web sayfalarının basitleştirilmiş, temiz ve alakalı sürümlerini oluşturmalarına yardımcı olarak kullanıcılara daha hızlı bir mobil web deneyimi sunar.
Chartbeat, AMP sayfalarını kullanan tipik bir yayıncının AMP içeriğinde tüm mobil trafiğin %16'sını gördüğünü öğrenmek için Haziran 2016 - Mayıs 2017 arasında AMP kullanan 360 web sitesindeki verileri analiz etti.
AMP sayfaları, standart web sayfalarından yaklaşık dört kat daha hızlı yüklenir ve kullanıcılar, standart mobil web sayfalarına kıyasla AMP sayfalarıyla %35 daha fazla etkileşim kurar:
Artık AMP sayfalarını neden kullanmanız gerektiğini bildiğimize göre, AMP'nin nasıl çalıştığına, duyarlı web tasarımı, Facebook'un Hızlı Makaleleri ve Aşamalı Web Uygulamaları ile nasıl karşılaştırıldığına bir göz atalım.
AMP'nin 3 temel bileşeni
AMP sayfaları aşağıdaki üç temel bileşenle oluşturulmuştur:
AMP HTML'si
AMP HTML, yalnızca güvenilir performans için bazı kısıtlamalarla birlikte esasen HTML'dir. En basit AMP HTML dosyası şöyle görünür:
AMP HTML'deki etiketlerin çoğu normal HTML etiketleridir, ancak bazı HTML etiketleri AMP'ye özel etiketlerle değiştirilir. Bu özel etiketlere AMP HTML bileşenleri adı verilir ve bunlar, yaygın etiket modellerinin performanslı bir şekilde uygulanmasını kolaylaştırır. AMP sayfaları, arama motorları ve diğer platformlar tarafından HTML etiketi ile keşfedilir.
Sayfanızın AMP olmayan bir sürümüne ve bir AMP sürümüne veya yalnızca bir AMP sürümüne sahip olmayı seçebilirsiniz.
AMP JavaScript'i (JS)
AMP JS kitaplığı, AMP HTML sayfalarının hızlı bir şekilde oluşturulmasını sağlar. JS kitaplığı, satır içi CSS ve yazı tipi tetikleme gibi AMP'nin tüm en iyi performans uygulamalarını uygular; bu, kaynak yüklemeyi yönetir ve hızlı bir sayfa oluşturma sağlamak için size özel HTML etiketleri verir.
AMP JS, harici kaynaklardan gelen her şeyi eşzamansız hale getirir, böylece sayfadaki hiçbir şey hiçbir şeyin oluşturulmasını engelleyemez. JS ayrıca, tüm iframe'lerin korumalı alana alınması, kaynaklar yüklenmeden önce her sayfa öğesinin düzeninin önceden hesaplanması ve yavaş CSS seçicilerinin devre dışı bırakılması gibi diğer performans tekniklerini de kullanır.
AMP Önbelleği
Google AMP Önbelleği, önbelleğe alınmış AMP HTML sayfalarını sunmak için kullanılır. AMP Önbelleği, tüm geçerli AMP belgelerini teslim etmek için kullanılan proxy tabanlı içerik dağıtım ağıdır. Önbellek, AMP HTML sayfalarını getirir, önbelleğe alır ve sayfa performansını otomatik olarak iyileştirir.
Maksimum verimliliği korumak için AMP Önbelleği belgeyi, JS dosyalarını ve HTTP 2.0'ı kullanan aynı kaynaktan tüm görüntüleri yükler.
AMP Önbelleği, bir sayfanın çalışacağının garanti edildiğini ve sayfayı yavaşlatabilecek dış kuvvetlere bağlı olmadığını doğrulayan yerleşik bir doğrulama sistemiyle birlikte gelir. Doğrulama sistemi, sayfanın işaretlemesinin AMP HTML özelliklerini karşıladığını onaylayan bir dizi iddia üzerinde çalışır.
Her AMP sayfasının yanında doğrulama sisteminin ek bir sürümü mevcuttur. Bu sürüm, sayfa oluşturulduğunda doğrulama hatalarını doğrudan tarayıcının konsoluna kaydederek, kodunuzdaki performans ve kullanıcı deneyimi üzerinde etkisi olabilecek karmaşık değişiklikleri görmenizi sağlar.
AMP'nin üç temel bileşeni, sayfaların hızlı bir şekilde yüklenmesini mümkün kılmak için uyum içinde çalışır. Bir sonraki bölüm, AMP sayfalarını bu kadar hızlı hale getirmek için bir araya gelen yedi optimizasyon tekniğini vurgulayacaktır.
Tüm AMP JavaScript'leri eşzamansız olarak yürütülür
JavaScript, sayfanın her yönünü değiştirebilir, DOM yapımını engelleme ve sayfa oluşturmayı geciktirme gücüne sahiptir - her iki faktör de yavaş sayfa yüklemesine neden olur. JavaScript'in sayfa oluşturmayı geciktirmemesini sağlamak için AMP yalnızca eşzamansız JavaScript'e izin verir.
AMP sayfaları, yazar tarafından yazılmış herhangi bir JavaScript içermez, bunun yerine tüm etkileşimli sayfa özellikleri özel AMP öğeleri tarafından işlenir. Bu özel AMP öğeleri, JavaScript içerebilir, ancak herhangi bir performans düşüşü başlatmamalarını sağlamak için dikkatle tasarlanmıştır.
AMP, iframe'lerde üçüncü taraf JavaScript'i yapar, ancak sayfa oluşturmayı engelleyemez.
Tüm kaynaklar statik olarak boyutlandırılır
AMP'nin sayfa kaynakları indirilmeden önce her bir öğenin boyutunu ve konumunu belirleyebilmesi için resimler, iframe'ler ve reklamlar gibi tüm harici kaynakların HTML boyutlarını belirtmesi gerekir. AMP, herhangi bir kaynağın indirilmesini beklemeden sayfanın düzenini yükler.
AMP, belge düzenini boyut düzeninden ayırma yeteneğine sahiptir, tüm belgeyi yerleştirmek için yalnızca tek bir HTTP isteği gerekir. AMP, tarayıcıdaki pahalı stil düzenlerini ve yeniden hesaplamaları önlemek için optimize edildiğinden, sayfa kaynakları yüklendiğinde herhangi bir yeniden düzen olmaz.
Uzantı mekanizmaları oluşturmayı engellemez
AMP, uzantı mekanizmalarının sayfa oluşturmayı engellemesine izin vermez, ışık kutuları ve sosyal medya yerleştirmeleri gibi öğeler için uzantıları destekler ve bunlar ek HTTP istekleri gerektirse de sayfa düzenini ve oluşturmayı engellemez.
Bir sayfa özel bir komut dosyası kullanıyorsa, AMP sistemine sonunda özel bir etikete sahip olacağını söylemesi gerekir, ardından AMP, sayfanın yavaşlamaması için gerekli etiketi oluşturur. Örneğin, amp-iframe etiketi AMP'ye bir amp-iframe etiketi olacağını söylerse, AMP ne içereceğini bilmeden önce iframe kutusunu oluşturur.
Tüm üçüncü taraf JavaScript'leri kritik yolun dışında tutulur
Üçüncü taraf JavaScript, senkronize JS yüklemesi kullanır, bu, yükleme sürenizi yavaşlatma eğilimindedir. AMP sayfaları, üçüncü taraf JavaScript'e izin verir, ancak yalnızca korumalı alanlı iframe'lerde, bunu yaparak JavaScript yüklemesi ana sayfanın yürütülmesini engelleyemez. Korumalı iframe JavaScript, birden çok stil yeniden hesaplamasını tetiklese bile, küçük iframe'lerinde çok az DOM bulunur.
iframe yeniden hesaplamaları, sayfa için stilleri ve düzeni yeniden hesaplamaya kıyasla çok hızlı yürütülür.
CSS satır içi ve boyuta bağlı olmalıdır
CSS, oluşturmayı engeller, tüm sayfa yüklemelerini de engeller ve şişkinliğe neden olma eğilimindedir. AMP HTML yalnızca satır içi stillere izin verir; bu, çoğu web sayfasına giden kritik oluşturma yolundan 1 veya çoğunlukla birden çok HTTP isteğini kaldırır.
Satır içi stil sayfasının maksimum boyutu 75 kb olmalıdır, bu çok karmaşık sayfalar için yeterince büyük olsa da, yine de sayfa yazarının iyi CSS hijyeni uygulamasını gerektirir.
Yazı tipi tetikleme verimlidir
Web yazı tiplerinin boyutu genellikle büyük olduğundan, web yazı tipi optimizasyonu hızlı yükleme için kritik öneme sahiptir. Birkaç eşitleme komut dosyası ve birkaç harici stil sayfası içeren tipik bir sayfada, tarayıcı tüm komut dosyaları yüklenene kadar yazı tiplerini indirmek için bekler.
AMP çerçevesi, tüm yazı tipleri indirilmeye başlayana kadar sıfır HTTP isteği bildirir. Bu, yalnızca AMP'deki tüm JavaScript'in async özniteliğine sahip olması ve yalnızca satır içi sayfalara izin verilmesi nedeniyle mümkün olur, tarayıcının yazı tiplerini indirmesini engelleyen hiçbir HTTP isteği yoktur.
Stil yeniden hesaplamaları en aza indirilir
AMP sayfalarında, tüm DOM okumaları tüm yazma işlemlerinden önce gerçekleşir; bu, her kare için yalnızca bir stil yeniden hesaplaması olmasını sağlar; bu nedenle, sayfa oluşturma performansı üzerinde olumsuz bir etkisi yoktur.
Yalnızca GPU hızlandırmalı animasyonları çalıştırma
Hızlı optimizasyonları çalıştırmak için bunları GPU'da çalıştırmanız gerekir. GPU katmanlar halinde çalışır, bu katmanlarda bazı şeyleri nasıl gerçekleştireceğini bilir – katmanlar hareket ettirilebilir ve soluk olabilir. Ancak GPU sayfa düzenini güncelleyemediğinde bu görevi tarayıcıya verir ve bu sayfa yükleme süresi için iyi değildir.
Animasyonla ilgili CSS kuralları, animasyonun GPU hızlandırılmasını sağlar; bu, AMP'nin yalnızca dönüştürme ve opaklıkta animasyona ve geçişe izin verdiği anlamına gelir, böylece sayfa düzenine gerek kalmaz.
Kaynak yüklemeye öncelik verilir
AMP, tüm kaynak yüklemesini kontrol eder, kaynak yüklemeye öncelik verir ve yalnızca gerekli olanı yükler ve tüm geç yüklenen kaynakları önceden getirir.
AMP kaynakları indirirken, en önemli kaynakların önce indirilmesi için indirmeleri optimize eder. Tüm resimler ve reklamlar, yalnızca kullanıcı tarafından görülme olasılığı varsa, ekranın üst kısmındaysa veya ziyaretçinin bunları kaydırma olasılığı varsa indirilir.
AMP ayrıca gecikmeli olarak yüklenen kaynakları önceden getirme yeteneğine de sahiptir, bu kaynaklar mümkün olduğunca geç yüklenir, ancak mümkün olduğunca erken önceden getirilir. Bu şekilde işler çok hızlı yüklenir, ancak CPU yalnızca kaynaklar kullanıcılara gösterildiğinde kullanılır.
Sayfaları anında yükleyin
Yeni AMP ön bağlantı API'si, HTTP isteklerinin yapılır yapılmaz mümkün olduğunca hızlı olmasını sağlamak için yoğun olarak kullanılır. Bu nedenle, sayfa, kullanıcı açıkça gezinmek istediğini belirtmeden önce oluşturulur, sayfa, kullanıcı gerçekten gördüğünde kullanılabilir olabilir ve sayfanın anında yüklenmesini sağlayabilir.
AMP, web içeriğini önceden oluştururken çok fazla bant genişliği ve CPU kullanmayacak şekilde optimize edilmiştir. AMP belgeleri anında yükleme için önceden oluşturulduğunda, ekranın üst kısmındaki kaynaklar gerçekten indirilir ve üçüncü taraf iframe'ler gibi çok fazla CPU kullanabilecek kaynaklar indirilmez.
"AMP'nin sayfalarınızı hızlandırmasının 7 yolunu" öğrenmek için aşağıdaki videoyu da kullanabilirsiniz:
Artık AMP'nin nasıl çalıştığını bildiğimize göre, AMP'nin Facebook'un Hızlı Makaleleri, Duyarlı Web Tasarımı ve Aşamalı Web Uygulamaları ile nasıl karşılaştırıldığını görelim.
AMP ve Facebook'un Anında Makaleleri
Facebook, yayıncıların Facebook'taki insanlar için inanılmaz derecede hızlı ve sürükleyici bir okuma deneyimi sunmalarına yardımcı olmak için 2015'te Instant Articles'ı başlattı. Facebook'un Anında Makaleler şunlardır:
- Standart mobil web makalelerinden 10 kat daha hızlı
- Ortalama %20 daha fazla Hızlı Makale okunuyor
- %70 okuyucunun Hızlı Makaleyi terk etme olasılığı daha düşüktür
Anında Makaleler, yayıncıların Facebook'ta hızlı ve etkileşimli makaleler oluşturmasına yardımcı olur. Size aşağıdaki avantajları sağlarlar:
- Hızlı ve duyarlı: Anında Makaleler, kullanıcının hangi bağlantıda veya cihazda olursa olsun anında yüklenir. Makaleler, mobil hikaye anlatımı deneyimine dönüştükleri için kullanımı kolaydır.
- Etkileşimli ve ilgi çekici: Makalelerin sürükleyici deneyimi onları daha etkileşimli hale getirir, bu nedenle Hızlı Makaleler mobil web makalelerinden %30 daha sık paylaşılır. Yardım, Haber Kaynağı'ndaki hikayelerinizin erişimini artırır.
- Kolay ve esnek para kazanma: Para kazanma, Hızlı Makalelerin ayrılmaz bir parçasıdır. Makalelerle işinizi büyütmek için doğrudan satılan reklamları genişletebilir, Facebook'un Audience Network'ü ile mevcut reklam envanterini doldurabilir ve hatta yerel markalı içerik oluşturabilirsiniz.
AMP sayfaları ve Hızlı Makaleler, kullanıcılara hızlı bir yükleme süresi sağlayarak sayfa hemen çıkma oranını düşürmeye ve etkileşimi artırmaya yardımcı olur. Aslında, Facebook'un Hızlı Makaleleri, AMP sayfalarından bile daha hızlı yüklenir:
Bununla birlikte, AMP sayfalarının benimsenme oranı Hızlı Makalelerden çok daha yüksektir ve bunun nedeni büyük ölçüde Facebook'un Haber Kaynağı'nda metin makaleleri yerine videoya giderek daha fazla öncelik vermesidir. Bu, New York Times ve The Guardian dahil olmak üzere birçok yayıncının Instant Articles kullanmayı bırakmasına neden oldu.
Parsley'e göre Google, yayıncılar için en büyük dış trafik kaynağı olarak Facebook'u geride bıraktı. Google artık yayıncıların dış trafiğinin %42'sini oluşturuyor:
Facebook Instant Articles'ı medya ve içerik web sitelerine yönelik baskın trafik kaynağı olarak Google'ı geride bıraktığında, ancak AMP'nin lansmanı ve başarısı ile Google tekrar liderliğe yükseldi.
AMP projesinin başarısı, bir iş ortaklığı değil, açık kaynaklı bir girişim olması gerçeğinde yatmaktadır. Facebook'un Instant Articles ile yaptığı gibi kullanıcıları belirli bir uygulamayla sınırlı tutmak yerine, AMP projesi yayıncıların mobil web sayfaları oluşturma şeklini değiştirmeyi amaçlıyor.
AMP ve Duyarlı Web Tasarımı (RWD)
Mobil uyumlu web siteleri oluşturmak, Google'ın 2015'in başlarında Mobilegeddon'u piyasaya sürmesinden bu yana pazarlamacılar için bir öncelik olmuştur. Duyarlı Web Tasarımı, esnekliğe odaklanan web sayfaları oluşturmaya yardımcı olmayı amaçlamıştır. Duyarlı bir web sayfası, daha iyi, daha etkileşimli bir mobil web deneyimi sağlayan herhangi bir cihazda veya ekranda çalıştı.
Özünde, AMP ve Duyarlı Web Tasarımı, HTML ve JavaScript gibi bir mobil sayfa oluşturmak için neredeyse aynı temel yapı taşlarını kullanır. Ancak, onları diğerlerinden ayıran farklılıklar vardır, örneğin:
1. RWD esnekliğe odaklanmıştır: Duyarlı Web Tasarımı, web sitenize esneklik katar. Ziyaretçilerin ekran boyutuna otomatik olarak yanıt veren bir sayfa oluşturabilirsiniz; bu, sayfanızın kullanıcılara çok çeşitli ekran boyutlarında iyi bir mobil deneyim sunma erişimi ve yeteneği sağlar. Duyarlı Web Tasarımı yalnızca mobil cihazlara odaklanmaz, tüm cihazlar ve tüm kullanıcı deneyimleri için çalışır.
2. AMP hıza odaklanır: AMP açık kaynak çerçevesi, özellikle mobil sayfa hızına odaklanır. AMP, mobil web içeriğine anında oluşturma özelliğini getirdi. Çerçeve, satır içi stil sayfaları, tembel yükleme, kaynakları önceden getirme ve diğer optimizasyon tekniklerini kullanarak, mobil sayfaları anında yükleyebilir.
3. AMP bir web sayfasıyla çalışır, RWD bir web sayfasının yerini alır: AMP'yi yalnızca sayfalarınızda kullanmak mümkün olsa da, AMP, web sitesi yeniden tasarlanmadan mevcut yanıt vermeyen veya yanıt vermeyen bir web sitesine de eklenebilir. Ancak, bir web sayfasını duyarlı hale getirmek için sayfayı yeniden tasarlamanız gerekir.
4. AMP daha iyi bir kullanıcı deneyimi sağlar: Mobil kullanıcı deneyimini belirleyen iki ana faktör vardır, yani sayfa öğelerinin mobil uyumlu olması ve hız. Duyarlı Web Tasarımı, sayfa öğelerini kullanıcının ekranına uyacak şekilde ölçeklendirme konusunda başarılı olsa da, AMP sayfalarına kıyasla çok hızlı bir şekilde başarısız oluyor.
5. AMP'nin JavaScript Kısıtlamaları vardır: Duyarlı Web Tasarımı, tüm üçüncü taraf komut dosyalarını ve medya kitaplıklarını destekler, aynısı AMP sayfaları için söylenemez. Sayfaların hızlı yüklenmesini sağlamak için AMP çerçevesinin çok sınırlı JavaScript ve CSS işlevleri vardır.
AMP, statik sayfalar için iyi çalışır – çok fazla dinamik içeriğe sahip olmayan sayfalar, RWD ise herhangi bir sayfa türü için kullanılabilir. Ancak, duyarlı web sayfalarının yüklenmesi biraz uzun sürer ve bu da ziyaretçilerin hemen geri dönmelerine ve muhtemelen bir daha asla geri dönmemelerine neden olur. Kullanıcılara hızlı, mobil uyumlu bir deneyim sunmak istiyorsanız AMP sayfalarını kullanmayı düşünmelisiniz.
AMP ve Aşamalı Web Uygulamaları (PWA)
Progressive Web Apps, web üzerinden sunulan bir mobil web uygulamasıdır, yerel bir uygulama gibi davranır, PWA ile yerel uygulamalar arasındaki temel fark, PWA'nın Google veya App Store'dan indirilmesine gerek olmamasıdır.
Aşamalı web uygulamaları web tarayıcısının içinde çalışır, bu da internet bağlantınız çok güçlü olmasa bile anında yüklenmesini sağlar. PWA, uygulamanın güncel kalmasını sağlamak için ön önbelleğe almayı kullanır, böylece kullanıcı yalnızca en son sürümü görür.
Aşamalı Web Uygulamalarına duyulan ihtiyaç, en iyi 1.000 mobil web sitesinin, en iyi 1.000 yerel uygulamadan 4 kat daha fazla kişiye ulaşması gerçeğinden kaynaklandı. Bununla birlikte, bu web siteleri, kullanıcılarla mobil uygulamalardan ortalama olarak 20 kat daha az etkileşimde bulunur.
Bu, esasen, mobil web sitelerinin ziyaretçileri çekmeye uygun olduğu, ancak onları ilgilendirmediği anlamına gelir.
PWA, yerel mobil uygulamaların yaptığı gibi görünecek, hissedilecek ve çalışacak şekilde tasarlanmıştır. 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 cihazlarına indirilir.
PWA:
- Güvenilir – Zayıf ağ koşullarında bile anında yüklenirler.
- Hızlı – Akıcı animasyonlar ve sarsıntılı kaydırmalar olmadan kullanıcı etkileşimlerine hızlı bir şekilde yanıt verin.
- İlgi çekici – Cihazda yerel bir uygulama gibi hissediyorlar ve sürükleyici bir kullanıcı deneyimi sağlıyorlar.
Bir mobil web uygulaması, Google tarafından belirtilen gerekli gereksinimleri karşıladığında, mobil web uygulaması kullanıcılara indirilebilir olarak sunulabilir.
AMP ve PWA arasındaki temel farklar şunlardır:
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.
Washington Post, daha iyi etkileşim ve daha hızlı yükleme süreleri sağlamak için birlikte çalışan PWA ve AMP'nin ideal bir örneğini sergiliyor. Washington Post başlangıçta web sitelerini duyarlı hale getirdiğinde, hızları 3500 ms idi. AMP'yi benimsediklerinde, sayfa yükleme süresi 1200 ms'ye düşürüldü, daha sonra AMP CDN teknolojisi yardımıyla 400 ms'ye düşürüldü.
Kullanıcılar, web sitesi yükünü azaltmak için PWA'yı benimsedikten sonra, herhangi bir kesinti olmadan yıldırım hızında sayfa yükleme hızlarının ve daha iyi bir kullanıcı deneyiminin keyfini çıkarabilirler.
Hızlandırılmış Mobil Sayfalar projesi, anında yüklenen mobil sayfalar oluşturmanıza olanak tanıyarak ziyaretçilerin geri dönmek yerine sayfayla daha iyi etkileşim kurmasına yardımcı olur. AMP sayfaları oluşturmaya dahil olan optimizasyon teknikleri, yalnızca sayfa yükleme süresini hızlandırmakla kalmaz, aynı zamanda ziyaretçilere iyi bir kullanıcı deneyimi sunar.
Sonraki bölüm, sayfalarınızda AMP çerçevesini kullandığınızda tam olarak elde ettiğiniz avantajlara odaklanacaktır.
BÖLÜM 3: AMP avantajları ve kısıtlamaları
AMP, web sayfalarının daha hızlı yüklenmesini sağlayarak kullanıcı deneyimine yardımcı olur ve ziyaretçilerin sayfada daha uzun süre kalmasını sağlar. AMP, mobil sayfaların daha hızlı yüklenmesine yardımcı olan AMP HTML'yi kullanır. Aslında Google'dan Gary Illayes'e göre, AMP sayfalarının medyan yükleme süresi 1 saniyedir ve bu, ortalama standart HTML sayfasından 4 kat daha hızlıdır.
Sayfa hemen çıkma oranı ve sayfa hızı arasındaki bağlantıyı zaten tartıştık ve AMP'nin nasıl çalıştığına ve PWA, RWD ve Facebook'un Hızlı Makaleleri ile nasıl karşılaştırıldığına dair ayrıntılı bir hesap gördük.
Kılavuzun bu bölümü AMP'nin faydalarına ve kısıtlamalarına odaklanacak ve AMP sayfaları oluşturduğunuzda mağazanızda neler olduğuna dair ayrıntılı bir hesap almanıza yardımcı olacaktır.
AMP'nin Faydaları
Mobil web sayfanız daha hızlı yüklendiğinde, kullanıcı deneyimini ve KPI'larınızı otomatik olarak iyileştirirsiniz. AMP sayfalarının anında yüklenmesi sayesinde, kullanıcılarınıza Google, LinkedIn ve Bing gibi tüm cihaz ve platformlarda sürekli olarak hızlı bir web deneyimi sunabilirsiniz.
AMP, mobil sayfalarınıza aşağıdaki avantajları sunar.
Kitlelerin ilgisini çeker
AMP sayfalarının medyan yükleme süresi bir saniyenin altındadır, bu, bir kullanıcı bir AMP sayfasına geldiğinde aradıklarını anında elde ettiği anlamına gelir. Sayfa anında yüklendiğinden, sayfayla daha uzun süre etkileşime girerler ve teklifiniz hakkında bilgi edinmeye daha açık olurlar, bu da onların yapmasını istediğiniz eylemi gerçekleştirme olasılığını artırır.
Geliri en üst düzeye çıkarır
Sayfanızın dönüşümlerinizi yüklemek için harcadığı her ek saniyede %12 düşer. Bu, kitlelerin ilgisini çekmek ve yatırım getirinizi artırmak istiyorsanız, mobil sayfanızın ziyaretçilerinizin hız beklentilerini karşılamasını sağlamanız gerektiği anlamına gelir.
AMP çerçevesi, kullanıcılara reklamlar, tıklama sonrası açılış sayfaları ve web siteleri dahil her yerde daha hızlı bir deneyim sunmanıza olanak tanır.
Esnekliği ve kontrolü koruyun
AMP biçimini benimsediğinizde, AMP'ler için optimize edilmiş web bileşenlerinden yararlanırken kendi markanızı koruma olanağına sahip olursunuz. Web sayfanızın stilini özelleştirmek için CSS kullanabilir ve gerektiğinde verileri getirmek için dinamik içerik kullanabilirsiniz.
Müşterileriniz için mümkün olan en iyi mobil kullanıcı deneyimini test etmek ve oluşturmak için A/B testini de kullanabilirsiniz.
Operasyonlarınızdaki karmaşıklığı azaltın
AMP sayfaları oluşturma süreci oldukça basit ve anlaşılırdır. Özellikle Drupal ve WordPress dahil olmak üzere CMS kullanıyorsanız tüm arşivinizi dönüştürme olanağına sahipsiniz.
Her AMP sayfası için kodu optimize etmek için herhangi bir özel beceriye sahip olmanız gerekmez, AMP formatı tamamen taşınabilirdir ve AMP sayfaları, kullanıcının bunlara nasıl ulaştığından bağımsız olarak sürekli olarak hızlıdır.
YG'nizi en üst düzeye çıkarın
AMP sayfaları oluşturulduktan sonra çok çeşitli dağıtım platformlarına aynı anda dağıtılabilir. Bu, reklamlarınızın hem AMP hem de AMP olmayan sayfalarda yayınlanmasını sağlar; bu, reklamlarınızı bir kez oluşturabileceğiniz ve her yerde unutulmaz bir marka deneyimi sunabileceğiniz anlamına gelir.
Sürdürülebilir bir gelecek yaratın
AMP projesi, herkesin daha iyi ve daha hızlı bir mobil kullanıcı deneyimi sunmasına yardımcı olarak web'in geleceğini koruyan açık kaynaklı bir girişimdir. AMP projesine katılarak AMP projesine katılabilir ve açık, daha hızlı bir web üzerinde işletmeniz için sürdürülebilir bir gelecek inşa edebilirsiniz.
Daha iyi bir kullanıcı deneyimi sağlayın
Elbette, hızlandırılmış mobil tıklama sonrası açılış sayfalarını kullanmanın en belirgin avantajı, çok daha yüksek kullanıcı memnuniyeti sağlayacak olmasıdır. Her iki kişiden biri, bir web sitesinin yüklenmesi için sadece 10 saniye beklemeye zahmet edemediğinde, süreci %15-85 oranında hızlandırmak, ziyaretçi mutluluğu üzerinde büyük bir etki yaratabilir.
SEO desteği alın
Google'ın algoritması, sayfa hızını ve mobil yanıt verme hızını hesaba katar. Sayfanız mobilde ne kadar hızlı yüklenirse, arama motoru sonuç sayfalarında o kadar üst sıralarda yer alır.
AMP'nin etkin olduğu tüm sayfalar, arama sonuçlarındaki ücretli reklamların üzerinde bile bir atlıkarınca biçiminde görünür, başlığın altında yeşil bir şimşek bulunur.
AMP sayfalarını kullanmak size birçok avantaj sağlasa da AMP'nin bazı dezavantajları da vardır.
Üçüncü taraf JavaScript yok
Üçüncü taraf JavaScript kullanma becerisine sahip olmadığınız için, yüksek düzeyde hedeflenmiş reklamcılık deneyimleri sunmanıza olanak tanıyan analitik ve izleme özelliklerine veda etmeniz gerekir.
Sadece bu değil, Google'ın daha hafif JavaScript sürümüyle, veri aktarımını gerektiren sayfa öğeleri AMP sayfalarında kullanılamaz.
Google Analytics izleme yok
Google, sunucularınıza erişmek yerine kullanıcılara AMP sayfalarının önbelleğe alınmış bir sürümünü kullanır, AMP sayfalarının bu kadar hızlı yüklenmesinin nedenlerinden biri de budur. Önbellek, sayfalarınızın daha hızlı yüklenmesine izin verse de, GA'da yapılandırmalar yapmadığınız ve AMP sayfalarınıza ayrı izleme kodları uygulamadığınız sürece Google Analytics, kullanıcılardan gelen ziyaretleri izlemez.
Google Etiket Yöneticisi ile Google Analytics'te AMP sayfalarını nasıl takip edebileceğiniz aşağıda açıklanmıştır.
AMP sayfaları, avantajları ve dezavantajları ile birlikte gelir, ancak ziyaretçilerinize hızlı ve optimize edilmiş bir mobil deneyim sunmak istiyorsanız, AMP profesyonelleri kesinlikle eksilerinden daha ağır basar.
Bir sonraki bölüm, KPI'ları yerine getirmek ve yatırım getirisini artırmak için AMP'yi kullanan işletmelerin örnek olay incelemelerini vurgulayacaktır.
BÖLÜM 4: AMP başarı öyküleri
Mobil web sayfalarından bahsettiğimizde hız eşittir gelir demektir. SOASTA tarafından yapılan araştırma, sayfa yükleme süresindeki 100 ms'lik gecikmenin bile daha düşük dönüşümlere yol açabileceğini gösteriyor:
AMP'nin mobil web sayfaları üzerindeki etkisini vurgulamak için Google, AMP kullanan yayıncılar ve e-ticaret web siteleri arasında toplam bir Ekonomik Etki™ araştırması yürütmek üzere Forrester Consulting'i görevlendirdi.
Araştırma, AMP formatını kullanan 4 web şirketini öne çıkarıyor. 4 şirketin sonuçlarına bakarak Forrester, üç yıllık bir süre boyunca AMP'nin uygulanmasından beklenen getiriyi tahmin etmek için bir model oluşturdu.
Bu modeli kullanarak, aylık site ziyareti sayısı 4 milyon olan ve %10 kar marjı olan bir web sitesi, AMP sayfalarını yerleştirme maliyetlerini geri almayı ve 6 aydan kısa bir süre içinde olumlu kazançlar görmeye başlamayı bekleyebilir:
Araştırmadan elde edilen birincil sonuçlar şunlardır:
- Satış dönüşüm oranında %20 artış. Bu çalışma için görüşülen iki e-ticaret web sitesi tarafından gerçekleştirilen A/B testi, AMP sayfalarındaki dönüşüm oranında %20'lik bir artış olduğunu gösterdi ve bu, Forrester modeline göre yıllık 200.000 ABD Doları'nın üzerinde kâr getirecekti.
- AMP site trafiğinde yıldan yıla %10 artış. Site trafiğindeki bir artış, ek satışlar ve reklam görüntülemeleri ile sonuçlanır ve bu, modele bağlı olarak bir site için ilk yılda 75.000 doların üzerinde yıllık kâr getirecektir.
- Ziyaret başına sayfa sayısında %60 artış. AMP sayfaları, siteye gelen kişi sayısında %60'lık bir artış olduğunu ve bu kişilerin sitede iki kat daha fazla zaman geçirdiğini söyleyen e-ticaret ve haber yayıncıları için olumlu bir performans sergiledi.
AMP nispeten yeni bir biçimdir ve açıkçası, benimsenmesiyle ilgili bazı maliyetlere katlanmanız gerekir. Ancak, AMP biçimini uygulamanın getirisi, başlangıç maliyetinden daha ağır basar.
Gizmodo, mobil cihazlarda 3 kat daha hızlı olmak için AMP sayfalarını kullanıyor
Gizmodo, trafiğinin yarısı mobil web sitelerinden gelen kullanıcı deneyimine odaklanıyor ve okuyucuların içerikleriyle mobil cihazlarda etkileşim kurmasını istiyorlarsa web sitesinin hızlı ve net olmasını sağlamak çok önemliydi.
The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.
Head of Gizmodo's Data Analytics, Josh Laurito felt this was their main challenge:
We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.
Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.
Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:
AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo's traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.
TransUnion increases conversions with AMP
TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.
TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn't need to redesign the content – they went online with AMP pages in a week.
The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion's AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:
Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.
When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.
The next section will highlight the importance of AMP post-click landing pages, and how connecting optimized AMP ad post-click landing pages leads to better post-click landing page.
SECTION 5: Why you should create AMP post-click landing pages
The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.
Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad post-click landing pages as well.
To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad post-click landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.
The Accelerated post-click landing page or (ALP) loads fast because of the following optimization techniques:
- Pre-connect to post-click landing page: Typical ads don't know the URL of the actual post-click landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective post-click landing page, and the page loads instantly.
- Pre-fetch post-click landing pages: The non-CPU intensive resources that are visible on the first viewport of the post-click landing page are downloaded before the user clicks the ad, so the page loads instantly.
- Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the post-click landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP post-click landing pages easy.
- No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the post-click landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the post-click landing page.
AMP tarafından oluşturulan tıklama sonrası açılış sayfaları, kullanıcıların bir mobil AMP reklamını tıkladıklarında başlattıkları basitleştirilmiş mobil deneyimi sürdürmek için çerçeve ile tasarlanmıştır.
Here's how AMP Ad post-click landing pages compare to regular ad post-click landing pages:
This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:
Accelerated post-click landing pages give a better post-click landing page to visitors because:
- Users will be more willing to click on ads when they know their ad expectations will be met.
- Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
- Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.
Creating ALPs seems like a no-brainer when you consider the fact that Google looks at post-click landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.
And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.
Businesses that are using AMP pages are already seeing massive ROI, so what's holding you back from creating Accelerated post-click landing pages?
How to create AMP pages with Instapage
In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.
Fast forward to May 2018 and Instapage now empowers marketers with the ability to create post-click landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.
With this new Instapage capability, digital marketers can create AMP post-click landing pages directly from our platform in a matter of minutes just by following these steps.
Step 1: Create a new page
Select AMP Page from the modal:
The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.
Step 2: Add elements to the page
The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:
AMP does not support HTML/CSS or JavaScript so you won't find those settings in the Instapage AMP builder. You will, however, still see these options:
Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.
AMP post-click landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn't exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:
Step 3: Create a variation to A/B test
Click “Create an A/B Test” and add a new variation or import one of your own:
With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:
Step 4: Validate the page
As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:
Should the page pass validation, you will see this on-screen message:
Bitirip Yayınla'yı tıkladıktan sonra, 75 KB sınırını aşmanız durumunda bilgilendirileceksiniz:
Doğrulandıktan sonra sayfanız yayınlanmaya hazırdır.
5. Adım: Yayınlayın
WordPress ve özel alanlar, Instapage'de AMP tıklama sonrası açılış sayfalarını yayınlayabilir. Mavi yayınla düğmesini tıkladıktan sonra iki yöntemden birini seçebilirsiniz:
WordPress için, web sitenizdeki Instapage eklentisini kurun ve oturum açın ve yeni AMP tıklama sonrası açılış sayfanızı WordPress'te yayınlayın:
Aksi takdirde, alan adınızı ve alt alan adınızı girin:
Sayfa yayına girer girmez, gösterge tablosunda sayfanın yanında AMP logosunu göreceksiniz:
Mobil sayfalarınızda yüksek hemen çıkma oranları ve yavaş sayfa yükleme hızı nedeniyle düşük ziyaretçi katılımı görülüyorsa, AMP sayfaları oluşturmak harika bir çözümdür.
AMP çerçevesi, yalnızca sayfa hızına yardımcı olan değil, aynı zamanda kullanıcılara keyifli bir mobil deneyim sağlayan optimizasyon tekniklerini dağıtır. AMP reklamı tıklama sonrası açılış sayfaları oluşturmak, ziyaretçilerinize optimize edilmiş, hızlı ve alakalı tıklama sonrası açılış sayfaları sunmanıza yardımcı olur.
Instapage, şu anda Google'ın AMP çerçevesini kullanarak mobil cihazlar için optimize edilmiş tıklama sonrası açılış sayfaları oluşturmanıza olanak tanıyan tek tıklama sonrası açılış sayfası platformudur. AMP ile oluşturulan tıklama sonrası açılış sayfalarında neredeyse anında yükleme ve sorunsuz kaydırma vardır.
Daha iyi bir mobil tarama deneyimi oluşturmak, kalite puanlarınızı yükseltmek ve daha fazla dönüşüm sağlamak için Instapage ile AMP sayfaları oluşturmaya bugün başlayın.