Sobes.tech
Mülakat Yardımı
Kaynaklar
Mülakat Hazırlığı
Kaynaklar
İş Arama
Kaynaklar
Yasal
Sorulara geri dön
Middle

AMP sayfaları nedir?

sobes.tech yapay zeka

AI'dan gelen yanıt

AMP (Hızlandırılmış Mobil Sayfalar) Google tarafından oluşturulan açık kaynaklı bir HTML çerçevesidir ve hızlı, uyumlu web sayfaları oluşturmak için tasarlanmıştır; bu sayfalar mobil cihazlarda iyi görüntülenir.

AMP'nin temel ilkeleri:

  • Sınırlı HTML etiketi seti: Sayfanın analizini ve render edilmesini hızlandırmak için bir alt küme HTML kullanılır.
  • Kaynakların asenkron yüklenmesi: Betikler, resimler ve diğer kaynaklar asenkron olarak yüklenir, ana içeriğin render edilmesini engellemez.
  • İçeriğe öncelik: Optimizasyon, görünür içeriğin hızlı yüklenmesine yöneliktir.
  • Statik öğe boyutları: Çoğu öğenin önceden belirlenmiş boyutları vardır, bu da yükleme sırasında "atlamaları" azaltır.
  • AMP Cache kullanımı: Bir üçüncü taraf organizasyon (örneğin, Google) AMP sayfalarını önbelleğe alabilir ve kendi önbelleğinden sunabilir, bu da anında yükleme sağlar.

AMP'nin temel bileşenleri:

  • AMP HTML: Özelleştirilmiş AMP bileşenleri eklenmiş sınırlı HTML etiketi seti.
  • AMP JS: Kaynakların yüklenmesini ve etkileşimi yönetmek için JavaScript kütüphanesi.
  • AMP Cache: AMP sayfalarını önbelleğe almak ve teslim etmek için proxy ağı.

AMP kullanımı örneği:

<!doctype html>
<html amp lang="ru">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>AMP Sayfası Örneği</title>
    <link rel="canonical" href="https://example.com/обычная-страница.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}}@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>
    <style amp-custom>
      /* CSS tarzlarınız */
    </style>
  </head>
  <body>
    <h1>Merhaba, AMP!</h1>
    <p>Bu hızlı bir sayfa.</p>
    <amp-img src="/images/kitten.jpg" alt="Kedi yavrusu" width="100" height="100" layout="responsive"></amp-img>
  </body>
</html>

AMP'nin avantajları:

  • Yükleme hızı: Sayfalar çok hızlı yüklenir, özellikle mobil cihazlarda.
  • Gelişmiş SEO: Google, mobil aramalarda AMP sayfalarına öncelik verir.
  • Daha iyi kullanıcı deneyimi: Hızlı yükleme ve akıcı kaydırma.

AMP'nin dezavantajları:

  • Tasarım ve işlevsellikte sınırlamalar: Tüm HTML etiketleri ve JavaScript fonksiyonları kullanılamaz.
  • Uygulama karmaşıklığı: Ayrı geliştirme veya mevcut içeriğin uyarlanmasını gerektirir.
  • Google'a bağımlılık (bir ölçüde): AMP Cache, Google tarafından kontrol edilir.

AMP, haber makaleleri, bloglar ve mobil cihazlarda yükleme hızının kritik olduğu diğer içerikler için yaygın olarak kullanılır.

ÖncekiSonraki