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.
İçindekiler
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.
1 2 3 4 5 | <link rel="stylesheet" href="/sizindosyaniz.css"> <link rel="stylesheet" href="/sizindosyaniz2.css"> <script> performance.mark("stylesheets done blocking"); </script> |
Sitenizin Logosu:
Sitenizin logosunun html kodunu aşağıdaki koda göre düzenleyin.
1 2 3 4 5 | <img src="logonuz.jpg" onload="performance.clearMarks('img displayed'); performance.mark('img displayed');"> <script> performance.clearMarks("img displayed"); performance.mark("img displayed"); </script> |
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.
1 2 3 4 5 | <script src="a.js"></script> <script src="b.js" async></script> <script> performance.mark("scripts done blocking"); </script> |
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.
1 | font-display: auto; |
Ö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 Evaluation, Style & 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 Compress: https://jscompressor.oguzturk.net/
CSS Küçültme Aracı – CSS Compress: https://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.
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.
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/
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?
Sitede özel bir yazı tipi kullanıyorsanız css dosyasında yukarıdaki örnekteki gibi font-display: auto; kodunu eklemeniz yeterlidir.
Font Awesome kullanıyorsanız aynı şekilde font-display: auto; eklemeniz gerekir.
Page Speed sonuçlarında hata veren yazı tipini bulup ekleyebilirsiniz.
s.a ulaşım telefonu almamız mümkünmüdür
Skype üzerinden iletişime geçebilirsiniz, Kubilay bey.
live:oguz_30
Merhabalar yazınız gerçekten faydalı. Kendi çapımda bir blog sitem var ve wordpress üzerinden görsel olarak her şeyi yapmaya çalışıyorum çünkü çok kod bilgim yok. Pagespeed mobil sonuçlarım kötü 30’larda. Pagespeed teşhis kısmında ; 1. Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın 2. Ana iş parçacığı çalışmasını en aza indir 13,9 sn. 3. JavaScript yürütme süresini azaltın 8,1 sn. 4. Statik öğeleri verimli bir önbellek politikasıyla yayınlayın 27 kaynak bulundu 5. Kritik İsteklerin Derinliğini En Aza İndirin 8 zincir bulundu 6. Keep request counts low and transfer sizes small 159 requests • 1.225 KB bu teşhisler var. Sizin… Read more »
Ana iş parçacığı çalışmasını en aza indir 13,9 sn.
JavaScript yürütme süresini azaltın 8,1 sn.
Yukarıdaki değerler çok fazla görünüyor temanızın detaylı incelenmesi gereklidir.
Evet farkındayım. Colormag teması kullanıyorum. Temayı değiştirsem işe yarar mı? Veya farklı önerileriniz var mı?
Temanızı bilmiyorum maalesef orijinal demosu varsa pagespeed üzerinden onu test edip karşılaştırın.
bu java dosyalarını tarayıcıya yük olmadan önceden nasıl yükleriz. yani optimize.
https://jscompressor.oguzturk.net/
Yukarıdaki sayfadan js kodunuzu küçültebilirsiniz.
Merhaba yukarıdakilerin hepsini yaptım fakat halen devam ediyor hata neden olabilir sizce? hta access tüm kodları ekledim. Bu işi gerçekten 4x4lük daha detaylı anlatmanız mümkün müdür?
Teşekkürler hız %30 arttı.
güzel bir makale olmuş ama css ve js defer işlemini toplu olarak nasıl yapabiliriz. teşekkürler
Kullandığınız sistemi belirtseydiniz bilgi verebilirdim.
Merhaba, kendimize ait bir yazilim kullaniyoruz, sitemizin index i icin style.css yi yeniden duzenledim kuculttum vs, ancak inline yaptigimda duzgun calismiyor, url: https://www.holidayhoppa.com pagespeed yeni-index-style.css yi olusturmayi engelleyen faktörlerden görüyor, günlerdir inline yapip deniyorum, o zamanda site düzgün açılmıyor, bir yolu varmıdır hocam bunun ?
Css kodlarını içeri almanız siteyi bozmaz, hatalı yapıyorsunuzdur işlemi.
Oğuz bey size nasl ulaşabilirim. skype kullanmıyorum.
Skype harici ulaşamazsınız.
teşekkürler