Hızlandırılmış mobil sayfalar (accelerated mobile pages) ve kısaca AMP, Google ’ın 2015 yılında duyurduğu, 2016 ’da sonuclarını SERP uzerinde gostermeye başladığı, acık kaynak kodlu, sayfaların daha hızlı acılabilmesini sağlayan bir mobil teknolojisidir. Sonuclar kısmında ise AMP sayfaları Google AMP ikonu ile işaretlemekte.
Klasik tanımı bir yana koyarsak; Google sizin sayfalarınızı kendi onbelleğinde tutarak daha hızlı bir şekilde servis ediyor. Yani normalde Google ’da bir sayfaya tıklayan kullanıcı nasıl ki sizin sunucunuza tarayıcı uzerinden bir istek gondererek tum dosyaları, kod bloğunu sizin sunucunuz uzerinden talep ediyorsa AMP ’de de bu işlem tamamen Google uzerinden gercekleşiyor diyebiliriz. Sizin sunucunuza herhangi bir istek gelmiyor, Google ’ın kendi hafızasında tuttuğu sunucu uzerinden sayfa servis ediliyor ve daha hızlı bir şekilde sayfa acılıyor.
Bunu nasıl başarıyor kısmında ise AMP teknolojisinin bileşenleri on plana cıkıyor:
AMP HTML AMP JavaScript AMP Cache Neden AMP HTML, AMP JavaScript gibi bileşenler var sorusunu soruyor olabilirsiniz, dolayısıyla once bunu acıklayıp sonra bu bileşenleri detaylandıralım.
Google AMP sayfalarını kendi on belleğinden hızlıca servis edebilmesi icin web sayfalarına ceşitli kısıtlamalar getiriyor. JavaScript yukunun azaltılması icin kendi tanımladığı JavaScript kutuphanesi dışındaki kodlara izin vermiyor, CSS kullanacağınız zaman bunun inline olması ve yalnızca bir tane stil olması gerektiğini belirtiyor (maksimum 50 kb) ve statik HTML icin de AMP icin oluşturulmuş etiketlerin kullanımını zorunlu kılıyor. Hatırlarsanız bu serinin ilk yazısında bir sayfanın acılmasındaki kritik surecleri detaylandırmıştık ve ozellikle Critical Rendering Path kısmındaki uzayan surelerin sitenin hızını yavaşlattığından bahsetmiştik. Tum oradaki sureclerin ve problemlerin cozumu olarak Google, bunları komplike hale getirmeden, daha basit bir kodlama sistemi ile, sayfalarınızı tamamen anlayabileceği bir dile cevirmenizi onererek, bunu kendi on belleğinden hızlıca servis edebilmesi icin bu kodlamanın gerekliliğini savunuyor. Aşağıdaki uc resim durumu epey ozetliyor aslında. AMP orneğinde kaynaklardan ne kadar arındırılıp daha sade bir yapı oluşturulduğunu, hal boyle olunca tabi ki sitenin hızlanacağını anlayabiliyoruz.
Kaynak: Evidon
Şimdi gelelim bileşenlerin detayına.
AMP HTML
AMP HTML ’de mutlaka bulundurulması gereken kodlar ve izin verilmeyen kodlar bulunuyor.
Aşağıdaki kodlar muhakkak bulunması gereken kodlar olarak belirtiliyor.
Yukarıda yabancı gelebilecek bir tek AMP boilerplate code ’u goruyoruz. AMP boilerplate code kısaca sayfa render edilene kadar sayfanın gosterilmesini engelliyor. Yani stile sahip olmayan iceriğin kullanıcıya hemen gosterilmemesi icin bekletiyor ve tamamen render işlemi bitince sayfa gosteriliyor.
Peki Javascript kutuphanesi render işlemi icin yuklenmezse ne olacak?
Yukarıdaki ornekte; 8 saniye icerisinde JS kutuphanesi yuklenmezse animation kodlaması olduğu icin her turlu stil iceriğinin goruntulenebileceğine değinilmiş. Eğer bu kodlama olmazsa ve JavaScript kutuphanesi calışmazsa kullanıcıya boş bir sayfa gosteriliyor. Videonun tamamına bu linkten ulaşabilirsiniz. Ancak şunu da belirtelim bu kod sebebiyle FCP (FirstContentfulPaint) gecikmesi yaşanıyor tahmin edebileceğiniz uzere. Evet AMP ’yi hız icin kuruyorsunuz belki ama gerekli optimizasyonlar yapılmadığında istediğiniz hıza ulaşamayabilirsiniz.
İzin verilmeyen daha doğrusu AMP ’de eşleniği bulunan HTML etiketleri de aşağıdaki gibi.
Bu etiketlerin yerine AMP versiyonlarını kullanmamız gerekiyor.
Bu yapılmadığında AMP sayfalarınız valide olmayacaktır.
AMP JavaScript
AMP JavaScript demek sizin tarafınızdan bir JavaScript kodu oluşturulamayacak demek aslında. AMP JavaScript kutuphanesinde tanımlı olan JavaScript kodlarını kullanabilir ve uygulayabilirsiniz ancak bunun dışında herhangi bir şey yapmanıza maalesef şu an icin izin verilmiyor.
Yine serinin ilk yazısında JavaScript ’in render blocking ozelliğinden bahsetmiştik. AMP ’de amac aslında bu sureci durduran ve senkronize yuklenen kodları kaldırarak bunları asenkron bir şekilde yukleyip DOM tree oluşum surecini engellememeleri. Dolayısıyla izin verdiği olcude JavaScript kutuphanesini kullanabiliyorsunuz ve bu doğrultuda da lazy loading, async gibi yaklaşımları kendisi belirleyerek sayfanızın daha hızlı acılabilmesine olanak tanıyor. Orneğin normal bir sayfada DOM ağacı oluşmadan yani tum kaynaklar render edilmeden layout ’un oluşmadığını soylemiştik. Tarayıcı bu surecin sonunda ancak hangi iceriği ne şekilde ekranda verebileceğine karar veriyor. AMP ’de bu tur kaynaklarının boyutlarının verilmesi zorunlu. Dolayısıyla işleme sureci esnasında kaynak henuz yuklenmeden onun boyutunu bilen tarayıcı nereye ne şekilde yerleştirebileceğini biliyor.
Guzel Haber!
AMP JavaScript ’e izin vermiyor dedik. Ancak gecen yılki AMP Conference 2018 ’de mujdeli bir haber verildi. Calışacağının garantisini veremeseler de 2019 icin AMP dokumanlarında JavaScript yazabilmeye olanak tanıyacaklarının ciddi sinyalleri geldi.
Videonun linkine buradan erişebilirsiniz.
AMP Cache
Eğer tum kurallara uygun bir şekilde sayfanızı oluşturmuşsanız ve sayfanız AMPTest ile valide edilmiş gorunuyorsa, Google sizin sayfanızı kendi CDN ’inde servis etmeye başlayacak demektir.
Eğer iceriğinizi guncellediyseniz ve bir an once Google ’ın bunu gormesini ve indekslemesini istiyorsanız update-cache isteği ile eski iceriği kaldırıp yenisi ile guncelleyebiliyorsunuz.
Şu an icin iki tane AMP Cache sağlayıcısı bulunuyor; Google AMP Cache ve Cloudflare AMP Cache. Ancak Eylul 2018 ’de Bing'de AMP viewer ve AMP Cache ’i duyurdu.
AMP Avantajları
Avantajlarına değinecek olursak oncelikle tabi ki AMP bir zorunluluk veya sıralama faktoru değil. AMP sayfa oluşturduğunuzda bunun ilk sıralarda cıkacağının bir garantisi yok. Ancak rekabet ettiğiniz alanı iyi değerlendirmeniz ve websitenizin neye ihtiyacı olduğunu iyi tespit edebilmeniz gerekli.
Sizin icin onemli bir sayfa veya sayfa grubunda rakipleriniz bu teknolojiyi kullanıyor olabilir, Google News icin ozellikle haber sitesiyseniz AMP kullanımı kacınılmaz olabilir, site hızı konusunda oldukca gerilerde kalmış olabilirsiniz ve bu durumda AMP ’yi cozum olarak uygulamak isteyebilirsiniz.
AMP ’nin en buyuk avantajı kullanıcı deneyimi acısından hız konusunda normal bir sayfaya gore oldukca hızlı acılabilir olması.
Diğer yandan Google uzerinden servis edilmesi ile sizin sunucunuz uzerindeki yuku de hafiflettiğini soyleyebiliriz.
AMP Dezavantajları
Dezavantajları oldukca uzun bir suredir ozellikle SEO uzmanları arasında tartışılır durumda. Google ’ın internet gibi ozgur bir ortamı domine etme calışmaları, kendi kurallarını koyması ve websitelerini buna mecbur bırakması en goze carpan AMP eleştirisi olarak goruluyor.
Barry Adams ’ın AMP Can Go To Hell yazısını incelemenizi kesinlikle tavsiye ederim.
Diğer yandan AMP ’nin hızlı olmasındaki sebebin Google ’ın bir cok koda izin vermeyişi, kendi tanımlı kutuphanesinden kullanabileceğiniz kod bileşenleri olduğundan bahsetmiştik. Dolayısıyla diğer goze carpan bir dezavantaj da bu kısıtlamalar ile sayfalarınızda istediğiniz her şeyi yapamayacak olmanız.
AMP ’nin JavaScript kullanımına 2019 ’da izin verebileceğinden bahsetmiştik, eminim ki ilerleyen yıllarda bu kısıtlamalar daha da azalacaktır ancak hız konusu ana gundem maddesi olduğu muddetce de sayının cok artacağını beklememek gerekir.
AMP Hataları
AMP validasyon hatalarının en buyuk yuzdesini genellikle ya zorunlu HTML etiketlerinin girilmemiş olması ya da izin verilmeyen etiketlerin/kodların kullanılması olarak goruyoruz. Search Console uzerinde bu hatalı kodlar belirtiliyor. Diğer yandan AMP Validator ile de sayfanızın neden valide edilmediğini gorebilir, bu hataları duzeltebilirsiniz.
Kontrol etmenin başka bir yolu da AMP sayfanızdayken URL ’in sonuna #development=1 ekleyin. Sonra DevTools icerisinde Console sekmesini acın. Aşağıdaki gibi bir ekran goreceksiniz.
Orneğin daha sonradan eklediğiniz bir imajı eğer amp-img şeklinde eklemediyseniz sayfanız hata verecektir. Veya sayfada AMP kutuphanesinin dışında olan bir script varsa sayfanız yine hata verecektir. Yani Google AMP sayfalarda tamamen kendi belirlediği kuralları uygulayan sayfaları kabul edip CDN ’i uzerinden servis ediyor.
Ne Zaman AMP ’ye İhtiyac Duyarım?
Haber sitesi iseniz AMP kullanımı sizin icin kacınılmaz olabilir. Bunun dışında şu zamanda AMP kullanılır, şoyleyse AMP kullanılır demek oldukca yanlış olacaktır. Rakiplerinizi incelemeli, hangi sayfalarda ihtiyac duyabileceğinizi tespit etmeli ve TEST ETMELİSİNİZ!
Hız konusunda oncelikle sitenizi optimize etmeye gayret edin. Daha sonra AMP ’yi belirli sayfalarda test edebilirsiniz. Site Hızı Optimizasyonu icin de serinin ilk yazısına goz atabilirsiniz.
AMP Kullanım Oranları
2 yılı aşkın bir suredir bu teknoloji konuşulurken kullanım oranları ne şekilde değişiyor, biraz da onlara bakalım.
Kaynak: Builtwith
Ozellikle top 10k sitelerinde AMP kullanım oranında yuksek bir ivme bulunmazken top 100k ve top 1M grafiklerine baktığımızda ise 2018 sonrasında ciddi bir artış gozlemliyoruz. Hızın sıralama faktoru olması ile site hızını artırmada zorlananların AMP ile cozum arayışı da bunda bir etken olabilir veya uzerinden belirli bir zaman gectiği icin uygulama belirsizliklerinin ortadan yavaş yavaş kalkması kullanmak isteyenler icin daha guvenli bir alan yaratmış da olabilir.
Daha coğrafik bir inceleme yapmak istersek aşağıdaki verilerle karşılaşıyoruz.
Kaynak: Similartech
Turkiye bunun neresinde diye merak ettiyseniz builtwith sitesi verilerine gore şu an Turkiye ’de 2069 tane, aktif AMP sayfası bulunan websitesi bulunuyor.
Son olarak da kategorilere gore AMP kullanım oranlarına bakalım.
Kaynak: Similartech
AMP Case Study
AMP Konferansında goze carpan case study ’lerden birisi Airbnb ’nin AMP tecrubesi. Sunumun videosuna bu linkten ulaşabilirsiniz.
Airbnb ’nin yaşadığı tecrubeyi kısaca anlatmak istersek; Airbnb ’nin uc farklı sayfa yapısı bulunuyor. Ana sayfaları (P1), evleri listeledikleri arama sayfaları (P2) ve evlerin detay sayfaları yani urun sayfaları (P3)
Oncelikle hangi sayfa turunde AMP uygulayabileceklerini duşunuyorlar. P1 ana sayfa, trafiği oldukca yuksek olan, dizaynı sıklıkla değişen ve hepsi bir yana en onemli sayfaları olduğu icin AMP kararını burada uygulamıyorlar.
P3 urun sayfalarında ise donuşum oranı duşuk olduğu icin denenebilir gozuyle baksalar da teknik problemler dolayısıyla bu sayfa turunde de AMP denememeyi tercih ediyorlar.
Son olarak da P2 arama sayfalarında uygulamaya karar veriyorlar.
Uygulama sonrasında karşılaştıkları en buyuk problem server side rendering time out problemi oluyor. Sayfalarında %16 gibi oldukca yuksek bir rakam time out problemi gercekleşiyor. Time out olduğunda da ekrana yalnızca boş bir sayfa geliyor.
Sayfa boş geldiğinde Google ’ın aslında yapması gereken canonical sayfaya yonlendirmesi. Ancak Airbnb ekibi bunun bir Google bug ’ı olduğunu belirtiyor ve sayfanın aşağıdaki şekilde gorunduğunden bahsediyor.
Burada bu problemi cozmek icin yaptıkları calışma ise 30 dakika CDN cache uygulaması olmuş ve %16 ’lık hatayı sıfıra cekmeyi başarabilmişler.
Karşılaştıkları diğer problemler ve cozum yolları icin videoyu izlemenizde fayda var. Bu orneği ozellikle secmemin sebebi AMP Konferansında olup da
Ancak tabi ki diğer yandan AMP uygulamasında sorunsuz başarılı olmuş case study ’ler de bulunuyor.
Yine bu ornekler icin ampproject sayfasını ziyaret edebilirsiniz.
Tum bunlardan sonra AMP ’yi denemeye karar verdiyseniz kurulum rehberimiz ile devam edelim.
AMP Kurulumu (Wordpress)
Bu kısımda daha cok Wordpress kullanıyorsanız nasıl hızlıca AMP kurabilirsiniz bundan bahsedeceğiz.
Wordpress icin en cok onerilen plug in leri ve bu kurulum aşamasını detaylandıracak olursak;
1) AMP Plugin İndirme ve Kurma
Automattic ’in sunduğu AMP Plugini indiriyoruz ve kuruyoruz. Bu plugin ile yalnızca postları AMP uyumlu yapabiliyoruz, sayfaları değil. Ancak bu plugini kurmamız zorunlu.
Bu sebeple ikinci bir plugin daha indiriyoruz.
AMP for WP Plugini Google Adsense integrasyonuna, rel=canonical etiketi desteğine, surukle bırak sayfa yapılandırmasına ve daha başka ozelliklere de olanak tanıyor.
Son olarak da Glue for Yoast SEO & AMP pluginini indirip kuruyoruz ancak dikkat edilmesi gereken nokta Yoast SEO ’nun da kurulu olması ve aktif olması gerektiği.
2) Google Analytics Takip Kodu Ekleme
Varolan Google Analytics takip kodunuzu Wordpress icerisinde AMP for WP options altında Analytics kısmına kopyalamanız ve kaydetmeniz gerekiyor.
3) Plugin Konfigurasyonları
Yoast SEO - AMP - Post Type şeklinde bir yol izlediğinizde karşınıza aşağıdaki gibi secenekler gelecek.
Burada hangi sayfaları AMP yapmak istediğinizi secebilir, Design kısmında sayfalarınızı ozelleştirebilirsiniz.
4) Google AMP Test
AMP URL ’lerini oluşturduk. Google ’ın bu sayfaları Cache ’e eklemesi icin valide olmaları gerekiyor. Dolayısıyla oluşturduğumuz URL ’leri test etmemiz lazım.
Bunun icin Google ’ın kendi test sitesine gitmemiz gerekiyor. Bu linkten ulaşabilirsiniz.
Diğer yandan AMP Validator ’ı da kullanarak hangi hatalar yuzunden valide edilmediğini de gorebilirsiniz.
5) AMP Sayfaları Google ’a Sunma
Her ne kadar AMP Test sayfasında Submit Google butonu olsa da bu sayfalarınızın kesin keşfedileceği ve indeksleneceği anlamını icermiyor. Onemli olan canonical sayfanızı AMP sayfanızda belirlemeniz ve Canonical sayfanızdan AMP sayfanızı işaretlemeniz.
İşte bu kadar!
AMP Analytics
AMP verilerini doğru ve duzgun bir şekilde değerlendirebilmek icin oncelikli olarak kurulumun doğru yapılması gerekiyor. AMP ’de en sık karşılaşılan problemlerin başında olcumleme geliyor maalesef. Hemen cıkma oranı, yeni kullanıcı, geri donen kullanıcı vs. bir cok metrik, Analytics doğru kurgulanmadığında sizi yanıltabilir.
Bir kişi Google arama sonuclarından AMP sayfasına tıkladığında tarayıcısında sayfa domaininde google.com ’u gorecektir. Daha onceden değindiğimiz gibi bu sayfa Google uzerinden servis edilmekte. Ancak sayfa icerisinde başka bir yere tıklayan kullanıcı sitenin kendi domaini uzerinden o sayfaya gitmiş olacak ve bu sefer tarayıcısında Google ’ın değil o sitenin adresini gorecektir. Dolayısıyla burada Analytics ’in oturumları ne şekilde saydığı, kullanıcıyı kac kere saydığı onemli hale geliyor ve coğu zaman bu olcumleme yanlış yapılıyor.
Google AMP Client ID API ile her bir kullanıcınızı eşsiz olarak tanımlayabilir ne şekilde sitenizi ziyaret ettiklerini doğru olcumleyerek tespit edebilirsiniz.
AMP Client ID ’yi AMP sayfaları icin aktif etmek ve yapılması gereken temel etiketlemeleri ozetlersek;
1) AMP Sayfaları
Yukarıdaki kodu tum AMP sayfalarının head kısmında bulundurmamız gerekiyor. Wordpress ’de bunu yapabilmek icin AMPforWP Settings - Advanced Settings kısmına girerek bu kodu yapıştırmak.
2) AMP olmayan sayfalar
Diğer sayfalarınızın head kısmına ise aşağıdaki kodu girmelisiniz.
ga(‘create ’, ‘UA-23199282-1 ’, ‘auto ’, );
Eğer Google Tag Manager kullanıyorsanız;
Tag Configuration - Fields to Set alanına gelin.
useAmpClientId ’yi true olarak ayarlayın. Yeni etiket konfigurasyonunu kaydedin.
3) ampproject.org Adresini Execution List ’e Ekleme
Google Analytics hesabınızın altında Referral Execution List ’e gelerek ampproject.org ’u ekleyin.
4) AMP sayfaların sayfa goruntulenme takibi
Oncelikle aşağıdaki kodu kaynak kodunda head kısmında bulundurmamız gerekiyor.
Daha sonra sayfa goruntuleme ve/veya farklı eventler icin takip kodları oluşturabiliriz.
Sayfa goruntuleme icin her AMP sayfasında bulunması gereken kod;
ClickOnHeader icinse;
Bu kurulumu doğru uygulayabilmek icin destek dokumanlarına goz atmakta kesinlikle fayda var.
Bitirirken...
AMP her gecen yıl daha da geliştirilecek gibi duruyor. Arka planda calışan buyuk bir ekip var. Dolayısıyla bugun AMP kullanmayı duşunmuyorsanız bile aklınızın bir koşesinde bu teknoloji muhakkak bulunsun ve gelişmeleri takip edin. Son olarak da test etmenin gucune inanın!
kaynak : https://zeo.org/tr/blog/amp-nedir-2019-amp-rehberi/