WordPress Sitenizin Mobil Sayfalarının Daha Hızlı Yüklenmesini Sağlamak için Google AMP'yi Kullanma

Sayfa Hızı Neden Önemlidir?

Milyarlarca kişi gibi, yakın zamanda bir mobil cihazda web içeriği tükettiyseniz, deneyimin iyileştirilebileceğini fark etmişsinizdir. Haber makalelerini okumak genellikle çok yavaştır ve sayfaların yüklenmesi uzun sürer. Sayfaya metin yüklendikten sonra bile, reklamlar, izleme javascript'i ve resimler indirildikçe sayfalar birkaç saniye içinde yüklenmeye devam eder.
Mobil uygulamalar bizi hızlı içerik yüklemeye , çevrimdışı görüntülemeye ve hızlı arayüzlere alıştırdı. Ancak mobil siteler genellikle kelimenin tam anlamıyla geride kalıyor. Bu, özellikle reklamlar, analizler, paylaşım ve yorum için birçok widget'tan yararlanan haber ve blog siteleri için geçerlidir. Bir iOS cihazına bir içerik engelleyici yükleyerek ve hız artışını fark ederek bunu kolayca test edebilirsiniz.
Elbette, bazı sorunları hafifletmek için duyarlı bir tema kullanabilirsiniz, ancak duyarlı tasarım, sayfa yükleme performansıyla ilgilenmez. Çoğu zaman, sorunun temelinde yanıt verme yatar : birçok farklı çözünürlükteki ekranlara sığabilecek web siteleri tasarlıyoruz ve en küçük ekranlar, daha düşük CPU performansı ve en yavaş bağlantılar için optimize edilmiş bir deneyim yaratamıyoruz. Duyarlı tasarımla, sayfa mobilde oluşturulduğunda tüm masaüstü varlıkları ve işlevleri yüklenmeye devam edecek ve genellikle düşük performansa neden olacaktır. Facebook'a göre, bir haber makalesinin mobil cihazlarda ortalama yüklenme süresi 8 saniyedir.
Bazılarımız akıllı telefonlarımızda 3G veya 4G ağ bağlantılarına sahip olacak kadar şanslı olsa da, ağ hızlarının önemli ölçüde düşmesi için şehir merkezlerinden çıkmanız yeterli. Ve elbette, henüz hızlı ağ bağlantılarının bulunmadığı gelişmekte olan ülkelerden bağlanan “bir sonraki milyar” insan ve cihaz var.
Neyse ki, tüm büyük oyuncular mobil cihazlarda içerik yüklemeyi hızlandırmanın yolları üzerinde çalışırken, işler doğru yönde ilerliyor. Facebook, duvarlarla çevrili bahçeleriyle sınırlı olsa da, hızlı web içeriği yüklemek için bir çözüm olan Instant Articles'ı başlattı. Apple, kendi News uygulamasını başlattı. Google, Facebook'a benzer bir amaca sahip ancak açık standart bir yaklaşım olan bir girişim olan AMP'yi (Hızlandırılmış Mobil Sayfalar) başlattı.
WordPress kısa süre önce Google'ın Hızlandırılmış Mobil Sayfaları (AMP) için WordPress.com'a ve WordPress.org sitelerine ücretsiz bir eklenti şeklinde destek eklediklerini duyurdu.
Öyleyse, WordPress.org blogunuza veya haber sitenize AMP'yi nasıl ekleyebileceğinizi ve web sitenizi mobil cihazlarda hızlandırmak için en son teknolojiden nasıl yararlanabileceğinizi görelim.

Google AMP nedir?

Google'ın AMP vaadi, sayfalarınızın anında mobil cihazlarda yüklenmesini sağlamaktır. Mobil internetle ilgili kalan son sorunlardan birini düzeltir. Herkesin kullanmasına rağmen, mobil internet şaşırtıcı derecede yavaş. AMP, bir sayfadaki sayı özelliklerini kısıtlayarak ve hız için tasarım özelliklerini çıkararak bu sorunu çözer. Google, AMP'nin yükleme hızının normal web sayfalarından yüzde 85 daha hızlı olduğunu iddia etti.
AMP, web siteniz için özel bir mobil görünüm oluşturur. Bu yeni mobil site, içeriğinizi Google mobil arama ve Chrome gibi desteklenen istemciler için geliştirir. Bu yeni görünüm, halihazırda sahip olduğunuz normal ve mobil web sitelerine ektir. Bu görünüm altında, sayfalarınız normal web sayfaları gibi görünür, ancak içeriği hariç tümü çıkarılır. Bu nedenle, WordPress sitenizin buna hazır olduğundan emin olmanız gerekir.

AMP nasıl çalışır?

AMP HTML, esasen yalnızca belirli JavaScript öğelerine izin verilen HTML'nin alt kümesidir. Odak noktası, haber siteleri ve bloglar gibi içerik açısından yoğun sitelerin yüklenmesini hızlandırmaktır. Javascript'i yoğun bir şekilde sınırlamakla birlikte, sayfalarınızda belirli Analytics ve Reklam öğelerine izin vererek, onu haber yayıncıları için iyi bir seçenek haline getirir.
AMP, yeni mobil görünümünü oluşturmak için üç ana öğe kullanır:

• AMP HTML – Bu HTML alt kümesi, AMP istemcilerinin içeriğinizi performans konusunda endişelenmeden istediğiniz şekilde oluşturmasına olanak tanıyan birçok kısıtlamaya sahip bazı özel etiketler ve özellikler ekler. Eklenti, bu yeni etiketleri sayfalarınıza otomatik olarak ekler, ancak ihtiyaç duymanız halinde bunları kendi AMP'ye özel şablonlarınızda kullanabilirsiniz.
• AMP JS – Bu JavaScript çerçevesi, AMP sürecini çalıştıran kaynak işlemeyi ve eşzamansız yüklemeyi yöneten mobil sayfalar için yapılmıştır. AMP sayfalarınızda herhangi bir üçüncü taraf JavaScript kullanamayacağınızı lütfen unutmayın.
• AMP CDN – AMP, AMP sayfalarınızı daha fazla önbelleğe alıp optimize edebilen isteğe bağlı bir içerik dağıtım ağı sağlar.

AMP'yi yükleme

AMP'yi WordPress sitenizde kullanabilmeniz için önce eklentiyi yüklemeniz gerekecek. WordPress.com kullanıyorsanız, bu zaten sizin için kullanılabilir.

Resmi Eklenti

Resmi AMP eklentisini WordPress eklenti mağazasında bulabilirsiniz, ancak en son sürümü yalnızca projenin Github sitesinde bulabilirsiniz . Böylece, yapmak için bir seçeneğiniz var.
Eklentiyi WordPress üzerinden yüklemek en hızlısıdır. Eklentiler WordPress yönetici panelinizin “Yeni Ekle” bölümünde amp-wp'yi aramanız yeterlidir. Ardından, web sitenizde AMP'yi kullanmaya başlamak için yükle'yi ve ardından etkinleştir'i tıklamanız yeterlidir.
Herhangi bir nedenle en son sürüme ihtiyacınız varsa, eklentiyi manuel olarak yüklemeniz gerekecektir. Github paketini indirdikten sonra, “Yeni Eklenti Ekle” panelinizdeyken “Eklentiyi yükle”ye tıklamanız yeterlidir. Paketi içeren zip dosyasını bulun ve WordPress'in oradan bir şeyler almasına izin verin. Yükleme bittiğinde, kullanmaya başlamak için eklentiyi etkinleştirebilirsiniz.

PageFrog ve Diğer AMP Eklentileri

Resmi eklenti doğrudan Google'ın AMP proje ekibinden gelir ve bu da onu AMP'nin en güncel sürümü yapar. Sahip olduğunuz her sayfanın ve yayının /amp/ sürümünü oluşturur. Kendiniz görmek için URL'lerin sonuna /amp/ eklemeniz yeterlidir.
Ancak bu AMP sayfalarını düzenleyemezsiniz. Temel eklentinin size sağladığından daha fazlasına ihtiyacınız varsa, PageFrog gibi diğer AMP eklentilerinden birine ihtiyacınız olacak.
PageFrog, yaptığı değişikliklerin bazılarını düzenlemenize izin vererek temel AMP eklentisini geliştirir. Hatta bazı stil ve tema özellikleri ile Facebook'un Anında Makaleler gibi diğer protokolleri eklemenize bile izin verecek. PageFrog ve diğer birkaç AMP eklentisini WordPress eklenti mağazasında bulabilirsiniz.

AMP için WordPress sitenizi yapılandırma

Eklentiyi etkinleştirdikten sonra işiniz bitti. Çoğu kurulum için, içeriği normalde yaptığınız gibi oluşturmanız yeterlidir ve eklenti gerisini halleder. Yine de, Google Analytics kodunuz gibi şeylerin AMP sayfalarınızda kutudan çıktığı gibi çalışmayacağını unutmayın. Yeni AMP sayfalarınıza Analytics ve SEO özelliklerini nasıl ekleyeceğinizi öğrenmek için baştan sona okuyun. .

AMP sayfalarınıza Google Analytics ekleme

Bu özelliklere mobil sayfalarınızda da ihtiyacınız varsa, bunları eklentinin single.php sayfa şablonuna manuel olarak eklemeniz gerekir.
Bunu yapmak için, Eklentiler listenizde AMP eklentisinin adının yanındaki düzenle seçeneğine tıklamanız gerekecek. Buradan, düzenlemeye başlamak için single.php bağlantısını tıklamanız yeterlidir. Eklentiyi her güncellediğinizde bunu yeniden yapmanız gerekebileceğini lütfen unutmayın.

SEO Eklentileri ve AMP

AMP sayfalarınız SEO özelliklerinizin hiçbirini içermeyeceğinden, yeni bir AMP uyumlu SEO eklentisine ihtiyacınız olacak.
Neyse ki, çoğu SEO eklentisi geliştiricisinin kullanabileceğiniz AMP uzantıları vardır veya olacaktır . Bunları ayrı olarak yüklemeniz gerekecek, ancak tüm sayfalarınızın sitenizin SEO'sunu geliştirmeye yönelik çalışmasını sağlamak için bunlara ihtiyacınız var.
Bu makale itibariyle, yalnızca üç SEO WordPress Eklentisi AMP uzantıları veya güncellemeleri yayınladı.

• Glue for Yoast SEO – Yoast SEO WordPress eklentisine AMP desteği ekler
• Schema App Structured Data – schema.org'dan AMP ile SEO şema eklentisi
• WP SEO Structured Data Schema – Kansas City SEO'dan AMP ile SEO şema eklentisi

Herhangi Bir Hatayı Düzeltme

Web sitenize yapılan herhangi bir eklemede olduğu gibi , AMP sayfalarınızı hatalar ve tutarsızlıklar açısından test etmek ve düzeltmek istiyorsunuz.
AMP hala gelişmektedir ve özelliklerin çoğunda hala hatalar olabilir. AMP sayfalarınızı herkese açık hale getirmeden önce şablon dosyalarınızdaki bu hataları manuel olarak düzeltmeniz gerekecektir. Eklentiyi her güncellediğinizde herhangi bir değişiklik olması durumunda düzenlemelerinizi yeniden yapmanız gerekebileceğini unutmayın.

AMP sayfalarınızda reklam vermek

AMP HTML, JavaScript'e izin vermez, bu nedenle reklamlar doğrudan yerleştirilemez – bunun yerine ana makale içeriğine erişimi olmayan korumalı alanlı iframe'lerde yaşarlar.
Google, AMP'yi bazı reklam türlerinin geçmesine izin verecek şekilde tasarladı. Reklam eklentilerinizin AMP uyumlu sürümüne ihtiyacınız var. Bu uyumlu eklentilerin tam listesini AMP Github sayfasında bulabilirsiniz .
Şu anda desteklenen reklam sağlayıcılar şunları içerir:

• A9
• reklam reaktörü
• AdSense
• reklam teknolojisi
• Çift tıklama

AMP veya Mobil Uygulama?

AMP, bazı koşullarda sitenizin makale sayfalarını hızlandırmaya yardımcı olabilirken, her durumda ve tüm cihazlarda çalışmayacaktır. Sadece bu da değil, aynı zamanda sayfalarınızda ne tür analizler (js yok!) ve reklam yayınlayabileceğiniz konusunda da büyük sınırlamalar getiriyor.
AMP, aramadan gelen trafik için etkili bir çözüm olabilir, peki ya en sadık okuyucularınız?
Bunlar için, kitlenizin türüne ve boyutuna bağlı olarak bir uygulamanın hala çok anlamlı olduğuna inanıyorum. Bir uygulama, AMP veya Hızlı Makaleler'in sağlayamadığı birçok fayda sağlamaya devam edebilir : push bildirimleriyle içerik teslimi ve yeniden etkinleştirme, içeriği önbelleğe alma ve çevrimdışı kullanım, uygulama mağazalarında bulunma ve daha da önemlisi kullanıcının ana ekranı.
Bu nedenle, içeriğinizin kontrolünü ve mobil cihazlara özel reklamcılık ve analiz seçeneklerini korurken zaman içinde büyümenize yardımcı olacak bir platform arıyorsanız, kendi uygulamanızı yayınlamayı düşünün. Haber veya blog sitenizde WordPress kullanıyorsanız, MobiLoud'da sizin için doğru çözüme sahip olabiliriz .