Google AMP'yi WordPress Sitenize Hızla Kurun


WordPress siteleriniz Google'ın Hızlandırılmış Mobil Sayfalarını (AMP) kullanmalı mı? Karmaşık bir cevabı olan basit bir soru.

2015 yılında duyurulduğunda Google, AMP Projesini mobil sayfaların performansını ve mobil cihazlarda kullanıcıların deneyimini iyileştirmenin bir yolu olarak faturalandırdı. Automattic, aynı yılın Ekim ayında AMP'yi destekleyeceğini duyurdu. Yakında WordPress Eklenti Deposunda bir AMP eklentisi kullanıma sunuldu ve bu da WordPress sitenize AMP desteği eklemenize izin verdi. Orijinal eklenti oldukça sade bir ilişkiydi, ancak aradan geçen yıllarda önemli gelişmeler yaşandı.

Bu makalede, AMP'nin nasıl çalıştığını, hem resmi AMP eklentisinin hem de bir alternatifinin nasıl kullanılacağını ve son olarak WP Offload Media ve SpinupWP ile tüm kullanıcılar için AMP kullanmadan sitenizin hızını artırma yöntemini ele alacağız.

  1. AMP nedir?
  2. AMP ve WordPress
  3. AMP Eklentisini Yükleme ve Kullanma
  4. AMP Daha Hızlı mı?
  5. AMP ve WordPress Temaları
  6. Resmi AMP Eklentisine Bir Alternatif
  7. WP Offload Media ve SpinupWP ile Hızı Artırma
  8. Toplama

AMP nedir?

AMP sayfası, normal bir site sayfasının özel bir sürümüdür ve standart HTML'nin bir alt kümesi olan ve <amp-img> gibi AMP'ye özgü karşılıklarla değiştirilen birkaç etiket içeren AMP HTML kullanılarak oluşturulması gerekir. Google ayrıca, AMP sayfalarının, sayfanızda optimizasyonlar gerçekleştiren AMP JS kitaplığını içermesini gerektirir.

AMP sayfalarını kullanmanın bir nedeni, mobil kullanıcılar için daha hızlı yüklenecekleri fikriydi. Bu hala geçerli olsa da, diğer birincil neden, Google'ın En İyi Haberler atlıkarıncalarında AMP tabanlı sayfalara tercihli muamele yapmasıydı. Google, sayfanın hızlı bir şekilde yükleneceği ve iyi bir kullanıcı deneyimi sağlayacağının bir işareti olarak bir sitenin Temel Web Verileri performans, yanıt verme ve görsel stabiliteye güvenmek yerine Haziran 2021'de bu uygulamayı sonlandırdıklarını duyurdu.

AMP, başından beri tartışmalara neden oldu. Google tarafından geliştirilen standarda yöneltilen eleştiriler arasında "web'in oluşturulma şekli kötü", "kullanıcıları Google'ın etki alanında tuttuğu ve trafiği diğer web sitelerinden uzaklaştırdığı" ve "Google'ın web sitelerini AMP sürümleri oluşturmaya zorladığı" yer alıyor. makalelerinden”. Google'ın açık bir yönetim modeline geçişi bile eleştirmenleri susturmayı başaramadı.

Son zamanlarda Google, AMP sayfalarına "güzel bir karşılaştırmalı destek" sağlamak için AMP olmayan sayfaların yükleme hızını artırmakla suçlandı. İddialar, 16 ABD eyaleti ve Porto Riko tarafından Google'a karşı açılan bir antitröst davasından geliyor.

Tartışmalar bir yana, AMP sayfaları hızlı yüklenme eğilimindedir. Mediahuis IRL'den Daniel Smullen'in SearchEngineLand'e söylediği gibi, "Google, AMP ile AMP olmayan karşılaştırmayı yapay olarak şişirmiş olsun, AMP Önbelleğinin hız artırıcı etkisi bir aldatmaca değildir."

AMP ve WordPress

Automattic, tanınmış WordPress ajansı XWP ve Google, 2017'den beri resmi AMP eklentisinin geliştirilmesinde yer almaktadır. Eklentinin 1.0 sürümü 2018'de WordCamp ABD'de resmi olarak yayınlandı. Bu sürümün en belirgin özelliklerinden biri, …

tüm çekirdek blokların AMP uyumluluğunu sağlamak için yeni blok düzenleyici (Gutenberg).

Geliştiricilere göre, Sürüm 2.0 geliştirmenin ana odak noktası kullanıcı arayüzünü iyileştirmekti. Mevcut sürüm olan 2.2.0, Aralık 2021'de piyasaya sürüldü ve ayarlar ekranında ve işe alım sihirbazında değişiklikler içeriyor.

AMP WordPress eklentisine şu anda katkıda bulunanların çoğu artık ya Google'da çalışıyor ya da üzerinde çalışmaları için sponsorluk alıyor:

  • Alberto Medina – Google'da Web İçeriği Ekosistemleri Ekibinde Geliştirici Avukatı.
  • Weston Ruter – şimdi Google'da olmak üzere XWP'de AMP geliştirmesine öncülük etti.
  • Pascal Birchler, tanınmış WordPress yazarı ve çevirmen, şimdi Google'da.
  • Tanınmış bir WordPress katılımcısı ve WP-CLI'de baş geliştirici olan Alain Schlesser, XWP'de ve Google ekibiyle birlikte WordPress AMP eklentisi üzerinde çalışıyor.

AMP Eklentisini Yükleme ve Kullanma

Eklenti ilk yayınlandığında, bir WordPress AMP sayfası genellikle aynı sayfanın AMP olmayan sürümünden çok farklı görünüyordu. Bunun, özel CSS'nin AMP sayfalarına dahil edilmemesi de dahil olmak üzere birkaç nedeni vardı. 2016'da AMP'ye ilk baktığımızdaki farkı aşağıdaki resimde görebilirsiniz. Orijinal gönderi solda ve AMP sürümü sağda:

2016'da AMP ve AMP olmayan sayfalar genellikle çok farklı görünüyordu.

AMP sürümü, orijinal gönderiye hiç benzemiyor! Ancak, o dönemin diğer tüm AMP sayfalarına tam olarak benziyor. Eklentinin o sırada çıktının nasıl göründüğünü özelleştirmek için yerleşik seçenekleri yoktu. AMP sayfasını sitenin görünümüyle uyumlu hale getirmek için koda dalmak gerekir.

AMP uyumlu bir tema kullandığınız sürece bu artık bir sorun gibi görünmüyor. Test için kullandığım bir WordPress sitesini açtım, varsayılan Twenty Twenty-One temasını yükledim ve resmi AMP eklentisini etkinleştirdim. Yazma sırasındaki en son sürüm olan 2.2.0 sürümünü kullanıyorum. Yine, orijinal gönderi solda ve AMP sürümü sağda:

AMP sürümü, AMP olmayan sürümle aynı görünüyor.

Harikalar harikası, tamamen aynı görünüyorlar! AMP, Twenty Twenty-One temasını çok iyi destekler. AMP'nin diğer popüler temaları ne kadar iyi desteklediğine daha sonraki bir bölümde bakacağız.

AMP eklentisini, WordPress.org deposunda bulunan diğer eklentilerle aynı şekilde yükleyebilirsiniz. Arama çubuğunuza "AMP" yazmanız yeterlidir, ilk gördüğünüz şey bu olmalıdır:

Resmi AMP eklentisi, diğer herhangi bir WordPress eklentisi gibi indirilir ve kurulur.

Ayrıca resmi AMP eklentisine bir alternatif olan WP for AMP'yi de görebilirsiniz. Bunu aşağıda kendi bölümünde tartışacağız.

AMP eklentisini diğer eklentiler gibi kurup etkinleştirirsiniz. Ancak, AMP eklentisi sürüm 2.0'da bir işe alım sihirbazı ekledi ve ben de bir göz atmak istedim.

Bana kısa bir karşılama mesajı gösteren Sihirbazı aç'a tıkladım. İleri'ye tıkladım ve bir sonraki bölüme geçtim. Yerleştirme sihirbazı size "Geliştirici veya teknik açıdan bilgili" seçenekleri ve "Teknik açıdan bilgili değil" için daha basit bir kurulum sunar. Tek fark, eklenti tarafından önerilen modlardadır. Devam ettim ve Developer veya teknik açıdan anlayışlı seçtim.

AMP işe alım sihirbazı size teknik bilgi seviyenizi tanımlama seçeneği sunar.

Tekrar İleri'yi tıkladıktan sonra sihirbaz, uyumsuz tema ve eklentileri kontrol etmek için WordPress sitemi taramaya başladı. Herhangi bir sorun bulamadı. Aslında süreç o kadar hızlıydı ki gözümü kırpsam kaçıracaktım. Kullandığım test sitesi oldukça yalın, bu yüzden çok fazla eklentiniz varsa daha uzun sürebilir. Ayrıca resmi AMP eklentisinin yalnızca aktif temayı ve eklentileri taradığını da unutmamalısınız. Tema değiştirirseniz veya sitenize yeni eklentiler eklerseniz, tekrar çalıştırmanız gerekir.

AMP Onboarding Wizard'ın tarama adımı, uyumsuz temaları ve eklentileri kontrol eder.

Artık işe alım sihirbazı bize üç temel seçenek sunuyor:

Standart: Bu ayar, her gönderi ve sayfanın AMP olarak oluşturulacağı anlamına gelir. Yine de sitenin belirli bölümleri için AMP'yi devre dışı bırakabilirsiniz, ancak aksi takdirde içeriğinizin AMP olmayan sürümleri mevcut olmayacaktır. Bu seçeneği belirlemeden önce sitenizin AMP uyumlu temalar ve eklentiler kullandığından emin olun. AMP uyumlu bir temanız varsa ve etkin eklentilerinizden hiçbiri sorun yaratmıyorsa, eklenti genellikle bu seçeneği önerir.

Geçiş: Bu, sitenize aynı temayı kullanan hem AMP hem de AMP olmayan sürümler verir. WordPress siteniz AMP ile tam uyumlu olmayan bir tema kullanıyorsa bu modu kullanabilirsiniz, ancak iki sürüm arasındaki farklarda sorun yok. Mobil cihazlardaki kullanıcılara AMP sürümü sunulurken, sitenize masaüstü bilgisayarlardan erişenlere AMP olmayan sürüm sunulur.

Okuyucu: Bu seçenekle sitenizin AMP ve AMP olmayan sürümlerine sahip olmaya devam edersiniz, ancak her sürüm kendi temasını kullanır. Bu ayar, AMP ile önemli uyumsuzlukları olan bir tema kullandığınız zaman içindir. AMP belgeleri, bu ayarı "teknik açıdan bilgili olmayanlar veya uyumsuzluklarla uğraşmak istemeyenler" için önerir.

Test sitesinde uyumlu bir tema ve eklentiler var, ancak hem AMP hem de AMP olmayan sürümler olarak sunulduğunda sayfaların nasıl görüneceğini test etmek istedim. Transitional'ı seçtim ve Next'e tıkladım. Bu bizi seçimlerimizi gözden geçirebileceğimiz bir sayfaya götürür.

AMP işe alım sihirbazındaki geçiş gözden geçirme ekranı.

Her şey iyi görünüyordu, bu yüzden devam ettim ve Bitir'i tıklatarak bizi ayarlar sayfasına getirdim. Bu noktada, Siteye Gözat'a tıklayabilir ve eklenti etkinleştirildiğinde sitenizin nasıl göründüğünü görebilirsiniz.

WordPress için resmi AMP eklentisinin ayarlar sayfası.

Buradan sihirbazı yeniden açabilir veya "Standart", "Okuyucu" ve "Geçiş" modları arasında doğrudan geçiş yapabilirsiniz. Aşağı kaydırma, AMP eklentisinin aşağıda görebileceğiniz daha gelişmiş ayarlarını ortaya çıkaracaktır. Bunları daha sonra tartışacağız.

AMP eklentisinin Gelişmiş ayarları.

Desteklenen Şablonlar: Bu, gönderiler, sayfalar ve medya dahil olmak üzere AMP için hangi içerik türlerinin etkinleştirileceğini seçmenize olanak tanır. Tüm şablonları AMP olarak sunmanıza izin veren bir geçiş anahtarı da vardır. Bu, varsayılan olarak seçilidir.

Eklenti Engelleme: Bu ayarı kullanarak, hangi eklentilerin AMP doğrulama hatalarına neden olduğunu görebilir ve bunları Etkin'den Bastırılmış'a geçirebilirsiniz. Eklentileri bastırmak, eklentileri sitenizin geri kalanında etkin halde bırakırken AMP sayfalarınızda çalışmasını engeller.

Analytics: Bu ayar, analitik yapılandırmalarını kontrol ederek AMP sayfalarınız için analizler yakalamanıza olanak tanır. Her yapılandırma bir JSON nesnesi biçimini alır ve herhangi bir yapılandırmanın çalışması için sitenizde Google Analytics'in kurulu olması gerekir. Bu ayarda herhangi bir değişiklik yapmadan önce amp-analytics belgelerini ve Analytics belgelerini okumanızı öneririz.

Eşleştirilmiş URL Yapısı: Bu ayar yalnızca Geçiş ve Okuyucu modları için geçerlidir. Standart mod yalnızca AMP sayfalarını sunar, bu nedenle eşleştirilmiş URL'ler gerekli değildir. Geçiş ve Okuyucu modlarında, standart URL'ler AMP olmayan olarak kalırken AMP sürümlerinde AMP'ye özel URL'ler bulunur. Eşleştirilmiş URL yapılarının değiştirilmesi, site yeniden dizine eklenene kadar 404'lere neden olabilir. AMP, farklı bir yapıya sahip başka bir AMP eklentisinden geçiş yapmıyorsanız bu ayarı tek başına bırakmanızı önerir. Örnekleri önceki bağlantıda gösterilen eşleştirilmiş URL'ler için dört farklı yapı vardır.

Diğer: Bu ayar, tümü varsayılan olarak etkinleştirilen üç geçiş anahtarından oluşur. İlki, mobil yeniden yönlendirmeyi devre dışı bırakmanıza izin verir. Etkin bırakmak, mobil ziyaretçilerin sayfalarınızın AMP sürümünü görmesini sağlar. İkinci anahtar, AMP geliştirici araçlarının gönderileri düzenlerken ve siteyi görüntülerken doğrulama hatalarını ortaya çıkarmasını sağlar. Üçüncü ve son geçiş anahtarı, eklentiyi bir noktada kaldırırsanız eklenti verilerinin silinip silinmeyeceğini belirler.

AMP Daha Hızlı mı?

Daha önce belirttiğim gibi, AMP eklentisi, Twenty Twenty-One gibi WordPress için AMP için etkin bir tema kullandığınız sürece, AMP olmayan benzerleriyle aynı görünen sayfalar üretir. Biraz sonra diğer temalara da göz atacağız. Şimdilik, bazı hız testleri yapmak ve AMP'nin sözünü yerine getirip getirmediğini görmek istiyorum. Görsel olarak aynılar, ancak asıl test, AMP sürümünün gerçekten daha hızlı yüklenip yüklenmediğidir.

Örnek gönderim, başlamak için oldukça hafif, sadece küçük bir resim dosyası ve biraz metin. Bu muhtemelen ne olursa olsun oldukça hızlı yüklenecektir. AMP'ye biraz daha meydan okumak için, tek bir resim bloğu ve bir galeri bloğu ile yeni bir gönderi oluşturdum ve doldurmak için bazı resimler aldım. Resimlerinizi hızlı yükleme için optimize etmek en iyi uygulamadır, ancak zahmet etmedim. AMP sayfası için işleri çok kolaylaştırmanın hiçbir avantajını görmedim.

Test için kullanacağımız temel galeri gönderisi.

AMP eklentisini zaten kurmuştum, bu yüzden yaptığım ilk şey, galeri gönderim için temel yük hızını belirlemek için onu devre dışı bırakmak oldu. Ardından, Firefox'ta geliştirme araçlarını açtım ve sayfayı birkaç kez yenilerken Ağ sekmesine baktım.

AMP Olmayan Sürüm

Sıkıştırılmamış Boyut: 908.54 KB
Aktarılan: 637,80 KB
Bitiş: 1.78 sn
DOMİçerikYüklendi: 549 ms
Yük: 668 ms

AMP Sürümü

Sıkıştırılmamış Boyut: 1.45 MB
Aktarılan: 1.05 MB
Bitiş: 1.58 sn
DOMİçerikYüklendi: 423 ms
yük: 442 ms

AMP sürümü, biraz daha hacimli olmasına rağmen, AMP olmayan sayfadan biraz daha hızlı yüklenir.

AMP ve WordPress Temaları

Varsayılan WordPress Twenty Twenty-One temasına veya AMP özellikli başka bir temaya bağlı kaldığınız sürece, resmi AMP eklentisinin artık AMP olmayan sayfalarla aynı sayfalara hizmet ettiğini zaten belirledik. Aynı şeyin diğer temalar için de geçerli olup olmayacağını bilmek istedim. Resmi AMP eklentisi ile uyumlu olarak listelenen popüler temalar olan Astra ve OceanWP ile test etmeye karar verdim. Ayrıca eklentiyi, AMP for WordPress ekosisteminin bir parçası olarak listelenmeyen popüler bir tema olan Storefront ile test etmek istedim. Sonuçları aşağıda görebilirsiniz. Her durumda, orijinal sürüm solda, sayfanın AMP sürümü sağdadır.

Astra'da:

AMP ve AMP olmayan sayfalarla Astra teması.

OceanWP'de:

WPOcean'daki sayfanın AMP ve AMP olmayan sürümleri.

Storefront temasını yükledim ve sayfayı güncelledim. Astra ve OceanWP'den farklı olarak Storefront, uyumlu temalardan oluşan AMP ekosisteminin bir parçası olarak listelenmez. Ancak, gönderiler hemen hemen aynı görünüyor.

Vitrin temasındaki AMP ve AMP olmayan sayfalar.

Daha önceki testlerimizin aksine, AMP eklentisi beni bir çakışma konusunda bilgilendirdi.

Temayla çakışma nedeniyle AMP eklentisinden bir uyarı.

"Teknik ayrıntıları görüntüle"ye tıkladım ve bana sorunu gösterdi. Storefront teması bazı özel JavaScript'lere yüklenmişti. AMP, yalnızca eklenti tarafından otomatik olarak eklenen AMP bileşenlerini yüklemek için kullanılıyorsa <script> etiketlerine izin verir.

Eklenti, tema tarafından yüklenen <script> etiketlerini kaldırma ve sayfayı AMP olarak sunma veya bunları kaldırıp AMP olmayan bir sayfa olarak sunma seçeneği sunar. Bunları kaldırmak, dikkatli bir şekilde düşünmeyi ve temanın JavaScript'inin tam olarak ne yaptığına dair bir farkındalık gerektirir. Örneğin, temanız gezinme menülerine güç sağlamak için özel JavaScript yüklerse, onu kaldırmak, ön uç gezinmenizin bozulmasına neden olabilir.

AMP'nin bu yönü temalarla sınırlı değildir. Ayrıca, formlar gibi JavaScript'e dayanan diğer bileşenleri de etkileyebilir.

Resmi AMP eklentisinin çakışma ekranı.

Eklenti bunun yerine kullanmamı tavsiye etti…

AMP bileşenleri ve amp-bind ve eylemler ve olaylar gibi işlevler (onclick gibi JS olay işleyici özelliklerinin aksine). Amp-komut dosyasında kapsüllenmişse bazı özel JS eklenebilir.

Bu bileşenler, AMP'nin etkin olduğu sayfalarınıza özel etiketler eklemenize olanak tanır. amp-bind bileşeni, verilerdeki değişikliklere veya kullanıcı tarafından WordPress sitenizde gerçekleştirilen eylemlere yanıt olarak devreye girer. amp-script bileşeni, bir web çalışanında özel JavaScript'i çalıştırmak için kullanılır. Bu şekilde çalıştırabileceğiniz tam olarak hangi komut dosyaları için bazı kısıtlamaların geçerli olabileceğini unutmayın. Bu, AMP'nin hızını korumasını sağlar.

Resmi AMP Eklentisine Alternatif

Daha önce de belirttiğimiz gibi, WordPress.org deposu, resmi AMP eklentisi olan WP için AMP'ye bir alternatif listeler. En son eklenen özelliklerden biri, kullanılmayan tüm CSS'leri AMP sayfalarınızdan otomatik olarak kaldıran CSS Optimizasyonu'dur (diğer adıyla Tree Shaking). Ayrıca özel gönderi türleri için destek sunar.

AMP for WP için Google AdSense, iletişim formları ve WooCommerce ve diğer e-ticaret eklentileri için destek sunanlar da dahil olmak üzere birçok uzantı mevcuttur.

Resmi eklentiye kıyasla nasıl çalıştığını görmek istedim, bu yüzden ilk adım şu anda sitemde bulunan AMP eklentisini devre dışı bırakmaktı. Bir sonraki adım, eklentiyi kurmak ve etkinleştirmekti. Etkinleştirmeden sonra, WP için AMP, kuruluma devam etmeniz için size iki seçenek sunar: Temel ve Gelişmiş .

WP için AMP, Temel veya Gelişmiş kurulum seçeneği sunar.

Advance'i seçtikten sonra kurulum ekranına yönlendirildim. Buradan, Temel kuruluma geçiş dahil olmak üzere WP için AMP seçeneklerine erişebilirsiniz. İkisi arasındaki temel fark, Advance'in daha fazla seçenek sunması gibi görünüyor.

Gelişmiş , Kurulum , Ayarlar , Tasarım ve Uzantılara erişmenizi sağlar . Temel, bunu Kurulum ve Uzantılara ayırır. İkisi arasında istediğiniz zaman geçiş yapabilirsiniz.

Kurulum sekmesi, web sitenizin türünü değiştirmenize, sitenizin hangi bölümlerinin AMP'ye ihtiyaç duyduğunu seçmenize, tasarım seçimlerini ayarlamanıza, analitik izlemeyi yapılandırmanıza ve GDPR ile ilgili gizlilik ayarlarını değiştirmenize olanak tanır. Bu sekme ayrıca reklam kurulumunu ve WP için AMP ile uyumlu olan 3. taraf eklentilerin listesini içerir.

Ayarlar sekmesi, sitenizin AMP sayfalarını nasıl sunduğuna ilişkin çok sayıda seçenek sunar. Açıkçası burada ayrıntıya girmek için çok fazla şey var, ancak e-ticaret, çeviriler, analitik ve yapılandırılmış veriler dahil olmak üzere çoğu durumu oldukça ayrıntılı bir düzeyde kapsıyor gibi görünüyor.

Tasarım sekmesi, karşılaştırıldığında nispeten basittir. Size AMP uyumlu temaları gösterir ve bu eklenti aracılığıyla oluşturulan AMP sayfalarınızın tam görünümüne ve hissine erişmenizi sağlar.

Son olarak, Uzantılar sekmesi, AMP için WP için kullanılabilen premium uzantıların listesini gösterir.

WP için AMP'de bulunan ayarlar.

Yalnızca Ayarlar ve Tasarım sekmesini temel alan AMP for WP, size AMP sayfalarınız üzerinde resmi eklentiden daha ince ayarlı kontrol sağlar. Sitenizi ve AMP sayfalarınızı her zaman özelleştirebilirsiniz, ancak bu özelleştirmeler, resmi eklentiyi kullanıyorsanız koda girmenizi gerektirebilir. WP için AMP, normal WordPress arka ucu aracılığıyla benzer işlevsellik sunuyor gibi görünüyor. Ayrıca, ücretsiz sürümde bulunmayan özelliklerin yanı sıra temalar ve uzantılarda indirimler sunan WP için AMP'nin PRO sürümü de mevcuttur.

Tüm ayarları denemek yerine Temel'e geri dönmeye karar verdim. Daha sonra AMP'ye nerede ihtiyacınız var? seçeneğine tıkladım. ve seçilen Gönderiler .

Örnek gönderilerin AMP sayfaları olarak sunulduğundan emin olmak istedim, bu yüzden bir AMP testi yaptım. Her şey düzgün çalışıyor gibi görünüyordu, bu yüzden eklentinin herhangi bir şeyi değiştirip değiştirmediğini görmek için gönderinin düzenleme ekranına girdim. İçerik tamamen aynı görünüyordu, ancak aşağı kaydırma bazı değişiklikleri ortaya çıkardı.

WP için AMP, gönderinin düzenleme ekranına yeni bölümler ekler.

WP için AMP, size hem AMP Sayfa Oluşturucu hem de Özel AMP Düzenleyici sunar. AMP Sayfa Oluşturucu, sıfırdan AMP sayfaları oluşturmanıza veya önceden oluşturulmuş düzenleri kullanmanıza olanak tanır. Özel AMP Düzenleyici, normalde bir AMP sayfasıyla kullanmanız gereken özel AMP uyumlu etiketler yerine HTML kullanmanıza olanak tanır. Bunun nasıl çalıştığını görmek istedim, bu yüzden bir metin satırı attım, bazı etiketlerin içine aldım ve Use This Content as AMP Content için onay kutusunu işaretledim.

WP için AMP'deki özel AMP düzenleyicisinin bir görünümü.

Başarı! Eklediğim metin sayfaya dahil edildi ve kullandığım HTML etiketleri metne uygulandı.

HTML etiketlerinin dahil olduğu bir AMP sayfası.

Sonra hızlı bir hız testi yaptım. Yükleme hızı açısından, sonuçlar resmi eklentide bulunanlara benzerdi.

AMP Olmayan Sürüm

Sıkıştırılmış Boyut: 908.54 KB
Aktarılan: 637,80 KB
Bitiş: 1.78 sn
DOMİçerikYüklendi: 549 ms
Yük: 668 ms

WP Sürümü için AMP

Sıkıştırılmamış Boyut: 1.29 MB
Aktarılan: 722,90 KB aktarılan
Bitiş: 1.21 sn
DOMİçerikYüklendi: 231 ms
yük: 503 ms

WP Offload Media ve SpinupWP ile Hızı Artırma

Çok uzun zaman önce, bu soruya başka bir soru sorarak cevap verebilirdiniz: "Google'ın En Çok Okunan Haberler atlıkarıncasında görünmek istiyor musunuz, istemiyor musunuz?" Bugün cevap vermek çok daha zor.

Geliştirilmiş yük hızlarını test ettiğimiz AMP eklentilerinin her ikisi de. Ancak, yükleme sürelerinizi iyileştirmenin başka yolları da var. Bunlar, medyanızı WP Offload Media gibi bir eklenti aracılığıyla boşaltmayı ve bir içerik dağıtım ağı (CDN) kullanmayı içerir. WP Offload Media, mobil olsun ya da olmasın her sayfanın yüklenme sürelerini iyileştirmeye yardımcı olur.

Belgelerimizde WP Boşaltma Medyasının nasıl kurulacağını ele alıyoruz, bu nedenle bu bilgileri burada tekrarlamayacağız. Amazon S3, DigitalOcean Spaces ve Google Cloud Storage kılavuzları da dahil olmak üzere, yüklenen medyayı işlemek için depolama alanlarını yapılandırmaya yönelik kılavuzlarımız da var.

Test sitemde zaten yüklü ve yapılandırılmış WP Boşaltma Ortamı var, ancak görüntülerin bir CDN yerine yerel site yollarından yüklendiğinden emin olmak için AMP testlerini çalıştırmadan önce onu devre dışı bıraktım. Yeniden etkinleştirdim ve her iki AMP eklentisinin de devre dışı bırakıldığından emin oldum, ardından galeri gönderisinde temel bir hız testi yaptım.

WP Offload Media'nın ayarlar ekranı.

WP Boşaltma Ortamı Yükleme Hızı

Sıkıştırılmamış Boyut: 1.10 MB
Aktarılan: 907,77 KB
Bitiş: 804 ms
DOMİçerikYüklendi: 490 ms
yük: 659 ms

Sayfa, önceki testlerimizde AMP olmayan sürümden daha hızlı yükleniyor, ancak AMP'li gönderiler kadar hızlı değil. Öte yandan, WP Offload Media kullanmak, temanızla veya WordPress sitenizdeki JavaScript öğeleriyle çakışma konusunda asla endişelenmenize gerek olmadığı anlamına gelir.

Medyanızı bir CDN aracılığıyla sunmanın yanı sıra sayfa hızınızı artırmak için atabileceğiniz başka adımlar da vardır, örneğin [sayfa önbelleğe alma] (https://spinupwp.com/wordpress-caching-all-you-need-to-know /#sayfa önbelleğe alma).

SpinupWP'nin tek tıklamayla sayfa önbelleğe alma özelliğini kullanarak yükleme hızını biraz artırıp artıramayacağımızı görmeye karar verdim. SpinupWP panosuna giriş yaptım ve "Sayfa Önbelleği"ni açtım. SpinupWP, önbellek sürenizi ve yol hariç tutmalarınızı ayarlamanıza olanak tanır. Bunları varsayılan ayarlarında bıraktım ve test sitesinde başka bir hız testi yaptım.

SpinupWP'nin Sayfa Önbelleği Ekranı.

WP Aktarım Ortamı ve SpinupWP Önbelleğe Alma

Sıkıştırılmamış Boyut: 1.10 MB
Aktarılan: 907,81 KB
Bitiş: 605 ms
DOMİçerikYüklendi: 376 ms
yük: 494 ms

Bu hızlar, AMP eklentileriyle elde ettiğimiz sonuçlarla karşılaştırılabilir, ancak bunun avantajı, temalarınızın ve eklentilerinizin uyumluluğu konusunda endişelenmenize gerek olmamasıdır.

Toplama

Her iki AMP eklentisi de kullanıcılarınıza mobil cihazlarda hız artışı sağlayacak gibi görünüyor. WP Boşaltma Medyası size benzer bir destek sağlar, ancak hız artışı masaüstü kullanıcılarınız için de geçerlidir. SpinupWP'nin sayfa önbelleğe alma özelliğini kullanmak, hızı daha da artırır.

AMP kullanımının başlıca nedenlerinden biri, sayfalarınızı Google'ın En Çok Okunan Haberler atlıkarıncasına sokmaktı. Google, bunun yerine Önemli Web Verilerinizi değerlendirmeye geçtiği için bu motivasyon artık geçerli değil. Siteniz hızlı yükleme süreleri sunduğu sürece AMP kullanmamak sizi engellememelidir. Düşük Önemli Web Verileri puanlarını iyileştirmek, muhtemelen AMP'yi uygulamaya kıyasla zamanınızı daha iyi kullanmaktır. Bu Top News karuselini kırmak isteyip istemediğinize bakılmaksızın, Önemli Web Verilerinizi geliştirmek daha iyi bir kullanıcı deneyimi sağlar.

Öte yandan, AMP'den kaçınmanın ana nedenlerinden biri, sitenizdeki diğer sayfalardan genellikle önemli ölçüde farklı görünen sayfalar sunmasıydı. Görünümlerini değiştirmek için özelleştirmelere girebilseniz de, çok fazla kodlama içeriyordu. Bu sebep de bu noktada geçerli olmayabilir. Resmi AMP eklentisi, AMP uyumlu bir tema kullandığınız sürece, görünüş olarak AMP olmayan sayfalarla aynı olan sayfalar üretiyor gibi görünüyor. Daha da önemlisi, eklentinin kendisi, temanızdaki veya eklentilerinizdeki bir şey uyumlu olmadığında size haber verir ve size bu konuda ne yapacağınıza karar verme gücü verir.

AMP'yi zorlayan tartışmalar yakında ortadan kalkmayacak. Yazma sırasında, AMP etrafında dönen antitröst davası hala mahkemelerde dolaşıyor. Nihayet bir sonuca varılması yıllar alabilir.

Bu arada, AMP ile ilgili görüşünüz nedir? WordPress sitenizde AMP sayfaları kullanıyor musunuz ve kullanıyorsanız hangi eklentiyi kullanıyorsunuz? Yorumlarda bize bildirin!

Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.

Check Also

Divi's Theme Builder ile Özel Global Başlık Nasıl Oluşturulur

Artık Tema Oluşturucu burada olduğuna göre, web sitenizi A'dan Z'ye kurmanıza yardımcı olacak yeni eğitimlere dalmak için sabırsızlanıyoruz. Buna Divi'nin yerleşik seçeneğini kullanarak özel başlıklar oluşturma da dahildir. Bu eğitimde Divi's Theme Builder'ı kullanarak global bir başlık oluşturmaya odaklanacağız. Bu sayfaya veya gönderiye farklı bir başlık atamadıysanız, web sitenizin her yerinde genel bir başlık görünecektir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir