Giriş
Günümüzde siteniz için yapabileceğiniz en önemli şey, telefon veya tabletten ziyaret edildiğinde iyi performans gösterdiğinden emin olmaktır. Chrome Geliştirici Araçları'nı ve bir Android cihazı kullanarak sitenizi mobil tarayıcı için nasıl optimize edeceğinizi öğrenmek için okumaya devam edin.
Mobil Web için Optimizasyon Neden Bu kadar Önemli?
Performans
2G ve 3G'den 4G'ye geçiş yaptığımızda mobil cihazlar daha hızlı CPU'lara, daha fazla RAM'e, daha hızlı GPU'lara ve daha hızlı ağ erişimine sahip oluyor. İlerleme kaydedilmesine rağmen mobil cihazlar, bilgisayarlarımıza kıyasla daha düşük güce sahiptir. Daha somut bir ifadeyle, ağ kaynaklarının yüklenmesi, resimlerin paketinden çıkarılması, sayfanın boyanması ve komut dosyalarının yürütülmesi daha uzun sürer. Sayfanızın mobil cihazlarda 5 ila 10 kat daha yavaş çalıştığını varsayabilirsiniz.
Pil
Mobil cihazlar yalnızca pil gücüyle çalışır. Mobil cihaz kullanıcıları, pilin mümkün olduğunca uzun süre dayanmasını ister. Optimize edilmemiş bir site, pili gerekenden çok daha hızlı tüketir. Pil kullanımını azaltmak için ağ trafiğini en aza indirin ve boya sayısını azaltın. Bir kaynağı getirdiğinizde kablosuz ağ veya hücresel radyo açık olmalıdır. Bu da pili tüketir. Tarayıcı bir öğeyi boyarken CPU ve GPU kullanımı ani artışlar gösterir. Bu da pili tüketir.
Etkileşim
Performans, sizin için en önemli metriği artırmak için kullanılır. Facebook'ta kaydırma işlemine önem veriyoruz. Bir A/B testinde, kaydırmayı 60 fps'den 30 fps'ye indirdik. Etkileşim daraltıldı. Tamam dedik, o yüzden kaydırmak önemli.
Edge Conference'ta Facebook
Mobil kullanıcılar, uygulamaya hızlıca girip çıkabilmeyi bekler. En hızlı site en fazla etkileşimi alır.
Performansı yönetme
Chrome, mükemmel bir geliştirici araçları grubuyla birlikte sunulur. Bu makalede, mobil sitenizin profilini oluşturmak için bu araçları nasıl kullanacağınız açıklanmaktadır. Chrome Geliştirici Araçları'nı zaten biliyorsanız harika. Bu durumda, aşağıdaki eğitici içeriklere göz atın:
Şimdi DevTools ile mobil sitenizi nasıl hızlandıracağınızı öğrenelim. Android için Chrome Geliştirici Araçları'nı ilk kez kullanıyorsanız makalenin alt kısmındaki başlangıç kılavuzuna göz atın.
Chrome Geliştirici Araçları'nı Uzaktan Kullanma
Android cihazınız bilgisayarınıza bağlıyken. Masaüstü Chrome'da http://localhost:9222 adresine gidin ve Android cihazınızda sitenizi açın. Android cihazınızdaki açık sekmeler listesine yönlendirilirsiniz. "İncelenebilen sayfalar" listesinden sayfanızı seçin.
Söz konusu sayfaya ait Chrome Geliştirici Araçları'na yönlendirilirsiniz.
Aa... tanıdık Chrome Geliştirici Araçları araç çubuğu hemen orada. Uzaktan Chrome Geliştirme Araçları ile ilgili en önemli nokta, bu araçların şu anda masaüstünüzde kullandığınız Geliştirme Araçları ile aynı olmasıdır. Tek fark, Android cihazınızın yalnızca sayfadan, masaüstünüzün ise DevTools'tan sorumlu olmasıdır. Arka planda aynı veriler toplanır ve aynı işlevler kullanılabilir.
Örneğin, telefonumda www.sfgate.com/movies adresini ziyaret ettim. Masaüstümde Chrome Geliştirici Araçları'nı kullanarak Öğeler aracı'nda bir div'in üzerine geldiğimde, tıpkı masaüstünde olduğu gibi div Android cihazımda görsel olarak vurgulandı.
Öğeler aracı, stilleri açıp kapatmak için de kullanılabilir. Bu özellik, boyama sürelerini araştırmaya çalışırken faydalı olacaktır.
Ağ erişimine ışık tutma
Ağ performansı önemlidir ve mobil web'de daha da önemlidir. Mobil cihazlar genellikle masaüstü ve dizüstü bilgisayarlarımıza kıyasla daha yavaş bağlantılara sahiptir. Doğru işlemi yaptığınızdan emin olmak için Ağ aracına gidip kayıt düğmesine basarak ağ anlık görüntüsü alın.
Ekran görüntüsünde, bir Google aramasından kaynaklanan ağ trafiği gösterilmektedir. Sitenizin yaptığı ağ isteklerini gözlemleyin ve bu isteklerini en aza indirmenin yollarını bulun. Siteniz sunucuya anket isteği gönderiyorsa kullanıcı etkinliğine dikkat etmek ve kullanıcı boştayken anket yapmaktan kaçınmak isteyebilirsiniz. Ağ aracı, ham HTTP üstbilgilerini görüntülemenize olanak tanır. Bu, mobil ağların bunları değiştirmesi durumunda faydalıdır.
Boyama sürelerini optimize etme
Mobil web tarayıcılarında en büyük darboğazlardan biri sayfanızı oluşturmaktır. Boyama, sayfaya belirtilen stil ile bir öğe çizme işlemidir. Bir öğenin boyanması pahalı olduğunda sayfanın tamamının boyanması yavaşlar. Chrome, daha önce boyanmış öğeleri ekran dışı bir arabellekte önbelleğe almaya çalışır. Ancak mobil cihazlarda GPU RAM'i sınırlı olduğundan ekran dışında önbelleğe alınabilecek öğe sayısı da sınırlıdır. Yan etki, daha fazla boyamadır ve her boyama masaüstünden daha yavaştır. Duyarlı kaydırma için boyama sürelerini en aza indirmeniz gerekir.
Chrome 25'te sürekli sayfa yeniden boyama modu bulunur. Sürekli sayfayı yeniden boyama modu, boyanmış öğeleri hiçbir zaman önbelleğe almaz. Bunun yerine her karede tüm öğeleri boyar. Tüm öğelerin her karede boyanmasını zorunlu kılarak öğeleri ve stilleri açıp kapatarak boyama süreleri için A/B testi yapabilirsiniz. Bu işlem manuel olsa da sayfanızdaki her öğenin boyanmasının ne kadar pahalı olduğunu izlemek için paha biçilmez bir araçtır. Optimizasyon kulübünün ilk kuralı, temel bir değer elde etmek için optimize etmeye çalıştığınız şeyi ölçmektir. Basit bir örnek üzerinden gidelim.
Öncelikle sürekli sayfayı yeniden boyama modunu etkinleştirin:
Etkinleştirdikten sonra Android cihazınızın sağ üst köşesinde bir grafik görünür. Grafiğin x ekseni, karelere bölünmüş zamandır. Grafiğin y ekseni, boyama süresini milisaniye cinsinden ölçer. Cihazımda sayfanın oluşturulmasının 14 milisaniye sürdüğünü görebilirsiniz. Kullanılan GPU belleğiyle birlikte minimum ve maksimum boyama süreleri de gösterilir.
Deneme olarak, seçili öğenin stilini display: none olarak ayarladım. Şimdi sayfanın boyanmasının ne kadar pahalı olduğuna bakalım.
Boyama süreleri kare başına yaklaşık 14 milisaniyeden kare başına 4 milisaniyeye indi. Diğer bir deyişle, bu öğenin boyanması yaklaşık 10 milisaniye sürdü. Öğeleri açıp kapatma ve stilleri açıp kapatma işlemlerini uygulayarak sayfanızın pahalı kısımlarını hızlıca daraltabilirsiniz. Boyama sürelerinin kısalmasının, takılmaların azalacağı, pil ömrünün uzayacağı ve kullanıcılarınızın daha fazla etkileşimde bulunacağı anlamına geldiğini unutmayın. Daha ayrıntılı bilgi edinmeye hazır olduğunuzda sürekli sayfayı yeniden boyama modu hakkındaki bu mükemmel makaleyi okumayı unutmayın.
İleri Seviye Özellikler
about:tracing
Masaüstü Chrome'da bulunan daha gelişmiş geliştirici özelliklerinin çoğu Android Chrome'da da kullanılabilir. Örneğin, about:gpu-internals, about:appcache-internals ve about:net-internals kullanılabilir. Özellikle zor bir sorunu araştırırken sorununuzun kaynağını tespit etmek için bazen daha fazla veriye ihtiyacınız olabilir. Masaüstünde about:tracing sayfasını kullanıyor olabilirsiniz. about:tracing hakkında bilgi sahibi değilseniz about:tracing profil oluşturma aracını kullanma ve keşfetmeyle ilgili videomu izleyin. Android Chrome'da da aynı verileri yakalamak mümkündür. Başlamak için aşağıdaki adımları uygulayın:
- adb_trace.py dosyasını indirin
- adb_trace.py dosyasını komut satırından çalıştırma
- Android'de Chrome'u kullanma
- Komut satırında Enter tuşuna basarak adb_trace.py komut dosyasını kapatın.
adb_trace.py tamamlandıktan sonra masaüstü Chrome'un about:tracing sayfasına yükleyebileceğiniz bir JSON dosyanız olur.
Başlangıç Kılavuzu
Uzaktan Chrome Geliştirici Araçları'nın neler yapabileceğini inceledik. Şimdi uzak hata ayıklama oturumunuzu nasıl başlatacağınızı öğrenelim. Bu araçları daha önce kullanmadıysanız nasıl başlayacağınıza dair ayrıntılı talimatları okuyun. Daha önce kullandıysanız ancak tam olarak nasıl kullanacağınızı unuttuysanız kısaltılmış talimatları da burada bulabilirsiniz.
1. Android SDK'yı yükleme
Web için geliştirme yaparken neden Android SDK'sını yüklemeniz gerektiğini merak ediyor olabilirsiniz. SDK'da adb (Android Debug Bridge) bulunur. Masaüstü Chrome'un Android cihazınızla iletişim kurabilmesi gerekir. Chrome, Android cihazla doğrudan iletişim kurmaz. Bunun yerine iletişimi adb üzerinden yönlendirir.
2. Cihazınızda USB üzerinden hata ayıklamayı etkinleştirme
USB hata ayıklama özelliğini etkinleştirme seçeneğini Android Ayarları'nda bulabilirsiniz. Etkinleştirin.
3. Cihaza bağlanın
Henüz yapmadıysanız Android cihazınızı USB üzerinden masaüstü bilgisayarınıza bağlayın. USB üzerinden hata ayıklamayı ilk kez kullanıyorsanız aşağıdaki istem gösterilir:
Sık sık uzak hata ayıklama oturumları yapacaksanız "Bu bilgisayardan her zaman izin ver" seçeneğini işaretlemenizi öneririz.
4. Cihazınızın düzgün bir şekilde bağlı olduğunu doğrulama
Komut isteminizden adb devices komutunu çalıştırın. Cihazınız listede görünür.
5. Chrome'da USB üzerinden hata ayıklamayı etkinleştirme
Ayarlar > Gelişmiş > Geliştirici Araçları'nı açın ve burada gösterildiği gibi USB Web'de hata ayıklamayı etkinleştir seçeneğini işaretleyin:
6. Android cihazınızla DevTools bağlantısı oluşturma
Aşağıdaki komutu çalıştırın:
adb forward tcp:9222 localabstract:chrome_devtools_remote
adb üzerinden masaüstü makineniz ile Android cihazınız arasında köprü oluşturur. Bu noktaya kadar herhangi bir sorunla karşılaşırsanız ayrıntılı kurulum talimatlarını burada okuyun.
7. Hazır olduğunuzu doğrulama
Masaüstünüzde Chrome'u açıp http://localhost:9222 adresine giderek cihazınızın düzgün bir şekilde bağlı olduğunu doğrulayın. 404 hatası veya başka bir hata alırsanız ya da aşağıdaki gibi bir şey görmezseniz:
Ayrıntılı kurulum talimatlarını burada bulabilirsiniz.
Sonuç
Mobil kullanıcılar genellikle acelecidir ve sayfanızdaki önemli bilgileri hızlıca almaları gerekir. Mobil site oluşturucu olarak sayfanın hızlı yüklenmesini ve mobil cihazlarda iyi performans göstermesini sağlamak sizin görevinizdir. Aksi takdirde kullanıcı etkileşimi düşer. Uzaktan Chrome Geliştirici Araçları, işlevsel olarak masaüstündeki benzerleriyle eşdeğerdir. Kullanıcı arayüzü, yeni bir araç grubu öğrenmenize gerek kalmayacak kadar benzer. Diğer bir deyişle, iş akışınız devam eder. Unutmayın, Facebook performans sorunları karşısında yenilmez değildir, siteniz de aynısı değildir. Performanslı siteler daha fazla kullanıcı etkileşimi elde eder.