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

Mobil ve site hızı kelimelerini sık sık bir arada gördüğünüze eminim. :) Bunun temel sebebi, ikisinin bir aya geldiğinde işe yarar olmasıdır. Mobil dostu olmak ve site hızını iyileştirmek SEO uzmanlarının, geliştiricilerin ve site sahiplerinin bugün en çok uğraştığı konulardan birisidir. Sayfa hızını ölçmek her zaman karanlık bir yolda yürümek gibi olmuştur. Google arama motorunun sunmuş olduğu yeni bir araç var. Aracın adı Google Lighthouse. Bu araç daha gerçekçi sonuçlar sunabilmek için ortaya çıkmıştır. Google Lighthouse ile site hızını nasıl ölçebileceğinizi merak ediyorsanız yazıyı okumaya devam edebilirsiniz.

Google Lighthouse Nedir?

Lighthouse Google tarafından geliştirilen ve asıl kullanım amacı Progressive Web Apps’ı (PWA) denetlemek olan bir araçtır. Bu araç erişilebilirlik, performans, Progressive Web Apps ve en iyi yöntemlerin gelişmiş listesi şeklinde dört farklı değerlendirme sunmaktadır. Bunların hepsinin bir araya getirilmesi size sitenizin veya uygulamanızın kalitesine ve performansına yönelik mükemmel bir izlenim sunmaktadır.

Site hızı tamamen algı ve kullanıcı deneyimiyle ilgilidir. Siteniz yavaş gibi çalışıyorsa hız rakamlarının hiçbir önemi olmayacaktır. Dünyanın pek çok noktasında kullanıcılar 3G veya daha altında mobil bağlantılara sahiptirler. Her ne kadar 4G bağlantıları epey hızlı olsalar bile sitenin açılırken yavaş bir his uyandırması arzu edilebilir bir şey değildir. Bir sitenin yavaş açılması veya kendini böyle hissettirmesi dönüşümlere doğrudan etki edecektir. Sitenizin açılışı veya yükselmesi konusunda yarım saniyelik artış bile büyük farklılıklar oluşturacaktır.

Test aşamasında Google Lighthouse mobil sitenizi oldukça güçsüz bir cihaz üzerinden kesintili bir 3G bağlantısıyla kontrol eder. Testin olabildiğince gerçekçi olabilmesi için çeşitli paket kayıpları yaşanmaktadır. Testi gerçekleştirdikten sonra kendi sahip olduğunuz skor ve ortaya çıkan sorunları aşabilmek için uygulanabilir tavsiyelerle karşılaşırsınız.

PageSpeed Insights vs. Google Lighthouse

PageSpeed Insights en çok kullanılan site analiz araçlarından birisidir. Bu araç sitenizin hız skorunu ve buna yönelik pek çok iyileştirme durumunu sunsa bile sitenizin hızını yavaşlatan etkenler konusunda çok fazla detay verememektedir. Üstelik burada yer alan önerileri yerine getirmediğiniz zaman sitenizin herkes için yavaş olacağını düşünmek olasıdır. Buna ek olarak, PageSpeed Insights’ın sunduğu öneriler zorlayıcı ve uygulaması kolay olmayan tavsiyelerdir. Birçok sitenin 100/100 şeklinde skor elde etmesi mümkün olmasa bile bu ulaşılmak istenen bir hayaldir.

PageSpeed Insights aracının incelediği iki önemli unsur bulunmaktadır:

• Ekranın üst kısmındaki süre: Bu süre, kullanıcının sayfayı ziyaret etmesi sonrasında ekranın üst kısmında yer alan içeriğin tamamen yüklenme süresidir.
• Sayfanın tamamen yüklenme süresi: Bu süre, kullanıcının sayfayı ziyaret etmesi sonrasında sayfada yer alan tüm içeriklerin tamamen yüklenme süresidir.

Lighthouse çok daha pratik bir yaklaşım sunarak kullanıcı deneyimini merkeze alır ve ön plana çıkarır. Sitenizi sorunlu bir 3G bağlantısı üzerinden kontrol edeceği için gerçek hayattaki kullanıcıların gözünden sitenizin durumunu görebilmeniz konusunda size yardımcı olacaktır. Sitenizi PageSpeed Insights’ın yüklediği gibi yüklemek yerine Lighthouse sitenizin girdilere nasıl ve ne zaman cevap verdiğini incelemektedir. Sitenizde yer alan içeriğin kullanıma hazır olduğu esas süreyi bulacağı için site sayfasını iyileştirmek çok daha kolay olacaktır.

Lighthouse Sonuçlarında Nelere Dikkat Edilmeli?

Mobil sitenizin hızını iyileştirme yaklaşımı iki çatallı olarak karşınıza çıkar; siteniz hızlı olmalı ve sitenizin hızlı olduğu hissedilmelidir. Bununla birlikte ekrana gelecek olan içeriğin en hızlı biçimde getirilmesi gerekmektedir. İnsanlar beklemeyi sevmezler. Ek olarak kullanıcılar içerikleriniz ile olabildiğince hızlı bir biçimde etkileşim kurmak isterler. Google, SEO açısından site hızını önemli bir sıralama faktörü olarak belirlediği için bu problemleri çözmeniz gerekmektedir.

Önceliğiniz ne olmalı? İçeriğin yüklenmesi olmalıdır. Grafikler ve olağanüstü iyi animasyonlar bekleyebilir. Mesajınız insanların aradığı şey olabilir ve bu mesaj içeriğinizde yer alabilir. İçerik arka planda hızlı bir biçimde yüklenmeli ve ekrana kolayca getirilebilmelidir.

Kullanılan Ölçümler

Mobil sitenizin performansını ölçmeye çalışırken Lighthouse aşağıdaki ölçümlerden faydalanır:

• İlk anlamlı görüntü: Bu ölçüm, ilk anlamlı içeriğin ekranda görünme süresini hesaplar. Skor ne kadar düşük olursa sayfanın görünmesi bir o kadar hızlı olur.
• İlk etkileşim: Bu ölçüm, bir sayfanın minimal olarak ne zaman etkileşimli olduğunu hesaplar. Arayüz elementlerinin etkileşimli olup olmadığını ve bunların kullanıcının girdilerine yanıt verip veremediğini belirlemek için bu ölçüme göz atabilirsiniz.
• Sürekli etkileşim: Bu ölçüm, bir sayfanın tamamen etkileşimli olma zamanını hesaplar.
• Algılanan hız endeksi: Bu hız endeksi, bir sayfada yer alan içeriğin ne kadar hızlı bir biçimde gözle görülür hale geldiğini hesaplar. Bu ölçümde <1,250 milisaniye hedef yüklenme süresi bulunmaktadır.
• Tahmini giriş gecikmesi: Bu ölçüm, sayfanızın kullanıcıların girdilerine ne kadar zamanda cevap verebildiğini hesaplar. Gecikmenin yüksek olması sayfanın gecikmeli açılmasına neden olacaktır. Bu ölçümde <50 milisaniye hedef süre bulunmaktadır.
• Kritik istekler zinciri: Bu ağ şelalesi bir sayfanın başlangıçta hazır hale getirilmesi için ihtiyaç duyulan kaynakların neler olduğunu gösterir. Sayfanın daha hızlı olabilmesi için öncelikli olarak kritik istekler zincirinde yer alan varlıkların gözden geçirilmesi gerekir.

Sonuç olarak, Lighthouse sitenizin performansı konusunda muazzam izlenimler sunmaktadır. Bu izlenimleri avantajlı bir biçimde kullanarak sitenizi daha iyi bir hale getirebilirsiniz.

Google Lighthouse Nasıl Yüklenir?

Google Lighthouse kullanmaya başlamak oldukça kolay. Chrome’da F12 tuşuna basarak Geliştirici Araçları kısmına ulaşım sağlayabilirsiniz. Burada yer alan Audit kısmı aracılığıyla testi gerçekleştirip kapsamlı rapor elde edebilirsiniz.

Google Lighthouse Chrome eklentisi olarak da sunulmaktadır. Eklentiye bu bağlantı aracılığıyla ulaşabilirsiniz.

Lighthouse’u bir Node paketi olarak çalıştırmak da mümkündür. Bu yöntem sayesinde sitenizi oluşturma sürecinde Lighthouse aracından faydalanmanız mümkündür. Node paketini kullanırken sadece Node ortamında çalışan ve DevTools içerisinde çalışmayan bazı özelliklerin olduğunu fark edebilirsiniz.

Lighthouse aracını komut satırı üzerinden yüklemek için “nmp install -g lighthouse” komutunu uygulayabilirsiniz. Eğer https://example.com adresi için bir test gerçekleştirmek istiyorsanız “lighthouse https://example.com” komutunu kullanabilirsiniz. Elde edeceğiniz kapsamlı sonuç terminalde yer alabileceği gibi ayrı bir HTML dosyası olarak da karşınıza çıkacaktır.

Lighthouse ile Test Aşaması

Lighthouse aracının test aşamasından biraz bahsetmek gerekmektedir. Belirli bir site için test aracını çalıştırdığınız zaman karşınıza çıkabilecek pek çok farklı sonuç olacaktır. Bu araç Progressive Web Apps için son derece kullanışlı olduğundan bazı niteliklerini anlamak kolay olmayacaktır. Bu nedenle siteler için önemli olan kısma yani performans sekmesine doğrudan geçiş yapmanız gerekmektedir. Bu sekmede yer alan veriler sitenizin mevcut koşullardaki performansını ve bunları iyileştirme konusunda yapabileceklerinizi göstermektedir.

Karşınıza çıkacak olan grafik türü sonuçlarından en önemli bilgilere yeşil, turuncu ve kırmızı çubuklar sayesinde ulaşabilirsiniz. Bu çubuklar sitenizin performansının ne olduğunu size gösterecektir. Bir mobil sitenin performansını iyileştirmeye çalışırken özellikle ilk anlamlı görüntü, ilk etkileşim ve sürekli etkileşim değerlerine önem vermelisiniz. Bununla birlikte algılanan hız endeksi ve gecikme süresi değerlerini düşürmeye çalışmalısınız.

Site Hızı Düzeltmelerini Uygulama

Site hızınızı iyileştirmek için yapabileceğiniz çok farklı şeyler bulunmaktadır. Burada belirtilen tüm düzenlemeleri yapmanın yanı sıra sitenizin hazır hale getirilmesi yolundaki kritik varlıkları da iyileştirmek gerekmektedir. Sitenizin hazır hale getirilme yolundaki varlıklar CSS ve JavaScript gibi unsurlardan oluşur. Bunların her birisi içerik ekranda görünmeden önce yüklenmek durumundadır. Eğer içerik engellerle karşılaşıyorsa sayfanız çok daha yavaş biçimde hazır hale gelecektir. Bunlara dikkat etmeli ve engelleri ortadan kaldırmalısınız.

Google Lighthouse tüm ihtiyaçlarınıza yetecek tek site hızı aracı değildir ama oldukça verimli bir araçtır. PageSpeed Insights oldukça iyi bir araç olmasına rağmen siteniz hakkında yüksek beceri seviyesi gerektiren tavsiyeler sunmaktadır. Lighthouse ise istatistiksel olmaktan öteye geçerek gerçek kullanımdaki durumu ortaya çıkartabilmektedir. Bu aracı PageSpeed Insights ve GTmetrix gibi diğer araçlarla bir arada kullanmaya çalışmalısınız.