Kişisel Birşeyler

Yeni Google Page Speed Optimizasyon Rehberi

Yeni Google Page Speed Optimizasyon Rehberi

Yenilenen Google PageSpeed siteler için daha detaylı hız optimizasyon raporları ve önerileri sunuyor. Hataların çözümüne yazının devamından ulaşabilirsiniz.

Google Page Speed Hataları

Güncellenen yeni Google Page Speed, siteleri daha doğru analiz edebilmek için Lighthouse verilerini kullanmaktadır.

# Lighthouse web sitelerinin hızını iyileştirmek için kullanılan açık kaynak kodlu bir araçtır.

Lighthouse hakkında daha detaylı bilgi için https://developers.google.com/web/tools/lighthouse/ adresini ziyaret edebilirsiniz.

Yazının devamında sık karşılaşılan Google Page Speed hatalarını ve çözümlerini görebilirsiniz.

Kullanıcı Zamanlaması işaretleri ve ölçüleri

Önemli kullanıcı deneyimleri esnasında uygulamanızın gerçek dünya performansını ölçmek için uygulamanıza User Timing API’si ekleme seçeneğini değerlendirin. Daha fazla bilgi.

Kullanıcı zamanlamasını web sitenizde kullanmak isterseniz aşağıdaki adımları uygulayabilirsiniz.

CSS Dosyaları:

Bir sayfa, CSS dosyaları yüklenene kadar işlenmez. CSS dosyalarınızın sitenizi ne kadar yavaşlattığını öğrenmek için, aşağıdaki kodu sitenizde CSS dosyalarınızın hemen altına ekleyin.

Sitenizin Logosu:

Sitenizin logosunun html kodunu aşağıdaki koda göre düzenleyin.

JavaScript Kodları:

Çoğu performans sorunu JS veya CSS dosyalarınızdan kaynaklanır. Aşağıdaki kodu JavaScript kodlarınızın hemen altına ekleyerek JS kodlarınızın sitenizi ne kadar yavaşlattığını görebilirsiniz.

Kullanıcı zamanlaması, geliştiricilerin tek tek sayfa öğeleri için özel performans ölçütleri oluşturmasına izin veren resmi bir W3C tanımlamasıdır. Eğer sitenizde detaylı bir analiz yapmak istiyorsanız, yukarıdaki kodları ekleyebilir, W3C tanımlamasını inceleyebilir veya yukarıdaki Daha fazla bilgi linkine tıklayarak Google Kullanıcı Zamanlaması anlatımını inceleyebilirsiniz.

Kullanıcı zamanlaması uyarısı sitenizin Google Page Speed puanını veya site hızınızı düşürmez, bu uyarı için herhangi bir işlem yapmanız gerekmez, yinede bu uyarıyı görmek istemiyorsanız, aşağıdaki anlatımı uygulayın.

# Sadece Google Page Speed testinizde Kullanıcı Zamanlaması işaretleri ve ölçüleri hatasının görünmemesini istiyorsanız, yukarıdaki kullanıcı zamanlaması için verdiğim CSS kodunu, sitenizdeki herhangi bir CSS kodunun altına ekleyerek bu uyarının tekrar görünmesini engelleyebilirsiniz.

Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın

Sitenizde kullandığınız fontawesome veya özel yazı tipleri için css satırınıza aşağıdaki kodu ekleyin.

Örnek Kullanım

@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’);
}

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

Ana iş parçacığı çalışmasını en aza indir

Hata detayından görebileceğiniz üzere Script EvaluationStyle & Layout gibi değerler için harcanan süre gösterilmektedir. Style & Layout değeri sitenizdeki CSS dosyalarının harcadığı süreyi, Script Evaluation değeri ise sitenizdeki JavaScript dosyalarının harcadığı süreyi gösterir.

Öncelikle yapmanız gereken gereksiz js ve css dosyalarını kaldırmakdır.

Gereksiz olan css ve js dosyalarınızı kaldırdıktan sonra JavaScript ve CSS dosyalarınızın boyutunu küçültebilirsiniz.

JavaScript Küçültme Aracı – JavaScript Compresshttps://jscompressor.oguzturk.net/

CSS Küçültme Aracı – CSS Compresshttps://csscompressor.oguzturk.net/

Statik öğeleri verimli bir önbellek politikasıyla yayınlayın

Uyarı veren bölüm ve sayfalar için önbellek kullanmanız veya önbellek mevcutsa önbellek süresini arttırmanız gereklidir. Google Adsense, Google Analytics, Yandex Metrica gibi servisler kullanıyorsanız, bu servisler için uyarı alabilirsiniz.

JavaScript yürütme süresini azaltın

Bu hatayı düzeltebilmek için sitenizdeki JavaScript dosyalarında aşağıdaki düzenlemeleri yapın.

  • Sadece kullanıcılarınızın ihtiyaç duyduğu kodu gösterin.
  • JavaScript kodunuzu küçültün.
  • JavaScript kodunuzu sıkıştırın.
  • Kullanılmayan JavaScript kodlarını kaldırın.
  • JavaScript kodunuzu önbelleğe alın.

Kaynak: https://developers.google.com/web/tools/lighthouse/audits/bootup

Aşırı büyük bir DOM boyutundan kaçının

Tarayıcı mühendisleri, sayfaların yaklaşık olarak 1500’den az DOM düğümü içermesini önerir. En etkili nokta, 32 öğeden ve 60 alt/üst öğeden az olan bir ağaç derinliğidir. Büyük bir DOM, bellek kullanımını artırarak daha uzun [stil hesaplamalarına] yol açabilir ve yüksek maliyetli düzen yeniden düzenlemeleri oluşturabilir. Daha fazla bilgi.

# Dom için Google tarafından hazırlanmış Nesne Modelini Oluşturma (Türkçe) içeriğini aşağıdan okuyabilirsiniz.

Nesne Modelini Oluşturma

Kritik İsteklerin Derinliğini En Aza İndirin

Bu hatayı düzeltebilmek için Page Speed tarafından size gösterilen zincir kullanımını en aza indirmeniz gerekir. Zincir kullanımı sitenizde dışarıdan çağrılan dosyaları listeler (js, css gibi). Bu dosyaların kullamını en aza indirerek bu sorunu düzeltebilirsiniz.

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

Sayfanızda üst kısımda (header) bulunan JavaScript kodlarını alt kısma (footer) alarak bu sorunu düzeltebilirsiniz.

# Css dosyaları alt kısma almak genellikle sitenin ilk yüklenmesinde anlık bir bozuk görünüme neden olur.

Css dosyalarını alt kısıma almak yerine satır içi css kullanımı yaparak hem oluşturmayı engelleyen kaynakları ortadan kaldırın hatasını düzeltebilir, hemde görünüm sorunu yaşamazsınız.

Ekran dışındaki resimleri ertele

Sayfanızda alt kısımlarda bulunan resimlerin ilk açılışta yüklenmesi yerine, sayfa kaydırıldığında yüklenmesini/görünmesini sağlayarak bu hatayı düzeltebilirsiniz.

Bunu sağlamak için sitenizde Lazy Load eklentilerinden birini kullanabilirsiniz.

İNCELE  Detaylı WordPress Resim Optimizasyonu Rehberi

Kullanılmayan CSS’yi erteleyin

Sayfada kullanılmayan CSS’leri kaldırarak veya en alt kısma alarak bu hatayı düzeltebilirsiniz.

Resimleri yeni nesil biçimlerde yayınlayın

Sitenizde .jpeg .png veya .bmp formatında resimler kullanıyorsanız bu hatayı alırsınız. .jpg veya .webp resimleri kullanarak bu hatayı düzeltebilirsiniz.

# Sitenizde Google Adsense reklamları kullanıyorsanız, sitenizde görüntülenen reklam resimleri için anlık olarak bu uyarıyı alabilirsiniz.

Resimleri verimli bir şekilde kodlayın

Sitenizdeki resimleri optimize edip yükleyerek bu hatayı düzeltebilirsiniz. Resim tptimize işlemi için aşağıdaki siteyi kullanabilir veya detaylı resim optimizasyon rehberini inceleyebilirsiniz.

Online Resim Optimize Aracı: https://imagecompressor.com/



Bu yazıyı değerlendirin.
4     4.8/5

2
Yorumlar

1 Yorum Sayısı
1 Yanıt Sayısı
2 Takipçiler
 
En çok tepki verilen yorum
En yeni yorum dizisi
2 Yorum yazarları
Oğuz Oğuztürkcan Son yorum yazarları
  Abone Ol  
En Yeniler Eskiler Beğenilenler
Bildir
can
Ziyaretçi
can

güncel ve güzel rehber için teşekkür ederim. yazı tipleri için vermiş olduğunuz “font-display: auto;” css kodunu her bir yazı tipi için ayrı ayrı yapmamız mı gerekir yoksa wordpress css kısmına sadece bu kodu eklesek yeterli olur mu?