Teknoloji

Google AMP Nedir? Google AMP’ye Hızlı Bakış

Amp Nedir ve Ne İçin Önemlidir?

Google için web sitelerinin hızlı olması önemlidir ve bu duruma dikkat edilmesi gerekir. Gerçi hiç kimse bir web sitesinin açılması için 5-10 saniye beklemiyor. Bu konuda haksız da değil.

Ama süre mili saniyeler ile hesaplandığında web sitesi geliştiricileri kurdukları sistemler üzerinde ek çalışmalar yapmak zorunda kalıyor.

Önemli kıstasların bir diğeri olan kullanılan cihazlara uygunluk ise Google’ın üzerinde çalışmalar yaptığı bir alan.

Google AMP’de bu çalışmalar sonucunda ortaya çıkan bir teknoloji. Yani hızlı, mobil cihaza uyumlu ve içeriğe rahat erişim sağlayacak web siteleri için geliştiriliyor. Zaten AMP’nin açılımı Accelerated Mobile Pages, yani Hızlandırılmış Mobil Sayfalar.

amp nedir

Kendi sitesinde AMP şu şekilde tanımlanıyor; AMP hızlı sonuç veren statik içerik için web sayfalarını oluşturmanın bir yoludur. AMP eylem olarak üç farklı kısımdan oluşur:

  • AMP HTML
  • AMP JS
  • Google AMP Cache

# Amp Kullanmanın Avantajları

AMP HTML güvenilir performans için bazı kısıtlamalar ve temel HTML’in ötesinde zengin içerikler oluşturmak için bazı uzantılar içeren bir HTML’dir.

AMP JS kitaplığı AMP HTML sayfalarının hızlı sonuç vermesini sağlar.

Google AMP Cache (isteğe bağlı) AMP HTML sayfalarını getirir.

Günümüzde %50’leri geçen mobil trafik, web sitesi geliştiricilerini AMP’ye yönlendirecek en önemli kıstas.

Hızlı açılan, az data harcayan ve içeriğe erişimi kolay siteler mobil internet kullanımında önemlidir.

Google AMP bu yapıyı sunmayı vadettiği için -ve sağladığı için- en önemli avantajı olarak karşımıza çıkıyor.

Bunun yanında Google AMP’nin sanırım en büyük dezavantajı web geliştiricileri için ek yük getirmesi.

Çünkü web sitenizi AMP uyumlu hale getirmek için AMP HTML adı ile ortaya çıkan dili öğrenmeleri gerekiyor. Bir de dışarıdan javascript ve css dosyaları eklenemediği için her şey sayfada olacak şekilde yeniden kodlamak gerekiyor.

Aşağıda en basit AMP HTML sayfasını görebilirsiniz.

[php]

<!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″>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20amp-boilerplate%3Ebody%7B-webkit-animation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%3B-moz-animation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%3B-ms-animation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%3Banimation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%7D%40-webkit-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40-moz-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40-ms-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40-o-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

<noscript>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20amp-boilerplate%3Ebody%7B-webkit-animation%3Anone%3B-moz-animation%3Anone%3B-ms-animation%3Anone%3Banimation%3Anone%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</noscript>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20async%20src%3D%E2%80%9Dhttps%3A%2F%2Fcdn.ampproject.org%2Fv0.js%E2%80%9D%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>
<body>Hello World!</body>
</html>
[/php]

Google AMP, açık kod olarak geliştirilen bir proje. Kendi web sitesinden (link) ve Github proje sayfasından (link) detaylı bilgilere ulaşabilir örnek kodları inceleyebilirsiniz.

Unutulmaması gereken bir diğer husus, AMP halen geliştiriliyor. O yüzden AMP Blogunu da (link) takibe almanızı öneririm.

Bir sonraki yazımızda örnek bir AMP HTML sayfası yapıp AMP etiketlerini daha yakından tanıyacağız.

Ayrıca popüler içerik yönetim sistemleri olan WordPress (link), Drupal (link) ve Joomla (link) için AMP eklentileri hazır. Sitelerinize kurup test edebilirsiniz.

Alakalı
Daha fazla yükle

Mustafa Işık

Hoşgeldiniz size daha iyi içerikler üretmek, profesyonel anlamda size faydalı haberler çıkartmak için çalışıyoruz ve buna profesyonel anlamda devam edebilmemiz için reklam kazancına ihtiyacımız var. Lütfen Adblock vb. reklam engelleme uygulamalarını bizim sitemizde kullanmayın. Unutmayın tek gelir kaynağımız reklam tıklamalarıdır.

Konu ile alakalı yazılar

Düşünceni yaz gelsin

Close
Close