CSS

Mobile Safari’de Ağ Performansını Ölçme – CSS Sihirbazı – Web Performansı Optimizasyonu

Tarafından yazılmıştır üzerinde CSS Sihirbazı.

İçindekiler
  1. iOS Neden Gözden Geçiriliyor?
  2. Bu Neden Bir Sorun
    1. Bu Neden Büyük Bir Sorun Değil?
  3. Ama, Sadece Öykünemez miyim?
  4. İhtiyacın olacak…
  5. WebPageTest ile test etme
  6. Safari’nin DevTools’unda Test Etme
    1. iPhone’unuzu Geliştirme Cihazı Olarak Ayarlayın
      1. Ağ Bağlantısı Düzenleyici
    2. Web Denetçisini Etkinleştir
    3. Telefonunuzu Mac’inizden İnceleyin
  7. Neden rahatsız?

Bu yıl şimdiye kadar, müşterilerimden biri hariç hepsi endişelendi Google’ın yaklaşan Web Vitals güncellemesi. Trendi yakalayan müşteri harika, en azından bana odaklanmam için biraz farklı bir şey verdiği için değil – sitelerinin iOS’ta nasıl çalıştığıyla daha fazla ilgileniyorlar. Bunu benim için özellikle eğlenceli kılan şey, iOS Safari’nin Chrome’dan tamamen farklı bir oyun olması ve pek çok insanın odaklanma eğiliminde olmaması. Bu yüzden, aynı şeyi yapmanız gerektiğinde bunu biraz daha kolaylaştıracak bir avuç ipucu paylaşacağım – ve siz de aynısını yapmalısınız.

iOS Neden Gözden Geçiriliyor?

Google, teknoloji endüstrisi üzerinde oldukça sıkı bir denetime sahiptir: açık ara en iyi DevTools’a sahip en popüler tarayıcı ve en popüler arama motorudur; bu, web geliştiricilerinin zamanlarının çoğunu Chrome’da geçirdiği, ziyaretçilerinin çoğunun Google’da olduğu anlamına gelir. Chrome ve arama trafiğinin çoğu Google’dan gelecek. Her şey çok Google merkezli.

Bu, elbette, yeni Vitals duyurusu ile daha da kötüleşiyor; Krom Kullanıcı Deneyimi Raporu, sıralamaları desteklemek ve etkilemek için kullanılacaktır.

Kısacası, Safari’nin neden soğukta kaldığını anlamak kolay.

Bu Neden Bir Sorun

Safari’yi düşünmediğiniz an, tüm iOS trafiğinize sırtınızı dönüyorsunuz. Hepsini. iOS’ta bulunan her tarayıcı, Safari’nin etrafındaki bir sarmalayıcıdır. iOS için Chrome? Chrome yer işaretlerinizle Safari. iOS trafiğinin her bir parçası Safari trafiğidir.

Kısacası, Safari’nin neden soğukta kaldığını anlamak zor.

Bu Google’ın hatası değil ve uzun zamandır Apple’ın platformlarında diğer tarayıcılara izin vermesini diledim, ancak bu yakın zamanda olmayacak gibi görünüyor. Yani, sadece Safari ile sıkışıp kaldık. Muhtemelen test etmiyoruz.

Bu Neden Büyük Bir Sorun Değil?

Aynı sayfanın genel olarak iOS Safari’de Android Chrome’da olduğundan daha iyi performans göstereceğini belirtmekte fayda var.iPhone’lar genellikle çok daha güçlüdür Android meslektaşlarından daha fazla. Dahası ve tesadüfen, iOS kullanımı ile güçlü bir şekilde ilişkilidir genellikle daha iyi altyapıya sahip bulduğumuz bölgeler. Bu, iOS cihazlarının daha hızlı olma eğiliminde olduğu ve ‘daha hızlı bölgelerde’ bulunduğu anlamına gelir.

Aynı sayfa, aynı bağlantı hızı, aynı yerel ayar, aynı yayın yılı, farklı cihazlar.

Ama, Sadece Öykünemez miyim?

Numara.

İhtiyacın olacak…

İyi ya da kötü, ben bir iPhone ve Mac kullanıcısıyım, bu yüzden kapıdan oldukça iyi hazırlandım. Bir iPhone’unuz yoksa, bir iPhone’u test etmek için mücadele edeceksiniz. Ancak, bir Mac’e olan ek ihtiyaç, korkarım birçokları için girişe engel olacaktır.

Fakat! Korkma! Mac kullanıcısı olmayanlar için yolun sonu değil. Okumaya devam etmek.

WebPageTest ile test etme

Web Sayfası Testi Web performansı söz konusu olduğunda, şüphesiz, açık ara en önemli araçtır. Onsuz işimi yapamazdım. Önemini abartamam. Çok önemli.

Birinci sınıf, orijinal iOS cihaz desteğine sahip olduğunu bildirmekten ne kadar mutlu olduğumu hayal edin!

Gerçek iOS cihazları—gerçek dışı!

Bu sana verecek fevkalade ayrıntılı bir şelale– daha pek çok şey arasında – geri dönüp tekrar tekrar başvurabileceğiniz.

Ancak, iki önemli uyarı var:

  1. Cihazlar ABD’de Bu, tipik müşterinizin Balkanlar’da yerleşik olması durumunda yardımcı olmaz.
  2. Veriler statik Bu, olana kadar mutlaka bir dezavantaj değildir—DevTools, çok daha hızlı ve etkileşimli çalışmamıza, yaptığımız değişikliklere ve ince ayarlara yanıt vermemize olanak tanır.

Yine de bu, iOS’ta web performansının profilini çıkarmaya başlamak isteyen herkes için harika bir başlangıç ​​noktasıdır. Aslında bu, WebPageTest’in geliştirdiği bir şeydir ve hakkında yazılmış
Şu anda okuduğunuz bu makaleden sadece bir ay önce.

WebPageTest ile iyi bir kıyaslama ve daha kalıcı veriler yakalamanın yanı sıra, gerçekten yapmak istediğimiz şey, bir siteyle biraz daha gerçek zamanlı etkileşimde bulunmak ve siteyi incelemek. Neyse ki, bir Mac’iniz ve bir iPhone’unuz varsa, bu oldukça basit!

iPhone’unuzu Geliştirme Cihazı Olarak Ayarlayın

not Bu adım ve alt adımı isteğe bağlıdır, ancak şiddetle tavsiye edilir.

iPhone’unuzu Mac’inize takın ve Xcode’u çalıştırın. Açıldıktan sonra şuraya gidin:
pencere » Cihazlar ve Simülatörler ve ortaya çıkan pencerede cihazınızı arayın.


iPhone’unuzu geliştirme aygıtı olarak çalıştırmayla ilgili herhangi bir seçeneğin veya uyarının etkinleştirildiğinden emin olun. Doğrusu, bu görünümde telefonumun kilidini açmaktan ve belki bir veya iki kez yeniden başlatmaktan başka bir şey yapmak zorunda kalmadım. Bu kadar gördüğüm sürece, bir sonraki adımın işe yarayacağını garanti edebilirim…

Dürüst olmak gerekirse, sana bunu söylediğime bile inanamıyorum… bu çok havalı. Şimdi, iOS’ta’ Ayarlar uygulama, yeni bir tane bulmalısın geliştirici seçenek.


Orada adında bir araç bulmalısın. Ağ Bağlantısı Düzenleyici. Bu bize bir dizi kullanışlı ön ayar aracılığıyla çok hassas ağ kısıtlaması sağlar veya kendinizinkini yapılandırabilirsiniz. Bu, ofis wifi ağına bağlı olsanız bile daha yavaş (ve çok gerçekçi) bağlantı hızlarını simüle edebileceğiniz anlamına gelir.

Web Denetçisini Etkinleştir

Ardından, Safari’nin iOS ayarlarında şuraya gidin: Gelişmiş ve etkinleştir Web Müfettişi. Bu kadar! Gitmek için iyisin.


Bu, Safari’nin masaüstü sürümünüzün iPhone’unuzun Safari örneğinin geçerli sekmesini incelemesine olanak tanır.

Telefonunuzu Mac’inizden İnceleyin

Şimdi Safari’yi açın. Biliyorum, bir süredir açmadın, o yüzden vur
⌘⎵ ve yazın Safari. Başlamak Geliştirmek ve açılır menüden cihazınıza bakın.


…ve bu kadar. Gerçekten bu. Artık telefonunuzu Safari’nin masaüstü DevTools’undan inceliyorsunuz:


Telefonunuzun kilidi açık kaldığı ve söz konusu web sayfası etkin olduğu sürece, iOS cihazını masaüstünde olduğu gibi inceleyebilirsiniz. Düzenli!

Tabii ki, bu makalenin tüm amacı performans profili çıkarmaktır, o yüzden hadi geçelim sekme. Chrome’a ​​​​alıştıysanız sekme o zaman, peki, üzgünüm.

Ne yazık ki, makalenin ve ekran görüntülerinin bu kadar ilerisinde, Safari’de ServiceWorker’ları devre dışı bırakmanın artık bir yolu olmadığını öğrendim. Bu, ekran görüntülerindeki verilerin hiçbirinin özellikle ilginç olmadığı anlamına gelir, ancak şükür ki sitemin profilini çıkarmak için burada değiliz.

Kısıtlanmış bir bağlantıdaki gerçek iPhone’um web sitemle böyle ilgileniyor. Chrome ve Safari’nin çalışma şekli arasında, bu kadar küçük bir ölçekte bile görülebilen, gerçekten büyüleyici bazı farklılıklar vardır. Her platformu kendi başına test etmenin öneminin anlaşılmasına gerçekten yardımcı oluyor ve Chrome’un DevTools’unda neden bir iPhone’u taklit edemeyeceğinizi açıklıyor.

Fakat! Bahsedilen. Chrome’un DevTools’u Safari’ninkinden çok, çok daha iyi, bu yüzden bunu kendi yararımıza kullanabiliriz, değil mi?

HAR (Http Arşivi) dosyasını Safari’den dışa aktarın paneli ve kaydedin
yeni bir makine alana kadar masaüstünüzde kalacak
mantıklı bir yerde Ardından, Chrome’u ve kendi DevTools paneli. HAR dosyasını buradan içe aktarın.

Safari’nin Ağ verilerini Chrome’un üstün DevTools’unda görüntüleme.

Bu anahtardır: Safari, Chrome’dan daha az veri yakalar, bu da bir sorundur. Basitçe bu dosyayı Chrome’un DevTools’unda açmak, verilerin kendisini daha iyi hale getirmez, ancak onu çok daha iyi sorgulamamıza izin verir. Temelde Safari tarafından sağlanan verilere göre çok daha güzel bir iş akışı.

Performans testi için DevTools’un en iyi nasıl kullanılacağı hakkında daha fazla bilgi edinmek istiyorsanız, çok yakında Smashing Magazine ile bir atölye çalışması yürütüyorum ve bu sizi DevTools uzmanı yapacak. Hala yapabilirsin biletleri kapmak.

Neden rahatsız?

iOS genel olarak daha hızlı ve Hayati Değerler tamamen Chrome merkezli ve gelişmekte olan ekonomilerin çoğu Android tarafından yönetildiğinden, performansı iOS’ta test etmek gereksiz görünebilir. Aslında, örneğin bir Moto G4’te hızlıysanız, bir iPhone’da çok hızlı olacağınız nispeten güvenli bir varsayımdır. Ancak yine de, iOS’un yaygınlığı göz önüne alındığında, şu anda tam bir kör nokta olabileceğinin farkında olmak akıllıca olacaktır.

Varsayılan süreciniz olma olasılığı düşük olsa da, nasıl yapılacağını bilmek önemlidir. Ve şimdi yapıyorsun.

Hala Vitals için endişeleniyor musunuz? Bana yaz! Mayıs güncellemesine az bir süre kaldı.



☕️ Bu yardımcı oldu mu? Bana bir kahve ısmarla!

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu