Hızlandırılmış Mobil İçerik Projesi (Accelerated Mobile Pages Project) AMP; ülkemiz kadar cinnet aşamasında olmasa da bir çok ülkede mobil kullanım ve tablet kullanımı arttıkça mobil içerik (mobil uyumlu) siteler gittikçe önem kazanmakta. Bu doğrultuda ilgilenen arkadaşlar hatırlayacaklarıdr 2015 ikinci yarısında kullanıcı dostu mobil siteler güncellemesi ile Google tavrını net olarak ortaya koyarak bu konunun özellikle üzerinde duracağını belirtti. Ancak AMP Google tekelinde olan bir çalışma olarak doğmadı ve bu nedenle hızlandırılmış mobil içerik projesi olarak lanse edilmekte. Şöyleki Google, Facebook, Twitter vb gibi web in dev girişimleri arasında kabul görmesi ile hayata geçen bir projedir.
Çalışma Mantığı!
AMP uygulama mantığı aslında bir çok webmaster tarafından bilinen ancak zahmet ve ek masrafları nedeni ile mecbur kalınmadan uygulanmayan koşullardan oluşuyor. Bunlar:
CDN Kullanımı: .css, media files, .js gibi içeriklerin cdn üzerinden çalıştırılması sitenizi hızlandıran etkenlerin başında gelmektedir ve artık bunu AMP kısa kodları ile meta data içinde belirtmeniz yeterli (tabi kullanıyor iseniz). Burada önemli bir not düşmek gerekirse ülkemizde bir çok hosting şirketi ikincil ftp ile CDN hizmeti vermesine karşın CLOUD mantığı ile (çoklu sunucuda barındırma) hizmet veren bir kaç firmadan fazlası yok. CDN alacaklar bu noktaya özellikle dikkat ederler ise performans olarak çok daha fazla verim alacaklardır.
Örnek:
Gereksiz Kodlardan Arındırma: Mobil girişlerde m.site.com gibi url yöntemi kullanan site sahipleri bu noktada fazla bir güncelleme yapmalarına gerek kalmayacaktır. Subdomain de yer alan sayfaları daha yalın hale getirmeleri yeterli olacaktır.
Örnek CSS Kodu:
amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}Mobil Cihazla İçin “viewport”: Responsive bir tasarımınız var ise bu meta data zaten sitenizde mevcuttur. Basitçe mobil browserlerin zoom effectini çalıştırmalarını sağlar. Örnek aşağıda:
HTML Güncelleme: CDN ya da alt dizin metodu ile cache sistemi kullanan website sahipleri bilirlerki sitenizin cache mantığı varolan sayfaların HTML versiyonda bir kopyasını oluşturarak sunucu sorgu sayısını azaltır ve siteniz çok daha hızlı çalışır. Bu noktada CDN ya da alt dizinde yer alan HTML sayfalarınız için açılış tagları aşağıdaki gibi olmalıdır:
AMP Media Dosyaları: Yukarıda media dosyaları yani resim gibi sayfa açılış hızını etkileyen dosyaların CDN üzerinde çalışmasına değinmiştim. Bu noktada sitenizde yapmanız gereken bir diğer güncelleme bu görselleri AMP standartlarını uyumlu olduğunu belirtmektir ve yapmanız gereken küçük bir değişiklik şu şekilde:
Anlatımı özellikle uygulama olarak vermedim keza hazır içerik yönetim sistemleri, scriptler ya da düz HTML siteler de uygulama site gereksinimelerine göre farklılık göstermekte. Bu gibi anlatımlarda “Benim sitem şu peki ben ne yapmalıyım?” gibi sorular alıyorum. O nedenle uygulama alanı ve amacı şeklinde mümkün olduğunca detaylı bir anlatım yapmaya çalıştım. Yinede bir sorun ile karşılaşan arkadaşlar yorum bırakırlar ise yardımcı olmaya çalışırım.
Bastçe örnek bir web sitesi: