Giriş
Günümüzde siteniz için yapabileceğiniz en önemli şey, telefon veya tabletten ziyaret edildiğinde iyi performans göstermesini sağlamaktır. Okumaya devam edin ve Chrome Geliştirici Araçları'nı ve bir Android cihazı kullanarak sitenizi mobil tarayıcı için nasıl optimize edeceğinizi öğrenin.
Mobil Web için Optimizasyon neden bu kadar önemlidir?
Performans
2G ve 3G'den 4G'ye geçiş yaparken mobil cihazlar daha hızlı CPU, daha fazla RAM, daha hızlı GPU ve daha hızlı ağ erişimi elde ediyor. İlerlemeye rağmen, mobil cihazların gücü bilgisayarlarımıza kıyasla yetersizdir. Daha somut bir şekilde anlatmak gerekirse ağ kaynaklarının yüklenmesi daha uzun sürer, resimlerin paketinin açılması daha uzun sürer, sayfanın boyanması ve komut dosyalarının çalıştırılması daha uzun sürer. Sayfanızın mobil cihazlarda 5 ila 10 kat daha yavaş çalıştığını varsayabilirsiniz.
Pil
Mobil cihazlar yalnızca pille çalışır. Mobil cihaz kullanıcıları, bu pilin mümkün olduğunca uzun süre dayanmasını ister. İdeal koşullarda olmayan bir site, pili gerekenden çok daha hızlı bitirir. Pil kullanımını azaltmak için ağ trafiğini ve boyaları azaltın. Bir kaynağı getirirken kablosuz bağlantı veya hücresel telsizin açık olması gerekir, bu da pili tüketir. Tarayıcı bir öğeyi boyadığında CPU ve GPU kullanımı da aniden artar ve bu da pili tüketir.
Etkileşim
Performans, sizin için en önemli metriği artırmak içindir. Facebook'ta kaydırmaya önem veririz. Bir A/B testinde, kaydırma işlemini 60 fps'den 30 fps'ye düşürdük. Etkileşim daraltıldı. Tamam dedik, o yüzden kaydırma önemli.
Facebook, Edge Konferansı
Mobil cihaz kullanıcıları içeri girip çıkabilmeyi ister. En çok etkileşimi en hızlı site alır.
Performansı Yönetme
Chrome, mükemmel geliştirici araçları ile birlikte gelir. Bu makalede, mobil sitenizin profilini çıkarmak için bu araçları nasıl kullanacağınız öğretilmektedir. Chrome Geliştirici Araçları'na aşinaysanız harika! Henüz izlemediyseniz şu harika eğiticilere göz atın:
Artık güncel bilgiler edindiğinize göre, şimdi Geliştirici Araçları'nı kullanarak mobil sitenizi nasıl hızlandıracağınızı görelim. 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ı durumdayken. 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. "İncelenebilir sayfalar" listesinden sayfanızı seçin.
tıkladığınızda, bu sayfa için Chrome Geliştirici Araçları'na yönlendirilirsiniz.
Tüh! Chrome Geliştirici Araçları araç çubuğu hemen karşınıza geldi. Uzaktan Chrome Geliştirici Araçları hakkında anlaşılması gereken en önemli şey, bu araçların şu anda masaüstü bilgisayarınızda kullandığınız Geliştirici Araçları ile aynı olmasıdır. Tek fark, Android cihazınızın yalnızca sayfadan, masaüstü bilgisayarınızın ise Geliştirici Araçları'ndan sorumlu olmasıdır. Gelişmiş seçeneklerde aynı veriler toplanır ve aynı işlevler sunulur.
Ö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 öğesinin üzerine geldim ve masaüstünde olduğu gibi, Android cihazımda da div görsel olarak vurgulandı.
Öğeler aracı aynı zamanda stilleri açıp kapatmak için de kullanılabilir. Bu araç, boyama sürelerini araştırmaya çalıştığımızda faydalı olur.
Ağ Erişiminde Işık Gösterme
Ağ performansı içe aktarmadır ve mobil web'de daha da önemlidir. Mobil cihazların bağlantısı genellikle masaüstü ve dizüstü bilgisayarlarımıza göre daha yavaştır. Doğru işlemi yaptığınızdan emin olmak için Ağ aracına gidip Kaydet'e basarak ağın anlık görüntüsünü alın.
Ekran görüntüsünde, Google aramasından kaynaklanan ağ trafiği gösteriliyor. Sitenizin yaptığı ağ isteklerini gözlemleyin ve bunları en aza indirmenin yollarını bulun. Siteniz sunucuya yoklama istekleri yapıyorsa kullanıcı etkinliğine dikkat etmeniz ve kullanıcı boşta kaldığında yoklama yapmaktan kaçınmanız önerilir. Ağ aracı, ham HTTP üst bilgilerini görüntülemenizi sağlar. Bu, mobil ağların bunları değiştirdiği durumlarda kullanışlıdır.
Boyama Sürelerini Optimize Etme
Mobil web tarayıcılarındaki en büyük sorunlardan biri sayfanızı boyamaktır. Boyama, bir öğeyi sayfada belirtilen stille çizme işlemidir. Tek bir öğenin boyanması pahalı olduğunda, tüm sayfanın boyanmasını yavaşlatır. Chrome, önceden boyanmış öğeleri ekran dışı bir arabelleğe almayı dener. Ancak mobil cihazlarda kullanılabilen GPU RAM miktarı sınırlıdır. Bu da ekran dışında önbelleğe alınabilecek öğelerin sayısını sınırlandırır. Yan etki daha fazla boyama ve her boyama masaüstünden daha yavaştır. Esnek kaydırmaya sahip olmak için boyama sürelerini en aza indirmeniz gerekir.
Chrome 25'te sürekli sayfa yeniden boyama modu bulunur. Sürekli sayfa yeniden boyama modu, boyanmış öğeleri hiçbir zaman önbelleğe almaz ve bunun yerine, her karedeki tüm öğeleri boyar. Tüm öğelerin her bir karenin boyanmasını zorunlu kılarak, öğeleri açıp kapatarak ve stilleri açıp kapatarak boyama sürelerinin A/B testi yapmak mümkündür. Süreç manuel olsa da, sayfanızdaki her öğenin ne kadar pahalı boyandığını izlemek için paha biçilmez bir araçtır. Optimizasyon kulübünün ilk kuralı, bir referans değeri elde etmek için optimize etmeye çalıştığınızı ölçmektir. Basit bir örnek üzerinde çalışalım.
İlk olarak, sürekli sayfa 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üş süreyi ifade eder. Grafiğin y ekseni, milisaniye cinsinden boyama süresini ölçer. Cihazımda, sayfanın boyanması 14 milisaniye sürüyor. Kullanılan GPU belleğiyle birlikte minimum ve maksimum boyama süreleri de gösterilir.
Deneme olarak, seçili öğenin stilini display: none olarak ayarlıyorum. Şimdi sayfa boyamanın
ne kadar pahalı olduğuna bakalım.
Boyama süreleri, kare başına yaklaşık 14 milisaniyeden kare başına 4 milisaniyeye yükseldi. Başka bir deyişle, bir öğenin boyanması yaklaşık 10 milisaniye sürdü. Öğeleri açıp kapatma ve stilleri açma/kapatma sürecini izleyerek sayfanızın pahalı bölümlerine hızlı bir şekilde odaklanabilirsiniz. Boyama sürelerinin daha hızlı olmasının daha az olumsuzluk, daha uzun pil ve daha fazla kullanıcı etkileşimi anlamına geldiğini unutmayın. Daha ayrıntılı bilgi edinmek istediğinizde sürekli sayfa yeniden boyama modu hakkındaki bu harika makaleyi okumayı unutmayın.
İleri Seviye Özellikler
hakkında:izleme
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, bazen sorununuzun nedenini ayrıntılandırmak için daha fazla veriye ihtiyaç duyarsınız. Masaüstünde, about:tracing özelliğini kullanıyor olabilirsiniz. about:tracing hakkında henüz bilginiz yoksa about:tracing profil oluşturma aracını kullanma ve keşfetmeyle ilgili videomu izleyin. Aynı verilerin Android Chrome'dan da yakalanması mümkündür. Başlamak için şu adımları uygulayın:
- adb_trace.py dosyasını indirin
- Komut satırından adb_trace.py çalıştırma
- Android'de Chrome'u kullanma
- Komut satırında enter tuşuna basın ve 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
Uzak Chrome Geliştirici Araçları'nın neler yapabileceğini öğrendiğimize göre, şimdi uzaktan hata ayıklama oturumunuza nasıl başlayacağınıza bakalım. Daha önce kullanmadıysanız nasıl başlayacağınıza dair ayrıntılı talimatları okuyun. Bu yöntemleri daha önce kullandıysanız ancak tam olarak nasıl kullanacağınızı unuttuysanız talimatları da burada bulabilirsiniz.
1. Android SDK'sını yükleyin
Web için geliştirme yaparken neden Android SDK'yı yüklemeniz gerektiğini merak ediyor olabilirsiniz. SDK'ya adb (Android Debug Bridge) dahildir. Masaüstü Chrome'un Android cihazınızla iletişim kurabilmesi gerekir. Chrome, doğrudan Android cihazla iletişim kurmaz. Bunun yerine, iletişimi Adb üzerinden yönlendirir.
2. Cihazınızda USB üzerinden hata ayıklamayı etkinleştirin
USB üzerinden hata ayıklamayı 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 aracılığıyla masaüstünüze bağlayın. USB üzerinden hata ayıklamayı ilk kez kullanıyorsanız aşağıdaki istem gösterilir:
Sık sık uzaktan hata ayıklama oturumları yapacaksanız "Bu bilgisayardan her zaman izin ver"i işaretlemenizi öneririz.
4. Cihazınızın düzgün bir şekilde bağlandığını doğrulama
Komut isteminizden adb devices komutunu çalıştırın. Cihazınızı listede göreceksiniz.
5. Chrome'da USB üzerinden hata ayıklamayı etkinleştir
Ayarlar > Gelişmiş > Geliştirici Araçları'nı açın ve aşağıda gösterildiği gibi USB'de Web hata ayıklamasını etkinleştir seçeneğini işaretleyin:
6. Android cihazınızla Geliştirici Araçları bağlantısı oluşturma
Aşağıdaki komutu çalıştırın:
adb forward tcp:9222 localabstract:chrome_devtools_remote
adb aracılığıyla masaüstü makineniz ile Android cihazınız arasında bir köprü oluşturur. Bu noktaya gelirken herhangi bir sorunla karşılaşırsanız buradaki ayrıntılı kurulum talimatlarını okuyun.
7. Kullanmaya uygun olduğunuz doğrulanıyor
Masaüstü bilgisayarınızda Chrome'u açıp http://localhost:9222 adresine giderek cihazınızın düzgün şekilde bağlandığını doğrulayın. 404 veya başka bir hata alırsanız ya da aşağıdakine benzer bir şey görmüyorsanız:
Ayrıntılı kurulum talimatlarını burada okuyun.
Sonuç
Mobil cihaz kullanıcılarının genellikle acelesi vardır ve sayfanızdaki önemli bilgileri hızlı bir şekilde almaları gerekir. Mobil site oluşturucu olarak sizin göreviniz, sayfanın hızlı bir şekilde yüklenmesini ve mobil cihazlarda iyi performans göstermesini sağlamaktır. Aksi takdirde, kullanıcı etkileşimi düşer. Uzaktan Chrome Geliştirici Araçları işlevsel olarak masaüstü eşdeğerlerine eşdeğerdir. Kullanıcı arayüzü, yeni araçlar öğrenmenize gerek kalmayacak kadar benzer. Diğer bir deyişle, iş akışınız devam eder. Facebook'un performans sorunlarına yenik düşmediğini, siteniz de dahil olmadığını unutmayın. Etkili siteler daha fazla kullanıcı etkileşimi sağlar.