Teknik SEO uzmanları, SEO sorunlarını gidermek ve hata ayıklamak için Chrome‘un Canary‘si ve yeni tarayıcı özellikleriyle tanışın.
Web için yapı oluşturmak her zamankinden daha zor. Her gün daha iyi mobil teknolojiler ve web standartları ortaya çıkıyor.
Peki, web siteleri nasıl devam ediyor?
Sınırsız veri planları bir lükstür. Ancak bir web sitesini ziyaret ettiğinizde ne kadar veri indiriliyor ve günümüzün web ortamının çevresel etkisi nedir?
Google arama motorunun mobil öncelikli dizini, pürüzsüz sayfa deneyimleri sunan web sitelerine öncelik verir. İşletmeniz, arama keşfedilebilirliği göz önünde bulundurularak mı gönderiliyor?
Geliştiricilerin, bir sitenin Google’daki performansının ne kadar başarılı olduğu üzerinde çok fazla etkisi vardır; ancak onlar her zaman aramaya mı odaklanırlar?
İyi geliştiriciler, estetik ve web sitesi performansı arasında bir denge kurar. Ekibiniz ölçülebilir hedeflerle web performans bütçeleri belirliyor mu?
Bu parçada, geliştirici ekibinizle iletişimi geliştirmenin yollarını keşfediyorum. Chrome’un Geliştirici Araçları, geliştiricilerin sorunları daha hızlı çözmesi için ihtiyaç duyduğu verilere sahiptir.
Canary tarayıcısının teknik bir SEO denetimi başlatmak için nasıl harika bir yer olduğunu göreceğiz.
SEO uzmanlarının bugün test etmesi gereken yeni özellik güncellemelerini paylaşacağım.
Chrome Yeni Özellikleri Nasıl Sunar?
Canary , Google Chrome’un erken sürüm sürümüdür.
Google , özelliklerini sürüm kanalları olarak adlandırdığı dört aşamada yayınlar. Kanallar Canary, Dev, Beta ve Stable’dır. Chrome Canary , Beta ve Dev , Android, Mac, Windows ve Linux’ta yan yana yüklenebilir.
Chrome mühendisleri, özelliği bir sonraki kanala yayınlamadan önce herhangi bir sorunla karşılaşıp karşılaşmadıklarını görmek için yeni özellikleri gerçek kullanıcılar üzerinde test eder.
Canary, güncellemeleri ilk olarak gece yayınları ile 02:00 PST’de alır . En son özellikleri, tarayıcı denemelerini ve web platformu API’lerini alırsınız. Güncellemeler ayrıca hata düzeltmelerini, tarayıcı iyileştirmelerini, kod temizlemeyi, güvenliği ve güvenliği içerir.
Özellikler , tüm 3.2B kullanıcılarına yayınlanmadan önce altı haftalık bir yayın döngüsü boyunca yinelenir .
Kullanıcılar web sitelerinde, web uygulamalarında, içerik yönetim sistemlerinde (CMS), temalarda ve eklentilerde gelecek özellikleri test edebilir. Hataları bildirirler ve yeni özellikler hakkında geri bildirimde bulunurlar.
Tüm özellikler onu Canary’yı geçmez. Deneysel tarayıcı, tarayıcı meraklıları, geliştiriciler, kurumsal kullanıcılar ve teknik SEO uzmanları tarafından kullanılır.
Geliştirici Araçları ile SEO’da Hata Ayıklama
Chrome DevTools, web sitelerini tarayıcı içinde test etmek için kullanılan bir tanılayıcı tarayıcı araç takımıdır. Geliştiriciler, sayfa hızı performansını ölçen araçlarla web sitelerini test eder, oluşturur ve bakımını yapar.
Tarayıcı araçları, web sitesi performansını farklı koşullarda test eder. Web sitelerinin düzeltilmesi konusunda size avantaj sağlar.
Geliştiriciler için araçlar neredeyse tarayıcının kendisi kadar önemlidir.
Uzun ve pahalı taramanın bitmesini beklemeye gerek yok; Teknik SEO sorunlarını bulabilir ve bunları hemen Canary ile dosyalayabilirsiniz.
SEO İçin Chrome Canary Kurulumu
Web sitelerinin farklı konumlarda, cihazlarda ve ağlarda iyi performans göstermesi gerekir. DevTools, farklı yerlerde ve daha düşük hızlarda göz atmayı simüle etmenize izin verir.
Canary’yi, Chrome’un ayarlarında Googlebot kullanıcı aracısı olarak göz atacak şekilde ayarlayın.
Google’ın bir site yüklediğinde ne gördüğüne bir göz atın.
Tarayıcı uzantılarının testlerinizin doğruluğunu etkilemesine izin vermeyin.
Canary’yi teknik SEO denetimi ve hata ayıklamaya ayrılmış ayrı bir tarayıcı olarak indirin.
Canary’de Tak ve Tara Teknik SEO Sorun Giderme
Chrome DevTools, bir web sitesinin arka planına bakmanıza olanak tanır.
Ayrıntılı performans raporlarını saniyeler içinde test eder ve yazdırır – ancak ilk başta sizi bunaltabilir.
Teknik SEO uzmanları, tamircilerin araba sorunlarını giderdiği gibi web’i denetler; Siteleri tarayıcı araçlarına takıp tarıyoruz ve nasıl yüklenip yanıt verdiklerini analiz ediyoruz.
Canary ile sayfa yükleme, gezinme ve kullanıcı etkileşimleri gibi önemli anları kaydedebilir ve ölçebilirsiniz. Ayrıca durum kodları, Önemli Web Verileri (CWV) okumaları, şelale ve zaman çizelgesi çizelgeleri ve çok daha fazlasını alabilirsiniz.
Bazen Canary’de sorun giderme, sorun yerine yalnızca bir belirtiye işaret eder. Daha yetenekli araçlar, gelişmiş okumalar sunar, ancak sorun giderme süreci aynı kalır.
Google Chrome Canary ile Teknik SEO Denetimi
Google, web sitelerinin hızlı yüklenmesini ister, ancak Googlebot ana içeriği anlamıyorsa bir sayfa iyi sıralanmaz.
DevTools, web sitesi sunumunu ve performansını ölçebilir ve hata ayıklamaya yardımcı olabilir.
Canary ile Javascript, CSS ve CWV sorunlarını denetleyin ve hatalarını ayıklayın.
Sayfalarınızı ve şablonlarınızı hemen kontrol etmek için DevTools’u kullanın.
Bir sitenin ziyaretçileri ve Google tarayıcılarını nasıl yönlendirdiğini görmeye yardımcı olur. Dahili bağlantıları, içerik yinelemesini, bozuk bağlantıları, eksik resimleri ve 404 sayfayı kontrol edin.
Hepsinin orada ve optimize edilmiş olup olmadığını görmek için sayfadaki meta verilerinizi kontrol edin. Yapılandırılmış veri sorunlarını arayın ve JavaScript oluşturma sorunları nedeniyle Google’ın dizine eklemediği içeriği araştırın.
Farklı web koşullarında gecikmeyi incelemek için ağ ayarlarını kısın ve darboğazları belirlemek için web sitesi çalışma süresi performansını analiz edin.
İçerik sunumunuzu optimize etmek için fırsatlar arayın .
Bir sitenin kaynaklarının nasıl yüklendiğini ve işlendiğini kontrol edin. Tüm kaynaklar eşit değildir – daha iyi kaynak sağlama, kullanıcı deneyimini iyileştirebilir.
Teknik SEO Web Sitesi Denetimleri İçin Canary’de DevTools Kullanımı
SEO uzmanları için DevTools’taki popüler kullanım örneklerinden bazıları şunlardır:
deniz feneri
- Performans, erişilebilirlik, en iyi uygulamalar, SEO ve PWA’nın puan tabanlı denetimi.
- Performansı artırmak için eyleme dönüştürülebilir içgörüler.
Ağ Paneli
- Arama motoru paletli emülasyonu.
- Ağ durumu ve hız simülasyonu.
- Çerçeve başına ağ istekleri ve bağlantı bilgileri.
- Kaynak yükleme ve işleme bilgileri .
- İndirirken web sitesi kaynaklarının şelale grafiği görseli.
- Sunucu yanıtları.
Performans Paneli
Bir web sitesinin tarayıcı oluşturma sürecini kaydeder.
Dosyaları indirip değerlendirdikten sonra sitenin nasıl bir araya getirildiğini gösterir.
Yüklenen her çerçevenin çalışma zamanının şelale görselleştirmesi.
Kritik Oluşturma Yolunu anlamaya yardımcı olur .
Önemli Web Verileri puanını etkileyen performans darboğazlarını ve kaynakları tanımlar .
Düşen kareleri veya “Jank”i kontrol edin.
Diğer SEO DevTools İş Akışları
- Javascript SEO sorunlarını ayıklamak için JS ayarı devre dışı bırakılıyor.
- Mobil cihaz testi.
- Erişilebilirlik Kontrolleri.
- Uzaktan Başsız Tarayıcı Testi.
- Programatik DevTools tarayıcı testi ve otomasyonu.
SEO İçin Bir İş Örneği Hazırlamak İçin Yardıma mı İhtiyacınız Var?
Teknik SEO’nun değerini kanıtlamak için verileri kullanın.
Site performansını kıyaslayın ve içerik sunumunu rakiplerinizle karşılaştırın.
Siteniz değiştikçe ona ayak uydurmak için Canary’yi kullanın.
Chrome Tarayıcı Geliştirme Ekosistemi
Chrome’un yazılım geliştirme stratejisi, birkaç ardışık ve yan yana dağıtım çalıştırır. Bu yöntem, A/B ve kapasite testi yapmasına izin verir.
Chrome’un mühendisleri, özellik geri alma işlemlerini otomatik hale getirir ve soğuk başlatmalardan ve kesinti sürelerinden kaçınır. Parçalı tarayıcı sürüm kontrolü sağlayan basitleştirilmiş bir işlemdir.
Her kanalda geliştikçe özellikleri izlediğinizden emin olun. Özellik özetlerini okuyun ve hangi iş sorunlarını çözebileceklerini anlayın.
Görüşmeye katıl.
Chromestatus.com , özellikleri ilerledikçe izler. Chrome araçları ve kitaplıklarından haberdar olmak için Chrome Developer’ın bloguna abone olun .
Chrome Canary’de Deneysel DevTools Özellikleri
Chrome DevTools’ta Yeni Performans Analizleri Paneli
Profesyonel sporcular, performanslarını anlamak için oynanış filmleri izlerler. Benzer bir şekilde, Performans Öngörüleri paneli, bir web sayfası yüklemesinin kayıtlarını oynatmanıza ve paylaşmanıza olanak tanır.
Yeni panel, Chrome 102 ile birlikte gelir. Bu, performans panelinin kolaylaştırılmış bir güncellemesidir ve tarayıcı oluşturma konusunda derinlemesine teknik bilgi gerektirmeden içgörüler sağlar.
Panel, sayfa yükleme CWV performansını ölçmek için basit bir kullanıcı arayüzüne sahiptir. Eyleme geçirilebilir sayfa içgörüleri sağlar, oluşturmayı engelleyen istekleri, düzen kaymalarını ve daha fazlasını bulur.
Gelecekteki sürümler, etkileşim testi gibi kullanım durumlarını genişletecektir .
Kritik oluşturma yolunuzdaki ağ gecikmelerini paylaşın ve sitenizin gecikmesine neden olan atlanan kareler için GPU Etkinliğini gösterin.
Geliştiricilerinize biraz zaman kazandırın ve bilet gönderirken Performans kayıtları ekleyin. Hemen harekete geçmek için onlara sayfalarınızda tam olarak neyin yanlış olduğunu gösterin.
Chrome DevTools’ta Yeni Kaydedici Paneli Güncellemeleri
Kaydedici paneli, kullanıcılara akış içgörüleri sağlayan deneysel bir özelliktir.
Performans Paneli aracılığıyla çok adımlı kullanıcı akışları için çalışma zamanı performansını kaydeder.
Birincil web sitesi kullanıcı akışı performansınızı denetlemek için bu özelliği kullanın .
Çoğu kullanıcı siteniz yüklendikten sonra onunla etkileşime girer. Bu nedenle, tıklama, kaydırma ve gezinme gibi kullanıcı etkileşimlerini kaydetmek iyi bir fikirdir. Simüle edilmiş ağ koşulları için kullanıcı akışlarınızı kaydedin ve düzenleyin.
Ayrıca, bir e-Ticaret ödeme akışını kaydedin ve farklı sepete ekleme adımları ayarlayarak ödeme performansını ölçün.
Ayrıca bir sayfa yükleme ve düğme veya bağlantı tıklama etkileşimi komut dosyası oluşturabilir ve CWV’sini ölçebilirsiniz.
Google, birkaç kullanıcı girişi özelliği için desteği listeler.
ARIA ve CSS seçicilerini otomatik olarak algılar. Popüler JS ve CSS çerçeveleri tarafından kullanılan özel veri* seçicileri de ekleyebilirsiniz. En son Chrome 108 sürümü , desteği XPath ve metin seçicilere genişletti .
Sayfalar hızlı yüklenebilir ancak yavaş çalışabilir ve kötü bir kullanıcı deneyimi markanızın algısını etkiler.
Ziyaretçilerin bir siteyi tıkladıklarında donduğu için terk etmediklerinden emin olun.
Üçüncü Taraf Oynatma İçin Kaydedici Paneli Komut Dosyalarını Dışa Aktarma
Popüler ön uç test araçları için ana kullanıcı akışı kayıtlarınızı farklı biçimlerde dışa aktarın.
Akışları düzenlemek ve bunları Kaydedici’ye geri aktarmak ve tekrarları izlemek için JSON dışa aktarımlarını kullanın.
Özel komut dosyalarını Chrome uzantılarıyla dışa aktarın.
Kayıtların Google’ın Node.js Puppeteer kitaplığına dışa aktarılması için destek mevcuttur. Bunları Cypress, Nightwatch, Sauce Labs ve TestCafe ile de kullanabilirsiniz.
Puppeteer ile Başsız Tarayıcı Testini Otomatikleştirin
Kafasız göz atma, tarayıcının kullanıcı arayüzü olmadan bir web sitesini ziyaret ettiğiniz zamandır. Bilgisayarınızın arka planında Chrome’u başlatabilir ve tarayıcı araçlarını çalıştırabilirsiniz.
Puppeteer Chrome, DevTools protokolü üzerinde çalışan bir API’dir. Puppeteer, başsız mod aracılığıyla Chrome kullanıcı arayüzünü kullanmadan da tarayıcı testleri çalıştırabilir .
Otomatik periyodik CWV testi kurun ve farklı cihaz ve ağlarda yüklenen sayfalarınızın ekran görüntülerini alın. Geliştiriciler, form gönderimlerini ve kullanıcı arabirimi testlerini otomatikleştirir.
Sayfa hızı performans raporlamanızı otomatikleştirin.
Chrome, daha çok değil, daha akıllıca çalışmanıza olanak tanır. Geliştiriciler çok zaman kazandırır ve Canary ile teknik SEO denetimleri gerçekleştirirken siz de kazanabilirsiniz.
Sentetik Test İçin Zaman Çizelgesi İzlerini Otomatikleştirin
Sentetik testler, farklı tarayıcılardan, cihazlardan ve ağlardan alınan zaman çizelgesi izleme kayıtlarıdır.
Sentetik, kullanıcınızın gerçek dünya deneyimi için performans testini simüle eder.
Kaydedici Panelinde kullanıcı akış kayıtlarını ayarlayın ve komut dosyasını bir Web Sayfası testine aktarın. WebPage Test Recorder uzantısı aracılığıyla özel Kaydedici komut dosyalarını dışa aktarabilirsiniz .
Chrome Canary’de Web Platformu API Testi
Chrome mühendislik ekibi, deneysel API’ler yayınlar.
Üçüncü taraf araçlar ve işletmeler, yeni özellikleri test etmek için bunlara güvenir. Menşe Denemeleri, Özellik Bayrakları gibidir; kapanırlar ve her zaman Kararlı Chrome’a ulaşmazlar.
Özellik teklifi belgeleri bağlam sağlar ve kullanıcılara nasıl yardımcı olabileceklerini açıklar.
Chrome Özellik İşaretlerinin ve API’lerin durumunu chromestatus.com adresinden kontrol edin .
Geliştiriciler , otomatikleştirilmiş web performansı testi için API’leri kullanır . Gerçek Kullanıcı İzleme (RUM) analiz sağlayıcıları, gerçek kullanıcıların CWV’lerini izlemek ve raporlamak için Chrome’un API’lerini kullanır.
Chrome, Chromium açık kaynak projesi üzerine kurulmuştur ve hatalar, Chromium hata izleyicide izlenir .
Sorunsuz Sayfa Gezinmesi İçin Geri/İleri Önbellek Testi
Modern tarayıcılar yakın zamanda yeni bir önbellek türü kullanarak sayfaları daha hızlı yükleyen bir özellik ekledi.
Geri/İleri (bfcache) önbelleği, ziyaret ettiğinizde tarayıcının belleğindeki sayfanın anlık görüntüsünü yakalar.
Sunucunuza yeni bir ağ isteği yapmadan sayfaları yeniden yükler.
Sitenizde daha önce ziyaret edilen bir sayfaya geri dönen kullanıcılar, daha hızlı bir sayfa yükleme deneyimi elde eder. Bfcache’ten yükleme, ziyaretçinizi fazladan veri indirmekten kurtardığı için geleneksel HTTP önbelleğinden daha hızlıdır.
Chrome 96 Kararlı sürüm, Uygulama panelinde bfcache testini gönderdi. Geri/İleri önbelleğe almanın dağıtılıp dağıtılmadığını sayfaları kontrol eder.
Bfcache Tarayıcı Özelliğinden Analitik Raporlama Eksikliğini Düzeltme
bfcache tarayıcı optimizasyonu otomatiktir, ancak CWV’yi etkiler . Bir sayfa kendi bfcache’inden yüklendiğinden, analiz araçları sayfa görüntülemelerini eksik bildirebilir.
Analitiğiniz, bir sayfanın bfcache’ten ne zaman yüklendiğini algılayacak şekilde ayarlandı mı?
Önemli sayfalarınızın onu sunduğundan emin olmak için web sitenizi bfcache için test edin.
Sayfalarınız artık bfcache’ten sunulmadığında bir göz atın.
Geri/İleri Önbellek Test API’sinde Yeni Güncelleme
Yeni NotRestoredReason API özelliği, bfcache sorunları için hata raporlamayı iyileştirir. Bir sayfanın neden önbelleği geri gelen ziyaretçilere sunmadığını anlamaya yardımcı olur.
API, Kararlı Chrome 111 ile birlikte gönderilir.
Performans API’si ile İşleme Engelleme Kaynaklarını Belirleme
RUM araçlarının, bir kaynağın işlemeyi engelleyip engellemediğini kontrol etmenin basit bir yolu yoktu .
Chrome 107, Performans API’si için oluşturmayı engelleyen kaynakları tanımlayan yeni bir özellik sağladı . Bu güncelleme, RUM kullanıcılarının zamandan tasarruf etmesine ve oluşturma yollarını optimize etmesine yardımcı olur.
Performans Paneli, bir sitenin yüklenmesini geciktiren CSS gibi işlemeyi engelleyen kaynakların belirlenmesine yardımcı olur.
Bir tarayıcı bir stil sayfasıyla karşılaştığında, dosyayı okumayı bitirene kadar sayfanın yüklenmesini bekler. Bir tarayıcının bir web sitesini oluşturabilmesi ve boyayabilmesi için bir sayfanın düzenini ve tasarımını anlaması gerekir.
Geliştiriciler, web sitesi yavaşlamalarını önlemek için yeniden hesaplama, stil ve yeniden boyama işlemlerini en aza indirmeye yardımcı olabilir.
Kaynak Zamanlama API’sı İçin İyileştirilmiş HTTP Yanıt Durum Kodları Raporlaması
Resource Timing API, başarısız yanıt kodu raporlamasını desteklemiyordu. Chrome 109, HTTP yanıt kodlarını yakalayan yeni bir Performance API özelliğiyle birlikte gönderilecek.
Geliştiriciler ve SEO’lar artık RUM analizlerini 4XX ve 5XX yanıt kodlarıyla sonuçlanan sayfa ziyaretleri için bölümlere ayırabilir .
Önemli Web Verilerinin Geleceği Burada
Google , arama motoru pazar payının %86’sına sahiptir ve Chrome , küresel tarayıcı pazar payının %66’sına sahiptir.
Google, bir web sayfasındaki kullanıcı deneyimini ölçmeye yardımcı olmak için web performansı Core Web Vitals (CWV) metriklerini 2020’de kullanıma sundu.
İlk Giriş Gecikmesi (FID), bir sayfanın etkileşimini ölçen bir CWV’dir.
Bir metrik olarak ilk kullanıma sunulduğundan beri, insanlar web sitelerinin FID’sini geliştiriyor ve bugün onu eziyorlar. Artık web sitelerinin %92’si mobil kullanıcılar için ve %100’ü masaüstü kullanıcıları için iyi bir FID puanına sahip.
Ancak FID yalnızca ilk kullanıcı etkileşimini test eder. İlk sayfa yüklemesinin ötesindeki kullanıcı deneyimini ölçmez.
Jeremey Wagner’e göre,
“Chrome kullanımı, bir kullanıcı etkinliğinin %90’ının ilk sayfa yüklemesinden sonra gerçekleştiğini gösteriyor.”
Google kısa bir süre önce Google I/O 2022’de deneysel Interaction to Next Paint (INP) metriğini başlattı ve yakında CWV etkileşim alanı metriği olarak FID’nin yerini alabilir.
INP, etkileşimli kullanıcı deneyiminin daha doğru bir resmini çiziyor. Tıklama, dokunma, klavye ve kaydırılan sekme etkinliğini yakalar ve ayrıca meydana gelen herhangi bir etkileşim için sayfanın ortalama yanıt süresini ölçer.
HTTP Arşivi, INP ile FID üzerinden daha güçlü bir Toplam Engelleme Süresi (TBT) korelasyonu bildirdi.
Google, INP üzerinde denemeler yapmaya ve hassaslaştırmaya devam ediyor.
INP için optimize edilmiş siteler, Google FID’yi geçtiğinde rekabet avantajına sahip olacaktır.
Web siteniz, INP’nin bir CWV haline gelip sıralamayı etkilemesi için hazır mı?
SEO için Chrome Canary Kullanımına İlişkin Kapanış Düşünceleri
İyi performans göstermesi ve kullanılabilirlik açısından yüksek puan alması için bir sitenin hızlı görünmesi, hissedilmesi, gezinmesi, hızlı yüklenmesi ve aynı zamanda erişilebilir olması gerekir. Keyifli tasarım ve hızlı tarama, aramada daha iyi görünürlük sağlar.
Artık daha iyi görünen web siteleri görüyoruz, ancak bu bazen iyi bir kullanıcı deneyimi pahasına olabiliyor. Geliştirme ekiplerinin, şişirilmiş web sitelerini göndermenin çevresel maliyetini göz önünde bulundurması gerekir.
Bir web sitesi, geliştiricilerimizin onları oluşturduğu şekilde yüklenir.
Geliştiriciler tasarım, içerik, performans, erişilebilirlik, çerçeveler, ağlar ve cihazları hesaba katmalıdır. Pazarlama, yönetim ve SEO önceliklerini dengelerken siteler oluşturmaları gerekir.
SEO uzmanları ve geliştiricileri, daha iyi web sitesi performansı sağlamak için birlikte çalışabilir . Google’ın kullanıma hazır araçları, teknik SEO denetimi için harika bir başlangıç noktası sunar.
DevTools, hata ayıklama ve sorun giderme süresini kısaltmaya yardımcı olurken, Canary tarayıcı otomasyonu ile CWV raporlamasını kolaylaştırmanıza olanak tanır.
SEO sorunlarını hemen düzeltmeye başlamak için geliştiricilerinizin ihtiyaç duyduğu verileri bulun ve paylaşın.