AMP nedir? Hızlandırılmış Mobil Sayfalar İçin Eksiksiz Kılavuz

BÖLÜM 1: Hızlandırılmış Mobil Sayfalar nedir?

Öncelik mobil zihniyeti kalıcıdır - bu ifade hem iş hem de tüketici açısından geçerlidir.

Kullanıcılara, bir satın alma işlemi yapmadan önce cep telefonlarına bakın demek, yetersiz bir ifade 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ına kıyasla masaüstü kullanımı 4 kattan fazladır:

Yalnızca ABD'de her gün 30 milyar mobil an (bir müşterinin telefonuna başvurduğu ve anında yanıt beklediği an) vardır. Bu, markanızın kullanıcılara istedikleri bir şeyi sunmak için her gün 30 milyar mobil fırsata sahip olduğu anlamına gelir.

Yine de mobil reklam harcaması, mobil medya tüketiminin gerisinde kalıyor:

Kullanıcıların satın almak yerine mobil cihazda gezinmeye daha fazla zaman ayırmasının bir nedeni var - kullanıcılar mobil cihazlarında anında tatmin olmayı daha çok istiyorlar.

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.

Bu, reklamınızı beğenen ve tıklayan bir kullanıcının dikkatini çekmeniz gereken tüm zamandır. Ve web sayfanız yukarıda belirtilen süre içinde yüklenmezse, ne kadar çekici olursa olsun, reklamı boşuna yarattınız. Kötü haber şu ki, verilere göre çoğu perakende mobil sitesinin yüklenmesi yaklaşık 6,9 saniye sürüyor; bu, 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. Bunu daha fazla incelemeden önce, mobil site hemen çıkma oranları için hızın öncelikle iki yönüyle ele alındığını açıklamak önemlidir, yani DOM hazır süresi ve tam sayfa yükleme süresi:

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ı fark etmese de, resimler gibi herhangi bir sayfa öğesinin yüklenebilmesi için önce kodun yüklenmesi gerekir. HTML kodu çok uzun sürerse, web sitesinin yüklenme 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 önleyen JavaScript kullanımından kaçınmak en iyisidir. JavaScript kullanan sayfa öğeleri, sayfanın yüklenebilmesi için 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, resimlerin, yazı tiplerinin, CSS kodlarının vb. bir web sayfasına yüklenmesi için geçen süreyi içerir. Daha hızlı bir tam sayfa yükleme, daha düşük hemen çıkma oranına yol açar:

Web sayfanızın daha hızlı tam sayfa yükleme süresine sahip olmasını sağlamak için resimleri, yazı tiplerini optimize etmeli ve yükleme süresini yavaşlatma potansiyeline sahip üçüncü taraf dosyalardan kaçınmalısınız.

Sayfa yükleme süresi, sayfanın hemen geri dönmesinin en güçlü nedenlerinden biridir, daha da kötüsü, kullanıcıların sayfayı terk etmesi değil, araştırmalara göre kullanıcıların %79'u bir web sayfasında yavaş bir deneyim yaşadıktan sonra geri dönmeyecek.

Sayfa yükleme hızıyla ilgili şu şaşırtıcı açıklamaları göz önünde bulundurun:

• 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 saniye için dönüşümlerin %20 azaldığını tespit etti. Karşılaştıracak olursak, 5 saniyede yüklenen siteler, 19 saniyede yüklenen sitelere göre 2 kat daha fazla mobil reklam gelirine sahipti.
• 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 değilse, kullanıcı için yeterince hızlı değilse, geri döner ve muhtemelen geri gelmez.
Bunun mobil web sayfanızın başına gelmemesini sağlamak için mobil web sitelerinizi ve açılış sayfalarınızı AMPlify 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 kaynak 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 tanıyarak "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şturuldu. Bugüne kadar 1,5 milyardan fazla AMP sayfası oluşturuldu ve 100'den fazla önde gelen analitik, reklam teknolojisi ve CMS sağlayıcısı, AMP biçimini destekliyor.

AMP formatında mobil sayfalar oluşturduğunuzda şunları elde edersiniz:

1. Daha yüksek performans ve katılım: AMP açık kaynak projesinde oluşturulan sayfalar neredeyse anında yüklenerek kullanıcılara hem mobil 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ı kullanacaklarına karar verme fırsatına sahiptir.

Muhtemelen daha önce bir AMP sayfasına tıkladınız, ancak bunun farkında değilsiniz. Fark etmiş olabileceğiniz tek şey, tıkladıktan hemen sonra sayfanın ne kadar hızlı açıldığıydı. AMP ile 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ının görünüşü şöyledir:

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 aramada 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ını kullanırken belirli beklentileri vardır, anlamlı, alakalı ve daha hızlı deneyimler isterler - hedef kitlenizin beklentilerinin karşılandığından emin olmak için en iyi seçenek AMP'dir.

Bu kılavuz, AMP açık kaynak projesi hakkında bilmeniz gereken her şeyi size gösterecek. AMP'lerin nasıl çalıştığını ve sayfaların bu kadar hızlı yüklenmesini sağlayan şeyin tam prosedürünü inceleyeceğiz.

Kılavuz ayrıca, AMP kullanmanın farklı sektörlerdeki işletmeler için dönüşümleri artırmaya nasıl yardımcı olduğuna ve sayfalarınızı AMPlify ettiğinizde elde edeceğiniz avantajlara ilişkin vaka incelemelerini de içerecektir. Son bölüm, Hızlandırılmış Mobil açılış sayfalarının ne olduğunu ve ziyaretçilere daha hızlı ve daha alakalı bir açılış sayfası sunmak için sayfaları neden oluşturmanız gerektiğini ele alacaktır.

BÖLÜM 2: AMP nasıl çalışır?

Google, Accelerated Mobile Pages (AMP) açık kaynak çerçevesini Şubat 2016'da piyasaya sürdü. Ç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şturmaya yönelik 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 konuşlandırılabilir, doğrulanabilir ve web sayfası tasarımında kullanıcıyı ilk sıraya koyma konusunda fikir sahibidir.

Yaklaşık iki yıl önce lansmanından bu yana 25 milyon alan, 4 milyardan fazla AMP sayfası yayınladı:

Lansmanından bu yana yalnızca AMP sayfalarının sayısı değil, hızları da arttı, bir AMP sayfasının Google aramadan yüklenmesi için geçen ortalama 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şıyor:

AMP, işletmelerin web sayfalarının modern, temiz ve alakalı sürümlerini oluşturması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çeriklerinde 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 sitesinden alınan verileri analiz etti.

AMP sayfaları, standart web sayfalarından kabaca dört kat daha hızlı yüklenir ve ayrıca 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 Progresif Web Uygulamaları ile karşılaştırması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, 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 çoğu etiket normal HTML etiketleridir, ancak bazı HTML etiketleri AMP'ye özgü etiketlerle değiştirilmiştir. Bu özel etiketler, AMP HTML bileşenleri olarak adlandırılır ve ortak etiket kalıplarının, yüksek 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 AMP sürümüne veya yalnızca 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 en iyi performans uygulamalarının tümünü uygular; bu, kaynak yüklemeyi yönetir ve hızlı sayfa oluşturmayı sağlamak için size özel HTML etiketleri verir.

AMP JS, dış kaynaklardan gelen her şeyi eşzamansız hale getirir, böylece sayfadaki hiçbir şey herhangi bir şeyin oluşturulmasını engelleyemez. JS ayrıca, tüm iframe'lerin korumalı alanı, kaynaklar yüklenmeden önce her sayfa öğesinin düzeninin önceden hesaplanması ve yavaş CSS seçicilerin devre dışı bırakılması gibi diğer performans tekniklerini 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 iletmek 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, HTTP 2.0 kullanan aynı kaynaktan belgeyi, JS dosyalarını ve tüm görüntüleri yükler.

AMP Önbelleği, bir sayfanın çalışmasının garanti edildiğini ve sayfayı yavaşlatabilecek dış güçlere bağlı olmadığını onaylayan yerleşik bir doğrulama sistemiyle birlikte gelir. Doğrulama sistemi, sayfanın işaretlemesinin AMP HTML spesifikasyonlarını karşıladığını onaylayan bir dizi doğrulama üzerinde çalışır.

Doğrulama sisteminin ek bir sürümü, her AMP sayfasının yanında mevcuttur. Bu sürüm, doğrulama hatalarını sayfa oluşturulduğunda doğrudan tarayıcının konsoluna kaydederek, kodunuzdaki performans ve kullanıcı deneyimini etkileyebilecek 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ümde, AMP sayfalarını bu kadar hızlı hale getirmek için bir araya gelen yedi optimizasyon tekniği vurgulanacaktı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 sayfanın yavaş yüklenmesine 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ılan 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 kullanır, ancak sayfanın oluşturulmasını engelleyemez.

Tüm kaynaklar statik olarak boyutlandırılmıştır

Sayfa kaynakları indirilmeden önce AMP'nin her öğ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 düzenlemek için yalnızca tek bir HTTP isteği gerekir. AMP, tarayıcıda herhangi bir pahalı stil düzenini ve yeniden hesaplamayı önleyecek şekilde optimize edildiğinden, sayfa kaynakları yüklendiğinde herhangi bir yeniden düzen yoktur.

Uzatma mekanizmaları, işlemeyi 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, neleri içereceğini bilmeden önce iframe kutusunu oluşturur.

Tüm üçüncü taraf JavaScript'ler 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ı alandaki iframe JavaScript, birden çok stil yeniden hesaplamasını tetiklese bile, küçük iframe'lerinde çok az DOM bulunur.

İç çerçeve yeniden hesaplamaları, sayfa için stillerin ve mizanpajın yeniden hesaplanmasına 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, aynı zamanda tüm sayfa yüklemesini de engeller ve şişkinliğe neden olma eğilimi vardır. 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, ancak bu çok karmaşık sayfalar için yeterince büyük olsa da yine de sayfa yazarının iyi bir CSS hijyeni uygulaması gerekir.

Yazı tipi tetikleme etkilidir

Web yazı tiplerinin boyutu genellikle büyük olduğundan, web yazı tipi optimizasyonu hızlı yükleme için kritik öneme sahiptir. Birkaç senkronizasyon 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 ve tarayıcının yazı tiplerini indirmesini engelleyen hiçbir HTTP isteği olmaması nedeniyle mümkün olmuştur.

Stil yeniden hesaplamaları en aza indirildi

AMP sayfalarında, tüm DOM okumaları tüm yazma işlemlerinden önce gerçekleşir; bu, çerçeve başına stillerin yalnızca bir kez yeniden hesaplanmasını sağlar; bu nedenle sayfa oluşturma performansı üzerinde olumsuz bir etki olmaz.

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 katmanlar üzerinde bazı şeyleri nasıl gerçekleştireceğini bilir; katmanlar taşınabilir ve soluklaştırılabilir. 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 ile hızlandırılabilmesini sağlar; bu, AMP'nin yalnızca dönüşüm ve opaklıkta animasyona ve geçişe izin verdiği anlamına gelir, böylece sayfa düzeni gerekli değildir.

Kaynak yüklemeye öncelik verilir

AMP, tüm kaynak yüklemeyi kontrol eder, kaynak yüklemeye öncelik verir ve yalnızca gerekli olanı yükler ve geç yüklenen tüm kaynakları önceden getirir.

AMP kaynakları indirdiğinde indirmeleri optimize eder, böylece önce en önemli kaynaklar indirilir. Tüm görseller ve reklamlar, yalnızca kullanıcı tarafından görülme olasılığı varsa, ekranın üst kısmındaysa veya ziyaretçi bunları kaydırma olasılığı varsa indirilir.

AMP ayrıca geç yüklenen kaynakları önceden getirme yeteneğine de sahiptir, bu kaynaklar mümkün olduğu kadar 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 olabildiğince hızlı olmasını sağlamak için yoğun bir şekilde kullanılır. Bu nedenle, kullanıcı sayfaya gitmek istediğini açıkça belirtmeden önce sayfa oluşturulur; sayfa, kullanıcı onu gerçekten gördüğünde kullanılabilir olabilir ve bu da sayfanın anında yüklenmesini sağlar.

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ı öğrendiğimize göre, AMP'nin Facebook'un Anında Makaleler, Duyarlı Web Tasarımı ve Progresif Web Uygulamaları ile karşılaştırmasına bakalım.

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 yılında Hızlı Makaleler'i başlattı. Facebook'un Anlık Makaleleri:

• Standart mobil web makalelerinden 10 kat daha hızlı
• Ortalama olarak %20 daha fazla Hızlı Makale okunuyor
• %70 okuyucunun bir Hızlı Makaleyi terk etme olasılığı daha düşüktür

Hızlı 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ı: Kullanıcı hangi bağlantıda veya cihazda olursa olsun, Anında Makaleler anında yüklenir. Makaleler, mobil hikaye anlatımı deneyimi için 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. Haber Kaynağı'ndaki hikayelerinizin erişimini artırmanıza yardımcı olur.
• 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, mevcut reklam envanterini Facebook'un Audience Network'üyle doldurabilir ve hatta yerel markalı içerik oluşturabilirsiniz.

Hem AMP sayfaları hem de Hızlı Makaleler, kullanıcılara hızlı yükleme süresi sağlayarak sayfadan 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 büyük ölçüde nedeni, 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 Hızlı Makaleleri kullanmayı bırakmasına yol açtı.

Parsley'e göre Google, yayıncılar için en büyük harici trafik kaynağı olarak Facebook'u geride bıraktı. Google artık yayıncıların harici trafiğinin %42'sini oluşturuyor:

Facebook, Anında Makaleler'i başlattığında, medya ve içerik web sitelerine yönelik baskın trafik kaynağı olarak Google'ı geride bıraktı, ancak AMP'nin lansmanı ve başarısıyla Google yeniden liderliği ele geçirdi.

AMP projesinin başarısı, bir iş ortaklığı değil, açık kaynak kodlu bir girişim olmasında yatmaktadır. AMP projesi, Facebook'un Anında Makaleler ile yaptığı gibi, kullanıcıları belirli bir uygulamaya hapsetmek yerine, 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çlıyordu. Duyarlı bir web sayfası, herhangi bir cihazda veya ekranda çalışarak daha iyi, daha etkileşimli bir mobil web deneyimi sağladı.

Temelde, AMP ve Duyarlı Web Tasarımı, bir mobil sayfa oluşturmak için neredeyse aynı temel yapı taşlarını kullanır, yani HTML ve JavaScript. Ancak, onları ayıran bazı farklılıkları vardır, örneğin:

1. RWD esnekliğe odaklanır: Duyarlı Web Tasarımı, web sitenize esneklik katar. Bir ziyaretçinin ekran boyutuna otomatik olarak yanıt veren bir sayfa oluşturabilirsiniz; bu, sayfanıza geniş bir ekran boyutu yelpazesinde kullanıcılara iyi bir mobil deneyim sunma olanağı ve erişimi sağlar. Duyarlı Web Tasarımı yalnızca mobile 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 işlemeyi tanıttı. Satır içi stil sayfaları, yavaş yükleme, önceden getirme kaynakları ve diğer optimizasyon tekniklerini kullanan çerçeve, 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, web sitesi yeniden tasarlanmadan yanıt vermeyen veya yanıt vermeyen mevcut bir web sitesine de AMP 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ıyla eşleşecek şekilde ölçeklendirmede başarılı olsa da, AMP sayfalarıyla karşılaştırıldığında korkunç bir hızda 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ı şeyi AMP sayfaları için söylemek mümkün değildir. Sayfaların hızlı yüklenmesini sağlamak için AMP çerçevesi çok sınırlı JavaScript ve CSS işlevlerine sahiptir.

AMP, çok fazla dinamik içerik içermeyen statik sayfalar için iyi çalışır, RWD ise her tür sayfa için kullanılabilir. Bununla birlikte, duyarlı web sayfalarının yüklenmesi biraz uzun sürer ve bu da ziyaretçilerin geri dönmesine ve muhtemelen bir daha asla geri dönmemesine neden olur. Kullanıcılara hızlı, mobil duyarlı bir deneyim sunmak istiyorsanız, AMP sayfalarını kullanmayı düşünmelisiniz.

AMP ve Aşamalı Web Uygulamaları (PWA)

Aşamalı Web Uygulamaları, 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, 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örebilir.

Aşamalı Web Uygulamalarına olan ihtiyaç, ilk 1.000 mobil web sitesinin, ilk 1.000 yerel uygulamadan 4 kat daha fazla kişiye ulaşması gerçeğinden doğdu. Ancak, bu web siteleri, mobil uygulamalardan ortalama olarak 20 kat daha az dakika boyunca kullanıcıları meşgul ediyor.

Bu, esasen, mobil web sitelerinin ziyaretçileri çekmeye uygun olduğu, ancak onları meşgul etmediği anlamına gelir.

PWA, yerel mobil uygulamaların yaptığı gibi görünmek, hissetmek ve çalışmak için 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ı cihazlarına yüklemesi istenir. Yüklemeyi seçerlerse uygulama, cihazlarına yerel bir uygulamanın yapacağı şekilde indirilir.

PWA'lar:

• Güvenilir – Zayıf ağ koşullarında bile anında yüklenirler.
• Hızlı – Sorunsuz animasyonlarla ve sarsıntılı kaydırma olmadan kullanıcı etkileşimlerine hızla yanıt verin.
• Etkileyici – Cihazda yerel bir uygulama gibi hissettirerek sürükleyici bir kullanıcı deneyimi sağlarlar.

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, AMP'nin aşamalı web uygulamalarıyla birlikte kullanımı, geliştiricilerin her ikisinden de üç şekilde yararlanmasıyla 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ğiyle yetinebiliyorsanız, bu seçenek, aşamalı bir web uygulaması olarak ışık hızında deneyimler oluşturmanıza olanak tanır. Örnek olarak AMP şu şekilde oluşturulmuştur - tamamen AMP ile şarj edilen aşamalı web uygulaması. Çevrimdışı erişime izin veren bir hizmet çalışanına ve "Ana ekrana ekle" başlığını isteyen bir bildirime sahiptir.

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

AMP ile aşamalı bir web uygulamasını birlikte kullanmanın başka bir yolu, AMP sayfanızı web sitenizin kancası olarak düşünmektir. Anlık bir yük ile kullanıcıyı yakalar ve ardından onları aşamalı web uygulamanızın içine ç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'ye karşı PWA'da olduğu gibi, ya hep ya hiç olmak zorunda değil. 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 yapabilirsiniz, böylece dinamik işlevsellikten tamamen ödün vermeden boyutunu küçültebilir ve yükleme süresini kısaltabilirsiniz.

Bu, AMP'nin bir web sayfasının bir alanı içine yerleştirilmesine izin veren "Gölge AMP" adı verilen başka bir AMP biçiminin kullanılmasını içerir. Sonuç, aşamalı bir web uygulamasının kabuğundaki AMP'dir.

Washington Post, daha iyi katılım 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, web sitesini başlangıçta duyarlı hale getirdiğinde, hızları 3500 ms idi. AMP'yi benimsediklerinde, sayfa yükleme süresi 1200 ms'ye düşürüldü, ardından AMP CDN teknolojisinin yardımıyla 400 ms'ye düşürüldü.

Web sitesi yükünü azaltmak için PWA'yı benimsedikten sonra, kullanıcılar herhangi bir kesinti olmadan ışık hızında sayfa yükleme hızlarının ve daha iyi 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 sayfadan çıkmak yerine sayfayla daha iyi etkileşim kurmasına yardımcı olur. AMP sayfaları oluşturmaya dahil olan optimizasyon teknikleri, sayfa yükleme süresini hızlandırmakla kalmaz, aynı zamanda ziyaretçilere iyi bir kullanıcı deneyimi sunar.

Bir 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 ortalama yüklenme süresi 1 saniyedir ve bu, ortalama standart HTML sayfasından 4 kat daha hızlıdır.

Sayfadan hemen çıkma oranı ile sayfa hızı arasındaki bağlantıyı daha önce tartışmıştık ve AMP'nin nasıl çalıştığına ve PWA, RWD ve Facebook'un Hızlı Makalelerine kıyasla nasıl olduğuna dair ayrıntılı bir açıklama gördük.

Kılavuzun bu bölümü, AMP sayfaları oluştururken neleri depoladığınıza dair ayrıntılı bir açıklama elde etmenize yardımcı olarak AMP'nin avantajlarına ve kısıtlamalarına odaklanacaktı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 Google, LinkedIn, Bing gibi tüm cihaz ve platformlarda kullanıcılarınıza 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 ortalama yüklenme süresi bir saniyenin altındadır, bu da bir kullanıcı bir AMP sayfasına geldiğinde aradığını anında elde ettiği anlamına gelir. Sayfa anında yüklendiğinden, sayfayla daha uzun süre etkileşimde bulunurlar ve teklifinizi öğrenmeye daha açık olurlar, bu da onların gerçekleştirmelerini istediğiniz eylemi gerçekleştirme olasılıklarını artırır.

Geliri en üst düzeye çıkarır

Sayfanızın yüklenmesi için geçen her saniye, dönüşümlerinizi %12 oranında düşürür. Bu, kitlelerin ilgisini çekmek ve YG'nizi 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, açılış sayfaları ve web siteleri dahil olmak üzere her yerde daha hızlı bir deneyim sunmanıza olanak tanır.

Esnekliği ve kontrolü koruyun

AMP formatını 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 almak için dinamik içeriği 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.

İşlemlerinizdeki karmaşıklığı azaltın

AMP sayfaları oluşturma süreci oldukça basit ve basittir. Özellikle Drupal ve WordPress dahil olmak üzere CMS kullanıyorsanız, tüm arşivinizi dönüştürme olanağına sahipsiniz.

Her bir AMP sayfasının kodunu optimize etmek için herhangi bir özel beceriye sahip olmanıza gerek yoktur, AMP formatı tamamen taşınabilirdir ve AMP sayfaları, kullanıcının onlara nasıl ulaştığına bakmaksızın sürekli olarak hızlıdır.

YG'nizi en üst düzeye çıkarın

Oluşturulduktan sonra AMP sayfaları, çok çeşitli dağıtım platformlarına aynı anda dağıtılabilir. Bu, reklamlarınızı hem AMP hem de AMP olmayan sayfalarda yayınlamanıza olanak tanır; 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, 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 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 açılış sayfalarını kullanmanın en belirgin avantajı, çok daha yüksek kullanıcı memnuniyeti sağlayacak olmalarıdır. Her iki kişiden biri bir web sitesinin yüklenmesi için sadece 10 saniye bekleme zahmetine katlanamadığında, süreci %15-85 oranında hızlandırmak ziyaretçi mutluluğu üzerinde büyük bir etkiye sahip olabilir.

SEO desteği alın

Google'ın algoritması, sayfa hızını ve mobil yanıt verebilirliği hesaba katar. Sayfanız mobil cihazlarda ne kadar hızlı yüklenirse, arama motoru sonuç sayfalarında o kadar üst sıralarda yer alır.

Tüm AMP özellikli sayfalar, başlığın altında yeşil bir şimşek bulunan arama sonuçlarındaki ücretli reklamların üzerinde bile dönen bir biçimde görünür.

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'i kullanma yeteneğiniz olmadığı için, yüksek düzeyde hedeflenmiş reklamcılık deneyimleri sunmanıza olanak tanıyan analitik ve izleme özelliklerine veda etmeniz gerekiyor.

Sadece bu da değil, Google'ın JavaScript'in daha hafif sürümüyle, veri aktarımını gerektiren sayfa öğeleri AMP sayfalarında kullanılamaz.

Google Analytics takibi 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ıların ziyaretlerini izlemez.

Google Analytics'teki AMP sayfalarını Google Etiket Yöneticisi ile nasıl izleyeceğiniz aşağıda açıklanmıştır.

AMP sayfaları bir dizi avantaj ve dezavantajla birlikte gelir, ancak ziyaretçilerinize hızlı ve optimize edilmiş bir mobil deneyim sunmak istiyorsanız, AMP profesyonelleri kesinlikle eksilere ağır basar.

Bir sonraki bölümde, KPI'ları yerine getirmek ve yatırım getirisini artırmak için AMP kullanan işletmelerin örnek olay incelemeleri vurgulanacaktır.

BÖLÜM 4: AMP başarı öyküleri

Mobil web sayfalarından bahsettiğimizde, hız eşittir gelir. 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ında yaratabileceği etkiyi vurgulamak için Google, Forrester Consulting'i AMP kullanan yayıncılar ve e-ticaret web sitelerinde tam bir Ekonomik Etki™ çalışması yürütmesi için görevlendirdi.

Araştırma, AMP formatını kullanan 4 web şirketini öne çıkarıyor. Forrester, 4 şirketin sonuçlarına bakarak, üç yıllık bir süre boyunca AMP uygulamasından beklenen getiriyi tahmin etmek için bir model oluşturdu.

Bu modeli kullanarak, aylık site ziyareti sayısı 4 milyon 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örmeyi bekleyebilir:

Çalışmadan 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, Forrester modeline göre yıllık 200.000 ABD dolarının üzerinde kâr sağlayacak olan AMP sayfalarındaki dönüşüm oranında %20'lik bir artış gösterdi.
• AMP site trafiğinde yıldan yıla %10 artış. Site trafiğindeki artış, ek satışlar ve reklam görüntülemeleriyle sonuçlanır ve bu da, modele göre bir sitenin ilk yılda yıllık 75 bin doları aşan kârını sağlar.
• Ziyaret başına sayfa sayısında %60 artış. AMP pages performed positively for e-commerce and news publishers who both said that there was a 60% increase in people coming to the site and those people spent twice as long on the site with a small increase in return visitors of 0.3%.

AMP is a relatively new format, and obviously, you have to incur some costs with its adoption. However, the payoff of implementing the AMP format outweigh the initial cost.

Gizmodo uses AMP pages to become 3x faster on mobile

Gizmodo focuses on user experience, with half of their traffic coming from their mobile website, ensuring that the website was fast and clear was essential if they wanted readers to engage with their content on mobile.

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 landing pages, and how connecting optimized AMP ad landing pages leads to better post-click landing page.

SECTION 5: Why you should create AMP 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 landing pages as well.

To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.

The Accelerated landing page or (ALP) loads fast because of the following optimization techniques:

1. Pre-connect to landing page: Typical ads don't know the URL of the actual landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective landing page, and the page loads instantly.
2. Pre-fetch landing pages: The non-CPU intensive resources that are visible on the first viewport of the landing page are downloaded before the user clicks the ad, so the page loads instantly.
3. 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 landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP landing pages easy.
4. No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the landing page.

AMP-constructed landing pages are designed with the framework to continue the streamlined mobile experience that users initiate when clicking on a mobile AMP ad.

Here's how AMP Ad landing pages compare to regular ad 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 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 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 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 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 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:

After you finish and click Publish, you will be notified if you exceed the 75KB limit:

Once validated, your page is ready to publish.

5. Adım: Yayınlayın

WordPress ve özel alanlar, Instapage'de AMP açılış sayfaları yayınlayabilir. Mavi yayınla düğmesine tıkladıktan sonra herhangi bir yöntemi seçebilirsiniz:

WordPress için, web sitenizdeki Instapage eklentisini yükleyip oturum açın ve yeni AMP 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ız, yavaş sayfa yükleme hızı nedeniyle yüksek hemen çıkma oranları ve düşük ziyaretçi etkileşimi yaşıyorsa, AMP sayfaları oluşturmak harika bir çözümdür.

AMP çerçevesi, yalnızca sayfa hızına yardımcı olmakla kalmayan, aynı zamanda kullanıcılara keyifli bir mobil deneyim sağlayan optimizasyon teknikleri kullanır. AMP reklam açılış sayfaları oluşturmak, ziyaretçilerinize optimize edilmiş, hızlı ve alakalı açılış sayfaları sunmanıza yardımcı olur.

Instapage, şu anda Google'ın AMP çerçevesini kullanarak mobil cihazlar için optimize edilmiş açılış sayfaları oluşturmanıza izin veren tek açılış sayfası platformudur. AMP ile oluşturulan açılış sayfalarının neredeyse anında yüklenmesi ve sorunsuz kaydırması vardır.

Daha iyi bir mobil tarama deneyimi oluşturmak, kalite puanlarınızı yükseltmek ve daha fazla dönüşüm elde etmek için Instapage ile bugün AMP sayfaları oluşturmaya başlayın.