Websitenizi AMP’ye nasıl geçirirsiniz?

 

AMP’li sayfalar maksimum 1 saniye içinde açılır. AMP olmayanlar ise minimum 2 saniye  içerisinde ortalama ise 3 3,5 saniye yalnız %300 gibi bir değişiklik olduğundan kullanıcı deneyimini mükemmele taşıyor. İnternette değil de dosyalar arasında geçiş yapıyorsunuz gibi oluyor. Bunun yapılmasının temel nedeniyse progressive web app dediğimiz gelecek web teknolojisi. İleride mobil uygulamalar olmayacak. Web siteleri birer mobil uygulama olacak. Uygulamalar da kimse beklemek istemez pat pat pat kullanmak ister 🙂 O deneyimi şu anda AMP kısıtlı olarak yaşatıyor işte.

Bugün sizlere AMP (Accelerated Mobile Pages)  uyumu konusunda videolu, görsel bir eğitimde bulunacağım.

AMP Genel Mantık

Şimdi Javascript websitenizde sepete eklerken, bir şeye tıklanıldığında sayfa yenilenmeden işlemleri gerçekleştiren tarayıcının programlama dili oluyor. Bizim web sitemizde bir çok <script> etiketi var bunları gerçekleştiren. Yine CSS Stil şablonu yani bir tamamen stil özelliklerini tarayıca anlatan dosya. İşte hem bu <script >etiketlerinden hem de bu stil şablonu dosyasından tek bir adet istiyor. Bunu da yalnızca kendi versiyonu ile istiyor. Tamamen kendi kurallarını kullanarak ve bu kurallar içerisined hem Javascript, hem CSS hatta HTML tarafında (img etiketi yok misal amp-image etikei var) yalnızca kendi etiketleri var. Sayfaların en başında  <html> etiketi bulunur. Bu html etiketini <html amp> yapıyoruz ve o andan itibaren tarayıcı o sayfayı amp özelliklerine göre derliyor. Yani demem o ki bizim bu AMP’ye geçmemiz için tüm özelliklerimizi yeni baştan AMP’ye göre oluşturmalıyız.

 

  1. Tüm <script> etiketlerini kaldırın
  2. Yalnızca bir adet CSS olabilir. Bu da
    <style amp-custom> 
    </style>

    şeklinde koyulabilir. Tüm CSS’leri bir araya getirin ve bu CSS dosyasının boyutu 50 kb’yi geçmesin

  3. Belgenin başına <!doctype html> ekleyin
  4. Html etiketinin AMP  <html amp> özniteliğini ekleyin
  5. <link rel="canonical" href="$SOME_URL" /> $SOME_URL web sitenizde bulunduğunuz sayfayı gösterir.
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width,minimum-scale=1">
  8. <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>
  9. <script async src="https://cdn.ampproject.org/v0.js"></script>

WordPress için

İşte hazır bir altyapı kullanmanın avantajlarından bir tanesi! Popüler içerik yönetim sistemlerle ilgilenen geliştiriciler de fazla olurlar. Bu nedenle bir güncelleme olduğunda eklentiye çok hızlı bir şekilde ulaşabilirsiniz.

WordPress’in kendi yayınladığı AMP eklentisi
WordPress AMP eklentileri içerisinde popüler olan

Joomla için

Joomla AMP eklentisi