Amp nedir ?

Accelerated Mobile Pages ( Amp ) web sitenizin mobilde iceriklerinin daha hızlı erişilmesi icin uygulanan bir kodlama yontemdir.

Google yakın gecmişte yapmış olduğu acıklamaya gore AMP kodlama yapılan siteler Google on belleğinde saklanacak ve kullanıcı siteye mobilden erişmek istediğinde daha hızlı erişim sağlacaktır.

Google amacı ise mobil uzerinden internet kullanıcısı sayısını arttırmaktır.

Amp sayfa yapılandırması yaparak kullanıcılarına normalin kat kat ustu erişim hızı ve ayrıca sunucuna ekstradan trafik rahatlığı sağlayabilirsin. Ayrıca Facebook , Google+ gibi paylaşım uygulamalarında artık paylaşımlarınızda amp sayfalarına yonlendirme yaptığınızda uygulamaların icerisindeki sihrine kapılıp farkınızı ortaya koyarak daha iyi bir kullanıcı deneyimi elde etmenizi sağlayacaktır. Mesela benzer başlıklar arasında geciş gibi. Artık yeni icerik paylaşımında onemli olan konu kullanıcı deneyimi ve o deneyimi hangi hızda gercekleştirdiğidir. (bkz:gif).

Gelelim işin mutfağına

Amp'ninde kendine gore bazı standartları bulunmaktadır. Amp ’nin amacına hizmet etmesi icin firmaların sizden bekledikleri aslında html olarak kodlanmış tek bir sayfa duşunebilirsiniz. İcerinde css ve java scriptlerden arındırılmış sıkıştırılmış ve ya yahut uyarlanmış. Amp ye gore belli eklentiler aşağıdaki ornekte bir google Amp sayfa yapısını inceleyelim.

Burda 4 adet onemli adım var

Google ne istiyorsa ekleyin bu en basiti cunku (bkz:https://cdn.ampproject.org/v0.js) Sonra şema yapısına ait json gondermek. Ki google'ın kutuphanesi bizim amp sayfasının da calışırken işlevsellik kazansın. Bu konuda google cok katı değil bu adımı atlayabilirsiniz. Fakat amp verimliliğini bir o kadar etkiler . Bu ilk iki maddenin duzgun calışması koşulunda, kutuphane kullanıcı hangi alanda ve hangi bolgede ise yukselme onceliği o alanın oluyor. Ornek verecek olursak amp sayfa acıldı ve siz bir anda en alta gittiniz başta yavaş (Amp ye gore) sonradan sayfanın başlarını atlayıp sizin bulunduğunuz alandaki datalar gelecek. (gif, jpg) gibi. Amp ye ozgun css işte amp mutfağın en yorucu yerlerinden biri ama ornek verecek olursak; nasıl ki print css diye bir şey varsa burda da amp css var. Yani cıktının nasıl goruneceğini ayarlıyorsunuz. Haliyle burada google size gene birkac imkan sağlamakta kendine has sınıfları ile iyi bir gorunum yakalamanız mumkun. Amp icin en kasıntılı alan "AMP schema". Once aklınızda bir flaş cakması icin bunu yazacağım. Angular , react veya ionic kullandıysanız gormuşsunuz kendi taglari mevcut, ve bu taglerle adeta bir element değilmişte , işlemlerin yapıldığı ozel alanlarmış gibi yazılıyor. Kendi alanlarına kendileri erişip yorumlayıp işleme alıyor. İşte aynen "AMP schema" da bunlar gibi . Google ın kendinin belirdiği taglar dizisi. Bu dizilerden en dikkat ceken
amp lang="en">
charset="utf-8">


Hello, AMPs rel="canonical" href="http://example.ampproject.org/article-metadata.html" /> name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> amp-boilerplate>body@-webkit-keyframes -amp-startto}@-moz-keyframes -amp-startto}@-ms-keyframes -amp-startto}@-o-keyframes -amp-startto}@keyframes -amp-startto}



Welcome to the mobile web


Amp bir sayfa icin sancılı olmasa da uzun bir surecten gecmeniz
gerekecektir. Bunların icinde şemanızdan tutun optimizasyonunuza kadar
bir cok işlem bulunuyor. Tabi işleriniz bunlarla da bitmeyen bir
seruvene donuşecektir. Daha sonrasında onaylatma ve onaylatılan
sayfaların da son olarak paylaşımlara yerleştirilmesi kalıyorc. Bu surec
de sosyal medyaların veya firmaların kendince amp standartları olacak
kısacası bu durum biraz kotu .Amp copluğu oluşturacak ama hic
yuklenmemesinden iyidir. İşte tam bu yuzden Amp sayfalar icin Google
"amphtml" ve "canonical" gibi linkler bulmuş kendisine

rel="canonical" href="https://www.example.com/url/to/amp/document.html">
rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

Burada şair şunu anlatmak istiyor "bak bu 1 bunun birde bu amp si var ama bu amp ,bununda bir şu html var yani ikisid e aynı şey, ben masumum ozgun icerik urettim ama teknolojiye ayak uydurmam gerek " cumlesinin koda dokulmuş hali ( detaylar icin canonical link e bakabilirsiniz )

Sonuc

Amp hali hazırda html gibi kult bir kod değil belki seneye HAMPT (hyper application multiplier page text) geliştirilir ve hepimiz " gitti bizim emekciler deriz". Ama gunumuzde iyi hayat kurtarıyor, blog sayfası olanın bloğuna , haber sayfası olanın haberine, E-ticaretcinin urunlerini hızlı ve kullanışlı bir şekilde platformlarda gezmelerine sağlayacak tabi bu da site sahipleri icin bir artı demektir.
Ozel not :

En can alıcı noktasını sona sakladım. Amp sayfalarda sanki resim gecer gibi kendinizin yada bir başka amp sayfaların (sizinle eş icerikteki) arasında gecebiliyorsunuz. Bu da sizin sayfanızın sanki uygulamanın - platformun bir parcası gibi yapıyor .