AMP nasıl çalışır
Aşağıdaki optimizasyonlar birlikte AMP sayfalarının anında yükleniyormuş gibi çok hızlı olmalarının nedenidir. Toplamda 7 neden vardır ancak okuması yine de zor gelecekse, açıklayıcı videoyu izleyebilirsiniz:
Tüm AMP JavaScript betiklerini senkronize olmadan yürütme
JavaScript güçlüdür, sayfanın neredeyse her yöndan değiştirebilir ancak DOM oluşturmayı da engelleyebilir ve sayfa işlemeyi geciktirebilir (ayrıca JavaScript ile etkileşim ekleme bölümüne bakın). JavaScript'in sayfa işlemeyi geciktirmesini önlemek için AMP, sadece senkronize olmayan JavaScript'e izin verir.
AMP bileşenlerinin altında JavaScript betikleri olabilir ancak bunlar performansı bozmayacak şekilde dikkatle tasarlanmıştır.
amp-script bileşeninde özel JS'ye ve iframe'lerde üçüncü taraf JS'ye izin verilse de işlemeyi engelleyemez. Örneğin üçüncü taraf JS, super-bad-for-performance document.write API kullanırsa, ana sayfayı işlemeyi engellemez.
Tüm kaynakları statik ölçekleme
Görüntüler, reklamlar veya iframe'ler gibi harici kaynaklar HTML'de boyutlarını ifade etmelidir, böylece AMP, kaynakları indirmeden önce her bir öğenin boyutuna ve konumuna karar verebilir. AMP herhangi bir kaynağın inmesini beklemeden sayfanın yerleşimini yükler.
AMP, belge yerleşimini kaynak yerleşiminden ayırır. Tüm belgeyi (+ yazı tipleri) yerleştirmek için sadece tek bir HTTP isteğine ihtiyaç vardır. AMP, tarayıcıda pahalı stil yeniden hesaplamalarından ve yerleşimlerinden kaçınmak için optimize edildiğinden, kaynaklar yüklendiğinde herhangi bir şekilde yeniden yerleşim olmaz.
Eklenti mekanizmalarının işlemeyi engellemesine izin vermeme
AMP, eklenti mekanizmalarının sayfa işlemeyi engellemesine izin vermez. AMP ışık kutuları, instagram eklemeleri, twitler gibi şeyler için uzantıları destekler. Bunlar ek HTTP istekleri gerektirse de bu istekler sayfa yerleşimini ve işlemeyi engellemez.
Özel bir betik kullanan tüm sayfalar, AMP sistemine sonunda özel bir etiketleri olacağını belirtmelidir. Örneğinamp-iframe betiği, sisteme bir amp-iframe etiketi olacağını söyler. AMP, daha ne içereceğini bile bilmeden iframe kutusunu oluşturur:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Tüm üçüncü taraf JavaScript'lerini kritik yoldan uzak tutun
Üçüncü taraf JS, senkronize olarak JS yüklemesini sever. Ayrıca document.write ile daha fazla eşzamanlı betik oluşturmayı da sever. Örneğin, sayfanızda beş reklam varsa ve her biri 1 saniye gecikmeli bağlantıyla üç senkronize yüklemeye neden oluyorsa, sadece JS yüklemesi için 15 saniye yükleme zamanınız var demektir.
AMP sayfaları, sadece korumalı alandaki iframe'lerde üçüncü taraf JavaScript betiklerine izin verir. Bunlar iframe'lerle sınırlı tutulduğundan, ana sayfanın çalışmasını engellemezler. Birden fazla stil yeniden hesaplamasını tetikleseler bile ufak iframe'leri çok az DOM'a sahiptir.
Yerleşim ve stil yeniden hesaplamalarını yapma süresi DOM boyutu ile sınırlıdır, dolayısıyla iframe yeniden hesaplamaları, sayfanın stil ve yerleşim yeniden hesaplamasına göre çok daha hızlıdır.
Tüm CSS satır içi ve boyut olarak sınırlı olmalıdır
CSS tüm işlemeleri engeller, sayfa yüklemesini engeller ve aşırı yüklenme eğilimindedir. AMP HTML sayfalarında, sadece satır içi stillere izin verilir. Bu durumu çoğu web sayfasına kıyasla 1 veya daha fazla HTTP isteğini kritik işleme yolundan kaldırır.
Ayrıca, satır içi stil sayfasının maksimum boyutu 50 kilobayttır. Bu boyut, son derece sofistike sayfalar için yeterince büyük olsa da, yine de sayfa yazarının tam bir CSS bütünlüğüne uymasını gerektirir.
Yazı tipi tetikleme etkili olmalıdır
Web yazı tipleri aşırı büyüktür, bu yüzden web yazı tipi optimizasyonu performans için çok önemlidir. Birkaç eşzamanlı betik ve birkaç harici stil sayfasına sahip tipik bir sayfada, tarayıcı her şey gerçekleşene kadar durmadan bu dev yazı tiplerini indirmek için bekler.
AMP sistemi, yazı tipleri inmeye başlayana kadar sıfır HTTP isteği bildirir. Bunun yapılabilmesinin tek nedeni AMP'deki tüm JS betiklerinin zaman uyumsuz özniteliğe sahip olması ve sadece satır içi stil sayfalarına izin verilmesidir; tarayıcının yazı tiplerini indirmesini engelleyen HTTP istekleri yoktur.
Stil yeniden hesaplamalarını en aza indirme
Bir şeyi her ölçtüğünüzde, tarayıcının tüm sayfanın yerleşimini düzenlemesi gerektiğinden pahalıya mal olan stil yeniden hesaplamaları tetiklenir. AMP sayfalarında, tüm DOM okumaları tüm yazma işlemlerinden önce gerçekleşir. Bu, çerçeve başına maksimum bir stil yeniden hesaplaması olmasını sağlar.
Stil ve yerleşim yeniden hesaplamasının işleme performansı üzerindeki etkisine dair daha fazla bilgi edinin.
Sadece GPU hızlandırmalı animasyonları çalıştırma
Hızlı optimizasyonlara sahip olmanın tek yolu, bunları GPU'da çalıştırmaktır. GPU katmanları tanır, bu katmanlarda bazı şeylerin nasıl yapılacağını bilir, onları taşıyabilir, saydamlıklarını değiştirebilir, fakat sayfa yerleşimini güncelleyemez; bu görevi tarayıcıya bırakır ancak bu iyi bir şey değildir.
Animasyonla ilgili CSS kuralları, animasyonların GPU ile hızlandırılabilmesini sağlar. AMP, özel olarak, dönüşüm ve opaklıkta sadece animasyon ve geçişe izin verir, böylece sayfa yerleşimine gerek kalmaz. Animasyon değişiklikleri için dönüşüm ve opaklığı kullanma hakkında daha fazla bilgi edinin.
Kaynak yüklemeyi önceliklendirme
AMP tüm kaynak indirmelerini kontrol eder: sadece gerekli olanları yükleyerek kaynak yüklemesini önceliklendirir ve yavaş yüklenen kaynakları önceden belleğe yükler.
AMP kaynakları indirdiğinde, indirilenleri o anda en önemli olan kaynakları ilk önce indirecek şekilde optimize eder. Resimler ve reklamlar yalnızca en baştan kullanıcı tarafından görülme olasılıkları yüksekse ya da kullanıcının onları hızla kaydırma olasılığı varsa indirilir.
AMP ayrıca ağır yüklenen kaynakları da önceden getirir. Kaynaklar olabildiğince geç yüklenir ancak olabildiğince erken getirilir. Bu şekilde içerikler çok hızlı yüklenir ama CPU sadece kaynaklar gerçekten kullanıcıya gösterildiğinde yüklenir.
Sayfaları anında yükleyin
Yeni ön bağlantı API'si, HTTP isteklerinin başlatıldıkları anda olabildiğince hızlı olmalarını sağlamak için yoğun olarak kullanılır. Burada, bir sayfa, kullanıcı onda gezinmek istediğini açıkça belirtmeden önce işlenir; kullanıcı sayfayı gerçekten seçtiği anda, bu sayfa zaten mevcut olabilir ve bu da anında yüklemeyi sağlar.
Ön işleme tüm web içeriklerine uygulanabilse de aşırı bant genişliği ve CPU tüketimine neden olabilir. AMP, bu her iki faktörü azaltmak için optimize edilmiştir. Önceden getirme sadece en üstteki kaynakları indirir ve CPU açısından pahalı olabilecek şeyleri işlemez.
AMP belgeleri sonraki anlık yükleme için önceden işlediğinde, yalnızca ilk ekrandaki gereken kaynaklar yüklenir. AMP belgeleri anında yükleme için önceden işlendiğinde, çok fazla CPU kullanabilecek kaynaklar (üçüncü taraf iframe'leri gibi) indirilmez.
AMP HTML'nin ön yükleme tarayıcısından neden tam yararlanmadığı hakkında daha fazla bilgi alın.