Google PageSpeed ​​Insights'ta %100 Puana İhtiyacınız Var mı?

Beklemeyi sevmiyoruz. İnsanlar web sitenizi ziyaret ederken beklemek zorunda kalırlarsa, bundan bıkarlar ve başka bir siteye giderler. Web sitenizin hızlı yüklenmesi günümüzde önemli bir gereksinimdir. Ancak bir web sitesinin yavaş mı yoksa hızlı mı olduğunu nasıl bilebiliriz?

Biliyorum, bu soru biraz aptalca görünüyor. Bir ağın hızlı mı yavaş mı olduğunu yükleme süresini ölçerek anlayabilirsiniz, hah. Zor olan, bu analizden elde edilen değerin “yavaş” veya “hızlı” olarak sınıflandırılıp sınıflandırılamayacağını bilmektir. 2 saniye beklemek sorun olmayabilir ama web sitem bu sürenin yarısında yüklenirse kesinlikle daha iyi olur, değil mi? Özellikle web sitenizin internet bağlantınıza yüklenmesi sadece 2 saniye sürebileceğini hesaba katarsanız, peki ya bağlantısı yavaş olanlar?

Bütün bunlar, ilk bakışta göründüğünden daha karmaşık bir sorundur. Karşılaştırılabilir ölçüler oluşturmak için, Google PageSpeed ​​Insights veya GTMetrix gibi web sitelerinin optimizasyon düzeyini değerlendirenler vardır.

Bu değerlendiriciler, bir web sayfasını analiz edebilir ve optimizasyon düzeyine bağlı olarak 0 ile 100 arasında bir puan verebilir. Ek olarak, web'in özelliklerini tespit eder ve derecesini ve sözde hızını iyileştirmek için yapabileceğimiz önerileri gösterirler.

Bununla birlikte, mükemmellik arayışı ters tepebilir. Google PageSpeed ​​Insights'ta mükemmelliği aramak, web sitenizin kullanıcı deneyimi gibi önemli olan diğer yönlerini de ihmal edebilir.

Google PageSpeed ​​Insights'ta Mükemmelliği Aramak

Kısa süre önce web sitemizin temasını sıfırdan yeniden yazdık ve yeni WordPress blok düzenleyicisinin bloklarını kullanarak tüm sayfalarımızı dönüştürdük. Blok düzenleyicinin özelliklerini daha iyi anlamak ve ayrıca eksikliklerini görmek, yaparak öğrenmek için bir alıştırma oldu.

Bu görevden yararlanarak, final notunu yükseltmek ve istenen 100'e mümkün olduğunca yaklaşmak için web sitemizi Google PageSpeed ​​Insights ile analiz ettik. Daha sonra, göstergeler sayesinde geliştirdiğimiz bazı noktaları göreceğiz. Google ve bununla ilgili sonuçlarımız.

Resimler için uygun bir boyut kullanın

Bu konuyu zaten blogumuzda tartışmıştık. Temanızın ihtiyaçları ile uyumlu görsel boyutları kullanmaya çalışmanız gerektiğini unutmayın. Gerekli olmadıkları için dev resimler kullanmayın.

Google PageSpeed ​​Insights resimlerinizden şikayet ederse, iyi olan şey, hangi resimlerin sorunlara neden olduğunu size söylemesi ve böylece onları düzeltebilmenizdir. Yapması zahmetli bir iştir, ancak sonuçları web'inizin yüklenme süresini doğrudan etkiler.

Ekranda görünmeyen görüntülerin yüklenmesini erteleyin

Ziyaretçinin görmesi gereken sayfanızın tüm bu görüntüleri için, önerilen şey tembel yükleme uygulamaktır .

Tembel yüklemeyi kullanarak elde ettiğiniz şey, sunucudan yalnızca ziyaretçi kaydırdığında ve onu görmesi gerektiğinde bir görüntü istemenizdir. Bu şekilde, ilk istekte sunucuyu aşırı yüklemekten kaçınır ve süreyi kısaltır, web'in daha hızlı yüklenmesini sağlarız. Bununla ilgili bu makaleyi tavsiye ederim. Tembel yükleme için bir eklenti kullanmak istiyorsanız, belki bu size yardımcı olabilir.

Bizim durumumuzda, SiteGround optimizasyon eklentisi tembel yükleme içerir, bu nedenle bu tekniği web sitemizde etkinleştirmek için başka bir şeye ihtiyacımız olmadı.

Web yazı tipi yüklenirken metnin görünür kaldığından emin olun

Bizim yaptığımız gibi Google Webfonts kullanıyorsanız, Google'ın yazı tiplerini yüklemeniz için size verdiği komut dosyasının Google PageSpeed ​​Insights tarafından nasıl geliştirilebilir olarak algılandığını kontrol etmek ironiktir.

Google'a göre, kullanıcıların web yazı tipini yüklerken metni görmeleri için @font-face CSS font-display kullanmalısınız. Özellikle, fontların yüklenmesine font-display:swap koymalısınız, böylece tarayıcı, font kullanılabilir olana kadar metnin işlenmesini engellemez. Google yazı tiplerini indirebilir ve burada açıklandığı gibi font-display kullanarak doğrudan içe aktarabilirsiniz.

Bununla ziyaretçi, belirli Google yazı tipi yüklenmemiş olsa bile metni en baştan görebilir. Yazı tipi kullanılabilir hale geldiği anda, tarayıcı onu metne uygulayacak ve stilini istenen stile dönüştürecektir.

Oluşturmayı engelleyen kaynakları kaldırın

CSS stilleri ve JavaScript komut dosyaları, sırasıyla içerik tasarımını değiştirmek ve dinamik hale getirmek için giderek daha fazla kullanılmaktadır.

CSS ve JS'yi web'in <header> bölümüne yüklersek, normal olan şey, içerik oluşturmanın engellenmesi ve stiller ve JavaScript dosyaları işlenene kadar web'in içeriği yüklememesidir.

Bundan kaçınmanın bir yolu, bu dosyaları web'in <footer> bölümüne taşımaktır. Bunu yaparak, <body> içine giren tüm içerik engellenmeden önce yüklenecek ve işlenecektir.

Ayrıca, yükün ertelenmesi veya eşzamansız olarak yapılması için JavaScript komut dosyalarında defer ve zaman async niteliklerinin kullanılması önerilir.

Google PageSpeed ​​Insights'ın nihai puanını iyileştirmeye yardımcı olan bir başka özellik de, CSS ve JS dosyalarının küçültülmesi ve sıkıştırılmasının yanı sıra bunları sırasıyla tek bir CSS ve JS dosyasında birleştirme gerçeğidir. Bununla birlikte, kombinasyona çok dikkat edin, çünkü bunları yanlış bir sırayla birleştirirseniz, stillerde kusurlara maruz kalabilirsiniz ve JavaScript kodunun yürütülmesini bozabilirsiniz.

Daha iyi sonuçlar almak için bu eklentiyi kullanabilirsiniz, ancak yine de dikkatli kullanın.

Web Sitenizin Hızını Artırmanın Dezavantajları

Google'ın sunduğu önerilere Google PageSpeed ​​Insights raporları kullanılarak çözümler uygulandıktan sonra web sitesinin yüklenme süresi kısalır. Ancak bunun ödemek isteyip istemediğimizin net olmadığı bir bedeli var.

Web sitemizi aydınlatmanın yan etkilerinden biri, bir ziyaretçinin aldığı kullanıcı deneyiminin eskisi kadar iyi olmayabilmesidir. Daha da detaylandırayım…

Web sitemizin içeriğinin en kısa sürede ziyaretçilerimizin tarayıcısında görüntülenebilmesi için JavaScript'lerin ve CSS stillerinin web sitemizin altbilgisine yüklenmesini erteledik ( üstbilgiden altbilgiye gittiler). Ayrıca, web yazı tipine sahip olmadan önce metnin yüklenmesine izin verdik.

Bütün bunlar, ziyaretçinin web içeriğini stil olmadan hızlı bir şekilde görmesine neden olur. Bu da her şeyi oldukça düz ve çirkin gördükleri anlamına gelir. Ayrıca, zaten mevcut olduğunda metnin yazı tipinin nasıl değiştirildiğini fark edeceklerdir. Ziyaretçiler ayrıca CSS ve JavaScript stilleri uygulandığında ve yürütüldüğünde bir miktar titreme görecektir.

Daha önce, yaygın bir WordPress kurulumunda, ziyaretçi web'in sorunsuz bir şekilde yüklendiğini gördü. Şimdi biraz daha hızlı yüklendiğini görecek, ancak yaşadığı tüm bu titreme kullanıcı deneyimini azaltıyor ve ziyaretçinin web'in garip bir şekilde yüklendiğini düşünmesine neden olması mümkün. Hatta bir sayfaya her gittiğinizde bir anlığına titreme göründüğü için web'de bir şey bozuk.

Yükleme süresinde birkaç milisaniye ve Google PageSpeed ​​Insights'ta birkaç ekstra puan kazanmak için ziyaretçilere bu garip hissi vermeye değer mi? Biz öyle düşünmüyoruz. Bu nedenle, WordPress'in varsayılan olarak yaptığı stilleri ve komut dosyalarını yüklemenin yaygın yoluna geri döndük.

Bunun SEO gibi diğer yönler üzerinde olumsuz bir etkisi olup olmadığı, gerçek şu ki bilmiyoruz (ve kimsenin kesin olarak bildiğine inanmıyoruz). Google PageSpeed ​​Insights'ın değerlendirmesinin bazılarının inandığı kadar ağırlığa sahip olup olmadığı da net değil.

Görüntülerin doğru boyutu, ağırlıklarını azaltmak için küçültülmüş dosyalar kullanmak veya sayfada kullanılmayacak her şeyi yüklemekten kaçınmak gibi iyileştirilmesi gereken yönlerin olduğu açıktır.

Web sitenizin optimizasyonunu değerlendirenlerle ve maksimum puanı alarak çıldırmayın. Ne de olsa, hedef ziyaretçiniz etten kemikten yaratılmış, saniyenin onda biri kadar küçük farkları bile takdir edemeyen bir ziyaretçi. Notunuz çoğunlukla doğru olduğunda, başka bir şeye odaklanın.

Unsplash'ta Taun Stewart'tan öne çıkan görüntü .