Giriş
Bugün siteniz için yapabileceğiniz en önemli şey, telefon veya tabletten ziyaret edildiğinde iyi performans göstermesini sağlamaktır. Chrome Geliştirici Araçları 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 yapmak neden bu kadar önemlidir?
Performans
2G ve 3G'den 4G'ye geçişle birlikte 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. Sürekli gelişme 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 açı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ı varsaymak güvenli bir yaklaşımdır.
Pil
Mobil cihazlar yalnızca pille çalışır. Mobil cihaz kullanıcıları, pilin mümkün olduğunca uzun süre dayanmasını ister. Yeterince optimize edilmemiş bir site, pili gereğinden çok daha hızlı tüketir. Pil tüketimini azaltmak için ağ trafiğini ve boyamaları en aza indirin. Bir kaynağı getirirken kablosuz bağlantı veya telefon radyosu açık olmalıdır. Bu da pil tüketir. Tarayıcı bir öğeyi boyadığında CPU ve GPU kullanımı artar. Bu da pilin daha hızlı tükenmesine neden olur.
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ırma hızını 60 fps'den 30 fps'ye düşürdük. Etkileşim daraltıldı. Biz de dedik ki, kaydırma önemli.
Edge Konferansı'nda Facebook
Mobil kullanıcılar, siteye hızlı bir şekilde girip çıkabilmek ister. En hızlı site en fazla etkileşimi alır.
Performansı yönetme
Chrome, mükemmel bir geliştirici araçları seti ile 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. Henüz yapmadıysanız aşağıdaki faydalı eğitimlere göz atın:
Artık konuya hakim olduğunuza göre, Geliştirici Araçları ile mobil sitenizi nasıl hızlandırabileceğinizi 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ıyken Masaüstü Chrome'da http://localhost:9222 adresine gidin ve Android cihazınızda sitenizi açın. Android cihazınızdaki açık sekmelerin listesine yönlendirilirsiniz. "Denetlenebilir sayfalar" listesinden sayfanızı seçin.
ve ilgili sayfa için Chrome Geliştirici Araçları'na yönlendirilirsiniz.
Aww… Tanıdık Chrome Geliştirici Araçları araç çubuğu tam orada. Uzaktan Chrome Geliştirici Araçları hakkında bilinmesi gereken en önemli şey, bunların şu anda masaüstünüzde kullandığınız Geliştirici Araçları ile aynı olduğudur. Tek fark, Android cihazınızın yalnızca sayfadan, masaüstünüzün ise Geliştirici Araçları'ndan 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 geldim ve 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, boyama sürelerini incelemeye çalıştığımızda işimize yarayacak.
Ağ erişimi hakkında bilgi edinme
Ağ performansı önemlidir ve mobil web'de daha da önemlidir. Mobil cihazlar genellikle masaüstü ve dizüstü bilgisayarlarımıza göre daha yavaş bağlantılara sahiptir. Doğru şeyi yaptığınızdan emin olmak için Ağ aracına gidip kaydet düğmesine basarak bir ağ anlık görüntüsü alın.
Ekran görüntüsünde, Google aramasından kaynaklanan ağ trafiği gösterilmektedir. Sitenizin yaptığı ağ isteklerini gözlemleyin ve bunları en aza indirmenin yollarını bulun. Siteniz sunucuya yoklama istekleri gönderiyorsa kullanıcı etkinliğine dikkat etmeniz ve kullanıcı boşta olduğunda yoklama yapmamanız önerilir. Ağ aracı, ham HTTP üstbilgilerini görüntülemenize olanak tanır. Bu, mobil ağların üstbilgileri değiştirmesi durumunda yararlı olur.
Boyama sürelerini optimize etme
Mobil web tarayıcılarındaki en büyük darboğazlardan biri sayfanızın boyanmasıdır. Boyama, sayfadaki bir öğeyi belirtilen stille çizme işlemidir. Bir öğenin boyanması maliyetli olduğunda tüm sayfanın boyanması yavaşlar. Chrome, daha önce boyanmış öğeleri ekran dışı bir arabellekte önbelleğe almaya çalışır. Ancak mobil cihazlarda kullanılabilir GPU RAM miktarı sınırlıdır. Bu da ekran dışında önbelleğe alınabilecek öğe sayısını sınırlar. Bunun yan etkisi, daha fazla boyama yapılması ve her boyamanın masaüstüne göre daha yavaş olmasıdır. Duyarlı kaydırma için boyama sürelerini en aza indirmeniz gerekir.
Chrome 25, sürekli sayfa yeniden boyama modunu içerir. Sürekli sayfa yeniden boyama modu, boyalı öğeleri hiçbir zaman önbelleğe almaz ve bunun yerine her karede tüm öğeleri boyar. Tüm öğeleri her karede boyanmaya zorlayarak öğeleri ve stilleri açıp kapatarak boyama sürelerinin A/B testini yapmak mümkündür. İşlem manuel olsa da sayfanızdaki her bir öğeyi boyamanın ne kadar maliyetli olduğunu takip etmek 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 sayfa yeniden boyama modunu etkinleştirin:
Etkinleştirildikten sonra Android cihazınızın sağ üst köşesinde bir grafik görünür. Grafiğin x ekseni, karelere bölünmüş zamanı gösterir. Grafiğin y ekseni, boyama süresini milisaniye cinsinden ölçer. Cihazımda sayfanın boyanması 14 milisaniye sürüyor. Minimum ve maksimum boyama süreleri de kullanılan GPU belleğiyle birlikte gösterilir.
Deneme olarak, seçili öğenin stilini display: none olarak ayarladım. Şimdi sayfanın boyanmasının
ne kadar maliyetli olduğuna bakalım.
Boyama süreleri kare başına yaklaşık 14 milisaniyeden kare başına 4 milisaniyeye düştü. Başka bir deyişle, bu öğenin boyanması yaklaşık 10 milisaniye sürdü. Öğeleri ve stilleri açıp kapatarak sayfanızın maliyetli kısımlarını hızlıca daraltabilirsiniz. Daha hızlı boyama sürelerinin daha az takılma, daha uzun pil ömrü ve kullanıcılarınızdan daha fazla etkileşim anlamına geldiğini unutmayın. Daha ayrıntılı bilgi edinmeye hazır olduğunuzda sürekli sayfa yeniden boyama moduyla ilgili bu makaleyi okuyun.
Gelişmiş özellikler
about:tracing
Masaüstü Chrome'da bulunan daha gelişmiş geliştirici özelliklerinin çoğu Android Chrome'da da mevcuttur. Örneğin, about:gpu-internals, about:appcache-internals ve about:net-internals kullanılabilir. Özellikle zorlu bir sorunu araştırırken sorununuzun nedenini daraltmak için bazen daha fazla veriye ihtiyacınız olur. Masaüstünde about:tracing kullanıyor olabilirsiniz. about:tracing aracını daha önce kullanmadıysanız about:tracing profil oluşturma aracını kullanma ve keşfetme hakkındaki videomu izleyin. Aynı verileri Android Chrome'dan da yakalayabilirsiniz. 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 incelediğimize göre, uzaktan hata ayıklama oturumunuzu nasıl başlatacağınızı ele alalım. Daha önce kullanmadıysanız nasıl başlayacağınızla ilgili 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 buraya ekledim.
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'ya adb (Android Debug Bridge) dahildir. 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 üzerinden hata ayıklamayı etkinleştirme seçeneğini Android Ayarları'nda bulabilirsiniz. Etkinleştirin.
3. Cihaza bağlanma
Henüz yapmadıysanız Android cihazınızı USB üzerinden masaüstünüze bağlayın. USB üzerinden hata ayıklama özelliğini 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" seçeneğini işaretlemenizi öneririm.
4. Cihazınızın düzgün şekilde bağlandığını doğrulama
Komut isteminizden adb devices komutunu çalıştırın. Cihazınızı listede görürsünüz.
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 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 köprü oluşturur. Bu noktaya gelene kadar herhangi bir sorunla karşılaşırsanız buradaki ayrıntılı kurulum talimatlarını okuyun.
7. Devam etmeye hazır olup olmadığınız doğrulanıyor
Masaüstünüzde 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örmezseniz:
Ayrıntılı kurulum talimatlarını buradan okuyabilirsiniz.
Sonuç
Mobil kullanıcılar genellikle acele eder ve sayfanızdaki önemli bilgileri hızlıca edinmek ister. 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ı, masaüstü sürümleriyle işlevsel olarak aynıdır. Kullanıcı arayüzü, yeni bir araç seti öğrenmenize gerek kalmayacak kadar benzerdir. Başka bir deyişle, iş akışınız devam eder. Unutmayın, Facebook performans sorunlarına karşı yenilmez değildir ve siteniz de değildir. Performanslı siteler daha fazla kullanıcı etkileşimi alır.