Merhabalar. PageSpeed insights Sayfa hız test edicisindeki problemlerin nerdeyse hepsini çözdüm birşey kalmadı.Masaüstü puanım 97-100 mobil 70-84 arası oynuyor.
Aşağıdaki problem kaldı sadece.Bunları nasıl çözebileceğimi bilmiyorum.Bilgisi olan arkadaşlar yardımcı olabilirse sevinirim.
(2.) Bildiğim kadarıyla bu hata sitedeki font'ların küçük olduğu için veriyor olması. Google font boyutunun büyük olmasını istiyor ki gelen insanlar yazıları rahatca okusun..
tahakuzgun fikirlerimiz var hatta çözdük 100 mobil / 100 masaüstü puan verdi sonunda niçin olmasın :)
Bir kısmı tema editlemesi gerektiriyor.
[*]uyarıyı atlayabilirsiniz. Hız açısından etkisi yoktur. [*]Fontun büyük veya küçük olmasıyla alakalı değil. Font ziyaretçinizin tarayıcısında yüklenirken yazıların nasıl görüneceği ile alakalı. Tema css dosyaları içerisinde font face kodları vardır. font-display: swap; satırını bu kodların arasına eklediğinde ortadan kalkar. Fakat tema güncellemesiyle beraber bu yapacağınız düzenleme kaybolacaktır. [*] Bunun açıklamasını görmem gerekiyor, hiç karşılaşmadım. Ya Cloudflare proxy özelliğiyle alakalı ya da browser cache ile alakalı bir uyarı olabilir. [*] Burada kısacası mümkünse kritik css oluşturmanızı, yine mümkünse gereksiz js, css dosyalarını header'dan footer'a taşımanızı veya defer ile yüklemenin ertelenmesini önermiş. Fakat bunu da çok dikkatli yapmak gerekir çünkü özellikle bazı js dosyaları header kısmında kalmalı ve ertelenmemeli. Çünkü bunlar tema için önem arz eden dosyalar. Aksi halde konsol hataları meydana gelir.
Aslında buradaki puanlar hiçbir şey ifade etmiyor. Birincisi DOM yüklenme süresi ve First paint dediğimiz ilk boyama, ikincisi ise puanınız 100 de olsa 60'da olsa; doğru lokasyondan gerçekte sitenin ne kadar sürede açıldığı önemlidir. Puanların büyük bir çoğunluğu göstermelik olmaktan öteye gidemiyor ne yazıkki.
Dip bucak ilgilenip siteyi sonuna kadar optimize etmek de gerekmiyor. Ziyaretçileriniz "ne kadar yavaş açılmadı bir türlü" demediği sürece hiçbir problem olmaz. Belirli bir optimizasyon hem görsel açıdan site görünümünü bozmayacak hem de size vakit kaybı yaratmayacaktır. :) Tabi kendinizi geliştirmek için yapıyorsanız o ayrı bir mevzu. :)
1.Sorun: Sitenize bağlantı kuran kullanıcıların tarayıcılarında çalıştırmaya çalıştıkları JavaScript kodlarını çalışıp, çalışmadığını tespit etmenizi ve daha sonra javascript kodlarının çalıştırılamadığı kullanıcıyı tespit edip o kullanıcının js kodu çalıştırmadan da siteye erişimini sağlamanız gerekiyor. Çok derin ve uğraş isteyen bir sorun ve tek tek bunu yapmak neredeyse imkansız -ki zaten google bunu bir öneri olarak sunduğunu belirtmiş, açıklama sayfasında.Bunu yaparsan işine yarar gibisinden.
2.Sorun ise sitende kullandığın fontawesome, gibi ikon fontlarına ait, özel fontlar, font kütüphaneleri gibi dosyaların bazı kullanıcıların, özellikle mobil kullanıcılarda sayfa yüklenmesinde sorun yaratabiliyor, bu tarz font ailesi kullandığın css dosyalarına font-display: ve auto | block | swap | fallback | optional 5 paremetreden birini ya da ikisini css dosyalarına ekleyerek sayfa yüklenirken bu tarz özel font kütüphaneleri kullanıcı sayfayı açtıktan sonra yüklenmesini sağlayabilirsiniz.
Kullanıcın kullandığı tarayıcı, senin temanda ki font kütüphanesini desteklemiyorsa, kullanıcının desteklediği fontun kullanılmasını sağlıyor.
3.Sorun: Önbelleğe alınan dosyaların önbellekte tutma süresini uzatmanı istiyor senden. Sürekli değişiklik yapmadığın sabit olan, yılda bir düzenleme yaptığın css,javascript, resim, html gibi dosyaların önbellekte tutulma sürelerini arttır diyor, bir ay duruyorsa onu iki ay yap diyor bunun içinde HTTP response header bilgilerinden Cache-Control komutunu kullanarak artırabilirsin. Örnek komut: Cache-Control: max-age=31536000
Cache eklentisi kullanıyorsan ondan bu tarz ayar vardır, kontrol edebilirsin. Kendine ait bir sunucu kullanıyorsan eğer httpd.conf dosyasını düzeneleme yaparak bu kontrol bilgilerini ekleyebilirsin.
4.Sorun ise site açılırken yüklenmese de olur dediğin css dosyalarına sayfa yüklendikten sonra yüklen komutu vermeni istiyor. Bir nevi javascript dosyalarında kullandığımı async veya defer komutları gibi css de preload kullanılmaktadır.