Google'ın AMP'si: Hızlandırılmış Mobil Sayfalar İçin Eğlenceli ve Kullanıcı Dostu Kılavuz

Videoyu izle. Kopyayı dikkate almayın.

Google'ın yeni Accelerated Mobile Pages (AMP) Projesine adanmış sitesine girdiğinizde size tavsiyem:

"Hızlandırılmış Mobil Sayfalar (AMP) Projesi, yayıncıların mobil için optimize edilmiş içeriği bir kez oluşturup her yere anında yüklemesini sağlama vizyonunu bünyesinde barındıran bir açık kaynak girişimidir."

Geliştirici değilseniz ve kopyayı okursanız, jargon tarafından canlı canlı yutulacaksınız.

Ancak videoyu izleyin ve AMP'nin neyle ilgili olduğunu neredeyse anında anlayacaksınız (komik bir Spinal Tap referansından bahsetmeye gerek yok, aşağıya bakın).

Veya bu kılavuzu okuyabilirsiniz çünkü AMP hakkında okuduğunuz en eğlenceli şey ve içerik pazarlamanızı nasıl etkilediği.

Söz veriyorum.

Google'ın AMP Projesi nedir?

Google'ın Zero Moment of Truth felsefesinin 2011'de ortaya çıkışından bu yana, "mobil web'in performansını önemli ölçüde iyileştirmek" istedikleri bir sır değildi.

Ve muhtemelen mobil web'deki içeriğin performansıyla ilgili küçük bir sorun olduğunu söylememe gerek yok.

Muhtemelen bir mobil cihazınız var. Ve muhtemelen o cihazdaki bir arama sonuçları sayfasındaki, sosyal medya sitesindeki veya e-posta gelen kutunuzun içindeki bir bağlantıya tıkladınız… içeriği tüketmeye istekliydiniz.

Ama asla gelmez.

Eh, geliyor, ancak sayfa yüklenirken sallantılı, sarsıntılı görüntüler, videolar ve reklamlardan oluşan sarsıcı bir yama halinde. Metro koltuğunuzda tuvalete gitmesi gereken biri gibi korku içinde, büyümüş, zıplarken bakıyorsunuz.

"Bu ne kadar sürecek?" özellikle kimseye bağırmıyorsun.

Kim bilir, ama asla öğrenemezsiniz çünkü nüfusun yüzde 40'ı gibi, 3 saniye içinde yükleme sayfasından kurtulacaksınız. Sonra kara kedim Apollo Maymun Askısı gibi, "İç çek" diyeceksiniz.

Google'ın AMP ile ortadan kaldırmak istediği, bunun gibi dayanılmaz mobil anlar.

AMP, sayfalarınızı ne kadar hızlı yapacak?

1'den 10'a kadar olan bir ölçekte, biri "hiç yüklenmiyor" ve on "bir saniyede yükleniyor" olmak üzere, AMP içeriği 11 sayfa hızında yüklenir (Bu, sizi uyardığım Spinal Tap referansıdır).

Ama cidden, ne kadar hızlı?

Pinterest'te yazılım mühendisi olan Jon Parise, "Accelerated Mobile Pages, geleneksel mobil cihazlar için optimize edilmiş sayfalardan dört kat daha hızlı yükleniyor ve sekiz kat daha az veri kullanıyor." Dedi.

Dört kat daha hızlı iyidir! Peki bu sizin için ne anlama geliyor, metrodaki dost canlısı metroda cep telefonuna bir web sayfası indirmeye çalışıyor?

NiemanLab'a göre, AMP için optimize edilmiş bir New York Times makalesi 2,99 saniyede tamamen mobil cihaza indirildi. Karşılaştırma için, hızlı bir iMac üzerinde Chrome'da yapılan bir testte, o sayfanın masaüstü sürümü 3,82 saniye sürdü (mobil sürüm daha hızlıydı).

Eğer farkında değildiyseniz, NYTimes.com Satürn'ün bu tarafında en yavaş yüklenen mobil haber sitelerinden biri olduğu için ünlüydü.

O zamandan beri bunu düzelttiler.

Bunun yeterince hızlı olduğuna emin misin?

Ama bekleyin, diyorsunuz, 2.99 saniye hala metro banliyölerimizin beklemeye istekli olduğu zaman çerçevesinin üst sınırında. Nüfusun yüzde 40'ı gibi, 3 saniyede kurtuldu. 2,99 saniye onu çok yakın kesiyor! Bu pek bir gelişme değil.

Doğru, ancak fark, bir masaüstündeki AMP olmayan ilk senaryoda sayfanın 3 saniye sonra hala yükleniyor olmasıdır . Senaryonun AMP versiyonunda 2.99'da tamamen indirildi .

Daha da önemlisi, AMP sürümü 0.857 saniyede "domContentLoaded - HTML'nin tamamen indirildiği ve belirli önemli ayrıştırmanın tamamlandığı bir web sayfasının yüklemesinde önemli bir noktaya" ulaştı.

Göz açıp kapayıncaya kadar yaklaşık 0,33 saniye sürer.

Başka bir deyişle, gözünüzü iki kez kırptığınızda, metro yolcumuz, AMP sayesinde içeriğin yararlı kısmını neredeyse anında okumaya başlayabilirsiniz.

Geleneksel mobil sayfaların bu kadar yavaş yüklenmesini sağlayan nedir?

Sanırım biliyorum, ama bir geliştirici, tasarımcı veya programcı olmadığım için (ve bunların farklı disiplinler olup olmadığından bile emin olmadığım için), çeviri yapmama yardımcı olması için burada Rainmaker Digital, Mike Hale adlı geliştiricilerimizden birini aradım.

Mike, bir masaüstü sitesi bir mobil tarayıcıya çekildiğinde, genellikle farklı ana bilgisayarlardan mobil tarayıcıya "çağrılan" birkaç düzinelerce bilgi paketine sahip olduğunuzu söyledi.

Yukarıdaki eski, yavaş New York Times örneğinde, bir makale "192 istek, bazıları Times'ın ana bilgisayarlarına, çoğu da çok sayıda komut dosyası barındıran diğer sunuculara" olabilir.

En kullanışlı kısım, tıkladıktan sonra 5 saniye içinde indirilecek, ancak geri kalanı hala gelmeye devam ediyor, bu nedenle tarayıcı ayarlanıp ardından sıfırlanırken ekran zıplıyor.

Hala kayboldum, Mike'a "Ama ne tür şeyler talep ediliyor ?! Ne deniyor ?! "

Mike, cep telefonunuzun sosyal eklentiler, resim karuselleri, Slayt Paylaşımları ve videolar için komut dosyalarını arayabileceğini söyledi. Ve sonra muhtemelen arka planda çalışan analiz yazılımları, reklamlar ve izleme komut dosyaları vardır.

Mantıklı, gündelik şeyler, ama artıyorlar. Ve hızlı.

Sorun şu ki, mobil cihazınız bunu hızlı bir şekilde halledecek işlem gücüne sahip değil.

Bu resim, mobil içerikle ilgili sorunu açıklıyor

Bankaya gittiğinizi, veznedara yürüdüğünüzü ve tuhaf bir sırayla 100 dolar talep ettiğinizi düşünün: on beş bir dolarlık banknot, üç beş dolarlık banknot, beş on dolarlık banknot ve bir yirmi dolarlık banknot.

Banka şu anda mobil web gibi çalışıyorsa, veznedar size her bir faturayı ayrı ayrı vermek için birden fazla yolculuk yapar.

Bu gezilerin her biri bir "çağrı" dır.

Ancak banka AMP ile optimize edilmişse, veznedar size tüm faturalarınızı aynı anda verecektir. Ayrıca, muhtemelen belirli faturalar için özel talebinizi görmezden gelir ve sadece yüz dolarlık bir banknot verir.

AMP, bir tarayıcının yapması gereken istekleri basitleştirmeyi amaçlamaktadır.

Mike, "Arayabileceğiniz tek komut dosyası AMP javascript," dedi. "Her şey tek bir pakette toplandı. Size her şeyi aynı anda veriyorum. "

Yoast, AMP mobil içeriğini şöyle tanımlıyor:

Bunu bir yarış arabasıyla karşılaştıralım. Bir yarış arabasını daha hızlı yapmak istiyorsanız, ona daha hızlı bir motor verirsiniz ve tüm ağırlığı kaldırırsınız. Bu ağırlık sıyırma işleminde, arka koltuklar, klima vb. Şeyleri de kaldırırsınız. AMP bundan farklı değildir. Bu, normal bir web'in kısaltılmış sürümüdür, çünkü Google hıza şık özelliklerden daha çok önem verir. "

Son satırdaki o acıyı hissediyor musun? Senin hayal gücün değil. Buna birazdan değineceğiz. Öncelikle, ne demek istediğimi anlamanıza yardımcı olması için bir AMP deneyimine bakalım.

AMP için optimize edilmiş mobil içerik neye benziyor?

Neyse ki, bir AMP haber içeriği demosunu test edebilirsiniz.

1. O akıllı telefonunu çıkar.
2. Bir tarayıcı açın (herhangi bir tarayıcı).
3. G.co/ampdemo yazın.
4. Google arama kutusuna "Justin Bieber Doğum Günü", "Jennifer Lawrence" veya "Yoko Ono" gibi popüler anahtar kelime öbeklerini yazın.
5. "Gönder" i tıklayın.

Bu, sonuçların nasıl görüneceğine dair bir örnektir:

Gördüğünüz gibi, AMP içeriği en çok faturalandırılıyor. Katın üzerinde oturan atlı karıncanın içindedir. Standart girişler bunun altında yer alır.

Bu atlı karıncaya göz atabilir ve hoşunuza giden AMP destekli bir makale bulduğunuzda üzerine tıklayın. Şöyle görünecek:

Eğlenceli okuma, eh!

Google bunu neden yapıyor ve umursamalısınız? (Sıralama)

Tuhaflaştığı yer burası.

Yukarıda bahsettiğim gibi, Google son beş yıldır mobil web performans optimizasyonuna takıntılı durumda, bu yüzden ciddi derecede hızlı web sitesi hızının önemi hakkında yazıyoruz (bu makalede site hızınızı test etmek için altı araç var, bu arada) kadar uzun.

Bu nedenle geçen yıl sizi Google'ın Mobil Güncellemesi "Mobilegeddon" hakkında uyardık.

Öyleyse, bu noktada AMP, Google'ın mobil web optimizasyonuna odaklanmasının bir tür doruk noktasıdır, ancak yayıncılara nasıl yardımcı olur?

Kulağa basit geliyor, ancak Google şöyle düşünüyor: Kullanıcılar içeriği sever. Hızlı içeriği severler. Hızlı içeriği ne kadar hızlı bitirirseniz, o kadar fazla içerik tüketilebilir.

Yine de bu hamlenin başka bir yönü var: Google, haber tüketim savaşını kazanmaya çalışıyor.

AMP'nin Instant Articles ve Apple News'ten farkı nedir?

Geçtiğimiz yıl, hem Apple hem de Facebook, kullanıcıların haber makalelerini tüketmesine izin veren uygulamalar başlattı: Apple News ve Instant Articles.

Bu uygulamaların her ikisi de bağımsız ürünlerdir.

Adobe'nin XD ekibinde Kıdemli Deneyim Geliştirme Mühendisi olan Christian Cantrell, Smashing Magazine'de şöyle yazdı: "Bunlar, özel bir sendikasyon formatları üzerine inşa edilmiş özel oluşturuculara sahip süslü haber toplayıcılarıdır."

Başka bir deyişle, Instant Articles ve Apple News RSS'de yeniden doğuyor.

Öte yandan Google, doğrudan yayıncılara gitmeyi ve mobil içeriği açık web'de tüketim için optimize etmelerini sağlamayı amaçlamaktadır, bu da bir uygulamada bulamayacağınız zahmetsiz giriş ve kolay dağıtım sağlar.

Şimdiye kadar bazı büyük haber yayıncıları katıldı:

• Time Inc.
• Atlantik Okyanusu
• Vox
• BBC
• The Huffington Post

WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn ve Pinterest gibi bir dizi teknoloji şirketi de katıldı.

AMP hakkında iki yaygın şikayet

Şikayetler en az iki çeşittir:

1. Kötüleyenler, mobil içeriğin yapabileceklerine ilişkin kısıtlamalardan nefret eder.
2. Kötüleyenler, küçük yayıncının cezalandırılacağından yakınıyor.

Yoast ilk kategoriye giriyor. Joost de Valk, “AMP, HTML sayfalarında yapabileceklerinizi kısıtlıyor. Süslü tasarım, hız lehine çıkarılır. AMP, form projesinden çok bir işlevdir. "

Etkilenenlerin yalnızca görünüm olmadığını unutmayın; AMP, kutudan çıkar çıkmaz formları desteklemez; bu, AMP sayfalarının e-posta listenizi büyütmenize yardımcı olmayacağı anlamına gelir. Mevcut teknik çözümler var, ancak durum bunların nasıl gelişeceğini görmek için hala çok yeni.

Çoğunlukla büyük yayıncıların AMP kullandığını fark edeceksiniz, ancak bu, AMP'nin daha küçük yayıncılara zarar vereceği anlamına mı geliyor?

Search Engine Land'den Paul Shapiro şunları söyledi:

"Deneyimli geliştiriciler genellikle yoğun performans optimizasyonları yoluyla benzer sonuçlar elde edebilseler de, yayıncılar bunu kaynak kısıtlamaları nedeniyle genellikle ihmal ediyor. AMP, birincil mobil web deneyimini değiştirmeden bu optimizasyonların kolayca gerçekleştirilmesini sağlıyor. "

AMP, mobil deneyimi optimize etmek için sağlam bir araç olabilir. Öyleyse AMP yapmalısınız?

AMP konusunda kim endişelenmeli?

Değişir.

• Dev bir haber yayıncısı mısınız? Mobil kullanıcı deneyimi için sağlam bir stratejiniz yoksa panikleyin. Aylar önce zaten sahip olman gereken, ama hey.
• Mobilden önemli bir trafik kaynağı alıyor musunuz? Yine, mobil deneyim için stratejinizin çok sağlam olduğundan emin olmanız gerekir. Muhtemelen AMP'nin nasıl geliştiğini izlemek ve görmek istersiniz, ancak bazı deneyler yapmaya değer olabilir.
• Çok fazla rekabetin olmadığı yeni bir pazarda mısınız? Önümüzdeki 30 gün içinde mobil içeriğinizi optimize etmeye özen gösterin, ancak paniğe kapılmayın.
• Yukarıdaki kategorilerden hiçbirine uymuyor musunuz? Sonra ellerinize oturun ve ne olduğunu izleyin.

Baş Ürün Sorumlumuz ve StudioPress kurucumuz Brian Gardner "Kesinlikle bir yayıncının radarında tutulması gereken bir şey" dedi. "Ama benim tahminim, bir süre daha akıcı bir anlaşma olacağı yönünde."

Kim bilir? Tüm bunları yolda yapmanın daha kolay bir yolu olabilir - bir WordPress içerik yönetimi danışmanlık ajansı olan 10up'ın başkanı ve kurucusu Jake Goldman da şunu önerdi:

"Zaman göz önüne alındığında, AMP'nin sonunda 'kısıtlanmamış' HTML kadar karmaşık hale geleceğinden veya artık sahip olmadığımız bir soruna yönelik bir çözüm olan mobil donanım, geniş bant hızları ve standartlaştırılmış gizlilik özelliklerindeki gelişmelerle tartışmalı hale getirileceğinden şüpheleniyoruz.

Ancak AMP ile oynamak istediğinizi varsayalım.

İlk AMP sayfanızı nasıl oluşturabilirsiniz?

Bu, büyük erkek / kız geliştirici pantolonunuzu yukarı çekeceğiniz yerdir, çünkü AMP'ye başlamak için bazı temel işaretlemeler gerekir.

Bu temel eğitimde ilerlemenizi tavsiye ederim. Size şunları nasıl yapacağınızı öğretecek:

• Ortak kod kullanarak ilk AMP sayfanızı oluşturun.
• Sahneleyin.
• Google'ın doğrulayıcısını kullanarak AMP uyumlu olduğunu ( bu çok önemli bir adımdır ) doğrulayın.
• Yayın ve dağıtım için hazırlanın.

İşaretlemenizde, bazı öğelerin AMP etiketi olduğunu göreceksiniz. Böylece, <img> etiketi <amp-img> olur. <anim> etiketi <amp-anim> olur. <video> etiketi, <amp-video> olur.

Ve bunun gibi.

WordPress kullanıcıları ne yapmalı?

AMP'yi denemek istiyorsanız, şanslısınız.

24 Şubat 2016'da Automattic resmi bir AMP eklentisi yayınladı. Bu nedenle, WordPress kullanıcıları AMP için optimize edilmiş içerikten sadece indirilebilir bir eklentidir.

Ancak şunu aklınızda bulundurun: Resmi AMP eklenti sayfasına göre, eklenti sayfaları veya arşivleri desteklemiyor. Sadece gönderiler.

Ancak eklentiyi (bam) etkinleştirdiğinizde, tüm gönderileriniz otomatik olarak AMP ile güçlendirilir!

Eklenti etkinken, sitenizdeki tüm gönderiler dinamik olarak oluşturulmuş AMP uyumlu sürümlere sahip olacaktır.

Web gönderilerinizin AMP sürümünü url'nin sonuna "/ amp" koyarak görebilirsiniz. Örneğin, yourwebsite.com/amp-wicked-fast'in AMP sürümü, yourwebsite.com/amp-wicked-fast/amp olur .

Ve Rainmaker Platform müşterisiyseniz: radar ekranlarımızda AMP var. Google'ın 180 derecelik dramatik geri dönüşler geçmişi göz önüne alındığında, hiçbir şeye acele etmeyeceğiz. Ancak AMP gelecekte önemli olacaksa, kullanıcılarımıza kolay bir AMP çözümü sunacağız.

AMP bir arama sıralama faktörü midir?

Hayır.

Google'dan John Mueller, AMP'nin bir sıralama faktörü olmadığını belirtti. "Sayfaları AMP biçimine dönüştürmek, mobil uyumlu sıralama sinyalini tatmin edecek, ancak yalnızca AMP ile ilişkili bir sıralama sinyali yok" dedi.

Search Engine Journal personel yazarı Matt Southern şunları söylüyor:

"Sorum şu, AMP içeriğinin zaten ilk sayfanın üstüne tek yönlü bir bileti varsa, AMP'nin bir sıralama sinyali olup olmaması ne fark eder? Çoğunlukla, AMP içeriği halihazırda organik sonuçların üzerinde sıralanıyor ve bu, birinin isteyebileceği en büyük sıralama artışlarından biri. "

Bu yüzden, mobil içerik oyununda oraya çıkmanın ve rakiplerinizin önüne geçmenin bir avantajı var - bu Whiteboard Friday videosunda Distile halkının yüzünüze salladığı bir çubuk üzerinde bir havuç.

Whiteboard Friday videosunu izlemenizi tavsiye etmemin bir başka nedeni de Distilled'deki insanlar, AMP'nin sunduğu bir başka önemli ayrım: bir önbellek sunucusu aracılığıyla süper hızlı teslimat.

Distilled'in Ar-Ge başkanı Tom Anthony şunları söylüyor:

"Ve tüm bunlar, Google'ın bu sayfaları barındırabilmesi, gerçek içeriğinizi orada barındırabilmesi ve böylece artık sizden almalarına bile gerek kalmaması için gerçekten büyük ölçüde önbelleğe alınacak şekilde tasarlandı ."

Sırf sırıtmak için, Google Blog'un önbelleğe alma konusundaki yeni yaklaşımları hakkında söylediği şey buydu:

"Bu nedenle, bu çabanın bir parçası olarak, Google'ın yüksek performanslı küresel önbelleği aracılığıyla verimli dağıtıma izin verirken yayıncının da içeriğini barındırmaya devam etmesine olanak tanıyan yeni bir önbelleğe alma yaklaşımı tasarladık. Önbellek sunucularımızı herhangi biri tarafından ücretsiz olarak kullanılmak üzere açmayı planlıyoruz. "

Ben özgürüm.

AMP, reklamcılığınızı etkileyecek mi?

Yapmamalı.

Google'a göre, "Kapsamlı bir dizi reklam biçimini, reklam ağını ve teknolojiyi desteklemek istiyoruz. AMP HTML kullanan tüm siteler, kendi seçtikleri reklam ağlarının yanı sıra, kullanıcı deneyimini azaltmayan tüm biçimleri koruyacaktır. "

Ve merak ediyorsanız, resmi Google AMP Projesi sitesinden desteklenen reklam ağlarının listesi aşağıda verilmiştir:

• A9
• Adform
• AdReactor
• AdSense
• AdTech
• Nokta ve Medya
• Çift tıklama
• Flite
• plista
• Smart AdServer
• Yieldmo
• Revcontent

Bu arada, sanırım AMP aynı zamanda yayıncıların reklam engelleyicilerin artan şekilde benimsenmesi konusundaki korkularını yatıştırmayı da amaçlıyor. Ama bu başka bir zaman için başka bir hikaye. Muhtemelen bunu tamamlamanın zamanı geldi.

Sana doğru …

Vay. Burada pek çok yeri kapladık.

Bana takıldığınız için teşekkür ederim. Umarım bunu yararlı bulmuşsunuzdur ve Google AMP Projesi ile ilgili tüm sorularınızı yanıtladım.

Değilse, aşağıdaki yorumlarda bana bir satır bırakmaktan çekinmeyin. Ayrıca, yazdıklarıma eklemek istediğiniz bir şey varsa veya bir şeyi kaçırdıysam bir yorum bırakın.

Her iki durumda da sizden haber bekliyorum.