Web sitenizi nasıl geliştirirsiniz Deniz Feneri Performansı
Resim Kaynağı: Pixabay Google’ın Deniz Feneri Nedir? Lighthouse, Web sayfası tarafından sunulan kullanıcının performansını ve deneyimini kontrol etmek amacıyla Google tarafından tasarlanan açık kaynaklı bir araçtır. Bu yüzden deniz fenerimizin performansını olabildiğince geliştirmeliyiz. Lighthouse, sitenin performansını beş ana kategoride kontrol eden otomatik denetim taraması yapar – çalışma, erişilebilirlik, arama makinelerinin optimizasyonu (SEO), aşamalı web uygulamaları (PWA) ve en iyi uygulamalar. Buna ek olarak, Deniz Feneri, hızı, görsel kararlılığı ve sayfa duyarlılığını kontrol etmek için temel bir web hayati kullanır. Tarama sırasında Lighthouse, kullanıcı deneyimini kötü bir bağlantı ve güçlü cihaz eksikliği ile kontrol etmek için bir simülasyon çalıştırır.
Deniz Feneri denetimi tamamladıktan sonra, Lighthouse bilgileri diğer veriler ve derlenmiş raporlarla birleştirdi, bu da sayfaların genel puanı ve takip edilebilecek öneriler de dahil. Deniz Feneri Taraması’nı çalıştırmak için kullanabileceğiniz bazı yöntemler:
UI Web – Bu araç, denizci ev çalıştırmanıza ve çevrimiçi raporlar yapmanıza olanak tanır. Yerel olarak hiçbir şey kurmaya gerek yok.
Chrome Devtools – Deniz fenerini doğrudan Chrome’da çalıştırabilirsiniz. Bu seçenek, kimlik doğrulaması gerektiren sayfaları denetlemenize olanak tanır. Raporları kolayca oluşturabilir ve okuyabilirsiniz.
Modül Node.js – Bu seçenek, deniz fenerini DevOps boru hattınıza entegre etmenizi sağlar.
Komut satırı – Deniz fenerinin taranmasını otomatikleştiren bir kabuk komut dosyası yazmak için komut satırını kullanabilirsiniz.
Google Deniz Feneri Deniz Feneri Deniz Feneri Kategorisi Web sayfalarını analiz eder ve bulgularını birkaç kategoride paylaşır: ilerici web uygulamaları, performans, erişilebilirlik, en iyi uygulama ve SEO. Her birini inceleyelim. Google Deniz Feneri İlerleyen Web uygulamaları, mobil cihazlarda orijinal uygulamalara benzer bir çapraz platform web uygulaması olan Aşamalı Web uygulamasının (PWA) temel işlevselliğini kontrol edebilir. Google Deniz Feneri, tüm öğelerin ve dinamik içeriğin doğru görünümünü analiz edebilir. Ayrıca hizmet çalışanlarının kaydını kontrol eder – hizmet çalışanları, masaüstü ve hücresel kullanıcılar için çevrimdışı işlevselliği kolaylaştırır.
Deniz Feneri şovu, web sitenizin veya web uygulamanızın hızını analiz eder ve ayrıca yüklenen öğelerin kullanıcıya doğru bir şekilde görüntülenmesini sağlar. Analiz şunları içerir: Hücresel ve masaüstü hız puanları 0-100 arasında, sayfanın mobil cihazlarda ve masaüstlerine ne kadar hızlı yüklendiğini gösterir (her biri için ayrı puanlar)
İlk İçerik Boya (FCP) – Web sitenizde görüntülenen ilk görüntüyü veya metni tam olarak görüntülemek için gereken süre.
İlk Anlamlı Boya (FMP) – Sayfanızın ana içeriğinin tamamen görüntülenmesi için gereken süre.
Etkileşimli Zaman – Sayfa tamamen şarjlanana ve kullanıcının onunla etkileşime girmesine hazır olana kadar gereken süre.
İlk boş CPU – Ana CPU iş parçacığı web sitesini kullanmak için gereken süre, kullanıcı talebinin işlenmesine izin vermek için azaltılır.
Tahmini giriş gecikmesi – CPU’nun en yüksek kullanımı olan 5 -saniyelik pencereye bakın ve sunucunun penceredeki kullanıcı isteklerine yanıt vermesinin ne kadar sürdüğünü ölçün. 50 ms’lik daha yüksek bir değer, sayfanın yavaş düşünülmesine neden olabilir. Bu puana ek olarak, Google PageSpeed Insights gibi bir arkadaş, sayfanın açık süresinin ve deniz feneri puanlarının nasıl artırılacağını gösteren ayrıntılı öneriler sunar. Bu öneri, her onarımın sayfa açık süresini ne kadar azaltabileceğini gösterir.
Deniz feneri puanı gerçek kullanıcı verilerine dayandığından, aynı sayfa için bile her çalıştırdığınızda puanın değişebileceğini fark etmek önemlidir. Deniz fenerini en iyi şekilde kullanmak için, sitenin her bölümünün örnek sayfasını seçin ve zaman zaman performans eğilimlerini görmek için deniz fenerini düzenli olarak çalıştırın. Google Deniz Feneri Erişilebilirliği, web sitesinin veya PWA’nın engelli kişilere ne kadar iyi hizmet edebileceğini değerlendirir. Bu, düğmeler ve bağlantılar gibi önemli öğelerin metin özniteliklerini kullanılarak iyi açıklanıp açıklanmadığını ve kör için bir ses olarak içerik veren bir ses olup olmadığını kontrol eder.
En iyi uygulama kategorisinde en iyi uygulama olan Lighthouse, esas olarak web uygulamanızın güvenlik yönlerini analiz eder. Bu, kullanılan kriptografik teknikleri (örneğin TLS), web sitesi kaynaklarının güvenli kaynaklardan gelip gelmediğini ve kullandığınız JavaScript kütüphanesinin güvenli olup olmadığını değerlendirir. Ayrıca, bağlı olan uygulamaya veritabanının güvenli olup olmadığını kontrol eder ve güvenli olmayan veya eski yangın komutlarının kullanımını gösterir. SEO Google Lighthouse, hücresel uygulamalar için SEO’ya odaklanarak, makinelerin uygulamaları ve web sitelerini nasıl ele alacağını analiz etmek için çeşitli testler çalıştırır. Deniz Feneri 0-100 arasında bir puan verdi. Bu, özellikle hücresel kullanımını ve etiketlerin ve meta verilerin arama makineleri için optimize edilip edilmediğini kontrol eder. Deniz feneri puanınızı nasıl artırabilirsiniz. daha iyi arama motorları.
Google’dan LCP, CLS vb.
Tembel -yükleme Görsel varlıklar, sayfanızdaki görüntüleri ve videoları içerir. “Anlamlı ilk boya” çizmek için gereken süreyi önemli ölçüde azaltabilir. Tabii ki, içeriğinize katkıda bulundukları, ancak sayfa yüklemesi üzerindeki etkiyi tanıdıkları için görüntüler ve videolar kullanılmalıdır.
Görsel varlıkların etkisini en aza indirmek için, başlangıçta kullanıcılar tarafından görülmeyen oluşturma bloklarının tanımlanması, çünkü alt Paro’daydı. Bu varlığı tembel yükleyin veya başka bir deyişle, yalnızca kullanıcının gerçekten ihtiyaç duyduğunda içerir. İki genel yaklaşım şunlardır: kullanıcı onunla etkileşime girene kadar video veya diğer dinamik varlıkları gizlemek. Bir süre için Rotary düğmesi ile yer tutucu veya “poster görüntüsü” görüntüleyebilirsiniz.
Farklı ekran boyutuna sahip kullanıcıya uygun boyutta görüntü göndermek için duyarlı bir web tasarımı kullanın
Her biri farklı ekran çözünürlüğü için uygun olan bir dizi görüntü sağlamak için SRCSET özniteliklerini kullanın
“Boyama Süresini” azaltmak için hareket edebilen kod çözme kod çözme öznitelikleri gecikmesi kullanın
Doğrudan kullanıcı ekranında görünmeyen herhangi bir içerik için kullanılmayan komut dosyasını geciktiren Google, yalnızca görüntüleri yavaşça yüklemeyi değil, aynı zamanda CSS ve JavaScript’i de önerir. Bu birkaç nedenden dolayı bir zorluk olabilir:
Birçok yön ve CSS komut dosyası tüm sayfa içeriğini etkiler veya yükleme ertelenirse beklenmedik bir etkiye sahip olabilir
Farklı ekran cihazlarında ve boyutlarında, farklı içerik alt yarısındadır, bu da hangi komut dosyalarının ertelenmesi gerektiğini ayırt etmeyi zorlaştırır
Komut dosyasını geciktirmek, CMS’nizi çok fazla ayarlamayı gerektirebilir ve bu ayarlama, web sitesinin tasarımı her değiştiğinde ağır web sitelerinin bakımını gerektirecektir, eğer kullanıcı deneyimini etkilemeden güvenli bir şekilde erteleyebileceğiniz bir komut dosyası varsa, çok önemlidir. Önce yüklemek ve ilk içerik yüklendikten sonra JavaScript kullanarak enjekte etmek için.
Üçüncü taraf komut dosyalarının kullanımını en aza indirin ve sayfanızda çalıştırılan her üçüncü taraf komut dosyasının sayfanın performansını azaltacak ve genellikle bir web geliştiricisi olarak kontrolünüzün ötesinde JavaScript yürütme süresini azaltın. Gerçekten gerekli olan minimum komut dosyasını sınırlayın. Web sayfalarında yaygın olarak bulunan komut dosyalarına örnek olarak sosyal paylaşım düğmeleri, gömülü videolar, analitik etiketler ve A/B testi için kullanılan platformlardır. Bu araçları ve hizmetleri yalnızca sitenizde kaydedin, eğer değer performans açısından maliyeti aşıyorsa. Sol üçüncü taraf komut dosyaları ve komut dosyasının sayfayı açarken etkiyi en aza indirmek için eşzamansız, erteleme, ön bağlantı ve dns-prefetch gibi özellikler kullandığından emin olun. Yeni nesil formatta mevcut görüntüler Google PagesPeed Insights, deniz feneri puanlarını artırmak için yeni nesil dosya biçimini kullanmayı önerir. Yeni nesil format WebP, JPEG XR ve JPEG2000 içerir ve aynı görüntü kalitesine sahip çok daha iyi sıkıştırma ve daha küçük dosya boyutları sağlar. Zorluk tarayıcı ve bu yeni format için uygulama desteği hala sınırlıdır. İki etkisi var:
Adobe InDesign veya Photoshop gibi grafik tasarımcınız tarafından kullanılan araçlardan bu formatı oluşturmakta zorlanacaksınız
Eski tarayıcılara sahip kullanıcılar yeni nesil görüntü formatını göremeyecek, yani JPG veya PNGMendign gibi geleneksel formatları kullanarak yedek resimler sağlamanız gerekir, yeni nesil görüntülerin formatı kolay değildir, ancak sayfa performansını teşvik etmenize yardımcı olacaktır. , özellikle görsel web içeriği için. Burada, herhangi bir CMS için görüntüleri yeni nesil formatına nasıl dönüştüreceğiniz hakkında bulabilirsiniz: Bu makalede Yeni Nesil Format Sonuçta Görüntüler Sınırlayın Google Deniz Feneri, web sayfaları performansınızı ölçmenize ve kullanıcı deneyimini geliştirmenize yardımcı olabilecek ölçütleri tanıtıyorum. Buna ek olarak, deniz feneri Google’ın arama algoritmasında bir sıralama faktörü olduğundan, deniz fenerinizin puanınızı artırmanın da arama ve trafik derecelendirmeleri üzerinde bir etkisi olacaktır. Web sayfanızdaki deniz feneri puanını artırmanın üç ana yolunu tartışıyorum:
Tembel, ilk içeriği yükleme hızını artırmak için görsel varlıklar içerir
Ana UTA’ları engellemesini önlemek için senaryoyu erteleyin
Önemli performans sonuçlarına sahip olabilen ve web geliştiricilerinin kontrolü dışında olabilen kütüphanelerin ve üçüncü taraf eklentilerinin kullanımını en aza indirin
Ayrıca WordPress’i CMS olarak kullanacaksanız, çalışmanızı kolaylaştırmak için hızlı WordPress temasını ve en iyi WordPress barındırma sağlayıcılarını kullanmanızı öneririz. Umarım bu, Metrik Deniz Feneri’ni daha iyi anlamanıza ve yeni nesil web performans kılavuzuyla web sitenizi uyumlu hale getirmenize yardımcı olacaktır.
Deniz Feneri denetimi tamamladıktan sonra, Lighthouse bilgileri diğer veriler ve derlenmiş raporlarla birleştirdi, bu da sayfaların genel puanı ve takip edilebilecek öneriler de dahil. Deniz Feneri Taraması’nı çalıştırmak için kullanabileceğiniz bazı yöntemler:
UI Web – Bu araç, denizci ev çalıştırmanıza ve çevrimiçi raporlar yapmanıza olanak tanır. Yerel olarak hiçbir şey kurmaya gerek yok.
Chrome Devtools – Deniz fenerini doğrudan Chrome’da çalıştırabilirsiniz. Bu seçenek, kimlik doğrulaması gerektiren sayfaları denetlemenize olanak tanır. Raporları kolayca oluşturabilir ve okuyabilirsiniz.
Modül Node.js – Bu seçenek, deniz fenerini DevOps boru hattınıza entegre etmenizi sağlar.
Komut satırı – Deniz fenerinin taranmasını otomatikleştiren bir kabuk komut dosyası yazmak için komut satırını kullanabilirsiniz.
Google Deniz Feneri Deniz Feneri Deniz Feneri Kategorisi Web sayfalarını analiz eder ve bulgularını birkaç kategoride paylaşır: ilerici web uygulamaları, performans, erişilebilirlik, en iyi uygulama ve SEO. Her birini inceleyelim. Google Deniz Feneri İlerleyen Web uygulamaları, mobil cihazlarda orijinal uygulamalara benzer bir çapraz platform web uygulaması olan Aşamalı Web uygulamasının (PWA) temel işlevselliğini kontrol edebilir. Google Deniz Feneri, tüm öğelerin ve dinamik içeriğin doğru görünümünü analiz edebilir. Ayrıca hizmet çalışanlarının kaydını kontrol eder – hizmet çalışanları, masaüstü ve hücresel kullanıcılar için çevrimdışı işlevselliği kolaylaştırır.
Deniz Feneri şovu, web sitenizin veya web uygulamanızın hızını analiz eder ve ayrıca yüklenen öğelerin kullanıcıya doğru bir şekilde görüntülenmesini sağlar. Analiz şunları içerir: Hücresel ve masaüstü hız puanları 0-100 arasında, sayfanın mobil cihazlarda ve masaüstlerine ne kadar hızlı yüklendiğini gösterir (her biri için ayrı puanlar)
İlk İçerik Boya (FCP) – Web sitenizde görüntülenen ilk görüntüyü veya metni tam olarak görüntülemek için gereken süre.
İlk Anlamlı Boya (FMP) – Sayfanızın ana içeriğinin tamamen görüntülenmesi için gereken süre.
Etkileşimli Zaman – Sayfa tamamen şarjlanana ve kullanıcının onunla etkileşime girmesine hazır olana kadar gereken süre.
İlk boş CPU – Ana CPU iş parçacığı web sitesini kullanmak için gereken süre, kullanıcı talebinin işlenmesine izin vermek için azaltılır.
Tahmini giriş gecikmesi – CPU’nun en yüksek kullanımı olan 5 -saniyelik pencereye bakın ve sunucunun penceredeki kullanıcı isteklerine yanıt vermesinin ne kadar sürdüğünü ölçün. 50 ms’lik daha yüksek bir değer, sayfanın yavaş düşünülmesine neden olabilir. Bu puana ek olarak, Google PageSpeed Insights gibi bir arkadaş, sayfanın açık süresinin ve deniz feneri puanlarının nasıl artırılacağını gösteren ayrıntılı öneriler sunar. Bu öneri, her onarımın sayfa açık süresini ne kadar azaltabileceğini gösterir.
Deniz feneri puanı gerçek kullanıcı verilerine dayandığından, aynı sayfa için bile her çalıştırdığınızda puanın değişebileceğini fark etmek önemlidir. Deniz fenerini en iyi şekilde kullanmak için, sitenin her bölümünün örnek sayfasını seçin ve zaman zaman performans eğilimlerini görmek için deniz fenerini düzenli olarak çalıştırın. Google Deniz Feneri Erişilebilirliği, web sitesinin veya PWA’nın engelli kişilere ne kadar iyi hizmet edebileceğini değerlendirir. Bu, düğmeler ve bağlantılar gibi önemli öğelerin metin özniteliklerini kullanılarak iyi açıklanıp açıklanmadığını ve kör için bir ses olarak içerik veren bir ses olup olmadığını kontrol eder.
En iyi uygulama kategorisinde en iyi uygulama olan Lighthouse, esas olarak web uygulamanızın güvenlik yönlerini analiz eder. Bu, kullanılan kriptografik teknikleri (örneğin TLS), web sitesi kaynaklarının güvenli kaynaklardan gelip gelmediğini ve kullandığınız JavaScript kütüphanesinin güvenli olup olmadığını değerlendirir. Ayrıca, bağlı olan uygulamaya veritabanının güvenli olup olmadığını kontrol eder ve güvenli olmayan veya eski yangın komutlarının kullanımını gösterir. SEO Google Lighthouse, hücresel uygulamalar için SEO’ya odaklanarak, makinelerin uygulamaları ve web sitelerini nasıl ele alacağını analiz etmek için çeşitli testler çalıştırır. Deniz Feneri 0-100 arasında bir puan verdi. Bu, özellikle hücresel kullanımını ve etiketlerin ve meta verilerin arama makineleri için optimize edilip edilmediğini kontrol eder. Deniz feneri puanınızı nasıl artırabilirsiniz. daha iyi arama motorları.
Google’dan LCP, CLS vb.
Tembel -yükleme Görsel varlıklar, sayfanızdaki görüntüleri ve videoları içerir. “Anlamlı ilk boya” çizmek için gereken süreyi önemli ölçüde azaltabilir. Tabii ki, içeriğinize katkıda bulundukları, ancak sayfa yüklemesi üzerindeki etkiyi tanıdıkları için görüntüler ve videolar kullanılmalıdır.
Görsel varlıkların etkisini en aza indirmek için, başlangıçta kullanıcılar tarafından görülmeyen oluşturma bloklarının tanımlanması, çünkü alt Paro’daydı. Bu varlığı tembel yükleyin veya başka bir deyişle, yalnızca kullanıcının gerçekten ihtiyaç duyduğunda içerir. İki genel yaklaşım şunlardır: kullanıcı onunla etkileşime girene kadar video veya diğer dinamik varlıkları gizlemek. Bir süre için Rotary düğmesi ile yer tutucu veya “poster görüntüsü” görüntüleyebilirsiniz.
JavaScript kullanarak yüklemek için tembel olduğunda, görüntünün veya diğer öğelerin kullanıcının görünüm alanına ne zaman girdiğini belirlemek için bir API kavşak gözlemcisi kullanın ve ardından içeriyor.
Yavaş yükleyemeyeceğiniz görüntüler için optimize etmeye çalışın. Manuel olarak yapabilir veya bir görüntü optimizasyonu çözümü kullanabilirsiniz:Farklı ekran boyutuna sahip kullanıcıya uygun boyutta görüntü göndermek için duyarlı bir web tasarımı kullanın
Her biri farklı ekran çözünürlüğü için uygun olan bir dizi görüntü sağlamak için SRCSET özniteliklerini kullanın
“Boyama Süresini” azaltmak için hareket edebilen kod çözme kod çözme öznitelikleri gecikmesi kullanın
Doğrudan kullanıcı ekranında görünmeyen herhangi bir içerik için kullanılmayan komut dosyasını geciktiren Google, yalnızca görüntüleri yavaşça yüklemeyi değil, aynı zamanda CSS ve JavaScript’i de önerir. Bu birkaç nedenden dolayı bir zorluk olabilir:
Birçok yön ve CSS komut dosyası tüm sayfa içeriğini etkiler veya yükleme ertelenirse beklenmedik bir etkiye sahip olabilir
Farklı ekran cihazlarında ve boyutlarında, farklı içerik alt yarısındadır, bu da hangi komut dosyalarının ertelenmesi gerektiğini ayırt etmeyi zorlaştırır
Komut dosyasını geciktirmek, CMS’nizi çok fazla ayarlamayı gerektirebilir ve bu ayarlama, web sitesinin tasarımı her değiştiğinde ağır web sitelerinin bakımını gerektirecektir, eğer kullanıcı deneyimini etkilemeden güvenli bir şekilde erteleyebileceğiniz bir komut dosyası varsa, çok önemlidir. Önce yüklemek ve ilk içerik yüklendikten sonra JavaScript kullanarak enjekte etmek için.
Üçüncü taraf komut dosyalarının kullanımını en aza indirin ve sayfanızda çalıştırılan her üçüncü taraf komut dosyasının sayfanın performansını azaltacak ve genellikle bir web geliştiricisi olarak kontrolünüzün ötesinde JavaScript yürütme süresini azaltın. Gerçekten gerekli olan minimum komut dosyasını sınırlayın. Web sayfalarında yaygın olarak bulunan komut dosyalarına örnek olarak sosyal paylaşım düğmeleri, gömülü videolar, analitik etiketler ve A/B testi için kullanılan platformlardır. Bu araçları ve hizmetleri yalnızca sitenizde kaydedin, eğer değer performans açısından maliyeti aşıyorsa. Sol üçüncü taraf komut dosyaları ve komut dosyasının sayfayı açarken etkiyi en aza indirmek için eşzamansız, erteleme, ön bağlantı ve dns-prefetch gibi özellikler kullandığından emin olun. Yeni nesil formatta mevcut görüntüler Google PagesPeed Insights, deniz feneri puanlarını artırmak için yeni nesil dosya biçimini kullanmayı önerir. Yeni nesil format WebP, JPEG XR ve JPEG2000 içerir ve aynı görüntü kalitesine sahip çok daha iyi sıkıştırma ve daha küçük dosya boyutları sağlar. Zorluk tarayıcı ve bu yeni format için uygulama desteği hala sınırlıdır. İki etkisi var:
Adobe InDesign veya Photoshop gibi grafik tasarımcınız tarafından kullanılan araçlardan bu formatı oluşturmakta zorlanacaksınız
Eski tarayıcılara sahip kullanıcılar yeni nesil görüntü formatını göremeyecek, yani JPG veya PNGMendign gibi geleneksel formatları kullanarak yedek resimler sağlamanız gerekir, yeni nesil görüntülerin formatı kolay değildir, ancak sayfa performansını teşvik etmenize yardımcı olacaktır. , özellikle görsel web içeriği için. Burada, herhangi bir CMS için görüntüleri yeni nesil formatına nasıl dönüştüreceğiniz hakkında bulabilirsiniz: Bu makalede Yeni Nesil Format Sonuçta Görüntüler Sınırlayın Google Deniz Feneri, web sayfaları performansınızı ölçmenize ve kullanıcı deneyimini geliştirmenize yardımcı olabilecek ölçütleri tanıtıyorum. Buna ek olarak, deniz feneri Google’ın arama algoritmasında bir sıralama faktörü olduğundan, deniz fenerinizin puanınızı artırmanın da arama ve trafik derecelendirmeleri üzerinde bir etkisi olacaktır. Web sayfanızdaki deniz feneri puanını artırmanın üç ana yolunu tartışıyorum:
Tembel, ilk içeriği yükleme hızını artırmak için görsel varlıklar içerir
Ana UTA’ları engellemesini önlemek için senaryoyu erteleyin
Önemli performans sonuçlarına sahip olabilen ve web geliştiricilerinin kontrolü dışında olabilen kütüphanelerin ve üçüncü taraf eklentilerinin kullanımını en aza indirin
Ayrıca WordPress’i CMS olarak kullanacaksanız, çalışmanızı kolaylaştırmak için hızlı WordPress temasını ve en iyi WordPress barındırma sağlayıcılarını kullanmanızı öneririz. Umarım bu, Metrik Deniz Feneri’ni daha iyi anlamanıza ve yeni nesil web performans kılavuzuyla web sitenizi uyumlu hale getirmenize yardımcı olacaktır.
