Google Lighthouse aracı, web sitelerin mobil versiyonunu denetlemek adına geliştirilmiş bir araçtır. Site içi SEO çalışmalarında, en iyi şekilde optimizasyon yapmaya yardımcı olmasından dolayı son zamanlarda popüler hale gelmeyi başardı.

Mobil site performansını denetlemek adına geliştirilmiş olan çok sayıda online araç vardır. Buna rağmen Google Lighthouse yapılabilecek iyileştirmeler hakkında bilgi verdiği için tam bir optimizasyon rehberidir ve diğer araçlara göre daha fazla tercih edilmektedir.

Yapılacak iyileştirmeler hakkında Türkçe desteğinin olmamasından dolayı Google Lighthouse aracında karşınıza çıkacak iyileştirmeler hakkında sizlere bilgi vereceğiz. Web site kalitesini arttırmak istiyorsanız Google Lighthouse kullanım rehberi işinize çok yaracaktır.

Google Lighthouse Nedir?

Google Lighthouse, web site sahiplerinin web sitelerini ve uygulamalarını iyileştirebilmesi adına geliştirilmiş olan açık kaynaklı bir araçtır.

Google Lighthouse üstünden yapılan analizler sonucunda aşağıda yer alan konular hakkında bilgiler alınmaktadır.

  • Web Performance (Sayfa yükleme hızı)
  • Progressive Web App
  • Accessibility (Erişilebilirlik)
  • Best Practices (En iyi uygulamalar)
  • Search Engine Optimisation (SEO, arama motoru optimizasyonu)

Lighthouse Tool ve Pagespeed Insights Tool Arasındaki Farklar

Webmasterlar sürekli olarak web site hızını analiz etmek için Pagespeed Insights Tool kullanımını önerse de Lighthouse Tool popüler hale geldiği için iki araç arasındaki farklar merak edilmektedir. Bu iki araç arasındaki en büyük farkın verilen sınırlı bilgiler olduğunu söyleyebiliriz.

Lighthouse Tool taramasında elde edilen bilgiler aşırı derecede fazlayken Pagespeed Insights Tool üstünden alınan bilgilerin sınırlı olduğu söyleyebilir. Aralarında olan farkları ele alarak Lighthouse aracını daha iyi anlamanızı sağlayacağız.

1. Optimizasyon puanları

Pagespeed Insights aracı, analiz yapılan sayfalara odaklanarak ilgili sayfaların masaüstü ve mobil versiyonları hakkında bilgi vermektedir. Kesinlikle gerçekte olan sayfa hızına dair bilgileri hesaba katmamaktadır.

Birçok platformda gerçekte olan sayfa hızının hesaba katıldığı söylense de bu sadece en iyi sıralamaya sahip olan 3 milyon site için verilen değerleri kapsamaktadır. Az trafiğe sahip olan web sitelerde Pagespeed Insights aracı kullanarak gerçekte olan, kullanıcı deneyimine dayalı sayfa yükleme hızı hakkında bilgi alınması mümkün değildir.

2. Optimizasyon önerileri

Pagespeed Insights aracıyla web site sayfa yükleme hızı analizi yapılınca, sayfa yükleme hızını arttırmak için nelerin yapılabileceği hakkında sınırlı sayıda bilgi verir.

Google Lighthouse aracında ilgili durum tamamen farklıdır. Lighthouse aracı gerçek zamanlı web site analizi konusunda kesinlikle en iyi araçtır. Ayrıca sorunlarla alakalı güncel öneriler sunarak webmasterların web site üstünde iyileştirme yapmasına olanak tanır.

Google Lighthouse Nasıl Çalışır?

Lighthouse aracı, belirlenen URL’yi çeşitli kriterlere göre analiz eder ve bu doğrultuda 100 üzerinden çeşitli puanlama yapar. Verilen puanlar ne kadar iyi olursa web site performansının o kadar iyi olduğu söylenebilir.

Sizler de web sitenizi Lighthouse üstünden taramak istiyorsanız öncelikle olarak Google Chrome tarayıcınızı açın ve web sitenize giriş yapın. Daha sonra “F12” tuşuna basın.

Lighthouse perform an audit

Karşınıza çıkan pencerede yer alan “perform an audit” butonuna tıklayın.

Lighthouse run audit

Görselde yer aldığı gibi tüm kutucukları işaretleyip “run audit” butonuna basın.

Bu işlem sonrasında sistem ilgili sayfayı tarayacak ve çalışmalarınız doğrultusunda sizlere çeşitli başlıklar altında puan verecektir.

Aşağıdaki görselde bizim web sitemiz için verilen puanlama yer almaktadır. Sizler de yaptığınız analiz sonucunda böyle bir puanlamayla karşı karşıya kalacaksınız.

Lighthouse puanlama

Puanlama menüsünün hemen alt kısmında web site sahiplerinin puanlamayı arttırmak adına neler yapabilecekleri konusunda bilgiler yer almaktadır. Bu rapor sayesinde odaklanmanız gereken kısımların neler olduğunu öğrenebilirsiniz.

Lighthouse optimizasyon bilgileri

Birçoğumuz Google odaklı SEO çalışmaları yapıyoruz. Lighthouse bir Google aracı olduğu için buradan alacağınız optimizasyon önerileri site sağlığını geliştirmek adına önemlidir. Kullanıcı deneyimini arttırarak serp sonuçlarında iyi sıralamalar almak için uygulanabilirlik çerçevesinde gerekli olan tüm iyileştirmeleri yapmanızı tavsiye ederiz.

Google Lighthouse Teknik SEO Aracıdır

Google Lighthouse aracı, web sitelerin sahip olduğu teknik sorunlar hakkında en ayrıntılı bilgiyi veren bir araçtır. Bu özelliğinden dolayı en iyi teknik SEO aracıdır diyebiliriz.

Yaptığımız analizler sonucunda elde ettiğimiz tüm bilgileri değerlendirdik. Bu aracı ilk defa kullanacak olan kişiler için ne kadar yararlı olduğunu anlatmak adına tüm alt başlıkları açıklıyoruz.

1. Performance (Sayfa Yükleme Hızı)

Performans kısmı, bizlere sayfa yükleme hızının ne kadar olduğu hakkında bilgi vermektedir. Sayfanın hızlı bir şekilde yüklenmesi kullanıcı deneyiminin artmasını sağlar. Bu da olumlu sıralama sinyallerinin gönderilmesine yardımcı olur.

Serp sonuçlarında iyi sıralamalar almak için Google Lighthouse aracında özellikle performance kısmı özen gösterilerek ele alınmalıdır.

Lighthouse performance

Yaptığınız analiz sonrasında Performance başlığı altında bazı metriklerle karşılaşacaksınız. Karşılaşma ihtimalinizin yüksek olduğu bazı değerlerin neler olduğuna aşağıdan ulaşabilirsiniz.

First meaningful paint: bu kısım sayfanın ilk yükleme görüntüsünü ifade eder. İlk yükleme görüntüleri arasında butonlar, görseller, çerçeveler ve renkler gibi öğeler yer almaktadır. İlk görüntünün geç gelmesi uzun süre beyaz ekranla karşılaşılmasına neden olur. Bu tip durumlarda kullanıcı sayfayı terk eder. Bu etkisinden dolayı ilk yükleme görüntüsünün hızlı olması önemlidir.

First Interactive: beta aşamasında olan bu kısım zamanla daha detaylı hala gelecektir. Bu kısım kullanıcı ara yüz öğelerinin ilk yüklenme hızını ifade eder.

Consistently Interactive: bu kısım da beta aşamasındadır. İnteraktif ve kullanıcı ara yüzü öğelerinin tam olarak yükleme zamanını ölçer. Yüksek Performance puanı almak için ilgili yüklemenin kesinlikle hızlı gerçekleşmesi gerekmektedir.

Perceptual Speed Index: bu kısım algısal hız olarak tanımlanır. Sayfa içeriğinin tamamının yükleme hızını ifade eder. Sayfa ne kadar hızlı yüklenirse performance puanı da o kadar yüksek olacaktır.

Estimated Input Latency: ilgili kısımda web sitenin kullanıcılara ne kadar sürede cevap verdiği ifade edilmektedir. Eğer cevap 50 milisaniyeden daha uzun sürede gerçekleşiyorsa bu durum sayfada gecikmelerin olduğunu gösterir.

Offscreen Images: ekran görüntülerinin performansının değerlendirildiği bölümdür. İlk karşılaşılan ekran dışındaki görsellerin yüklenmesini ertelemek sayfa yükleme hızını arttıracaktır. Web sitenizde lazy-load sistemini aktif etmeniz görünür ekranın altında yer alan resimlerin daha sonra yüklenmesini sağlayacaktır.

Serve Images in Next-Gen Formats: web sitede yer alan görsellerin JPEG ve PNG uzantıları yerine JPEG 2000, JPEG XR ve WebP formatlarında yüklenmesi sayfa açılış hızını arttırmaktadır. Bu kısımda sayfa yükleme hızının düşmesine neden olan JPEG ve PNG formatındaki görseller birer hata olarak gösterilir. JPEG 2000 gibi dosyaları bazı internet tarayıcıları desteklemediğinden dolayı tarayıcılara çeşitli eklentilerin yüklenmesi gerekebilir.

Enable text compression: metinsel öğelerin kodlamasının ve aktarım boyutunun optimize edilmesi anlamına gelir. Bu kısımda yer ala yükleme değerlerini iyileştirmek için gzip kullanabilirsiniz. Bu kısım CSS ve Javascript dosyalarının da sıkıştırılmasının gerekli olduğunu ifade eder.

Unused CSS rules: bu kısımda web sitede yer alan kullanılmayan CSS dosyaları ile alakalı uyarılar yer alır. Kullanılmayan CSS dosyaları sorgu sayısının ve indirme boyutunun artmasına neden olur. Performance puanını arttırmak için kullanılmayan CSS dosyalarının kaldırılması önerilir.

Redure render-blocking stylesheets: ilk sayfa yüklemesinde gerekli olmayan CSS kodları varsa bu durum sayfanın geç yüklenmesine neden olur. Bu tip sorunlar için ilk etapta kullanılmayan style dosyalarınıza defer eklemesi yapabilirsiniz. Böylelikle sayfa yükleme hızınız büyük oranda artacaktır. Yapılan defer eklemesi kesinlikle kullanıcı deneyimini düşürmemelidir. Bu yüzden ilgili CSS dosyalarının ilk yüklemede gerekli olup olmadığını iyi bir şekilde saptayın.

Minify Javascript: sıkıştırılmayan Javascript dosyalarının olması sayfa yükleme hızının artmasına neden olur. Bu kısımda sıkıştırılmamış olan Javascript dosyaları gösterilir. Sorun teşkil eden bu dosyaları Minify yapmanızı tavsiye ederiz.

2. Progressive Web App (PWA)

Progresif Web App, web siteler çevrim dışıyken ilgili web sitelerin kullanılmaya devam etmesini sağlayan sistemdir. Bu uygulamaların hazırlanmasında özel kodlamalar kullanılmaktadır.

Progresif Web App sistemine sahip olan bir web siteye girdiniz zaman karşınıza bu uygulamayı kısal yol olarak eklemek ister misiniz uyarısı gelecektir. Bunu kabul ederseniz ilgili sayfa cihazınıza bir uygulama olarak eklenecektir. Bu sayede internetiniz olmadığı zamanlar bile bu uygulama üstünden ilgili web siteye ulaşabilirsiniz.

Eğer Progresif Web App, sistemini web sitenizde kullanmıyorsanız bu kısımda yer alan puanlamaya pek dikkat etmenize gerek yoktur. Çok yeni bir teknoloji olduğu için zaman içerisinde yaygınlaşacaktır.

3. Accesibility (Erişilebilirlik)

Lighthouse accesibility

Bu kısım aslında kullanıcı deneyimine verilen puanlamadır diyebilir. Kullanıcı deneyimi en önemli sıralama sinyallerinden olduğu için kesinlikle Accesibility yani ulaşılabilirlik bölümünden yüksek puan alınması gerekmektedir.

Web site navigasyonunun olmaması ya da yanlış olması, iç linklemelerin yanlış yapılması, renk kontrastının doğru ayarlanmaması, yazı tipinin ve boyutunun okunabilirliği düşürmesi bu kısımdan düşük puan alınmasına neden olur.

Accesibility bölümünden düşük puan aldıysanız kullanıcı deneyimini arttırmak adına bahsettiğimiz bu şeyler üstünde iyileştirmeler yapmanızı tavsiye ederiz.

Accesibility bölümünden yüksek puan almak için kesinlikle tüm tanımlamaların fark edilebilir düzeyde yapılması gerekmektedir. Ayrıca görsellere alt metin girilmemesi düşük puan alınmasına neden olur. Alt metni olmayan görselleriniz varsa bunlara alt metin girerek puanınızın artmasını sağlayabilirsiniz.

4. Best Practices (En İyi Uygulamalar)

Bu kısımda web sitenizin kodsal anlamda sorunları yer alır ve yapabileceğiniz düzenlemeler hakkında bilgiler verilir.

best practices

Yukarıdaki görselde de göreceğiniz gibi Best Practices kısmında doğru yapılan ve hatalı olan kısımlar yer almaktadır. Sizler de yaptığınız sorgulamalar sonucunda hataların neler olduğuna bakara ilgili hataların ortadan kalkmasını sağlayabilirsiniz.

Best Practices kısmında yapacağınız tüm düzenlemeler web sitenizin güvenirliliğini arttıracaktır. Bu da kullanıcı deneyiminin artıp sıralama için olumlu sinyallerin gönderilmesini sağlayacaktır. Yüksek sıralamalar almak için Best Practices kısmında yer alan hataların giderilmesi önemlidir.

5. SEO (Arama motoru optimizasyonu)

Lighthouse seo

Lighthouse tool içerisinde yer alan SEO başlığı, web sitenin SEO anlamındaki sorunlarını gösterir. Lighthouse tool SEO sekmesini daha iyi anlamanız için ilgili kısımda yer alan uyarılara da değinmek istiyoruz.

  • Yeniden boyutlandırma için “Viewport ” meta etiketinin olması gerekmektedir.
  • İlgili sayfanınetiketi olmalıdır.
  • Taranan sayfanınetiketi olmalıdır.
  • İlgili Sayfanın açılabilir HTTP durum kodu vermesi gerekmektedir. Açılan sayfalarda 200 -> şeklinde http durum kodu yer alır.
  • Sayfada yer alan linkler kırık olmamalı ve görünür bağlantı metni içermeli.
  • İlgili sayfanın robots.txt tarafından engellenmemiş olması gerekmektedir.
  • Taranan sayfada etiketi olmalıdır.
  • Yinelenen içerik söz konusuysa etiketi yer almalıdır.
  • Mobil cihazlarda minimum font boyutu 16px olmalıdır.
  • Sayfaların mobil cihazlarla uyumlu olması gerekmektedir.

Sayfanızı bu uyarılar doğrultusunda düzenleyerek Google Lighthouse SEO puanınızı bizim gibi 100 değerine çekebilirsiniz. Lighthouse üstünden yapacağınız her iyileştirme sizlere olumlu sıralama sinyali olarak geri dönecektir. Bu yüzden vakit ayırıp gerekli düzenlemeleri yapmanızı tavsiye ederiz. Zaman içerisinde beta olan kısımlar aktif edilerek optimizasyon hakkında daha bilgi verici bir sistem haline gelecektir.