skip to Main Content
Google Pagespeed İnsights Hataları Ve Çözümleri

Google Pagespeed İnsights Hataları ve Çözümleri

Google Pagespeed İnsights Google tarafından bize sunulan sitenizin mobil ve masaüstü hızını ölçebildiğiniz ücretsiz bir hizmettir. Site hızı ile alakalı hataları size söyleyerek sitenizi hızlandırma konusunda size rehberlik eder.

Google Pagespeed İnsights hataları ve çözümlerine geçmeden önce sizlere site hızlandırma neden arama motorları için önemlidir bundan bahsetmek istiyorum. Öncelikle belirtmek isterim ki site hızlandırma Seo açısından önemli bir kriterdir. Çünkü hızlı bir internet sitesini kullanıcılar tercih eder bu bağlamda kullanıcılar tercih ediyorsa Google’da o siteyi tercih edecektir. Site hızlandırmanın size sağlayacağı belli başlı faydalar aşağıdaki gibidir:

  • Sitenizin kullanıcılar tarafından tercih edilmesini sağlar.
  • Google botları tarafından siteniz daha hızlı taranır.
  • Google sıralamalarında ilk sayfada yer alırsınız.
  • Dönüşüm oranlarınızı arttırırsınız.
  • Satışlarınız ve site trafiğiniz artmış olur.
Page Speed İnsights Hataları ve Ç

Google Pagespeed İnsights Hataları – Fırsatlar

Oluşturmaya Engelleyen Kaynakları Ortadan Kaldırın: Sayfa yükleme hızınızı artırmanın en önemli yolu, içeriğiniz yüklenmeden önce CSS veya JS kaynaklarının yüklenmesine izin vermemektir.  CSS ve Javascript kodunuzu satır içi yapmalısınız. Bu sorunu çözmek için Litespeed Cache, W3 Total Cache ve Wp Fasted Cache gibi cache eklentileri kullanabilirsiniz.

Javascript’inizi ertelemek için eklenti kullanmak istemiyorsanız aşağıda belirtmiş olacağım kodu  functions.php dosyasına eklerseniz sorununuzu manuel olarak çözmüş olursunuz.

Google Pagespeed İnsights

Resimleri Yeni Nesil Biçimlerde Yayınlayın: En yaygın resim biçimleri jpeg ve png dir. Ancak yeni nesil biçimlendirme olan  JPEG 2000, JPEG XR ve WebP daha iyi şıkıştırma sağlar. Resimleri yeni nesil biçimlendirme sizlere daha hızlı indirme, daha az veri tüketimi ve dolayısıyla daha hızlı bir site sağlar.

Doğru Boyuta Sahip Resimler: Sayfanızda olması gerekenden daha büyük resimler varsa bunları uygun şekilde yeniden boyutlandırmak için kullanabileceğiniz eklenti ve siteler mevcuttur. Daha büyük boyuttaki resimlerin yüklenmesi daha uzun sürer, bu nedenle sayfanızın performansını etkiler.  Bunu düzeltmek için sitenize eklediğiniz resimlerin boyutları en fazla 100kb olması gereklidir.

Ekran Dışındaki Resimleri Ertele: Bu yöntem tarayıcılara bir sayfadaki tüm resimleri yüklememelerini, yalnızca geçerli bölümde görünenleri yüklemeleri anlamına gelir. Kullanıcılar sayfada aşağı doğru ilerledikçe, görüntülerin geri kalanı yüklenir. Ekran dışındaki resimleri ertelemek için Lazy load (geç yükleme) eklentisi kullanmanız gereklidir.

Kullanılmayan Css’yi Kaldırın:  Sitenizde gerçekten kullanılmayan CSS varsa, performansınıza gereksiz bir yük getirir. Kullanılmayan Css’leri kaldırmak sitenizin hızını arttırır. Kullanılmayan Css’leri tespit etmek için Google Dev Tools’u kullanabilirsiniz. Bunları sitenizden kaldırmak için purifycss.online ve unused-css.com  sitelerini kullanabilirsiniz.

Sunucu Yanıt Sürelerini Kısaltın: Kullanmış olduğunuz temalar, eklentiler ve sunucunun özellikleri bunların tümü sunucu yanıt verme süresini etkiler.  Litespeed Cache, W3 Total Cache ve Wp Fasted Cache gibi cache eklentileri kullanmanız sunucu yükünü azaltmayı sağlar. Ayrıca CDN kullanımı, kullandığınız eklentileri azaltmanız ve veritabanı optimizasyonu sunucu yanıt süresini kısaltır.

Ücretli veya ücretsiz olarak kullanabilceğiniz birçok CDN eklentisini mevcuttur. Cloudflare sitesinin CDN hizmetini ücretsiz olarak kullanabilirsiniz.

Google Pagespeed İnsights Hataları -Teşhis

Web Yazı Tipi Yüklemesi Sırasında Metnin Görünür Halde Olmasını Sağla:  Sitenizde kullanmış olduğunuz özel yazı tipleri için css satırınıza aşağıda belirtmiş olduğum kodları eklemeniz gereklidir. Font display özelliği özel yazı tiplerinin nasıl yükleneceğini ve görüntüleceğini belirler.

font display :auto; Bu kodu kullanarak özel yazı tipi yüklemesini tarayıcı karar versin dersiniz. font display :block özelliği ile birbirine benzerdir.

@font-face
 { font-family: 'Arvo - auto';
font-display: auto;
src: local('Arvo'),
url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');

font display :block; Özel yazı tipi yüklenene kadar metni gizler.

 @font-face {
font-family: 'Arvo - block';
font-display: block;
src: local('Arvo'),
url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); 

font display :swap; Özel yazı tipi yüklenene kadar sistemin standart yazı tipi ile göstermesini sağlar.

 @font-face {
font-family: 'Arvo - swap';
font-display: swap;
src: local('Arvo'),
url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); 

 font display :fallback; Bu kod block ve swap arası bir davranış gösterir. Metin kısa bir süre için gizlidir (100 ms). Eğer bu süreçte özel yazı tipi yüklenmediyse metin standart yazı tipinde gösterilir. Daha sonra özel yazı tipi yüklendikten sonra ise değiştirilir.

 @font-face {
font-family: 'Arvo - fallback';
font-display: fallback;
src: local('Arvo'),
url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');  

font display :optional; Bu özellik fallback ile benzerdir. Yalnızca tarayıcı, kullanıcının bağlantı hızını bağlı olarak özel yazı tipini kullanmamayı tercih edebilir.

Kaynak:  https://developers.google.com/web/updates/2016/02/font-display

  @font-face {
font-family: 'Arvo - optional';
font-display: optional;
src: local('Arvo'),
url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');  

Statik Öğeleri Verimli Bir Önbellek Politikasıyla Yayınlayın: Bu sorunu çözmek için önbellek uygulaması kullanmanız gereklidir. Önbellekleme sayesinde sitenize ilk kez giren kullanıcılar sitenizin  resimlerini, CSS ve Javascript dosyaları gibi aktif verileri yükleme süresini azaltmak için tarayıcılarında önbelleğe alır. Bu durum da kullanıcılar sitenize ikinci girişlerinde tarayıcılarında bulunan önbelleğe alınmış dosyalar sayesinde siteniz daha hızlı açılır.

Önbellek uygulamanız olmasına rağmen bu hatayı alıyorsanız önbellekleme süresini uzatarak bu sorunu çözebilirsiniz.

Aşırı Büyük Bir Dom Boyutundan Kaçının: Sayfanızın Dom değeri ne kadar büyükse yüklenmesi de o kadar uzun sürer. Çok fazla <div> kullanmak  JavaScript’te DOM (Document Object Model) erişimini yavaşlatabilmektedir. Bu sorun kullandığınız temanızdan da kaynaklı olabilir. Doğru tema kullanılması ve  Javascript kullanımdan kaçınarak Dom boyutunu küçültebilirsiniz.

Site Hızlandırma İçin Diğer Yöntemler

Çok Büyük Ağ Yüklerinden Kaçının: Sitenizde kullandığınız resimleri optimize edin. Jpeg ve Png yerine Webp kullanmayı tercih edin. Görüntülerinizin ve sayfaların boyutlarını küçültün.  Sayfayı tekrar ziyaretlerde kaynakları yeniden indirmemek için istekleri önbelleğe alın.

Sitenizdeki uzun içerikleri sayfalara bölebilir ve yorumların geç yüklenmesi için bir ayar ve eklenti kullanabilirsiniz.

Ana iş parçacığı çalışmasını en aza indir: İlk olarak gereksiz JS ve CSS dosyalarını kaldırmalısınız ve daha sonra JS ve CSS dosyaları küçültmelisiniz. Bu küçültme işlemini  minifier.org sitesinden gerçekleştirebilirsiniz. Ayrıca mutlaka gereksiz eklentileri de kaldırmalısınız.

Kritik İsteklerin Derinliğini En Aza İndirin:  Javascript dosyalarını birleştirmeli, ertelemeli ve CSS / Javascript boyutlarını küçültmelisiniz. Resim optimizasyon işlemleri ve sayfa içeriğini sıkıştırma işlemlerini gerçekleştirerek bu sorunu çözebilirsiniz.

İstek Sayısını Az ve Aktarma Boyutlarını Küçük Tutun: İstek sayısını  (HTTP, SQL sorgusu) ve aktarma boyutlarını azaltmak sitenizin hızlandırılmasını sağlar. Js ve Css dosyaları birleştirin. Üçüncü taraf hizmetlerinin miktarını sınırlayın. Mümkünse  üçüncü taraf dosya yükünü erteleyin. 

Bu sorunu çözmek için Google bize  bir budget.json dosyası kullanmamızı önermektedir.

İlginizi Çekebilir: Yoast Seo ayarları ve kurulumu

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top