Google Lighthouse: Mobil Site Hızınızı Ölçün

Google Lighthouse ile mobil site hızının ölçümü yapılabilmektedir. Aynı zamanda web sitesinin performansı ile ilgili birçok analizin de Google Lighthouse üzerinden yapılabilmesi mümkün olmaktadır. Etkileşime geçme süresi, gecikme, giriş hızı, içerik optimizasyonu, tarayıcı yükleme süresi, içeriğin yüklenmesi, DOM öge boyutları, komut dosyalarının yüklenme süresi gibi performans etkenlerinin analizleri yapılabilmektedir. Mobil uyumlu tarama, meta, genel tarama, kanonik URL yapısı gibi SEO ölçümleri yapılmaktadır. Tarayıcı hata logları, HTTPS desteği, görsellerin optimizasyonu gibi çözümler sunulmaktadır. Mevcut sayfaların elemanlarına, sayfa diline ve zengin attribute HTML ögelerine erişim sağlanabilmektedir.

Google Lighthouse’un kıyaslama ölçütü, diğer araçlar ile kıyaslandığında daha başarılı olmaktadır. Yüksek performans sergileyen ve aynı zamanda modern olan bir web sitesine sahip olabilmek için Lighthouse’un kıyaslama ölçütlerinin sağlanıyor olması gerekmektedir. Bu ölçütlerden birinin başarısız olması durumunda; web sitesinin kritik özelliklerinden biri eksik olmaktadır. Özel ihtiyaçları olan müşterilerin görmezden gelinmemesini sağlamaktadır. Müşterilerin web sitesi ile yaşadıkları deneyim ve sayfa yükleme süresi ile ilgilenen bir araçtır. Performansı etkileyen bu durumlar aynı zamanda arama motoru sıralaması ile de ilgili olmaktadır.

SEO çalışmalarına yeni başlayan veya yeni bir web sitesi kurmuş olan bireylerin SEO çalışmalarını daha doğru yürütebilmeleri için yardımcı bir araçtır. SEO eksiklikleri Google tarafından rapor edilmektedir. Rapor edilen eksiklikler, yönergeler takip edilerek optimize edilebilmektedirler. Potansiyel iyileştirme faaliyetleri, fırsatlar kısmında gösterilmektedir. Tahmini girme gecikmesi, SEO konusunda önemli ölçütler arasında yer almaktadır. Saniyede 60 kare gibi bir ölçümün yapılması durumunda; herhangi bir problem yaşanmamaktadır. SEO stratejisi oluşturulurken esas amacın site hızının optimize edilmesi olması gerekmektedir. Site hızında 100 milisaniyelik bir düşüş, dönüşüm oranını da %7 azaltmaktadır.

Google Lighthouse Ne İçin Kullanılır?

Google Lighthouse aracı; Google’ın geliştirdiği bir araç olarak, Progressive Web Apps’i denetlemek için kullanılmaktadır. 4 farklı alanda değerlendirme sonuçlarına ulaşılabilmektedir. Erişilebilirlik, performans, Progressive Web Apps ve en iyi yöntemlerin gelişmiş listesi; Google Lighthouse ile elde edilebilmektedir. Web site sahipleri bu sayede web sitelerinin kalitesini ve performansını izleyebilmektedirler.

Google Lighthouse ile yapılan hız ölçümleri, algı ve kullanıcı deneyimi ile alakalıdır. Günümüzde her ne kadar 4G bağlantıları hızlı olsalar da; birçok kullanıcı 3G ve daha altında mobil bağlantılar ile dolaşımlarına devam etmektedirler. Web sitesinin yavaş açılması veya yavaş açılıyor hissi uyandırması durumunda; dönüşümler bundan olumsuz etkilenmektedir. Sitenin açılış hızında yarım saniyelik bir fark bile olsa; web sitesi bundan olumlu veya olumsuz olmak üzere çok fazla etkilenmektedir. Bu noktada Google Lighthouse ile yapılan test devreye girmektedir. Kesintili 3G bağlantısı ile web sitesinin hızı test edilmektedir. Daha gerçekçi bir veri elde edebilmek için paket kayıpları da olmaktadır. Test tamamlandıktan sonra web site sahipleri skorlarını ve var olan sorunları çözebilmek için yapmaları gerekenlerin belirtildiği bir tavsiye metnini görmektedirler.

Google Lighthouse’un Özellikleri Nelerdir?

Google Lighthouse’un nitelikleri aşağıdaki gibidir:

• Açık kaynak kodlu bir araç olarak kullanılmaktadır.
• Chrome geliştirici araçları içerisinde Google Lighthouse yer almaktadır. İşlevselleştirilebilen ve otomatik hale getirilmiş olan bir Chrome eklentisi olarak da kullanılabilmektedir.
• PWA olarak kısaltılmış olan Progressive Web Apps’i denetleme görevini üstlenmektedir.
• Web sitesinin çok daha farklı açılardan incelenebilmesine imkan tanımaktadır. Bu sayede web sitesinde yapılması gereken çalışmalar konusunda net bir karara varılabilmektedir.
• Kullanıcı deneyiminin artmasına yardımcı olmaktadır. Bu sebeple site sahiplerinin mutlaka kullanmaları gereken araçlardan biridir.

Google Lighthouse İle Elde Edilen Avantajlar Nelerdir?

Google Lighthouse’un sunduğu kullanım kolaylıkları aşağıda belirtilmiştir:

• Site sahiplerinin web sitelerinin rekabet ettiği diğer web sitelerinin anlaşılabilmesi için önemli bir araçtır. Rakip web sitelerinden öne çıkabilmek için uygulanması gereken stratejinin belirlenmesi konusunda Google Lighthouse’tan yardım alınmaktadır. Rakip web sitelerinin daha rahat incelenebilmesini sağlamaktadır.
• Google Chrome eklentisi olarak Lighthouse’un kullanılması durumunda; analiz çıktılarının istenen formatlarda kaydedilebilmesi mümkün olmaktadır.
• Google Lighthouse’un puanlama sistemleri ve kullandığı ölçümler diğer araçlar ile kıyaslandığında daha avantajlı olmaktadır. Birçok etmen baz alınarak sayfa yükleme sürelerinin test edilebilmesini sağlamaktadır.
• Yapılan analizler sayfa bazında olmaktadır. Bu sayede sonuçların yorumlanabilmesi ve çalışmaların istenildiği gibi şekillenebilmesi çok daha kolay olmaktadır. Her sayfanın analizi ayrı yapıldığı için sayfalara özel spesifik çalışmaların yapılması mümkün olmaktadır.
• Diğer Google araçlarına göre daha detaylı analiz imkanı sunduğu için site sahiplerinin daha iyi optimizasyon çalışmaları yapmalarını sağlamaktadır.
• Site hızının analizini yapmakla kalmayıp aynı zamanda site hızının arttırılabilmesi için yapılabilecekler konusunda tavsiyeler de sunmaktadır.

Google Lighthouse Sonuçlarında Dikkat Edilmesi Gerekenler Nelerdir?

Google Lighthouse değerlendirmesinde dikkat edilecekler; Google’ın SEO açısından site hızı için belirttiği sıralama problemlerinin çözülmesidir. İki çatallı bir iyileştirme yaklaşımı ile karşılaşılmaktadır. Hem web sitesinin hızlı olması hem de hızlı olduğunun hissedilmesi gerekmektedir. Ziyaretçiler beklemeyi sevmeyeceği için olabilecek en hızlı şekilde sayfanın açılıyor olması gerekmektedir. Bu sebeple site sahiplerinin önceliklerinin sayfanın yüklenmesi olmalıdır. İlgili sayfada insanların aradıkları noktaların olması ve gerçekten insanların aradıklarından emin olunanların sayfaya eklenmesi gerekmektedir. Bu sebeple animasyon ve grafik gibi sayfanın yüklenmesini geciktirebilecek olanların eklenmesinde, sayfa içerisinde gerçekten onlara gerek olup olmadığına bakılmalıdır.

Google Lighthouse Mobil Site Hızını Ölçerken Kullanılan Ölçümler Nelerdir?

Google Lighthouse ölçümleri aşağıdaki gibidir:

• İlk anlamlı içeriğinde ekranda görünme süresinin ne kadar olduğu hesaplanmaktadır. Skorun düşük olması ile beraber sayfanın görünme hızı da daha yüksek olmaktadır.
• Web sitesinin sayfasının etkileşim içerisinde olduğu süreyi hesaplamaktadır. Arayüz elementleri ile etkileşiminin olup olmadığı, kullanıcı girdilerine yanıt verilip verilmediği gibi ölçümler göz önüne alınmaktadır.
• Sayfanın tamamen etkileşimli olduğu sürenin ölçümü yapılmaktadır.
• Sayfadaki içeriğin gözle görülür hale geldiği süre baz alınarak hız endeksi hesaplanmaktadır. 1.250 milisaniyeden daha düşük bir hedef yüklenme süresinin olması gerekmektedir.
• Kullanıcıların girdilerine cevap verilen sürenin ölçümü yapılmaktadır. 50 milisaniyeden daha düşük bir sürede sayfanın açılması gerekmektedir.
• Sayfanın başlangıçta hazır olabilmesi için gerekli olan kaynaklar görülebilmektedir. Bu kaynaklar, kritik istekler zincirinde yer almaktadır. Sayfa yüklenme hızının arttırılabilmesi için bu zincirdeki kaynaklara bakılmalıdır.

Google Lighthouse Yüklemesi Nasıl Yapılır?

Google Lighthouse kullanmaya başlamak için Google Chrome açıldıktan sonra F12 tuşuna basılması gerekmektedir. Geliştirici araçlara böylelikle ulaşılabilmektedir. Audit bölümünden testi yaparak kapsamlı bir rapor alabilmek mümkün olmaktadır. Ayrıca Chrome web mağazası aracılığı ile Lighthouse eklentisinin Chrome’a eklenebilmesi de mümkündür. Bunun için Chrome web mağazasında anasayfadan uzantılar butonuna tıklanması ve sonrasında Lighthouse’un seçilmesi gerekmektedir. Chrome’a ekle butonuna tıklanması ile beraber uzantısı eklenebilmektedir.

Node paketi olarak da Google Lighthouse kullanılabilmektedir. DevTools içerisinde çalışmayan ve sadece Node paketi kapsamında çalışan bazı özelliklerin olduğunun bilinmesi gerkemektedir. Web sitesinin oluşturulması için bu süreçte Node paketi olarak çalıştırılan Google Lighthouse oldukça faydalı olmaktadır.

Google Lighthouse’u komut satırı aracılığı ile yüklemek isteyenlerin komut satırına nmp install –g lighthouse yazmaları gerekmektedir. Bir adres için test gerçekleştirmek istemeleri durumunda ise; lighthouse yazdıktan sonra bu adresi eklemeleri gerekmektedir. Terminalde veya HTML dosyasında sonuç görüntülenebilmektedir.

Google Lighthouse Nasıl Kullanılır?

Google Lighthouse çalıştırılırken öncelikle analiz yapılacak olan web sitesi açıkken F12 tuşuna basılmaktadır. Sağ tıklayarak incele butonu seçilmelidir. Açılan sayfada Audits butonuna tıklandıktan sonra Chrome Geliştirici Araçlar arasından Google Lighthouse seçilmelidir. Perform an Audit butonu üzerinden sayfanın analiz edilme süreci başlatılabilmektedir. Açılan sayfada 4 farklı seçenek ile karşılaşılmaktadır. Bu seçenekleri elemek site sahibinin elindedir. Analiz sürecini kişiselleştirebilmek için seçenekleri ekleyebilmekte veya çıkartabilmektedir. Seçenek seçimi yapıldıktan sonra yaklaşık 1-2 dakika içerisinde analiz sonuçları görülebilmektedir. Görüntülenen sonuçlar .json formatında kaydedilebilmektedir. Başka bir formatta kaydedebilmek mümkün değildir.

Eklenti üzerinden yükleyerek Google Lighthouse kullanacak olanların arama barının sağ üst bölümündeki Google Lighthouse ikonuna tıklamaları gerekmektedir. Options seçeneği seçilmelidir. Performance, progressive web app, best practices, SEO ve accessibility seçenekleri ile karşılaşılmaktadır. Analiz sürecinde işe yaramayacağı düşünülen seçeneğin çıkartılması gerekmektedir. İstenen seçenekler seçiliyken generate report butonuna tıklanmalıdır. Birkaç dakika içerisinde analiz sonuçları açılmaktadır. Bu sonuçların .json, PDF ve HTML formatında bu analiz sonuçlarının kaydedilmesi mümkündür. Bu sebeple diğer analiz yöntemine göre daha avantajlı olmaktadır.

Google Lighthouse Test Aşaması

Lighthouse ile test evresinde; performans sekmesindeki verilerin incelenmesi gerekmektedir. Mevcut performans ile ilgili verilerin görüntülenmesi ve bu veriler doğrultusunda iyileştirmelerin yapılması gerekmektedir. Yeşil, turuncu ve kırmızı çubuklar ile grafiklerdeki verilerin değerlendirilebilmesi mümkündür. Web sitesinin hız endeksi, gecikme süresinin değerleri, ilk etkileşim ve sürekli etkileşim değerleri, ilk anlamlı görüntüye ulaşma süresi ile ilgili görülen verilerin düşürülmesi ve iyileştirilmesi gerekmektedir.

Google Lighthouse İle Site Hızı Düzeltmelerinin Uygulanması

Lighthouse ile site hızını iyileştirmek için yapılabilecek birçok düzeltme vardır. İçeriğin ekranda görünmesinden önce yüklenmesinin sağlanması gerekmektedir. Bu süreçte içeriğin karşılaştığı engeller ortadan kaldırılmalıdır. Google Lighthouse ile sadece istatiksel veriler sunulmamaktadır. Aynı zamanda site hızının düzeltilmesi de mümkün olmaktadır. Site hızının düzeltilebilmesi için Google Lighthouse ile PageSpeed Insights ve GTmetrix araçlarının bir arada kullanılması gerekmektedir.

Google Lighthouse’un Site Hızını Arttırmak İçin Sunduğu Fırsatlar

Lighthouse’un sunduğu optimizasyon fırsatları şunlardır:

• Yorum engelleyici kaynaklar ortadan kaldırılmalıdır. Sayfanın ilk görseline kaynakların engel olması halinde; kaynak kodlarının başındaki kaynakların temizlenmesi gerekmektedir. JS/CSSlerin yayınlanması ve mühim olmayanların da ertelenmesi gerekmektedir.
• Ekran dışındaki görseller ertelenmelidir. Önemli sayılan kaynakların yüklenmesi tamamlandığında; ekran dışı ve saklı görsellerin yavaş açılması durumunda, bu görseller ertelenerek bu duruma çözüm bulunabilmektedir.
• Sayfaların daha hızlı yüklenmesi ve daha az veri tüketmesi için yeni nesil biçimlerde görsellerin yayınlanması gerekmektedir. JPEG 2000, JPEG XR, WebP formatları tercih edilmelidir. PNG ve JPEG formatları ile kıyaslandığında; daha iyi sıkıştırma sağlayan formatlardır.
• Kullanılmayan CSS’nin ertelenmesi gerekmektedir. Ağ aktivitesi sebebi ile gereksiz byte tüketimi olabilmektedir. Bunu en aza indirebilmek için kullanılmayan kuralların stil sayfalarından kaldırılması gerekmektedir. CSS defer komutları veya eklentileri ile kaldırma işlemi yapılabilmektedir.
• Çekici kaynaklara öncelik verebilmek için kullanılması gereken kod; <link rel=preload> olmaktadır.
• Görsellerin etkin bir şekilde kodlanması durumunda; görsellerin daha hızlı açıldığı ve data tüketiminin de daha az olduğu görülmektedir.
• Üçüncü parti noktalara bağlantı kurulması gerekmektedir. Bunun için bağlantı veya dns-prefetch kaynak ipuçları eklenebilmektedir.
• CSS dosyaları küçültülebilmektedir. Ağ taşıma kapasitesinin boyutlarının azalmasında da etkili olan bir durumdur.
• Yük boyutu ve yazı tipi ayrıştırma süresinin kısaltılabilmesi için JavaScript dosyası küçültülebilmektedir.
• Metin tabanlı kaynakların toplam ağ baytlarının azaltılabilmesi için sıkıştırmanın etkinleştirilmesi gerekmektedir.
• Görselin kullanım alanı ile ölçüsünün uyumlu olması gerekmektedir. Doğru boyutta görsel kullanımı, yükleme zamanının kısalmasına yardımcı olmaktadır.
• Animasyonlu içerik ekleneceği zaman GIF formatında eklenmesi halinde, bu yetersiz kalmaktadır. Bu sebeple MPEG4/WebM formatındaki videoların PNG/WebP formatındaki sabit görseller olarak kullanılması tavsiye edilmektedir.
• Birden fazla sayfa yönlendirmesi yapılmamalıdır. Sayfa yüklenmesindeki ek gecikmelere sebebiyet verebilmektedir.

Google Lighthouse ve SEO Optimizasyonu

SEO ile Lighthouse ilişkisine bakıldığında; Lighthouse’un kontrol etmediği bazı durumlar bulunmaktadır. Bunlar aslında web sitesinin arama sıralamasını etkileyen faktörler içerisinde olabilmektedir. Web sitesinin mobil uyumlu olup olmadığının manuel olarak test edilmesi gerekmektedir. Mobil uyumluluk testi yapılarak web sitesinin mobil dostu olup olmadığından emin olunmalıdır. Web sitesindeki içerikler okunurken ziyaretçilerin zoom yapma ihtiyacı duymamaları gerekmektedir. Aynı zamanda yazıların büyüklüklerinin okunabilir boyutta olması gerekmektedir. 12 px değerinden daha düşük olanların okunabilmesi oldukça zor olmaktadır.

Hazırlanan içeriğin <title> elementini barındırması gerekmektedir. Yazı hakkında genel bir bilgi verebilecek bir başlık kullanımı olmalıdır. Ziyaretçilerin konu hakkında ipucu ararken baktıkları bir noktadır. Yazının genelini özetleyebilen bir meta description bölümünün olması gerekmektedir. Verilen linklerin tamamlayıcı bir linki olmalıdır. Bu da arama motorlarının linkin içeriğini anlayabilmelerini sağlamaktadır. Dosyanın hreflang’ının olması gerekmektedir. Arama motorları eklenti içeriğinin indeksini yapmadığı için dosya eklentilerinden uzak durulmalıdır.

Arama Sonuçlarında Gözükmek İçin Tarama ve Dizine Ekleme

Arama sonuçlarında yer almak için tarama yapılabiliyor olması gerekmektedir. Bunun için de tarayıcılara aplikasyona erişim izninin verilmesi gerekmektedir. Sayfa başarılı bir http koduna sahip olmalıdır. Sayfanın http kodu yok ise; indekslenmesi düzgün olmayabilmektedir. Ayrıca indekslenmenin bloklu olmaması gerekmektedir. Arama motorları için herhangi bir sayfaya tarama izni verilmez ise; bu sayfalar taranmamaktadır ve arama sonuçlarında da listelenmemektedir. Robots.txt dosyasının hatasız bir şekilde oluşturulması gerekmektedir. Web sitesinin dizine eklenebilmesi ve istenen şekilde taranabilmesi için robots.txt dosyası oluşturulmalıdır.

Google Lighthouse ve PageSpeed Insights Karşılaştırması

Google Lighthouse ile PageSpeed Insights farkına bakıldığında; her ikisi de analiz araçları arasında yer almaktadır. PageSpeed Insights ile beraber web sitesinin hız skoru ve iyileştirme durumları görülebilmektedir. Ancak web sitesinin hızının düşük olmasının sebepleri ile ilgili ayrıntılı bilgi alınabilmesi mümkün olmamaktadır. Ancak PageSpeed Insights’ın verdiği hız arttırıcı öneriler bulunmaktadır. Bu öneriler hem zorlayıcı hem de uygulanması basit olan önerilerdir. Web sitelerinin hız skorlarını yükseltmelerine yardımcı olan tavsiyelerdir. Ekranın üst kısmındaki süre ve sayfanın tamamen yüklenme süresini dikkate alarak bir hız skoru hesaplamaktadır. Ekranın üst kısmındaki süre; kullanıcının sayfayı ziyaret etmesi ile beraber içeriğin tamamen yüklenmesi arasında geçen süredir. Sayfanın tamamen yüklenme süresi ise; sayfadaki içeriklerin tamamen yüklenme süresi olmaktadır.

Google Lighthouse ise; PageSpeed Insights aracına göre çok daha pratiktir. Kullanıcı deneyimini önemser ve buna göre kullanım sunar. Sorunlu bir 3G bağlantısı üzerinden kontrol edildiği için gerçek hayatta kullanıcıların yaşadığı deneyim görülebilmektedir. PageSpeed Insights web sitesini yükleyerek hızını görmektedir. Ancak Google Lighthouse; girdilere nasıl ve ne zaman cevap verildiğini göz önüne almaktadır. Bu sayede kullanıma hazır olunan esas sürenin bulunabilmesi mümkün olmaktadır. Web sitenin sayfasının hızını iyileştirmek de daha kolay olabilmektedir.