Lighthouse Pagespeed İle Mobil Sitenizin Hızını ve Açılış Performansını Ölçebilirsiniz Mobil ve site hızı terimlerini sık sık birlikte görürsünüz. :) Bunun temel nedeni 2sinin bir arada işe yaramasıdır. Mobil dostu siteye sahip olmak ve site açılış hızını iyileştirmek, günümüzün SEO profesyonellerinin, geliştiricilerinin ve web sitesi sahiplerinin en büyük endişelerinden biridir. Sayfa hızını ölçmek her zaman karanlık bir yolda ilerlemek gibiydi. Google arama motoru tarafından sağlanan yeni araçlar var. Bu araca Google Deniz Feneri denir. Bu araç daha gerçekçi sonuçlar veriyor gibiydi. Sitenizin hızını ölçmek için Google Lighthouse’u nasıl kullanacağınızı bilmiyorsanız makaleyi okumaya devam edebilirsiniz.
İçindekiler
Google Lighthouse ‘ı Tanıyalım
Lighthouse, birincil amacı aşamalı web uygulamalarını (PWA’lar) denetlemek olan Google tarafından geliştirilen bir araçtır. Bu araç dört farklı derecelendirme sunar: erişilebilirlik, performans, aşamalı web uygulamaları ve gelişmiş en iyi uygulamalar listesi. Hepsini bir araya getirmek, sitenizin veya uygulamanızın kalitesi ve performansı hakkında size harika bir izlenim verir.
Site hızı tamamen algı ve kullanıcı deneyimi ile ilgilidir. Siteniz yavaş çalışıyor gibi görünüyorsa, hız sayıları önemsizdir. Dünyanın birçok yerinde kullanıcılar 3G’nin altındaki mobil bağlantıları kullanıyor. 4G bağlantıları çok hızlıdır, ancak sitenizin yüklenirken yavaş hissetmesini istemezsiniz. Siteniz yavaş açılıyorsa veya böyle görünüyorsa, dönüşümlerinizi doğrudan etkiler. 0,5 saniyelik artış, sitenizi açarken veya tanıtırken büyük bir fark yaratır.
Test sırasında Google Lighthouse, oldukça zayıf bir cihazda dengesiz bir 3G bağlantısıyla mobil konumunuzu kontrol edecektir. Testi olabildiğince gerçekçi kılmak için çeşitli paket kayıpları denenir. Testi aldıktan sonra, ortaya çıkan sorunların üstesinden gelmeniz için size bir puan ve pratik tavsiyeler verilecektir.
PageSpeed Insights ile Google Lighthouse Arasındaki Fark Nedir?
PageSpeed Insights, en yaygın kullanılan web sitesi analiz araçlarından biridir. Bu araç, sitenizin hız puanıyla ilgili birçok optimizasyon sağlar, ancak sitenizi yavaşlatan faktörler hakkında çok fazla ayrıntıya girmez. Ayrıca buradaki önerilere uymazsanız sitenizin herkes için yavaş olacağını düşünebilirsiniz. Ayrıca, PageSpeed Insights önerileri ikna edicidir ve uygulanması kolay değildir. Pek çok site 100/100 kazanamaz, ancak bu bir rüyanın gerçekleşmesidir.
PageSpeed Insights’ın kontrol ettiği iki önemli faktör vardır:
- İlk Boyama Süresi : Bu, kullanıcı sayfayı ziyaret ettikten sonra üst düzey içeriğin tam olarak yüklenmesi için geçen süredir.
- Sayfanın tamamen yüklenme süresi: Bu süre, kullanıcının bir sayfaya eriştikten sonra tüm içeriği tam olarak yüklemesi için geçen süredir.
Lighthouse daha pratik bir yaklaşım sunar ve kullanıcı deneyimine odaklanır. Bu, siteyi sorunlu 3G bağlantısı üzerinden kontrol ettiği için gerçek kullanıcının gözünden sitenizin durumunu görmenize yardımcı olur. Lighthouse, sitenizi PageSpeed Insights gibi yüklemek yerine sitenizin girişlerinize nasıl ve ne zaman yanıt verdiğine bakar. Sitenizin içeriğinin kullanıma hazır olduğu gerçek zamanı bulabildiğiniz için site sayfalarınızı optimize etmek çok daha kolaydır.
Lighthouse Sonuçlarında Nelere Dikkat Edilmeli?
Mobil siteleri hızlandırma yaklaşımının iki yönü vardır. Siteniz hızlı olmalı ve ziyaretçiler bunun farkına varmalılar. Ancak ekranda görüntülenen içeriğin en kısa sürede görüntülenmesi gerekir. İnsanlar beklemeyi sevmezler. Ayrıca, kullanıcılar içerikleriyle olabildiğince hızlı etkileşim kurmak isterler. Google, site hızını önemli bir SEO sıralama faktörü olarak kabul eder, bu nedenle bu sorunların çözülmesi gerekir.
Öncelikleriniz nelerdir? İçeriği yüklemeniz gerekiyor. Çok iyi grafikler ve animasyonlar bekleyebilir. Mesajınız, insanların aradığı şey olabilir ve içeriğinize dahil edilebilir. İçerik arka planda hızlı bir şekilde yüklenmeli ve ekranda kolayca görülebilmelidir.
Kullanılan Ölçümler
Mobil sitenizin performansını ölçmeye çalışırken Lighthouse aşağıdaki ölçümlerden faydalanır:
- İlk Anlamlı Boya : Bu metrik, ilk anlamlı içeriğin ekranda görünmesi için geçen süreyi hesaplar. Puan ne kadar düşükse, sayfa o kadar hızlı görüntülenir.
- İlk Etkileşim: Bu metrik, sayfa minimum düzeyde etkileşimli olduğunda hesaplanır. Bir arabirim öğesinin etkileşimli olup olmadığını ve kullanıcı girişine yanıt verip vermediğini belirlemek için bu ölçümü inceleyebilirsiniz.
- Sürekli Etkileşim: Bu metrik, sayfa tamamen etkileşime geçtiğinde hesaplanır.
- Algılanan Hız Göstergesi: Bu hız göstergesi, içeriğin sayfada görüntülenme hızını hesaplar. Bu ölçüm için hedef yükleme süresi <1.250 ms’dir.
- Tahmini Giriş Yanıt Süresi: Bu ölçüm, bir sayfanın kullanıcı girişine yanıt vermesi için geçen süreyi hesaplar. Cevap verme süresi uzun ise sayfa geç açılacaktır. Bu ölçüm için hedef süre 50 ms’den azdır.
- Kritik İstekler Zinciri : Bu ızgara görünümü, sayfayı ilk olarak hazırlamak için gereken kaynakları gösterir. Sayfayı hızlandırmak için önce kritik istek zincirindeki varlıklara bakmanız gerekir.
Sonuç olarak, Lighthouse sitenizin performansı üzerinde büyük bir etki bırakır. Bu gösterimler sitenizi etkili bir şekilde iyileştirebilir.
Google Lighthouse’ı Nasıl Yükleyeceğim?
Google Lighthouse’u kullanmaya başlamak çok kolaydır. Chrome’da F12 tuşuna basarak Geliştirici Araçları bölümüne erişebilirsiniz. Buradaki denetim bölümünde bir test yapabilir ve kapsamlı bir rapor alabilirsiniz.
Ayrıca bir Google Lighthouse Chrome uzantısı olarak da kullanılabilir. Eklentiye bu linkten ulaşabilirsiniz.
Lighthouse’u node paketi olarak çalıştırmak da mümkündür. Bu yöntem sayesinde site oluşturma sürecinde Lighthouse araçlarını kullanabilirsiniz. Düğüm paketini kullanıyorsanız, bazı özelliklerin yalnızca node ortamında çalıştığını ve DevTools’ta çalışmadığını görebilirsiniz.
Lighthouse ı komut satırından “npm install-glighthouse” komutunu çalıştırarak kurabilirsiniz. https://erdalbilisim.com sitesini test etmek istiyorsanız, “lighthouse https://erdalbilisim.com” komutunu kullanabilirsiniz. Aldığınız kapsamlı sonuçlar, terminalde veya ayrı bir HTML dosyası olarak görüntülenecektir.
Lighthouse ile Hız Testi Nasıl Yapılır?
Lighthouse aracının test aşamasından biraz daha bahsetmemiz gerekiyor. Test aracını belirli bir sitede çalıştırmak size farklı sonuçlar verecektir. Bu araç, aşamalı web uygulamaları için o kadar kullanışlıdır ki, bazı özelliklerini karıştırabilir. Bu nedenle doğrudan sitenizin önemli bir parçası olan Performans sekmesine geçmeniz gerekiyor. Bu sekmedeki veriler, sitenizin mevcut durumunda nasıl çalıştığını ve onu geliştirmek için neler yapabileceğinizi gösterir.
Yeşil, turuncu ve kırmızı çubuklar, görüntülenen grafik türü sonuçlarından en önemli bilgileri sağlar. Bu çubuklar sitenizin performansını gösterir. Mobil sitenizin performansını iyileştirirken, anlamlı ilk görüntülemelerin, ilk etkileşimlerin ve sürekli etkileşimin değerine özellikle dikkat etmeniz gerekir. Ancak, algılanan hız indeksini ve gecikme değerini düşürmeyi deneyin.
Sitenizi hızlandırmak için yapabileceğiniz birçok şey var. Burada açıklanan tüm değişiklikleri yapmanın yanı sıra sitenizi hazırlarken kritik varlıklarınızı optimize etmeniz zorunludur. Sitenizi hazırlayan varlıklar, CSS ve JavaScript gibi öğelerden oluşur. İçeriğin ekranda görüntülenebilmesi için her birinin yüklenmesi gerekir. İçerik başarısız olursa sayfa hazırlığı çok yavaş olacaktır. Bunlara dikkat etmeniz ve engelleri kaldırmanız gerekiyor.
Google Lighthouse, tüm ihtiyaçlarınız için tek site hızı aracı değildir, ancak çok etkili bir araçtır. PageSpeed Insights harika bir araçtır, ancak sitenizde son derece yetenekli tavsiyeler sağlar. İşaretçiler ise gerçek kullanımı ortaya çıkarmak için istatistiksel olanların ötesine geçebilir. Bu aracı PageSpeed Insights ve GTmetrix gibi diğer araçlarla deneyin.