Teknik Breakout Zirvesi/2021: Gerçek zamanlı bir Web ekranıyla sitenizi artırın

Google’ın temel web verileri, kullanıcı deneyimi ile ilgili web sitesi performansı için entegre yönergeler sağlar ve web sitesinin ölçülme şeklini yeniden tanımlar. Google, Core Web Vitals’i Google aramasında sitenin sıralamasını etkileyen bir sinyal olarak kullanmaya başladı. 2021’de WP Engine Web pazarlama ekibi, bir bütün olarak web canlıları çekirdeklerinin>% 90’ını anlamak ve ulaşmak için büyük bir proje gerçekleştirdi. Bu oturum, temel web canlılarını etkileyen unsurlara gerçek dünya içgörü almak için projeye ve yeni kalıntı tarayıcısının kullanımına daha yakından bakıyor.
Video: Bu oturumda oturumdan gerçek zamanlı slayt ağının hayati görünümüyle sitenizi artırın, WP Engine Hoover Web Geliştirme Yöneticisi ve Kıdemli Ürün Yöneticisi New Relic Lindsy Farina tartışıldı:
Çekirdek Web Vitallerinin 2021’de işletmeniz üzerindeki etkisi ve New Relic’in tarayıcısı gibi araçları kullanarak puanlarınızı nasıl anlayacağınız.
Sentetik testlerin sınırlamalarının üstesinden gelmek ve Google’ın web sitenizin kullanıcı deneyimini değerlendirme şeklini kontrol etmeniz için gerçek kullanıcı verilerinin önemi.
Sizin için neyin önemli olduğunu öğrenmek için verilerinizi döndürmenin, dilimlemenin ve kesmenin birçok yolu vardır. Açıkçası, kullanıma hazır bir deneyime sahibiz, ancak kendi gösterge panelinizi yapmanıza da izin veriyoruz. Yeni Relic ile verilerinizin hükümdarısınız. Size her şeye erişim sağlayacağız ve sizin için önemli bir deneyim oluşturabilmenizi istiyoruz.
Yeni Relic ürün yöneticisi Lindsy Farina Transkript Tam Metin Lindsy Farina: Herkese merhaba ve Google’dan gerçek zamanlı temel web verileriyle sitenizi nasıl geliştireceğiniz hakkında konuşmamıza hoş geldiniz. Benim adım Lindsy Farina ve ben New Relic’liyim. Ben orada kıdemli bir ürün yöneticisiyim. Ön uç web’in performansına odaklanarak iki yıldan fazla bir süredir oradaydım ve ayrıca Lookout adlı çok havalı bir anormal algılama ürünü gibi yeni kalıntıda diğer birkaç alana genişledim. Ve bugün kendini tanıtacak Ryan ile birlikte temsili olacağım. Ryan Hoover: Ben Ryan Hoover. Web geliştirme ekibimizden WP Makine Yöneticisiyim. WP Engine Public Web özelliğinin WordPress ve WP motor teknolojisiyle neyin mümkün olduğunu göstermesini sağlamak için çalışıyoruz. Lindsy Farina: Güzel. Bugün ne hakkında konuşacağımızın kısa bir gündemini tartışalım. İlk olarak, çekirdek web canlılığının ne olduğunu anladığınızdan emin olmak istiyoruz, çünkü onu optimize etmek için çekirdek web hayati yaşamlarının ne olduğunu bilmeniz gerekir. Size nasıl ölçtüğünüz hakkında biraz bilgi vereceğiz. Ve sonra yeni Relic tarayıcısıyla yapabileceğiniz bazı ilginç şeyler, sadece çekirdek web canlıları değil, diğerleri. Ve sonra WP motorunun bu optimizasyon gezisini yapmak ve sitelerini çekirdek web hayati değerlerine eşdeğer hale getirmek için ne yaptığını göreceğiz.
Ryan Hoover: Sadece konuşarak başlayalım, web hayatianları nedir ve neden son zamanlarda çok konuşuyoruz?Onlarca yıldır web performansı hakkında konuştuk ve web’i hızlı yapmanın yollarını bulmaya çalıştık, web sitemizi ziyaret ederken nasıl iyi bir kullanıcı deneyimi yaratacağımız.Yıllardır birçok farklı ölçüm ve süreç kullandık.İlk bayt, pencere yükü olayları, belge hazır, tüm farklı metrik türleri hakkında konuştuk, ancak her zaman birkaç hata ve biraz yapay var.Geçen yıl, 2020 yazında Google, sayfa deneyimini nasıl ölçmemiz gerektiğine dair çok açık standartlar olan temel web Vitals standardını yayınladı.Bu, içeriğin kullanıcının hissettiği şeyle ne kadar hızlı yüklendiğini aşar.
Web canlıları ile Google, web’in herkes için yararlı bir yer olmasını sağlamaya karar verdi, herkesin siteyi ziyaret ettiklerinde iyi bir deneyime sahip. Dolayısıyla, temel olarak şirketleri ve site sahiplerini, bu önemli şeyleri Google’ın günlük ürünlerine göre düşünerek ileride bahçe deneyimlerini teşvik etmeye başlamaya zorlarlar. Bu aydan itibaren ve Ağustos ayına kadar başlatılan Google, temel web hayati faktörünü arama sıralamanıza yavaşça artıracaktır. Bunu, sitenizin performansının ne kadar iyi olduğu, insanların onu ne sıklıkta ziyaret ettiği ve bu nedenle organik arama sıralamanıza gireceği hakkında başka bir sinyal olarak kullanırlar. Bu aynı zamanda ücretli arama reklamınızın etkinliğinde bir faktör olacaktır. Tıklama başına maliyet değişiklikleri potansiyelini göreceksiniz. Reklamınız tarafından görüntülenen miktarda değişiklikler ve Google tarafından ima edilen bir şey göreceksiniz, reklamın kişisel olarak “hızlı koleksiyon” dediğimiz şeyi yayınlayabilmesidir.
Temel olarak, iyi sayfa deneyimi alan siteler için Google, arama sonuçlarını etiketleyecektir. Size her zaman söylemeyecekler çünkü yavaş olduğu için, ancak onlara daha fazla trafik verecek çok iyi bir arama deneyimi olan siteleri vurgulayacaklar. Bu, Google’ın sayfa deneyiminin çok önemli olduğu ve iyi bir sayfanın neye benzediğini belirlemek için kullandıkları metrik olduğu fikrini gerçekten deneme ve teşvik etme fırsatıdır. Lindsy Farina: Öyleyse bu metrik hakkında konuşun, bu nedir ve sizin için ne anlama geliyor? Her zaman hatırlamak istediğim şey, hepimizin web sitesi tüketicileri olduğumuz ve bu nedenle hepimiz iyi bir deneyim istiyoruz. Ve zaman zaman klasik olarak biz çok sabırsız olmak ve bir web sitesi açtığımızda en iyi deneyimi talep etmek için internete uyum sağladık. Peki, gerçekten görülen ve hissedilen en iyi deneyim nedir? Ve Google, bu üç metriğin bu soruyu cevaplayan şeyler olduğuna karar verdi. Yani LCP, FID ve CLS’yi göreceksiniz. Yani bunun anlamı nedir?
En büyük içerik boyası.Bu temel olarak sayfamdaki en önemli veya önemli içeriği yüklemenin ne kadar sürmesi gibidir.En büyük şey nedir ve oraya ulaşmak ne kadar sürer?En sevdiğim metrik olan ilk giriş gecikmesi.Bu gerçekten bir boyut, iyi, beni tatmin ediyor.Bu da ne?İşlevi nedir?Kullanabilirmiyim?Düğmeye tıklarsam, bunu keskin hissedecek miyim?Ve düğmeye tıkladığımda yanıt alamazsam, doğru tıklamaya başladığımda ne olur, değil mi?Yani hepimizin sahip olduğu deneyim hızlı bir görsel şarj elde ettiğimizde, giriş düğmesini tıklıyoruz ve hiçbir şey olmuyor ve tekrar 75 kez tıklıyoruz ve sonra sayfadan ayrılıyoruz.Bu nedenle, ilk giriş gecikmesini optimize etmek, odaklanmak istediğiniz şeydir, böylece kullanıcılarınızın hayal kırıklığına uğramaması için web sitenizin işe yaramadığını düşünürsünüz.
Ve sonra CLS, yani bu – buna kümülatif bir düzen kayması denir ve bu bloktaki yeni bir çocuk gibi olabilir. Bu, deniz feneri skorunda dikkate alınmak için yeterli değildir, ancak bu jankess, web sitenizin huzursuz olduğu hissidir. Yani bir sayfaya gidiyorsunuz, haber makalesini okuduğunuzu ve sayfanızın ortasında aniden bir reklam göründüğünü söyleyin. Bu korkunç bir kullanıcı deneyimi. Sanki web sitenizden bir şey tüketiyormuşum gibi ve şimdi gitti ve kaydırıp aramalıyım. Bu yüzden sadece tamam demek değil, bunlar size görsel olarak iyi olduğunuzu, yanıtlılığınızın iyi, istikrarınızın iyi olduğunu, ancak size neyin iyi olduğunu söyleyen bir anahtar aralık verdiğini söyleyecek üç metrik. Yani bunun için 3 saniyenin yeterli olup olmadığını tahmin etmenize gerek yok. Zamanında ayrı puanlar verdiler ve CLS için biraz farklı. Bu bir puan. Bu zaman değil. Yani, bu aralığa sahipsiniz ve sizden 75. yüzdelik dilime göre nüfusunuzdan istemenizi istiyorlar. Yani nüfusunuzun% 75’i bu aralıkta bir şey yaşıyor ve gerçekten bu iyi yeşil noktaya ulaşmaya odaklanmak istediğiniz şey bu.
Sırada ne var?Bugün görebileceğiniz birkaç yol hakkında konuşmak için Ryan’a gönderin.Ryan Hoover: Tamam.Performansınızın bu üç farklı metrikte nasıl olduğunu öğrenmek için kullanabileceğiniz bazı araçlardan bahsedelim.Google bize kutunun dışında kullanabileceğimiz iki araç sunuyor.Chrome kullanıcı deneyimi, Crux veritabanı veritabanı var.Bu çok büyük bir veri koleksiyonudur.Herkes Chrome’u bir web tarayıcısı olarak kullanır ve herhangi bir web sitesini her ziyaret ettiğinizde, herhangi bir web sayfası, Chrome aracılığıyla sahip olduğunuz deneyime ihtiyacınız vardır ve bu büyük veritabanına geri gönderir.İçinde milyarlarca not var.
Chrome bunu Bigquery’ye de girdi ve soru sormak için hepimizin kullanıma sunulmasını sağlıyor. Böylece raporları gerçekten açabilir ve gerçekleştirebilir ve web sitenizin performansının nasıl olduğunu ve tarihsel olarak ne kadar performans olduğunu görebilirsiniz. Bu çok kullanışlıdır ve bu aynı zamanda Google tarafından ne yaptığınızı görmek için kullanılan büyük bir veri toplamadır. Web sitenizin ne kadar iyi olduğunu belirlemek için bu onların kaynağıdır. Ne yazık ki, sınırlamaları var. Birincisi, tüm alanlarınızdan gerçekten daha derine inemezsiniz. Blogunuzun nasıl özel olarak olduğunu veya yeni başlattığınız yeni yön sayfasını göremezsiniz. Bu hissi göremezsin. Ayrıca, her ayın ikinci haftasında her ay veri yayınlarlar. Sadece geçen hafta Mayıs için veri aldık. Ne yazık ki, bu her zaman biraz geride olduğunuz anlamına gelir ve bu, şu anda ne yaptığınızı gerçekten göremeyeceğiniz anlamına gelir. Google ayrıca, bir site arama konsolu aracılığıyla, Site Arama Konsolunda kaydettiğiniz kendi alan adınız için doğrudan Web’in önemli verilerinde ne aldığınızı daha fazla bilgi verir. Size hücresel ve masaüstüne dayalı detaylar verecek ve gerçekten kötü bir puan verecek, geliştirilmesi veya çeşitli metriklerde iyi olması gerekiyor. Biraz keşfetmenize izin verecekler ve size sorun yaşayabilecek bir URL grubu gösterecekler. Bu, blogunuzun bir sorunu olup olmadığını söyleyecektir, ancak sorunu sizi yavaşlatabilecek bir blog makalesine bağlamamak zorunda değildir. Her ikisi de harika araçlar.
Ayrıca, iyi bir deneyim elde etmek için Google tarafından vurgulanan 75. persentil işaretini sitenizin dört ziyaretçisinden üçüne getirdiler. Bazı yayalar hala kötü deneyimler yaşarsa, uzun bir açık zamana sahipler, Google için sorun değil. Ve bu size neye benzediğinizi ve nasıl performans gösterdiğinizi göstermenize veya göstermenize yardımcı olur. Ne yazık ki, bunların hiçbiri size gerçek zamanlı bir görünüm vermez. Sentetik testlerin rol oynadığı yer burasıdır. WebPagetest, sitelerinin performansını, nasıl yükleneceğini test etmek için yıllardır web geliştiricileri tarafından kullanılan bir şeydir. Bu aslında yakın zamanda güncellendi, çekirdek web verilerini gösterdikleri metrikte girmek için büyük bir tazeleme ile. Verileri size rapor ederler ve aynı zamanda şelale grafikleri, kaynak yükü, içerik türleri, webpagetestlerden sevdiğimiz tüm harika şeyleri bildiğimiz ve test etmek istediğimiz diğer tüm özellikleri de içerir. Google ayrıca Lighthouse’u yayınladı. Lighthouse, Google’ın GitHub’a yüklediği, web sitenizde test yapmayı ve deniz feneri puanını tekrar bildirecek açık kaynaklı bir yazılımdır. Veya, sayfa performansına alışkınsanız, Google’ın sayfa performans araçları Deniz Feneri’ni de kullanır. Bu, 1’den 100’e kadar iyi bir küçük puan döndürüyor. Ekranda olduğu gibi, 85 puanla sayfalarımızdan birinin örneğine sahibiz. .
Bu iyidir, çünkü size iyi ve basit bir bütünsel puan verir ve ayrıca sitenizde bir test yaparken belirli botların gördükleri hakkında daha fazla ayrıntı verir. İçeriğin en büyük içeriğinin ne olduğunu, kümülatif düzende değişimin ne olduğunu görebilirsiniz. İlk giriş gecikmesini gerçekten görmeyeceksiniz. Bu, birkaç ziyaretin daha bütünsel bir görünümünü gerektiren biraz tuhaflıktır, ancak size toplam engelleme süresi ve ilk giriş gecikmesi faktörü olan hız endeksi gibi şeyler verir. Ne yazık ki, her ikisinin de sorunları var. Bunlar iki sentetik testtir. Bu, bir web sitesine, verdiğiniz bir web sayfasına giren, taramayı, sayfayı bir kez yüklediğiniz ve yalnızca bir yükleme için bir sayfada gördüğünü bildiren bir bottur. Bu birçok soruna neden olur. Sentetik testler size gerçekten yanlış başarı hissi verebilir. Bunu kendimiz wpengine.com’da görüyoruz. Geçen Ekim ayında temel web veri puanımızı artırmak için büyük çaba gösterdik. Oturduk. Google’ın bu yönde olabileceğine dair birkaç söylenti duyduk ve gerçekten düşündük, bu yüzden puanımız istediğimiz yerde değildi. Dürüst olmak gerekirse, 20’li yaşındaydılar. Deniz feneri puanlarımız açısından çok iyi görünmüyoruz. Bu yüzden daha yüksek bir skor elde etmek için ayrıldık. Aslında, oldukça hızlı, 98’e kadar skor aldık. Biz harikaydık. Hissediyoruz, oh bunu yok ediyoruz, iyi yapıyoruz. Kendimize arkada pat veriyoruz, işimizi yürütüyoruz.
Bir ay sonra kontrol ettik, Crux veritabanını kontrol ettik, Crux’un söylediklerini gördük ve aslında herhangi bir fark görmedik. Crux’un ne dediğini gerçekten anlamıyoruz. Bu yüzden biraz daha kazmaya başlıyoruz ve aldığımız grafiklere bakacaksınız, dağınık olduklarını biliyorum, çok fazla kazmayacağız, ama pek çok kişi gerçekten yüksek değil. orada numara. İnsanlar web sitemizde iyi deneyimler görmüyor. Geri dönüp görmeliyiz ve aslında bulduğumuz şey, botun sayfayı nasıl yüklediği ve kullanıcıların bunu yapma biçiminden nasıl farklı kaydettiği. Ve içeriği yavaşça yüklemek için bazı hileler ve teknikler kullanıyoruz, bu gerçekten adil bot asla görmeyecek. Böylece insanlar hala yavaş yüklü içeriği alıyor ve yavaş yükleme bizi hala istediğimiz faydaları görmediğimiz noktaya sürüklüyor. Yani zor bir yerdeyiz. Google’dan bizim için yeterince iyi olmayan eski verilerimiz var. Bu güncel değil, bu yüzden daha yüksek bir puan elde etmek için aktif olarak çalışabiliriz. Bu oldukça duyarlı değil. Ayrıca, gerçekte olanlarla eşleşmediklerini bildiğimiz için uygun olmayan sentetik bir testimiz var. Daha iyi bir şeye ihtiyacımız var. Aradık ve aslında, bazı yeni kalıntı ortaklarımız bizi yeni kalıntı tarayıcıya yönlendirdi ve bu bizim için gerçekten bir cevaptı. Lindsy, yeni kalıntı tarayıcının nasıl çalıştığını biraz açıklayacak. Lindsy Farina: Güzel. Yani evet, yeni bir kalıntı tarayıcısı. Biz sadece temel web veri muhabirleri değiliz.
Size tüm veri ekranınızı kullanıcılarınıza vermek istiyoruz, değil mi? Kullanıcının gerçek perspektifinden olan her şey. Sentetik testten alabileceğiniz bazı şeyler hakkında konuştuğumuzda, sadece üçü değil, duyduğunuz kullanıcıya odaklanan algıların metrik performansı. Çok daha fazlası var. Gerçek kullanıcılar tarafından laboratuar tarafından tanımlanırlar. Bu nedenle, bazı metrikler sadece etkileşime kadar toplam engelleme süresi veya zaman gibi laboratuvardır ve bazı metrikler sadece romdur, yani kullanıcıların siteye gerçekten dahil olmasını gerektirir. Dolayısıyla, ilk giriş gecikmesi gerçekten bir şeyler yapmanız gerektiği gerçeğine dayanmaktadır. Bu nedenle bot birkaç düğmeyi gerçekten tıklamayacak ve bu nedenle verileri size geri bildiremezler. Ancak kullanıcının gerçek perspektifinden bakıldığında, kullanıcınızın düğmeyi ne zaman tıkladığını biliyoruz. Kullanıcınızın ne zaman hareket ettiğini veya rotada değişiklik yaptığını veya bir şeyler yaptığını biliyoruz, böylece tüm bilgileri size bildirebiliriz. Temel web verilerinin üstünde, uygulama özet sayfanızın önüne ve ortasına açıkça yerleştirdiğimiz, JavaScript hatanız gibi şeyleri de rapor ediyoruz, çünkü hatalarınız olup olmadığını söylemeden iyi bir ürün yok. Çok fazla performans geliştirme sağlayabilirsiniz, ancak hatalarınızın üstesinden gelmek için iyi bir desteğiniz yoksa, müşterilerinizi de hayal kırıklığına uğratan bazı önemli şeyleri kaybedebilirsiniz. Ve sonra size de bir görünüm verebilmek istiyoruz, iyi bir arka uç tarafından iyi bir ön uç desteklenmiyor.
Veri akışınıza, AJAX isteğinize, arka uç hizmetinize bakın. Yani, yanlış bir şey varsa, örneğin, bir aşağı akış işçisi doğal olmayan bir şekilde davranır, sonuna kadar takip edebilir ve nihayet müşterilerinizin kötü performansı için kimin suçlanması gerektiğine karar verebilirsiniz. Bu yüzden size bunu veriyoruz ve biz de veriyoruz, tüm bu zengin verilerle, müşterilerinizin kim olduğunu anlama yeteneği veriyoruz. Verilerinizle ilgili olarak, müşterilerinizin sitenizde nasıl düşünüp hareket ettikleri, mekansal oldukları hakkında birçok şey anlatan birçok farklı özellik var. Performansınızı ve verilerinize nasıl öncelik verdiğinizi gerçekten anlamanız gereken şey budur. Ve sonuçta, amaç gerçekten her şeyi almak, tüm bu bilgilerle donanmış ve bir destek çağrısı aldığınız ve daha proaktif bir ülkeye bir şey hata ayıklamaya çalışmak zorunda olduğunuz reaktif bir durumdan geçiş yapmak istiyorsunuz. Bu sorunu gerçekleşmeden önce bulmak ve çözmek için bu temel web verilerini kullanırsınız, böylece iyi bir müşteri deneyimi sağladığınızı bilirsiniz. Bu yüzden özellikle işinizde kendi performans yolculuğunuza hiç başlamadıysanız korkutucu geliyor. Nereden başladın, değil mi? Ve her zaman insanlar için yapmak istediğim şeyler – sadece söylediğim gibi, müşterilerinizi tanımak gibi. Yönettiğiniz site türlerini bilin. Bir haber sitesi iseniz, istikrar ve içeriğe öncelik vermeniz gerekir.
Düğmeyi tıklamaya ve harekete geçmeye daha az dahil olursunuz, ancak pürüzsüz bir alışveriş deneyiminden geçebilmeniz için gerçekten ihtiyaç duyduğunuz bir e-Niaga sitesiyseniz, düğmeye tıklayın, sepete ekleyin, kasaya gidin, sonra kasaya gidin Haklı olmak istiyorsunuz -sayfanızın görsel olarak hızlı bir şekilde yayınlandığından ancak aynı zamanda çok duyarlı olduğundan emin olmak için gerçekten odaklanın. Dolayısıyla, ana UTA’larımın, kullanıcı düğmeye tıkladığında işlemi işleyemeyecek şekilde engelleyecek etkinlikler için aşırı kullanılıp kullanılmadığı gibi şeyler. Ve sonra, tüm bilgileri alın ve nereye başladığınızı öğrenin. Bu kötü deneyimi deneyimleyen bir avuç kullanıcı bulun. Hepsi olmasa da, kullanıcılarınız tarafından en sık ziyaret edilenleri bildiğiniz URL’ye odaklanın. Belki de doğrudan kapıya odaklanmak istediğiniz ana sayfanız gibi. Belki bu sizin giriş deneyiminizdir. Belki alışveriş sepeti deneyiminizdir. Kendi siteniz hakkında, hangi yerin en önemli olduğuna karar vermenize yardımcı olacak konu konusunda uzman olarak ne biliyorsunuz? Ve yeni Relic tarayıcısıyla, bu deneyimi belirlemek için tüm verileri almanıza yardımcı olabiliriz.
Bu nedenle, sizin için neyin önemli olduğunu bulmak için verilerinizi döndürmenin, kesmenin ve kesmenin birçok yolu vardır. Açıkçası, kullanıma hazır bir deneyime sahibiz, ancak kendi gösterge panelinizi yapmanıza da izin veriyoruz. Eğer – yeni kalıntı ile verilerinizin hükümdarıysanız. Size her şeye erişim sağlayacağız ve sizin için önemli bir deneyim oluşturabilmenizi istiyoruz. Dikkat edeceğim başka bir şey, yeni bir Relic müşterisi değilseniz, gidebileceğiniz ve oynamaya başlayabileceğiniz, verilerinizi yükleyebileceğiniz, hangi yükleme aracısını görebileceğiniz ve her çıkış özelliğine sahip olabileceğiniz ücretsiz bir seçenek olmasıdır. Out -ofthe-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-of-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-the-book Ama şimdi nereye gittiğinize dair bir fotoğraf çektikten sonra, müşterinin deneyimine odaklanın çünkü mesele bu. Müşterilerinizin deneyimini geliştirirsiniz. Yani, bir şirket için işe yarayan şey, performans yolculuğunuzun hikayesi ile aynı olmayabilir. Bu nedenle, tüm bu farklı metriklerin olduğu ve mükemmel olmanız gerektiği gerçeğine yakalanmamak çok önemlidir. Bu olmayacak. Bu doğrudan kapıdan olmayacak, ancak hedefler belirleyebilirsiniz. Ve evet, bakalım müşterinin gerçekte ne yaptığını görelim. Ryan Hoover:

Peki. Evet, Lindsy’nin söylediklerinden, bazen çok fazla metrik alırsınız ve işleyen bir metrik bulmanız gerekir. Bu yüzden yeni kalıntı, veri dolu harika bir gösterge paneli hazırlamamıza yardımcı oluyor. Ne yazık ki, çok dürüst. Onu gördük ve izlemeye çalıştığımız tüm farklı şeylerden bunalmıştık. Bu yüzden geri dönüyor ve onunla çalışıyoruz ve sonra burada gördüklerinizle, çok basit ve anlaşılır bir gösterge paneli ile görünüyoruz. Yaptığımız şey, ana amiral gemisi web sitelerimizden ikisi olan iki web sitemiz WPengine.com ve GetflyWheel.com için büyük performans hedeflerimizin neler olduğunu daraltmaktır. Kısmen onlar için çok farklı bir deneyim elde ettiğimiz ve kısmen Google’ın ayrı ayrı izlediğini bildiğimiz için hücresel ve masaüstü trafiğine ayırıyoruz. Ve dört farklı deneyim için üç farklı hayati web verisine bakıyoruz. Yani, izlediğimiz toplam 12 metriğimiz var. Yani, çok hızlı bir şekilde topladığımız harika bir gösterge panelimiz bize ne yaptığımızı gösteriyor. Çok hızlı yazan büyük bir sütunda bütünsel bir puan var. Geçen hafta ortalamamız nasıl? Ortalama puanımız nedir? İyi bir siyah bölgede miyiz? Sarı bölgede miyiz yoksa gerçekten kırmızı bölgede miyiz?
Kendimizi orada biraz yukarı ve aşağı sıçradığını gördük. Şimdi göreceksiniz, dürüst olmak gerekirse, bunu oldukça iyi yaptık. Hala hücresel olarak düzleştirilmesi gereken en büyük içerik boya sorunlarından bazılarına sahibiz, bu yüzden şimdi üstesinden geliyoruz, ancak bu çok yararlı. Bu aslında her zaman kendi ekibimizle ve üst düzey liderliğimizle paylaştığımız bir gösterge panelidir. Bu her zaman gösterdiğimiz bir şey, hey, bu bizim sitemizin performansı hakkındaki görüşümüz. Bu grafikle, bazı ilginç küçük trendleri görmek bile bize izin veriyor. Ortada göreceksiniz, wpengine.com’un en büyük içeriğinin daha yavaş, daha hızlı, daha yavaş, daha hızlı hale geldiği bir döngü davranışı vardır. ABD trafiği uykuya daldığında yavaşladı ve daha fazla uluslararası trafik almaya başladık. Batı Virginia’dan içeriğimizi almak giderek daha yavaş zaman görmeye eğilimlidir. Uluslararası trafiği nasıl daha hızlı hale getirdiğimiz puanını azaltmak için çalışırken hala bitirmeliyiz. Bu, bu gösterge tablosunun dalış yapmamıza, sadece neye önem verdiğimize odaklanmamıza ve izlediğimiz belirli metrikleri geliştirmemize yardımcı olan bir yönüdür. Lindsy Farina:
Her şeyden önce, yolculuğunuza nereden başlamanız gerektiğini anlayabilmiştir.Bir metrik seçmiş olabilirsiniz.LCP’nin optimize etmek istediğiniz bir şey olduğuna ama ne yaptığınıza karar vermiş olabilirsiniz.Ve bir kez daha bu-bu, yolculuğun her zaman aynı olmadığı şeylerden biridir ve Google, bu metriklerin her biri için optimizasyon için ipuçları ve püf noktaları, ziyaret edilecek ve görülecek bir yer, işler hakkında çok fazla olağanüstü içerik yayınladı. Bu, ilgili LCP’nin araştırılması gerekiyor, reklamı yükleyecekseniz, önce ona bir oda yaptığınızdan ve sadece ekranı zıplamak ve devralmakla kalmayacağınızdan emin olmak gibi şeyler.Tüm resimleriniz ve videolarınız, bunları vahşi doğaya göndermeden önce bu şeylerin optimize edildiğinden emin olun, ana UTA’larınızda ne yürüdüğüne dikkat edin.Toplam engelleme sürenizin ne kadar olduğunu öğrenmek için Lighthouse gibi araçları kullanarak birçok uzun göreviniz var mı?
Tamam gibi anlamanıza gerçekten yardımcı olacak, bu birkaç sürtünme alanı yaşayabileceğim bir alan ve size yardımcı olacak. Bu her zaman bunun için bir şablon kılavuzu olmayacak, birinci adım, ikinci adım ve nihayet denediğiniz şeylerle ileri geri gitmeniz gerekebilir. Ancak sentetik testin ve gerçek dünya karışımı gibi bir şey olması iyi bir şey, bunları üretime serbest bırakmadan önce deneyebilmeniz ve bir etki yaratıp yapmadığınızı görebilmenizdir. Yani çevre testi sahneleniyor, çeşitli fırsatları keşfediyor. Değiştirdiğiniz şeyin olacağını düşündüğünüz etkisi yoksa korkmayın. Bu bir gezi. Bu açıkça bir maraton ve sprint değil. Ve eğer bunu bir süratle başarılı bir şekilde yaparsanız, bunu duymaktan mutluluk duyarım çünkü deneyimlemedim. Ve dediğim gibi, Google birkaç olağanüstü sunum yayınladı – sunumdan çok özel müşteri kullanımı durumunu aldıkları bazı YouTube videoları var ve sizi bir kod fragmanı ile çalıştırıyorlar ve ne yaptıklarını ve ne yaptıklarını optimize etmek için elde etmek için diğer tarafta. Yani nasıl başlayacağınızla ilgili birçok iyi örnek var. Ve gerçek dünyaların örnekleri hakkında konuşun. WP motorunun, işleri daha iyi hale getiren keşif türü için ne yaptığını konuşalım. Ryan Hoover:
Tamam teşekkür ederim. Bu yüzden biraz kazın, biraz zaman harcamak ve şimdiye kadar öğrendiğimiz bazı şeyler hakkında sizinle konuşmak istiyorum. Sitemizi nasıl hızlı hale getirdiğimizle ilgili ayrıntıları tartışmayacak. Bunu diğer forumlarda yapmayı seviyorum. Ama bence o kadar özel ki Google’ın genel önerilerini geçtikten sonra gerçekten ne yaptığınızı görmeniz gerekiyor. Bunun yerine, şimdiye kadar yaptığımız bazı şeyler hakkında konuşmak istiyorum, bu performans projesi daha sorunsuz bir şekilde çalıştırdı, zorlukla öğrendiğimiz dersler. İlk olarak, aynı dili tanıtın. Bulduğumuz bir şey, Web ile ne kadar çalıştığınıza bağlı olarak, sitenin anlamının hızlı bir şekilde farklı bir tanımına sahip olmanızdır. Hosting platformunu işleten teknisyenlerimizle konuştuğumuzda, ilk bayt zamanına odaklanırlar çünkü özellikle kontrol ettikleri şey budur. Düzende ne gibi bir değişim kontrol edemiyorlar. Bu sayfada daha fazla içerik. Bir süredir var olan SEO insanlarıyla konuştuğumuzda, pencere yükü genellikle uzun zamandır gördüğümüz bir şey olduğu için ortaya çıkar. Geliştiriciler arasında kendi ekibimizde bile farklı deneyimler ve anlayışlarımız var. Bu yüzden öğrendiğimiz bir şey, neyi izlediğiniz hakkında net bir tanım, net bir terim yapmaktır. Oruçların ne olduğunu ve onu nasıl ölçtüğünüzü nasıl tanımladığınız. Yeni kalıntı kontrol paneli bizim için çok iyi.
Bu nesneyi sürekli kullanıyoruz. Ekibimiz onu incelemek için günde birkaç kez çekti. Bir takım toplantısı düzenlediğimizde ve bunun hakkında konuştuğumuzda, gösterge panelini çekiyoruz. Liderlik ile konuştuğumuzda, gösterge panelini çektik ve neye benzediğini paylaştık. Bu bizim görünüşünün genel tanımımızdır ve herkesin aynı sayfada olmasını sağlamamıza gerçekten yardımcı olur. Ve dürüst olmak gerekirse, bunu denememden korkutucu bir yorum geçirmemizi sağladı, web sitesini evden yüklemeye çalıştım ve çok yavaştı. Performans sorunlarımız var mı? Bazen alabileceğiniz ve çok sinir bozucu bir kerelik küçük bir yorum çünkü onu geri getiremezsiniz ve ne olduğunu bilmiyorsunuz. Lindsy Farina: Her zaman aynı şeye sahibiz – eğer makineme gelmezse … Ryan Hoover: [kahkahalar] bana iyi çalışıyor. Lindsy Farina: Gerçek kullanıcı verilerine sahip olduğunuzda gizleyemezsiniz. Ryan Hoover: Evet. Oh bu yüzden bunun hakkında konuşmak makinemde iyi çalışıyor, performansı vurucu bir oyun. Ah adamım, bununla mücadele ettik. Genellikle sitenizdeki performans sorunlarının üstesinden geldiğinizde, düzelteceksiniz, ancak bir sorunu çözmek başka bir soruna neden olacaktır. Lindsy, web yazı tipleri ve Google’ın önerilerinden biri olarak nasıl kullanabileceğinizden biraz bahsetti. Dürüst olmak gerekirse onunla ileri geri mücadele ettik. Başlangıçta web yazı tipimizi optimize ettik. En büyük içerik boyamızı düşürdük, ancak web yazı tipimizin yayınlandığını gerçekten geciktirdik.
Ancak bunu yapmak CL’lerimizin tekrar yükselmesine neden oldu. Yani bu bir sorunu çözdüğünüz oyunlardan biri ve başka bir sorun ortaya çıkıyor. Bu yüzden orada gördüğünüz grafikler, zavallı küçük köstebek kafasına dövüldüğü yer, bu gerçek ABD – bu, geçen yıl için wpengine.com ana sayfasının skoru. Böylece yaz ve sonbahar boyunca orada çok büyük olmadığımızı göreceksiniz. Bir sorun olduğunu biliyoruz. Bu, başaracağımız, başaracağımız şeylerden sadece biri ve sonunda ortak bir çaba gösteriyoruz. Ve büyük performansı zorlamaya başladığımızda büyük sıçramayı görüyorsunuz. 98’e ulaştığımız küçük yeşil tırnakları görebilirsiniz ve bittiğimizi düşünüyoruz. Bunu geçtikten ve sitemizin sadece robotlar için değil, gerçekte nasıl performans gösterdiğine dair gerçekliğe girdik. Bu soruna başladık ve dalgalanmayı yukarı, yukarı ve aşağı göreceksiniz. Ve bu, özellikleri test ediyoruz, daha iyi hale getireceğini düşündüğümüz bir şeyi uyguluyoruz ve sadece başka bir şeyi daha kötü veya ileri geri yapar ve ileri geri gider. Yani bu sadece idare etmeniz gereken bir şey. Grafiğin yaklaşık 3/4’ünde hafif bir düşüş yaşadığını göreceğiniz zamanlar bile olacak. Olanlar dürüsttü, ondan önce bir hafta boyunca kodu yaymadık. Olan, Google’ın algoritmasını nasıl hesaplayacağını değiştirdi, ki bu çok iyi ve çok daha iyi bir iş çıkarıyorlar.
Algoritma daha iyi, ancak bu skorumuzu 10-15 puan düşürüyor ve skora ulaşmak için mücadele ettik, bu yüzden orada biraz zamanımız var. Söyleyeceğim son şey değişmeye açık. Fareleri rahatsız etme fikrini takiben ve bir soruna neden olursunuz – bir sorunu çözüyorsunuz, başka bir sorunu çözüyorsunuz. Performans üzerinde çalıştığımızda bulacağımız bir şey, geçen ay işlev gören şey artık çalışmayacak. Web yazı tiplerini nasıl ele aldığınızın tutumundan ve belki de ertelemeniz gerekir. Muhtemelen değil. Görüntüleri nasıl ele alıyorsunuz? Kendimiz zorluk yaşıyoruz, wpengine.com’da çok fazla illüstrasyonumuz var. Başlangıçta birçoğunun bir SVG hattı haline gelmesi için harekete geçtik. Biz bizi daha iyi yaptı ama aslında o noktaya ulaştı noktaya geldi ve biz ve statik dosya dışında yayınlanan web kuyruğuna geri dönmek zorunda kaldı. Getflywheel.com’da birçok video var. Orada HTML5 videoları olarak oynadık. Hızımızı birkaç sayfada düşürdü, bu da hızımızı çok daha iyi bir puan elde etti. Bazı sayfalar, aslında YouTube veya Wistia’dan bir şey daha hızlı sabitler. Ve bu, denemeye devam etmemiz gereken bir şey ve aynı sitede bile uygun ve başarılı olacak sadece bir şey yok. Bu, JavaScript’i geciktirmekten başlayan her şey için geçerli mi yoksa mümkün olduğunca çabuk yüklüyor musunuz? CSS’nizi harici bir dosya olarak mı yerleştiriyorsunuz? Bir çizgiye mi koydun? Birçok değiş tokuş var ve bu dengeyi bulmak için çok çalışmalısınız.
Ve sonra Google gelip gerçekten öğrenebilir, aslında, bunu ölçmenin daha iyi bir yolu var. Bunu şimdi kümülatif bir düzen kayması ile yapıyorlar. Düzen kaymasını ölçmenin daha iyi bir yolu olduğunu anlıyorlar ve bu yüzden bu tanımları yeniden işliyorlar. Ve buna cevap vermek için stratejimizi biraz değiştirmemiz gerekebilir. Ve bu sadece devam etmesi gereken bir şey. Lindsy Farina: Evet ve Google’ın da olmadığı tek şey – her yıl çıkacak olan bunlar öneriliyor. Yani çekirdek web canlıları sürekli araştırdıkları bir şeye gidiyor. Başlangıçtan itibaren kullanıcı merkezli performans yolculuğu ile birlikteyseniz, bunun çok fazla değişiklik geçirdiğini biliyorsunuz. Gelip giden metriklerimiz vardı. Deniz feneri skorlarında biraz sarsılmış ve ağırlıklı olan yepyeni metriklerimiz vardı, ancak aniden küçüldü. Ve belirli bir metrikte mandallanmayı seven ve ‘Bu bir’ karar vermiş olan birçok insan var ve gerçek, artık hepsini yöneten bir metriğe sahip olduğumuz alan değil. Kullanıcı deneyimini tanımlamak için birden fazla şeye bakmamız gereken bir tutarlı olacaktır. Ve daha fazla veri aldıkça ve araştırmaya devam ederken, bu sadece bir bilim. Bu veri bilimi ve daha fazla veri geldikçe ve Google bu değerlendirmeyi yaparken, ağırlıklarının da değiştirildiğini, algoritmaların bunları tanımlamak için kullanıldığını değiştirecekler ve bir metrikten tamamen yoksun bırakabilirler.
Bunun bir şey olmadığına ve farklı bir şey yapmamız gerektiğine karar verebilirler. Çok büyük içerikli boya ve CL’ler hala biraz yeni. İlk boyamız vardı. İlk içerikli boyamız vardı. Bir laboratuvar metriğinde etkileşim kurmak için zamanımız vardı. Bütün bunlar etrafta dönüyor, böylece çok karışıklığı oldu. 2021 önerileri arıyor. Biraz değişebilirler ve bu yüzden biz sadece -Tri bir sprint değil, bir maraton kavramıdır. Panik yapma. Değişmeye açık olun. Performans yolculuğunuzun bir parçası olan tüm bunlar. Peki nerede bitiriyoruz? Bunun New Relic’te çok tutkulu olduğumuz bir şey olduğunu biliyorsunuz. Bu alanı seviyorum. Ben de çok heyecan verici ve biraz bencilce buluyorum. Web sitesi deneyimlerimin iyi olmasını istiyorum ve web sitelerini yöneten müşterilerimin, bunu yapmak için ihtiyaç duydukları verilere sahip olduklarını hissetmelerini istiyorum, böylece bencilce web sitelerini kullandığımda iyi bir deneyim. Ve böylece bu sizi gerçekten, sadece müşterilerinizi tanıyor. Verilerinize bakarak, taban çizgilerinizi almak, hedefler belirlemek için bu açık zamanı yatırın. Bir hafta içinde fakirden iyiye olmak zorunda değil. Zaman içinde bu yolculuk olabilir ve kullanıcılarınızın performansını ve bunun nasıl göründüğünü ve onlara nasıl hissettiğini bilmek, bu yolculuğa nerede öncelik vereceğinizi anlamanıza yardımcı olur. Ryan Hoover: Anladım. Ve bu yolculukta ilerledikçe, bu bir yolculuk olacak. Bizim gibi olabilirsiniz ve skorları iyi bir sağlıklı noktaya getirmek için büyük bir proje almak isteyebilirsiniz, ancak oraya geldikten sonra oturup harika diyemezsiniz, harika, bitirelim. Üzerinde çalıştığımız diğer şeyler.
Nasıl çalıştığınızı ve web siteniz hakkında nasıl düşündüğünüzü hesaba katmak için performansa ihtiyacınız var. Yaşam tarzınızın bir parçası olmalı. Bu gösterge tablosunda büyük projeniz için oluşturduğunuz, önde tuttuğunuz bir şey olması ve puanlarınızın artmasını sağlamak için tekrar tekrar dönmeye devam ettiğiniz metrikler. Çünkü açıkçası, kurulumunuzun kalmasına izin verirseniz, puanlarınız zamanla yavaş yavaş düşecektir. Zamanla, küçük şeyler sürünen küçük şeyler, küçük külçe, küçük senaryo değişiklikleri veya görüntüler, her neyse, sürünebilir ve puanınızı geri çekmeye başlayabilir. Bu, üzerinde çalışmaya devam etmeniz gereken bir şey olacak. Günlük iş akışlarınıza pişirin. Web sitenizde çalışabileceğiniz kalite güvence testinize pişirin. Bu sizin için ne anlama gelebilirse, performansın yapıştığınız bir şey olduğundan ve web sitenizle çalışmayı nasıl düşündüğünüzün bir parçası olduğundan emin olun. Son olarak, herhangi bir iyi maratonla, her şeyi aynı anda alabilirsiniz. Ulaşabileceğiniz net, basit, anlaşılır hedefler belirlemelisiniz. Ekibinizi hemen% 90’a kadar büyük puan almamız gerektiğini düşünerek bunaltırmayın. Çok fazla karmaşıklık, tüketmek için çok fazla veri var, işlenemeyecek çok fazla. INSEAD, projeyi üstlenin, açınızın ne olmasını istediğinizi genel bir fikir edin. Ama sonra bunları elde edebileceğiniz ve ayarlayabileceğiniz ve onlar için çalışabileceğiniz kısa vadeli hedeflere bakın. Kendinize biraz mola verin. Ekibimiz, performansı seviyoruz, çoğumuz. Web geliştirme konusunda en çok hoşlandığımız şey bu.
Sahip olduğumuz en keyifli projelerden biri, ancak bir ay veya altı hafta sonra bile, bir mola vermemiz ve başka bir şey üzerinde çalışmamız gerekiyor. Taze gözlerle geri döneceğiz. Bu yüzden kendinize iyi açık kısa vadeli hedefler koyun ve üzerinde çalışın ve sadece uzun vadede puan aldığınızdan ve bu kullanıcı deneyiminin, bu sayfa deneyiminin müşterileriniz için olmasını istediğiniz şey olduğundan emin olun. Lindsy Farina: Ve hepimizin umabileceğimiz şey, oraya vardığınızda orada kalabileceğinizdir. Ve bu siyah sayıları ve bu gri kabarcıkları görmek için buradaki diğer ekran görüntüsü olan yeni Relic tarayıcısında ve Lookingout’ta ürün yöneticisi olarak beni mutlu ediyor. Görmek istediğiniz şey bu. Verilerinizin, kırmızı veya yeşil veya kırmızı veya sarı senaryoya geçmediğiniz, aniden zaman içinde verilerinizin sapmaya başlamadığı kararlı olduğunu görmek istiyorsunuz. Aniden bir sürünme gördüğünüz ve işler daha önce olduğu kadar geride değil. Ama tüm bu araçlara sahibiz ve onları izlemeye devam edebilirsiniz. Bu nedenle, bu deneyime sahip olmanızı, bu sorunları olabildiğince çabuk bulabilmenizi, bir sapmanız olduğunda ve bir şey bu iyi aralıktan veya ihtiyaçların iyileştirilmesinden yoksun kalmaya başladığında farkına varabilmenizi istiyoruz. Sadece dikkatli olun, kontrol etmeye devam edin ve size iyi şanslar diliyoruz. Umarım bugün her şey size hazır olduğumuzdan zevk almıştır. Sizinle birlikte çalışabilmek kesinlikle benim için bir zevk, Ryan. Hikayenizi duymaktan gerçekten keyif alıyorum ve yeni Relic tarayıcının sizin için çalışabildiği için çok mutluyum. Ryan Hoover: Teşekkürler Lindsy. Bu harikaydı.