İçindekiler

Accelerated Mobil Pages (Hızlandırılmış Mobil Sayfalar) olan AMP web sitelerinin mobil cihazlarda çok daha hızlı çalışmasını sağlamak ve anlık veri gösterimi amacıyla ile kurulan bir frameworkün çalışmasından ibarettir.

Google AMP temelde 3 kısımdan oluşur; AMP HTML, AMP JS, AMP CACHE (önbellek).

 

AMP HTML

 

Temel olarak AMP HTML güvenilir performans için bazı kısıtlamalara sahip HTML dosyasıdır. Ek olarak elde edilen HTML çıktı özel AMP etiketlerini taşıdığını için bildiğimiz HTML’in genişletilmiş halidir diyebiliriz.

Örnek bir AMP dosyası aşağıdaki gibidir.

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="hello-world.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>

 

AMP HTML sayfasındaki etiketlerin çoğu normal HTML etiketleri olsa da, bazı HTML etiketleri AMP'ye özgüdür. AMP HTML bileşenleri olarak adlandırılan bu özel öğeler, ortak modelleri performans açısından kolay bir şekilde uygulamaya yarar.

AMP dökümanında da örnek olarak verildiği gibi, “amp-img” etiketi, henüz desteklemeyen tarayıcılarda bile tam bir srcset(responsive) desteği sağlar.

Unutmadan söylemeliyiz ki, Google veya diğer arama motorları AMP sayfasını <link rel = ""> HTML etiketi ile tanır.. .

 

AMP JS

 

JavaScript kütüphanesi ile, AMP HTML sayfaları çok hızlı bir şekilde oluşturulmaktadır. Aslında AMP tüm gücünü buradan alıyor desek yanlış söylüyor olmayız.

 

AMP JS kütüphanesi, AMP'nin en iyi performans uygulamalarını uygular, kaynak yüklemeyi yönetir ve sayfanızın hızlı bir şekilde oluşturulmasını sağlamak için yukarıda belirtilen özel etiketleri size sunar.

 

AMP JS kütüphanesi en iyi performansı elde etmek için kullanılır. Nedir bu performanstan kasıt? Tahmin edebileceğiniz gibi kaynak yükleme yönetimi performansın olmazsa olmazlardandır. Javascript sayesinde sayfanız hızlı bir şekilde oluşturulur tabi ki bunun için yukarıda bahsettiğimiz Google AMP etiketleri gerekmekte.

 

Diğer performans teknikleri, tüm iframe'lerin koruması, kaynakların yüklenmesinden önce sayfadaki her öğenin düzeninin önceden hesaplanmasını ve yavaş kalan CSS seçicilerinin devre dışı bırakılmasını içerir diyebiliriz.

 

AMP CACHE (ön bellek)

 

Google AMP Cache(ön bellek), tüm geçerli AMP dokümanlarını sunmak için proxy tabanlı bir içerik dağıtım ağıdır. AMP HTML sayfalarını getirir, önbelleğe alır ve sayfa performansını otomatik olarak geliştirir. Google AMP Önbelleği'ni kullanırken, doküman, tüm JS dosyaları ve tüm resimler maksimum verimlilik için HTTP 2.0 kullanan aynı kaynaktan yüklenir.

 

Bu yönüyle bile cezbedici değil mi ? :) Bunlara ek olarak doğrulama yöntemlerini de çok sevdik, https://search.google.com/test/amp adresinden ilgili sayfanızı test edebilirsiniz, çoğu geliştirici gibi yerelinde çalışanlar için şöyle bir ipucu verelim, siz yabancı değilsiniz :)

http://localhost:8000/ornek.html böyle bir sayfanız olduğunu varsayalım, ilgili URL in sonuna bunu #development=1 ekleyiniz ardından console ekranında sayfanızın geçerli olup olmadığını görebilirsiniz.

AMP yi iyice bir hatırladığımızı düşünüyorum dilerseniz artık detaylara inelim kara delik gibi içine çeken bu muazzam mimariyi daha yakından tanımaya var mısın ?

Bu yazımızda bazı sorulara cevap vereceğiz, içerdiği bilgiler ile size tam olarak Google AMP yi öğretmeyi amaçlıyoruz.

 

Google AMP yi nerelerde kullanmalıyım ?

Aslında bu sistem haber ve içerik siteleri - sürekli güncellenen - için oldukça kulağa mantıklı gelebilir, lakin unutulmamalıdır ki E-Ticaret sistemlerinde bu mimariyi kullanan kişiler oldukça kazançlı çıkmaktadır. Wordpress ve bazı CMS sistemlerine eklenti şeklinde dahil olabildiği için kesinlike blog kullanıcıları bu teknolojiyi kullanmalılar.

 

Araştırdım, öğrendim SEO’ya etkisi olmuyormuş, doğru mu?

Google arama sonuçlarına direkt bir etkisi olmadığı yazılıyor, çiziliyor veya söyleniyor, fakat gerek performans gerekse Google tarafından desteklenmesi bu söylenenleri yalancı çıkarabiliyor.

Ek olarak böyle bir sistemin SEO’ya katkısı olduğunu kim söyleyebilir ki bu bir sır onlara göre, firmalar bazen gerçekli saklayabiliyor ama telaşlanmayın biz her zaman yanınızdayız :)

 

Peki, bu AMP nin hiç mi dezavantajı yok ?

Dezavantajını bulmak inanın çok zor, çünkü JavaScript ve Cache bileşenleri ile durdurulamayan bir canavar ama her yazılım her sistem her mimari gibi sakıncalı yerleri elbette ki olabilir, AMP de ben bunu, inline(manuel) olarak yazılan CSS ve harici eklenemeyen JS dosyaları olarak söyleyebilirim.

 

Sorularla Google AMP sistemini irdeledik ve mümkün olduğunca basite indirgediğimizi düşünüyorum, gerek performans gerek bizler için hali hazırda gelen bileşenler ile gönderilerimizi mobil de çok hızlı bir şekilde okuyucularımıza gösterme imkanı sunan AMP teknolojisini kullanmanızı şiddetle tavsiye ediyorum.