AspavA
Üye
-
- Katılım
- Haziran 17, 2019
-
- Mesajlar
- 255
-
- Tepkime puanı
- 232
-
- Puanları
- 294
-
- Konum
- Antalya
-
- Web sitesi
- www.okeyodalari.net
Merhaba arkadaşlar son zamanlarda Google AMP uyumlu tasarımları ön planda tutmaya devam ediyor.
buna göre AMP yi inceleyecek olursak AMP nedir, ne işe yarar bu konuya biraz değinmek istedim.
AMP Nedir?
Hızlandırılmış mobil sayfalar (accelerated mobile pages) ve kısaca AMP, Google’ın 2015 yılında duyurduğu, 2016’da sonuçlarını SERP üzerinde göstermeye başladığı, açık kaynak kodlu, sayfaların daha hızlı açılabilmesini sağlayan bir mobil teknolojisidir. Sonuçlar kısmında ise AMP sayfaları Google AMP ikonu ile işaretlemekte.
lasik tanımı bir yana koyarsak; Google sizin sayfalarınızı kendi önbelleğ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ı üzerinden bir istek göndererek tüm dosyaları, kod bloğunu sizin sunucunuz üzerinden talep ediyorsa AMP’de de bu işlem tamamen Google üzerinden gerçekleşiyor diyebiliriz. Sizin sunucunuza herhangi bir istek gelmiyor, Google’ın kendi hafızasında tuttuğu sunucu üzerinden sayfa servis ediliyor ve daha hızlı bir şekilde sayfa açılıyor.
Bunu nasıl başarıyor kısmında ise AMP teknolojisinin bileşenleri ön plana çıkıyor:
Google AMP sayfalarını kendi ön belleğinden hızlıca servis edebilmesi için web sayfalarına çeşitli kısıtlamalar getiriyor. JavaScript yükünün azaltılması için kendi tanımladığı JavaScript kütüphanesi 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 için de AMP için oluşturulmuş etiketlerin kullanımını zorunlu kılıyor. Hatırlarsanız bu serinin ilk yazısında bir sayfanın açılmasındaki kritik süreçleri detaylandırmıştık ve özellikle Critical Rendering Path kısmındaki uzayan sürelerin sitenin hızını yavaşlattığından bahsetmiştik. Tüm oradaki süreçlerin ve problemlerin çözümü olarak Google, bunları komplike hale getirmeden, daha basit bir kodlama sistemi ile, sayfalarınızı tamamen anlayabileceği bir dile çevirmenizi önererek, bunu kendi ön belleğinden hızlıca servis edebilmesi için bu kodlamanın gerekliliğini savunuyor. Aşağıdaki üç resim durumu epey özetliyor aslında. AMP örneğinde kaynaklardan ne kadar arındırılıp daha sade bir yapı oluşturulduğunu, hal böyle olunca tabi ki sitenin hızlanacağını anlayabiliyoruz.
Örnek olarak AMP HTML meta tag, etiket, css ,js leri ile normal bir index şablonu oluşturmaya bakalım.
Bu örnekte dikkat ederseniz AMP bir yapıya dışarıdan css , js dosyaları çağıramazsınız css şekillendirmelerinizde sadece index içerisinde yapmanız gerekiyor dışarıdan her çağırılan dosya AMP uyum testinden geçemez. tamamen AMP nin verdiği js ve css dosyaları ile çalışma yapmanız gerekmektedir. sonrasında google amp tasarımlarınızı mobil cihazlarda amp uyumu olduğu için ön sıralara taşımasını izlemeniz yeterli olacaktır.
buna göre AMP yi inceleyecek olursak AMP nedir, ne işe yarar bu konuya biraz değinmek istedim.
AMP Nedir?
Hızlandırılmış mobil sayfalar (accelerated mobile pages) ve kısaca AMP, Google’ın 2015 yılında duyurduğu, 2016’da sonuçlarını SERP üzerinde göstermeye başladığı, açık kaynak kodlu, sayfaların daha hızlı açılabilmesini sağlayan bir mobil teknolojisidir. Sonuçlar kısmında ise AMP sayfaları Google AMP ikonu ile işaretlemekte.
lasik tanımı bir yana koyarsak; Google sizin sayfalarınızı kendi önbelleğ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ı üzerinden bir istek göndererek tüm dosyaları, kod bloğunu sizin sunucunuz üzerinden talep ediyorsa AMP’de de bu işlem tamamen Google üzerinden gerçekleşiyor diyebiliriz. Sizin sunucunuza herhangi bir istek gelmiyor, Google’ın kendi hafızasında tuttuğu sunucu üzerinden sayfa servis ediliyor ve daha hızlı bir şekilde sayfa açılıyor.
Bunu nasıl başarıyor kısmında ise AMP teknolojisinin bileşenleri ön plana çıkıyor:
- AMP HTML
- AMP JavaScript
- AMP Cache
Google AMP sayfalarını kendi ön belleğinden hızlıca servis edebilmesi için web sayfalarına çeşitli kısıtlamalar getiriyor. JavaScript yükünün azaltılması için kendi tanımladığı JavaScript kütüphanesi 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 için de AMP için oluşturulmuş etiketlerin kullanımını zorunlu kılıyor. Hatırlarsanız bu serinin ilk yazısında bir sayfanın açılmasındaki kritik süreçleri detaylandırmıştık ve özellikle Critical Rendering Path kısmındaki uzayan sürelerin sitenin hızını yavaşlattığından bahsetmiştik. Tüm oradaki süreçlerin ve problemlerin çözümü olarak Google, bunları komplike hale getirmeden, daha basit bir kodlama sistemi ile, sayfalarınızı tamamen anlayabileceği bir dile çevirmenizi önererek, bunu kendi ön belleğinden hızlıca servis edebilmesi için bu kodlamanın gerekliliğini savunuyor. Aşağıdaki üç resim durumu epey özetliyor aslında. AMP örneğinde kaynaklardan ne kadar arındırılıp daha sade bir yapı oluşturulduğunu, hal böyle olunca tabi ki sitenin hızlanacağını anlayabiliyoruz.
Örnek olarak AMP HTML meta tag, etiket, css ,js leri ile normal bir index şablonu oluşturmaya bakalım.
HTML:
<!doctype html>
<html amp lang="tr">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<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>
[B]<style>
.aspava h1 {color:#C00}
</style>[/B]
</head>
<body>
<div class="aspava">
<h1>Merhaba Hoş geldiniz.</h1>
</div>
</body>
</html>Bu örnekte dikkat ederseniz AMP bir yapıya dışarıdan css , js dosyaları çağıramazsınız css şekillendirmelerinizde sadece index içerisinde yapmanız gerekiyor dışarıdan her çağırılan dosya AMP uyum testinden geçemez. tamamen AMP nin verdiği js ve css dosyaları ile çalışma yapmanız gerekmektedir. sonrasında google amp tasarımlarınızı mobil cihazlarda amp uyumu olduğu için ön sıralara taşımasını izlemeniz yeterli olacaktır.