Web'de yaklaşık 1,5 milyon hızlandırılmış mobil sayfa (AMP) var.

AMP, yalnızca yükleme süresini iyileştirmeye yardımcı olmakla kalmaz, aynı zamanda gereksiz JavaScript, CSS ve tembel yüklemeyi de ortadan kaldırır. Çeşitli kuruluşların temiz ve akıcı web sayfaları geliştirmesine ve sayfa hızlarını üç katına çıkarmasına yardımcı oldu.

Bu makalede, bir AMP'nin bileşenleri, nasıl çalıştığı, faydaları, kısıtlamaları ve aşamalı web uygulamaları (PWA'lar) ve duyarlı web tasarımı ile karşılaştırıldığında nerede durduğu hakkında bilgi edineceksiniz.

AMP nedir?

Daha iyi anlamak için AMP'nin ne olduğunu açalım.

Üç temel bileşenin ve optimizasyon tekniklerinin birleşimi, süper hızlı bir kullanıcı deneyimi sağlar.

AMP'nin temel bileşenleri

AMP üç öğeden oluşur: HTML, JavaScript ve Önbellek.

AMP HTML'si

AMP HTML, AMP'ye özel etiketler de içerdiğinden normal HTML etiketlerinden farklıdır. Özel etiketler olarak da bilinen bu etiketler, kodda AMP çalıştırmayı kolaylaştırır.

AMP HTML, web sitesinin güvenilir performansı için bazı HTML kodlarını kısıtlar. Google arama motoru ve diğer platformlar, AMP'yi HTML etiketleri aracılığıyla tanır.

AMP JavaScript'i

AMP JavaScript kitaplığı, AMP HTML sayfalarının hızlı bir şekilde oluşturulmasını sağlamak için AMP en iyi performans uygulamalarını uygular. En iyi uygulamalar, satır içi CSS ve yazı tipi tetiklemeyi içerir.

Dış kaynaklardan gelen her şey, oluşturmada herhangi bir gecikmeyi önlemek için AMP JS ile eşzamansız hale getirilir. AMP JS ayrıca yavaş CSS seçicilerini devre dışı bırakır ve sayfa performansını iyileştirmek için kaynakları yüklemeden önce sayfa öğelerini önceden hesaplar.

AMP Önbelleği

Önbelleğe alma, bir sayfanın performansını artırmak için iyi bilinen bir tekniktir. AMP, geçerli AMP belgeleri için AMP önbelleği biçiminde proxy tabanlı bir içerik dağıtım ağı kullanır.

AMP önbelleği kendi doğrulama sistemi ile birlikte gelir. Sistem, bir sayfanın AMP HTML özelliklerine göre işaretlendiğini doğrulayan bir dizi iddia kullanır.

Doğrulama sisteminin ayrı bir sürümü, doğrulama hatalarını doğrudan tarayıcı konsoluna kaydederek, performansı ve kullanıcı deneyimini etkileyen kod değişikliklerini görmenizi sağlar.

Optimizasyon teknikleri

Artık AMP çerçevesini oluşturan temel bileşenleri bildiğinize göre, hızlı yüklenen sayfaları mümkün kılan optimizasyon tekniklerini gözden geçirelim.

Eşzamansız JavaScript yürütme

JavaScript, sayfa oluşturmayı geciktirme ve DOM oluşturmayı engelleme eğiliminde olduğundan, AMP yalnızca eşzamansız JavaScript'e izin verir. JavaScript'in oluşturmayı geciktirmemesini sağlamak önemlidir, aksi takdirde sayfanın yüklenme hızlarını doğrudan etkiler.

Tüm kaynaklar için statik boyut

AMP, kaynaklar yüklenmeden önce her bir öğenin boyutunu ve konumunu belirlemeyi sever. Resimler veya reklamlar gibi harici kaynakların HTML boyutlarını belirtmesinin nedeni budur. AMP, bu bilgileri kullanarak, herhangi bir kaynağın indirilmesini beklemeden sayfanın düzenini yükler.

Uzatma mekanizması

AMP, hız için birçok gereksiz Javascript, CSS ve HTML'yi engeller, ancak ışık kutuları ve sosyal medya yerleştirmeleri gibi öğeler için uzantılara izin verir.

Üçüncü taraf JavaScript kullanımı yok

Üçüncü taraf JavaScript'ler, eşzamanlı yükleme nedeniyle yükleme süresini yavaşlatır. AMP sayfaları JavaScript'e izin verir, ancak yalnızca korumalı alanlı iframe'lerde. Korumalı alan nedeniyle Javascript ana sayfanın yürütülmesini engelleyemez.

Satır içi ve boyuta bağlı CSS

CSS şişkinliğe neden olma eğilimindedir ve ayrıca oluşturmayı geciktirir. AMP HTML, web sayfalarına yönelik birçok HTTP isteğini kaldırmak için satır içi stili kullanır. Satır içi CSS için açık tutulan 50 KB olmalıdır - karmaşık web sayfaları için yeterli alan.

Etkili yazı tipi tetikleme

Tipik bir sayfa, senkronizasyon komut dosyalarından ve birkaç harici stilden oluşur. Tarayıcı, komut dosyaları yüklenene kadar yazı tiplerini indirmez.

Yalnızca GPU hızlandırmalı animasyonları çalıştırma

Ağır animasyonlar GPU hızlandırmasını gerektirir. GPU, tüm görevlerini katmanlar halinde gerçekleştirir. Ancak GPU sayfa düzenini güncelleyemez. Hız açısından o kadar verimli olmayan görevi web tarayıcısına verir.

Kaynak yüklemenin önceliklendirilmesi

AMP'nin yüksek hızları korumanın bir yolu, kaynak yüklemeye öncelik vermektir. Kaynakları yalnızca gerektiği gibi yükler ve ayrıca tembel yüklü kaynakları önceden getirir.

Sayfaların anında yüklenmesi

AMP'ler, kullanıcı gitmek istediği sayfayı işaret etmeden önce oluşturuldukları için anında yüklenir. Bu, çok fazla bant genişliği veya CPU kullanmadan AMP ön bağlantı API'si aracılığıyla mümkün olur.

AMP'nin Faydaları

Bir uygulamanın sayfaları standarttan daha hızlı yüklendiğinde kullanıcı deneyimi iyileşir. Farklı cihazlarda ve platformlarda web deneyimini geliştirir. Bu yenilikler nedeniyle AMP'nin birçok faydası vardır.

Daha fazla müşteriyle etkileşim kurun

Web sitenizin ziyaretçileri ihtiyaç duydukları bilgileri anında alacaklardır. Bu, AMP'lerin medyan yükleme süresinin bir saniyenin altında olması nedeniyle mümkündür. Bu kadar kısa bir yükleme süresi, artan sayfa katılımına yol açar ve ziyaretçilerin CTA'larınıza göre hareket etme olasılığını artırır.

Geliri en üst düzeye çıkarın

Nasıl bir saniyelik kesinti bir holdingin piyasa değerinin kaderini belirleyebiliyorsa, web sitenizdeki bir saniyelik gecikme de dönüşüm oranınızı %12 oranında düşürür. AMP, web sitelerinde, reklamlarda ve tıklama sonrası açılış sayfalarında daha hızlı bir kullanıcı deneyimi sunar.

Esnekliği koruyun

AMP kullandığınızda, optimize edilmiş web bileşenlerini kullanma fırsatınız olur. Web sayfalarından veri almak ve stil oluşturmak için CSS'yi kullanabilir, ardından en iyi kullanıcı deneyimini sağlamak için A/B testi yapabilirsiniz.

Karmaşıklığı azaltın

AMP oluşturma süreci basit ve anlaşılırdır. CMS arşiviniz de dahil olmak üzere tüm arşiviniz kolaylıkla AMP'ye dönüştürülebilir. AMP sayfalarını optimize etmek için herhangi bir özel beceri seti gerekliliği yoktur.

YG'yi en üst düzeye çıkarın

AMP sayfaları oluşturulduktan sonra aynı anda farklı platformlara dağıtılır. AMP'nin bu özelliği, reklamların hem AMP hem de AMP olmayan sayfalarda kullanılmasına olanak tanır. Böylece reklamlar oluşturabilir ve marka deneyiminizi tüm platformlarda sunarak reklam bütçesi yatırım getirinizi en üst düzeye çıkarabilirsiniz.

Sürdürülebilir bir gelecek yaratın

Açık kaynaklı bir proje olarak AMP, daha hızlı ve daha iyi kullanıcı deneyimleri sunmaya kararlı uygulamalar oluşturmayı amaçlar. AMP'yi mobil uygulamalarınıza ve web sitelerinize dağıtarak bu sürdürülebilir geleceğin bir parçası olabilirsiniz.

Kullanıcı deneyimini iyileştirin

Nihai hedefiniz daha iyi bir kullanıcı deneyimi oluşturmak olmalıdır. AMP, yükleme sürenizi %15 ila %85 daha hızlı hale getirebilir. Bu, yalnızca bir saniyelik iyileştirme anlamına gelse bile, AMP'yi denemeye değer - UX'inizi ne kadar geliştirdiğine şaşırabilirsiniz.

SEO'yu artırın

Web sitelerini sıralarken, Google'ın algoritmaları sayfa yükleme hızını ve mobil yanıt verme hızını tanır. Mobil web sitenizin yüklenme süresi, sayfa sıralamanızı belirlemenize yardımcı olacaktır. Ne kadar hızlı yüklenirse, arama motoru sonuç sayfasında o kadar üst sıralarda yer alır.

AMP için optimize edilmiş sayfalar, başlığın altında hızlı yükleme hızlarını gösteren yeşil bir şimşek simgesi içerir. AMP özellikli sayfalar, SERP'lerde ücretli reklamların üzerinde dönen formda da öne çıkar.

AMP Kısıtlamaları

AMP sayfalarının pek çok avantaj sağladığına şüphe yok, ancak bazı eksiklikleri de göz ardı edilemez. İşte bunlardan birkaçı.

Üçüncü taraf JavaScript yok

AMP'ler JavaScript'i kısıtladığından, geliştiriciler analitik yetenekleri takip edemezler. Sonuç olarak, özel bir kullanıcı deneyimi sağlamak zorlaşıyor.

Google Analytics izleme yok

AMP'lerin daha hızlı olmasının nedeni, AMP'nin Google analitiğini kullanmasını da kısıtlar. Google, sunucudan sayfa yüklemek yerine AMP'lerin önbelleğe alınmış bir sürümünü kullanır. GA yapılandırmaları yapmadığınız ve ayrı izleme kodları kullanmadığınız sürece, ziyaretçi sayısını takip etmez.

AMP ve diğer optimize edilmiş çerçeveler

AMP, mobil sayfalarınız için daha hızlı yükleme süreleri elde etmenin yenilikçi bir yoludur, ancak mevcut tek optimize edilmiş çerçeve değildir. İşte alternatiflere karşı duruşu.

AMP ve Facebook Anında Makaleler

Hem AMP sayfaları hem de Facebook Instant Articles, bilgi yükleme sürecini hızlandırır. AMP sayfaları web alternatiflerine göre daha popüler olsa da, Facebook Instant Article'ın etkileşim oranı ve hızı AMP'den çok daha yüksektir. Bunun nedeni, Facebook'un metin ve video makalelerine öncelik vermeye başlaması ve geliştiricilerin anında makaleleri kullanmayı bırakmasına yol açmasıdır.

AMP ve duyarlı web tasarımı

Mobil web siteleri, google'ın mobilegeddon olarak adlandırılan bir olay olan mobil uyumlu algoritmasını başlattığı 2015'ten beri web uygulamalarını yönetiyor. Duyarlı web tasarımı ile oluşturulan mobil web sayfaları, farklı ekran boyutları ve yönleri için esnek biçimler sağlar.

Öte yandan AMP, web sayfalarının yüklenme süresini hızlandırmak için 2016 yılında geldi. Her iki sayfa da kodlama kısmı için Javascript ve HTML kullanıyor, ancak AMP genellikle hıza daha fazla odaklanıyor ve ayrıca anında içerik oluşturmayı da tanıttı.

AMP, web sayfalarının yeniden tasarlanmasını gerektirmeden mevcut duyarlı web siteleriyle birleşir, ancak bir başkasıyla birleştirmek üzere duyarlı bir web sayfası geliştirmek için yeniden tasarım gereklidir. Duyarlı web tasarımı, hız üzerinde çalışmak yerine web sayfalarını ölçeklendirir. AMP, web sayfalarını duyarlı web tasarım sayfalarından çok daha hızlı yüklemesine izin veren daha sınırlı işlevlere sahiptir.

AMP ve PWA

AMP hız için optimize edilirken, aşamalı web uygulamaları (PWA'lar) web sitesinin görünümünü ve verdiği hissi vurgular. PWA'lar, kullanıcı deneyimini kesintiye uğratmadan web sayfalarını dinamik olarak günceller.

AMP ve PWA birlikte kullanıldığında, hızlı bir sayfa oluşturma süreciyle dinamik bir web sitesi oluşturmanıza yardımcı olabilir.

Mobil sayfalarınızı AMP'leyin

AMP, Facebook Anında Makaleler ve PWA'lar gibi bir dizi optimize edilmiş çerçeve ile, mobil sayfalarınızda zayıf etkileşim ve yüksek hemen çıkma oranları için gerçekten hiçbir mazeret yoktur. Güçlü bir deneyim sağlamak ve Google'ın hız beklentilerini karşılamak için AMP optimizasyon tekniklerinden yararlanın.

Web sitenizi optimize etmek için AMP'yi mi kullanıyorsunuz? Bir mobil geliştirme platformuna da ihtiyacınız olacak . Mevcut tüm seçenekleri G2'de görün.