DevTools Nedir?

SEO çalışmalarında başarıya ulaşmak, yalnızca doğru anahtar kelimeleri hedeflemek ve kaliteli içerikler üretmekle sınırlı değildir. Aynı zamanda teknik altyapının da kusursuz olması büyük önem taşır. Bu noktada site hızı, SEO için kritik bir faktördür. Kullanıcı deneyimini en üst düzeye çıkarmak ve hızlı açılış sayfaları sunmak, başarılı bir web sitesi için temel unsurlardır.

Web sitenizde veya sayfalarınızda detaylı Teknik SEO analizi yapmak için Chrome DevTools en iyi araçlardan biridir. Web sitenizin mevcut performans sorunlarını tespit edip gerekli aksiyonları almanıza yardımcı olan bu araç aynı zamanda sitenizin hızını ve genel performansını önemli ölçüde artırmanıza olanak tanır.

Bu yazılarımızda Chrome DevTools aracından Teknik SEO ipuçlarını ele alacağız.

DevTools Kullanımı Ne İşe Yarar?

• Web sitenizde yer alan CSS’in düzgün çalışıp çalışmadığını tespit ederek gerekli aksiyonları alabilirsiniz.
• Web sitenizde yer alan dosyalarının boyutlarını önerilen size’a göre küçültme işlemi gerçekleştirebilirsiniz.
• Web siteniz için Console, Network, Sources gibi tabları kullanarak analizler gerçekleştirerek gerekli aksiyonları alabilirsiniz.
• Web siteniz için analiz özellikleri çözümlemeleri ve programın size önereceği düzeltmeleri sağlayarak sitenizde sürekli güncellenen, yenilenen ve daha sağlıklı bir altyapı olmasını sağlayabilirsiniz.
• Web sitenizde yer alan JavaScript kodlarının düzgün çalışıp çalışmadığını tespit edebilir hataları anında Console sekmesinden izleyebilirsiniz.
• JavaScript performansını analiz ederek yavaşlayan fonksiyonları tespit edebilir ve site hızını artırmak için gerekli iyileştirmeleri yapabilirsiniz.
• Web sitenizde gereksiz yer alan JavaScript kodlarını tespit ederek gerekli aksiyonları alabilirsiniz.
• Web sitenizde yaşanan SSL güvenlik sorunları gibi konuları analiz edebilirsiniz.
• Web sitenizin mobil uyumluluğunu test ederek farklı cihazlarda nasıl göründüğünü kontrol edebilir ve gerekli düzenlemeleri yapabilirsiniz.
• Core Web Vitals metriklerini inceleyerek web sayfalarınızın LCP, FID, ve CLS gibi performans ölçütlerini analiz edebilir ve iyileştirmeler yapabilirsiniz.

DevTools Teknik SEO İpuçları

1-) Device Mode

SEO sadece masaüstü versiyonuyla ilgili değil aynı zamanda “Mobile First İndexing” mobil öncelikli indeksleme algoritma güncellemesi ile birlikte mobil uyumluluk dahada önemli bir sıralama faktörü haline gelmiştir. DevTools aracından “Device Mode” alanını kullanarak web sitenizin mobil cihazlarda nasıl göründüğünü hızlıca test edebilir, sayfalarınızın mobil uyumlu olup olmadığını kontrolünü sağlayabilirsiniz.

2-) HTTP Status Code

Web sitenizin veya sayfalarınızın performansını düşüren en önemli konulardan biride durum kodlarıdır. DevTools aracından web sayfalarınız yüklenirken sunucunun tarayıcıya hangi durum kodu ile yanıt verdiğini görebilirsiniz. Bu sayede sayfanızda hangi durum kodlarının çalıştığını tespit edebilir “filter” kısmından sadece görmek istediğiniz durum kodlarını görüntüleyebilirsiniz. Bu analizi gerçekleştirebilmek için şu adımları izleyebilirsiniz;

• DevTools açın.
• “Network” sekmesine tıklayın.
• Sayfayı yenileyin.
• Durum kodlarını kontrol edin.

3-) Elements

SEO için en doğru ve sade bir HTML yapısına sahip olmak önemlidir. Elements sekmesi sayesinde sayfanızın HTML yapısını inceleyebilir. Bu kısımda sayfanızın title, meta description, heading, noindex, nofollow ve görsel alt etiketleri gibi analizleri gerçekleştirerek sayfanızın eksikliklerini tespit edebilirsiniz. Ek olarak HTML kodu içerisinde arama yapmak için CTRL + F tuşlarına basarak “Filter” kısmından ulaşmak istediğiniz koda hızlıca ulaşabilirsiniz.

4-) Xpath Veri Çekme

SEO çalışmalarında bazen birden fazla sayfa veya veri çekmeniz gerekebilir. Bu tür durumlarda özellikle belirli verileri veya sayfaları toplu bir şekilde çekebilmek için XPath kullanımı oldukça faydalıdır. DevTools’un HTML Elements sekmesi üzerinden XPath kullanarak web sayfalarında yer alan çoklu içerik yapıları sayfa blokları veya tekrar eden alanlara kolayca erişebilir ve bu alanları detaylı şekilde inceleyebilirsiniz.

5-) HTTP Protocol 

Sayfanızda bulunan kaynakların hangi protokolü kullandığını tespit edebilirsiniz. Genellik HTTP/1 ya da HTTP/2 protokolleri kullanılırken sayfa hızı ve performansı açısından HTTP/3 protokolü kullanılması önerilmektedir. HTTP protokol kontrolünü yapmak için şu adımları izleyebilirsiniz;

• DevTools açın.
• “Network” sekmesine tıklayın.
• Sayfayı yenileyin.
• “Name” alanından sağ tık yaparak “Protocol” seçeneğini ekleyin.

6-) Lighthouse

Kullanıcı deneyimini arttırmak, kullanıcılara hızlı açılış sayfalarını sunmak ve hız bakımından site performansı SEO açısından oldukça önemlidir. DevTools’da yer alan “Lighthouse” alanından web sitenizin veya sayfalarınızın mobil veya masaüstü hız performansını analiz edebilir. Bu analiz sonucunda web sitenizde iyileştirmek için yapılması gerekenlerin listesini oluşturabilirsiniz. Lighthouse analizi yapmak için şu adımları izleyebilirsiniz;

• DevTools açın.
• “Lighthouse” sekmesine tıklayın.
• “Analyze Page Load” butonuna tıklayarak analizi başlatın.

7-) Dosya Türleri

Web sayfanızda yüklenen kaynakların türlerini analiz edebilirsiniz. CSS, Javascript ve görsel gibi dosyalarınızı analiz ederek web sayfanızın yüklenme sırasında hangi dosya türlerinin daha çok kullanıldığını ve bu dosyaların performanslarını inceleyebilirsiniz. Dosya türlerini incelemek için şu adımları izleyebilirsiniz;

• DevTools açın.
• “Network” sekmesine tıklayın.
• Analiz etmek istediğiniz dosya türünü seçin.

8- ) CSS Kodları

Element alanında sağ tarafta yer alandan sitenizin CSS kodlarını görebilirsiniz. Analiz etmek ve düzenlemek istediğiniz CSS kodlarını “Style” alanından sağlayabilirsiniz veya “Sources” alanından dosya olarak analiz ve düzenlemeler yapabilirsiniz.

9-) Kullanılmayan Javascript ve CSS Dosyaları

Web sitenizin veya sayfalarınızın hızını en fazla etkileyen unsurlardan bir tanesi de kullanılmayan Javascript ve CSS dosyalarıdır. Bu dosyaları tespit etmek ve gerekli optimizasyonları sağlamak sayfa hızı performansı açısından önemlidir. DevTools aracında bulunan “Coverage” aracı sayesinde kullanılmayan Javascript ve CSS dosyalarını tespit edebilirsiniz. Bu dosyaları analiz ermek için şu adımları izleyebilirsiniz;

• DevTools açın
• Sağ üst köşedeki üç nokta menüsüne tıklayın ve More Tools alanından “Coverage” seçeneğini tıklayın.
• “Network” sekmesine tıklayın buradan aşağıdaki consolu yukarı kaldırın
• “Coverage” sekmesine tıklayın ve “Start Recording” butonuna tıklayın

Coverage aracını başlattığınızda JavaScript ve CSS dosyaları listelenir. “Usage Visualization” alanında kırmızı renkle vurgulanan kısımlar ilgili kod parçalarının kullanılmadığını ve potansiyel olarak kaldırabileceğini ifade etmektedir.

10-) Güvenlik Sorunlarını Analizi

Web sayfalarınızın güvenliği hem Google hemde kullanıcılar için önemlidir. SSL sertifikası olmayan siteler Google tarafından güvensiz siteler arasında yer almaktadır. DevTools aracının “Security” panelinde HTTP kaynakları ve SSL sertifikalarıyla ilgili neden sayfanın güvensiz olduğunu kolayca tespit etmenizi sağlar. “Security” paneli sayesinde SSL sertifikalarının durumunu, güvenlik uyarısı ve şifreleme türlerini detaylı olarak görebilirsiniz. Web sayfanızda ki güvenlik sorunların analiz etmek için şu adımları izleyebilirsiniz;

• DevTools açın
• Sağ üst köşedeki üç nokta menüsüne tıklayın ve More Tools alanından “Privacy and Security” seçeneğini tıklayın.
• “Privacy and Security” sekmesine tıklayın.

11-) Core Web Vitals

Core Web Vitals bir web sayfasının yüklenme hızı, etkileşim süresi ve görsel kararlılık gibi faktörleri ölçerek sayfanın kullanıcı deneyimi ve performans kalitesini değerlendiren önemli metrikler bütünüdür. DevTools sayesinde FCP, FID ya da LCP gibi metrikleri analiz ederek sayfanızın performansını arttırabilirsiniz. Core Web Vitals metriklerini analiz etmek için şu adımları izleyebilirsiniz;

• DevTools açın.
• “Performance” sekmesine tıklayın.
• “Analyze Page Load” butonuna tıklayarak analizi başlatın.
• “Next steps” ekranın en altından “Record and reload” butonuna tıklayın.

12-) Site Verilerini Temizleme

SEO çalışmaları kapsamında teknik geliştirmeler ve düzenlemeler yapıldıktan sonra, gerekli kontroller ve testler sırasında eski önbellek verilerinin ve site verilerinin test sonuçlarını etkilememesi için bu verilerin temizlenmesi gerekmektedir. DevTools aracında yer alan “Clear Site Data” işlemini sağlayarak sitenizin temiz bir durumda cache durumu olmadan nasıl performans gösterdiğini test edebilirsiniz. Ön bellek temizlemesi yapmak için şu adımları izleyebilirsiniz;

• DevTools açın.
• “Applications” sekmesine tıklayın.
• Sol menüden “Storage” alanını seçerek “Clear site data” butonuna tıklayın.

13-) Console ve Javascript Dosyaları

Web sayfanızın hızını ve performansını etkileyen önemli faktörlerden biri de JavaScript dosyalarıdır. Console web sayfası tamamen yüklendikten sonra JavaScript kodunu test etmenize olanak tanır ve hataları tespit etmenize yardımcı olur. Ayrıca JavaScript kodunun çalışmasıyla ilgili günlükler ve hatalar hakkında ayrıntılı bilgiler sunarak sayfaya gömülü JS kodunun düzgün çalışıp çalışmadığını doğrulamanızı sağlar.

14-) Dosya Tipi Sıkıştırma

Web sayfanızda yer alan içeriklerin tarayıcıya iletilirken hangi veri sıkıştırma yöntemi kullandığını tespit edebilirsiniz. Genellikle Gzip kullanılırken, dosya boyutunu azaltmak ve sayfanın yüklenme hızını arttırmak için SEO açısından Brotli sıkıştırma türü önerilmektedir. Web sayfanızda hangi sıkıştırma yöntemi kullanıldığını tespit etmek için şu adımları izleyebilirsiniz;

• DevTools açın.
• “Network” sekmesine tıklayın.
• Sayfayı yenileyin.
• “Name” alanından sağ tık yapın.
• “Response Header” alanından “Content Encoding” seçeneğine tıklayın.

15-) User Agent

Web sayfalarınızın farklı botlar tarafından nasıl göründüğünü tespit ederek sayfa uyumluluğunu ve performansını değerlendirebilirsiniz. DevTools aracından “User Agent” değiştirme özelliğini kullanarak web sayfanızın farklı tarayıcılar ve botlar tarafından nasıl algılandığını test edebilirsiniz. Bu işlemi gerçekleştirmek için şu adımları izleyebilirsiniz;

• DevTools açın.
• Sağ üst köşedeki üç nokta menüsüne tıklayın ve More Tools alanından “Network Conditions” seçeneğini tıklayın.
• “Network Conditions” alanından “User agent” sekmesine gidin.
• Custom alanından istediğiniz User-Agent’ı seçin.
• ‘Network’ sekmesinde sayfayı yenileyin.
• Ana sayfa kaynağını açın ve ‘Headers’ alanına gidin.
• Request Headers’ bölümünün en altında bulunan User-Agent alanını kontrol edin.

16-) Time To First Byte (TTFB) Analizi

Sayfalarınızın yüklenme süresini olumsuz anlamda etkileyen en önemli unsurlardan biride Time To First Byte (TTFB) sunucu yanıt süresidir. TTFB bir kullanıcının web sayfasına giriş yapmak için yaptığı isteğin ardından tarayıcının bu isteğe karşılık olarak sayfayı görüntülemek için sunucudan alması gereken verinin gelmesine kadar geçen süreyi ölçer. Bu süre sunucunun isteğe ve gönderilmesi gereken veriye hızını yansıttığı için site ve sayfa performansları için oldukça kritiktir. Web sitenizin veya sayfalarınızın yanıt süresine en çok etki eden faktörleri tespit ederek, gerekli aksiyon listesini oluşturabilir ve kullanıcı deneyimini arttırabilirsiniz. DevTools üzerinden TTFB analizi gerçekleştirmek için şu adımları izleyebilirsiniz;

• DevTools açın.
• “Network” sekmesine tıklayın.
• “Name” alanından veriyi seçin.
• Açılan ekrandan ‘Timing’ bölümüne tıklayarak ‘Waiting for Server Response’ süresine bakın.

17-) Block Requests ile CSS ve JS Engelleme

Web sayfanızın hızını etkileyen önemli unsurlardan biride CSS ve JS dosyalarıdır. Sayfalarınızda CSS ve JS gibi kaynakları engelleyerek sayfanızın nasıl görüntülendiği bu dosyaların sayfanın yüklenme süresine ne kadar katkı sağladığını tespit edebilirsiniz. Bu yöntem sayesinde sayfalarınızın performansını ve kullanıcı deneyimini nasıl etkilediğini görebilirsiniz. Bu analizi gerçekleştirmek için şu adımları izleyebilirsiniz;

• DevTools açın.
• “Network” sekmesine tıklayın.
• Engellemek istediğiniz kaynağı seçin ve sağ tık yaparak “Block Request URL” seçeneğine tıklayın.

18-) Sayfa Yükleme Performansını Test Etme (Network Throttling)

Network Throttling sayfanızın yüklenme hızını test etmek amacıyla kullanılan bir özelliktir. Bu özellik sayesinde farklı ağ bağlantı hızları örneğin 3G, 4G, Wi-Fi altında sitenizin nasıl performans gösterdiğini test edebilirsiniz. Bu, özellikle mobil kullanıcılar ve düşük hızlı internet bağlantıları için sayfa performansını değerlendirmek açısından çok faydalıdır. Bu özellikleri kullanarak web sitenizin çeşitli ağ koşullarındaki performansını değerlendirerek kullanıcı deneyimini iyileştirebilir sitenizin daha geniş bir kullanıcı kitlesine uyum sağlamasını sağlayabilirsiniz. Bu analizi gerçekleştirmek için şu adımı izleyebilirsiniz;

• DevTools açın.
• “Network” sekmesine tıklayın.
• ‘Network Throttling’ seçeneğini bulun istediğiniz ağ hızını seçerek testlerinizi gerçekleştirin.

19-) Erişilebilirlik Testi (Accessibility) 

Bir web sitenin veya sayfanın erişebilirliği hem tüm kullanıcılar hemde SEO açısından oldukça önemlidir. Erişilebilirlik özelliklede engelli bireyler tarafından web sitenin veya sayfanın kullanılabilir olmasını sağlar. Google arama motorları erişilebilir siteleri daha kullanıcı dostu ve kaliteli olarak değerlendirir. Web sitenizde veya sayfalarınızda yaşanan erişebilirlik sorunlarını tespit etmek için şu adımları izleyebilirsiniz;

• DevTools açın.
• “Lighthouse” sekmesine tıklayın.
• “Accessibility” seçeneğini seçin ve analizi başlatın.

20-) Cookie Yönetimi ve Analizi

Web sitelerinde kullanılan çerezler (cookies), özellikle Google’ın getirdiği Consent Mode ile birlikte daha önemli bir hale gelmiştir. Bu özellik verilerin yalnızca çerezleri kabul eden kullanıcılar üzerinden toplanmasını sağlar. Eğer kullanıcılar çerezleri kabul etmezse Google’ın izleme araçları GA4 vb. verileri sınırlı bir şekilde toplar. Bu durum organik trafik verilerinin tam olarak izlenememesi ve doğru analiz yapılamaması nedeniyle SEO stratejilerinin etkili bir şekilde uygulanmasını zorlaştırmaktadır. DevTools aracından çerezler (cookies) doğru bir şekilde uygulanıp uygulanmadığını kontrol etmek için şu adımları izleyebilirsiniz;

• DevTools açın.
• “Application” sekmesine tıklayın.
• “Cookies” başlığını seçin.

21-) Yavaş Yüklenen Kaynakları Tespit Etme

Web sayfalarının yavaş yüklenmesinin sebeplerinden biride sayfanın ihtiyacı olduğu CSS, JavaScript, Görseller gibi kaynakların yavaş yüklenmesidir. Yavaş yüklenen bu kaynaklar sayfa hızını düşürmenin yanı sıra kullanıcı deneyiminde olumsuz etkileyerek kullanıcıların sayfadan hızlıca çıkmasına yol açar. hemen çıkma oranını (bounce rate) artırır. DevTools aracından bu kaynakları analiz etmek için şu adımları izleyebilirsiniz;

• DevTools açın.
• “Network” sekmesine tıklayın.
• Sayfayı yenileyin.
• “Name” alanından sağ tık yaparak “Time” seçeneğini ekleyin.

22-) CSS Genel Bakış

Web sitenizde veya sayfalarınızda bulunan karmaşık CSS dosyalarında zaman zaman sayfalarınızın yavaş yüklenmesine sebep olabilir. DevTools’da yer alan “CSS Overview” sayesinde renkler, yazı fontları, stil bilgiler hakkında detaylı bilgi edinebilirsiniz. Bu bilgiler sayesinde web sitenizde veya sayfanızda renklerin ve fontların sitenizde nasıl dağıldığını en çok kullanılan CSS özelliklerini ve potansiyel aşırı kullanımları tespit edebilirsiniz. Bu analizi gerçekleştirmek için şu adımları izleyebilirsiniz;

• DevTools açın.
• Sağ üst köşedeki üç nokta menüsüne tıklayın ve More Tools alanından “CSS Overview” seçeneğine tıklayın.
• “CSS Overview” sekmesine tıklayın.
• “Capture Overview” butonuna tıklayarak analizi başlatın.

23-) Önbellek Kontrolü

Web sayfalarının hızlı yüklenmesi için önbellek (cache) kullanımı oldukça önemlidir. Kullanıcılar bir sayfayı ziyaret ettiğinde sayfa üzerindeki görseller, CSS ve JavaScript dosyaları gibi kaynaklar önbelleğe alınır. Bu sayede kullanıcı aynı sayfayı tekrar ziyaret ettiğinde kaynaklar önbellekten çağrılır. Bu işlem sayfa yükleme hızını artırırken, sunucu üzerindeki yükü azaltır ve kullanıcı deneyimini iyileştirir. DevTools aracı sayesinde önbellek devre dışı bırakarak sayfanın nasıl yüklendiğini gözlemleyebilirsiniz. Bu analizi gerçekleştirmek için şu adımları izleyebilirsiniz; 

• DevTools açın.
• “Network” sekmesine tıklayın.
• “Disable Cache” kutucuğunu işaretleyin.
• Sayfayı yenileyin.
• Bir kaynak seçin.
• “Request Headers” başlığında yer alan “Cache Control” alanını kontrol edin.

24-) JavaScript Devre Dışı Bırakma

Google arama motorlarının web sitenizi veya sayfalarınızı tararken karşılaştığı en büyük zorluklardan biride JavaScript dosyalarıdır. JavaScript dosyaları karmaşık yapısı nedeniyle ayrıştırılması ve işlenmesi zordur. DevTools aracı sayesinde tüm Javascript dosyalarını devre dışı bırakarak bir sayfanın nasıl yüklendiğini ve etkileşimli öğelerinin JavaScript olmadan nasıl çalıştığını tespit ederek gerekli aksiyonları alarak sitenizin veya sayfalarınızın hızlı yüklenmesini sağlarken kullanıcı deneyiminde iyileştirebilirsiniz. JavaScript devre dışı bırakmak için şu adımları izleyebilirsiniz;

• DevTools açın.
• Sağ üst köşedeki üç nokta menüsüne tıklayın ve More Tools alanından “Run Commad” seçeneğine tıklayın.
• “Disable JavaScript” aratın ve seçin.
• Sayfayı yenileyin.

25-) Recorder

Web sitenizin veya sayfalarınızın kullanıcı deneyimi (UX/UI) geliştirmek için analizler yaparak bu analizler doğrultusunda iyileştirmeler gerçekleştirebilirsiniz. Bu iyileştirmeler kullanıcıların sayfanızla daha fazla etkileşimde bulunmasını sağlayarak kullanıcı deneyimini de iyileştirir. DevTools aracında bulunan “Recorder” özelliğini kullanarak sayfanızda yapmış olduğunuz etkileşimleri kaydedebilirsiniz. Bu etkileşimler sayesinde kullanıcıların sayfanızla nasıl etkileşime girdiğini ve hangi öğeleri kullanıp kullanamadığını görebilirsiniz. Kayıtlarınızı aldıktan sonra “Show Code” bölümünden bu etkileşimleri JSON formatında görüntüleyebilir ve kod seviyesinde detaylı inceleme yapabilirsiniz. Bu analizi gerçekleştirmek için şu adımları izleyebilirsiniz;

• DevTools açın.
• Sağ üst köşedeki üç nokta menüsüne tıklayın ve More Tools alanından “Recorder” seçeneğine tıklayın.
• “Recorder” sekmesinden “Create Recording” butonuna basın ve kaydı başlatın.
• “Show Code” alanından yaptığını etkileşimleri JSON formatında inceleyin.

 

Furkan Ersin | Seo Executive