Google PageSpeed Insights Hata Anlamları

Google PageSpeed Insights Nedir ?

Google PageSpeed Insights websitemizin hızını olumlu veya olumsuz şeklinde etkilendiği faktörleri bize sunan ücretsiz bir Google servisidir. Önemli bir SEO kriteri olan hız faktörünü test edip gerekli düzenlemeler için bize yol gösteriyor diyebiliriz. Peki website hızını neden artırmalıyız ? derseniz. Ben bu konuda şunu söylemek istiyorum herkes genellikle bu soruya “Google sıralama konusunda önem veriyor” gibi bir cevap verir. Cevap doğru ancak Google neden önem veriyor ? Kullanıcıların çoğu geç yüklenen sayfaları daha yüklenmeden o sayfayı terk ediyor. Tabi Google amca gözünde sitenizin kalitesi düşüyor haliyle sıralama da sizi geri atmak için gerekli bahanelerden birini elde etmiş oluyor. Demem o ki önce Google’nin önemsediklerini sonra Google’yi önemseyin. Yani önce kullanıcılara sonra Google’ye önem verin. Bu mantıkla yaklaşınca çözüme daha akılcı ve daha hızlı gidersiniz. Çoğu kişi Google’yi aldatma peşinde olur. Diyelim ki başardı, peki ya kullanıcı ? Konumuzun dışına daha fazla sapmadan Google PageSpeed Insights Hatalarını yorumlamaya devam edelim.😊 Google PageSpeed Insights ‘u bir oyun gibi düşünün ve sıkılmaya sinirlenmeye hazır olun. 😊 Google PageSpeed Insights

Website Hızı İçin İlk Kural

Burada daha çok wordpress kullanıcılarına hitap etmek istiyorum. Websiteniz de bulundurmanız gereken bir iki satır kod için eklenti kalabalığı yapmayın. Gerekirse bir uzmandan yardım alın. Kalitesinden emin olmadığınız sürece eklenti kurmayın. Functions dosyasına eklemeniz gereken kodlar var ise direk dosyaya eklemeyin tema dosyalarını bozabilirsiniz. Alternatif olarak dışarıdan kendiniz eklenti oluşturun. Bu konu hakkında yardım isteyen arkadaşlar yorum kısmından bana ulaşabilirler.

 

Sunucu Yanıt Sürelerini Kısaltın (TTFB)

Sunucu geç yanıt veriyor demektir. Bunun sebebi olarak sunucu kalitesi (Sunucuda CPU ve RAM’in tam performansta çalıştığından emin olun), gereksiz eklenti kalabalığı, kullandığınız tema aşırı fonksiyon çalıştırıyor ve sunucunuz bu durum için yetersiz kalabiliyor, tema kötü kodlanmış olabilir.

Çözüm olarak sunucuyu ve sunucu paketini direk değiştirme taraftarı değilim öncelikle diğer sorunların çözümüne odaklanın verim almadığınız zaman sunucu çözümlerine gidin. Başınıza gereksiz maliyet çıkarmamış olacaksınız. Sunucu haricindeki sorunların çözümü için, yani sunucuda gereksiz kalabalık yaptığını düşündüğünüz her şey. Resim optimizasyonu, css ve js sıkıştırma gibi işlemler can kurtarır. Gereksiz kodlanmış temalar için bir uzmandan yardım almanızı tavsiye ederim.

Ayrıca herkesin kontrol etmeyi unuttuğu bir şey daha var. Cpanel de Yazılım başlığı altında Web Sitenizi Optimize Edin başlığı olacak oraya tıklayın ve Devre Dışı özelliği işaretlenmiş ise onun yerine Tüm İçeriği Sıkıştır özelliğini aktif edin. (Terimler Türkçe yerine İngilizce olabilir).

Web Yazı Tipi Yüklemesi Sırasında Metnin Görünür Halde Kalmasını Sağlayın

Bu hatanın çözümü ise basit bir kaç css kodu eklemek olacaktır. Aşağıdaki resimde görüldüğü üzere URL başlığı altında hatanın olduğu dosyalar verilmiştir. Dosyaların üzerine fare imlecini getirdiğinde dosyanın sitenizdeki tam yolunu göreceksiniz. Ftp veya Cpanel’den bağlanıp ilgili dosyaları düzenlemeniz lazım. Aşağıda açıklıyorum.

 

Google-PageSpeed-Insightsweb-yazi-tipi-yuklemesi

İlgili dosyalarda genellikle ilk satırlarda şöyle bir kod yapısı olacaktır.

@font-face {

font-family: ‘Arvo’;

font-display: auto;

src: local(‘Arvo’), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format(‘woff2’);

}

Burada biz herhangi bir noktalı virgülden sonra kod ekleyeceğiz. Ekleyeceğimiz kod   ” font-display: [ deger ] ” şeklindedir. Kod yapısındaki deger yerine ise aşağıda belirmiş olduğum özelliklerden size en çok uyan hangisi ise onu yazın.

  • auto: Özel yazı tipi yükleme stratejisine tarayıcı karar versin demektir. Çoğu zaman block değeri ile aynı davranır.
  • block: Özel yazı tipi yüklenene kadar metni gizler. Daha doğru bir anlatım ile tarayıcı metinleri görünmez bir yer tutucu ile çizer ve yazı tipi yüklenince yazı tipinin belirlediği şekliyle tekrar çizer. FOIT davranışı sergiler.
  • swap: Blok peryodun olmadığı geçiş peryodunun süresiz olduğuğu tanım. Özel yazı tipi yüklenene kadar sisteminin standart yazı tipi ile göstermesini sağlar. FOUT davranışı.
  • fallback: auto ve swap arası bir davranıştır. Tarayıcı 100ms kadar metni gizle eğer yüklenmediyse standart yazı tipi ile gösterir. Yüklendikten sonrada özel yazı tipine geç.
  • optional: Tarayıcı 100ms kadar kısa bir süre özel yazı tipinin yüklenmesi bekler ve yüklenmediyse sistemde yüklü yazı tipi ile içeriği gösterir. fallback ile benzerdir. fallback’den farklı olarak geçiş süresi olmayan bir seçenektir.

Birçok Sayfa Yönlendirmesini Önleyin

Bu hata ise şu anlama gelmektedir. Bir sayfaya girdiniz sayfa bizi başka yere yönlendiriyor. Diğer sayfa başka yere, diğeri de başka yere. Yani kullanıcıyı oyaladınız istediği sayfaya gelebilmek için birden çok sayfayı kullandı. Bunun sonuncunda önce kullanıcı sonra Google sitenizi sevmez. 😊

Doğru Boyuta Sahip Resimler Kullanın

Öncelikle bu yanlış bilginin önüne geçmeniz gerekir. Bir resim ne kadar yüksek pikselli veya hd olursa o kadar iyidir diyebilmemiz için siz konusu resmin doğru boyutlandırılmış olması gerekir. Doğru boyutlu resim demek şu kadar yükseklik şu kadar genişlik demek değildir. Doğru boyutlu resim demek sitenize en uygun boyut demektir. Resmin görüntüleneceği alanın genişliğini CSS kodlarından aşağı yukarı öğrenebilirsiniz. Orantılı bir yükseklik değeri vererek doğru boyutlandırmayı sağlayabilirsiniz.

Kullanılmayan CSS’i Kaldırın

Yukarıda kötü kodlanmış temadan bahsettik. Kötü kod yapısına sahip tema gereksiz Css kodları eklenmiş temaları da kapsar. O yüzden temanızı seçerken dikkatli olun. Sitenizde böyle bir sorun varsa web tasarım hizmeti veren bir arkadaştan yardım alabilirsiniz.

Pagespeed, URL başlığı altında kullanılmayan css kodlarının hangi dosyada olduğunu size gsterecektir.

Aşırı Büyük Bir DOM Boyutundan Kaçının

Bu hatayı anlamak için temel düzeyde de olsa web tasarım bilmek gerekir. Bize diyor ki çok fazla iç içe kod kullanılmış. Yani basit formalite bir örnek ile  <p> </p> yapabilecekken siz <div><div><div></div><p><a href=”#”>Merhaba</a></p></div></div> yapmışsınız. İç içe fazla kod yapısı kullanarak sorgu sayısının artmasına sebep oluyor. Haliyle de site hızını olumsuz etkiliyor. Bunun çözümü için uzman birinden yardım isteyin.

Ekran Dışındaki Resimleri Ertele

Sitelerin çoğunluğu bir ekrana sığacak kadar kısa değildir. Yani aşağı doğru indirdikçe iner. Diyelim ki hizmetlerimiz diye bir sayfanız var. 20 ayrı hizmet sağlıyorsunuz, hizmetler sayfasında bu hizmetleri alt alta her birine bir resim ekleyerek sıraladınız. Site aşağı doğru çok uzamaz mı ? Uzar dediğinizi duyar gibiyim. Web sayfaları engellenmediği sürece sayfaları sonuna kadar indirir öyle açılır yani listenin sonuna kadar her şeyi indirir sonra görüntü gelir. Bu durumda sayfa yüklenme hızı düşmez mi? Düşer dediğiniz duyar gibiyim. 😊 Burada yapmanız gerek ziyaretçiler sayfayı aşağı indirdikçe yüklemeler gerçekleşsin. O halde önbellek eklentileri ile bunun önüne geçelim.

Ana İş Parçacığı Çalışmasını En Aza İndir

Google PageSpeed Insights ‘te bu sorunun temel kaynağı sayfanızın güzel tasarıma ve işlevselliğe sahip olmasını sağlayan Css ve JS kodlarıdır diyebiliriz. Kategoriler başlığı altında gözüken

  • Script Evaluation
  • Style & Layout
  • Other
  • Rendering
  • Parse HTML & CSS
  • Script Parsing & Compilation

Gibi ifadeler Css, JS ve HTML kodlarınızı ifade eder. Bunun çözümü tabi ki yine CSS ve JS kodlarını sıkıştırmak olacaktır.

JavaScript Yürütme Süresini Azaltın

Js kodlarına gerekli optimizasyonlar yapılmadığı takdirde bu hatayı alırız. Bunun çözümü tabi ki yine JS kodlarını optimize etmek olacaktır.

Google PageSpeed Insights

Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın

Tarayıcılar sayfanızı yüklerken arka plandaki kodları yukarıdan aşağı doğru okur. Eğer <body></body> etiketinden önce <head></head> tagları arasında fazlalık yapan JS ve CSS kodlarımız varsa bunla aşağı tarafta bulunan <footer></footer> kısmına alın. Böylece gereksiz yüklemeleri ertelemiş olursunuz.

Statik Ögeleri Verimli Bir Önbellek Politikasıyla Yayınlayın

Bu hatayı anlamak için dinamik Öge (sürekli değişen) ve Statik Öge (sürekli Değişmeyen) ne demektir ona bakalım.

Dinamik Öge: Sayfanızda sürekli değişme ihtimali olan kısımlardır. Yorumları örnek olarak verebiliriz.

Statik Öge: Sayfanızda sürekli değişmeyen kısımlardır. Başlıkları örnek olarak verebiliriz.

Bu hata bize diyor ki statik ögeleri önbellekleme yaparak yayınlayın. Yani bunların sabit olduğunu sürekli değişmediklerini tarayıcıya bildirin. Böylece sayfanız daha hızlı yüklenir. Sitenizi daha önce ziyaret etmiş kullanıcılar daha da hızlı erişebilecekler.

Çözüm cache eklentileridir.

Not: Google Adsense, Google Analytics, Yandex Metrica gibi servisler de bu hataya sebep olabilir.

Google PageSpeed Insights

Üçüncü Taraf Kodun Etkisini Azaltın

Adı üstünde üçüncü taraf kodlar. Yani sayfamızla doğrudan ilişkisi olmayan kodlar. Bunlara örnek olarak Google servisleri, Yandex servisleri, diğer arama motorları servisler ve sosyal paylaşım butonları gösterilebilir. Çözüm olarak gereksiz olanları kaldırmak olacaktır.

Not: Yorum kısmında Facebooktan veri çekmek isteyen arkadaşlar var. tavsiye etmem.

Resimleri Verimli Bir Şekilde Kodlayın & Resimleri Yeni Nesil Biçimde Yayınlayın

Bunun temel sebebi resimlere gerekli optimizasyonun yapılmamasıdır.  Yukarıda bahsetmiş olduğumuz doğru resim olayınız çözerseniz burasıda çözülecektir. Yani resim kalitesini bozmadan doğru boyut vermeniz lazım. Ek olarak yeni nesil uzantılı olmalarına dikkat edin.

Yeni Nesil Resim Uzantılar: JPEG 2000, JPEG XR, WebP vb.

CSS’yi Küçültün & JavaScript’i Küçültün

Bu hata css ve js dosyalarındaki kod satırları arasındaki boşlukları kasteder. 2000 satırın 200 ü boş satır ise tarayıcı dosyayı okurken neden boşuna 200 satırla uğraşsın ? Cache eklentileri ile çözebilirsiniz.

Yukarıdaki maddelerin genel çözümü için konuşacak olursak. Aslında bir çözüm birden çok hatayı yok eder. Aşağıdaki sayacaklarımı dikkatli bir şekilde uygularsanız bir çok hatayı çözersiniz. Yanlarında eğer wordpress kullanıyorsanız eklenti tavsiyesi yazdım.

Resim Optimizasyonu                >>> İmagify

JS geç yükleme                             >>> WP Rocket

CSS / JS boyutu küçültme         >>> WP Rocket

Sayfa içeriği sıkıştırma              >>> WP Rocket ve Sunucu Yanıt Sürelerini Kısaltın (TTFB) başlığı altındaki son paragrafta yazdığım çözüm. Diyerek Google PageSpeed Insights servisinde hatalar ve hata anlamlarına değinmiş olduk. Google PageSpeed Insights aracında hataların ayrıntılı çözümleri için benimle iletişime geçebilirsiniz.

Google PageSpeed Insights

Benzer İçerikler için Tıklayınız.

Beni instagramdan takip etmek için Tıklayınız.

 

 

 

 

 

Yorum Yap

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar işaretlendi *

Yapılan Yorumlar
  1. ONUR

    Güzel içerik teşekkürler.

    • Admin

      Güzel yorumunuz için ben teşekkür ederim.