Google PageSpeed Değeri Yükseltme
Google PageSpeed Değeri Nasıl Yükseltilir
Google PageSpeed Seo için olmazsa olmaz bir konumda ve son güncellemer ile puan yükseltmek epey zorlaştı
Bu yazıda elde ettiğim başarıyı ve hangi yolları katettiğimden bahsedeceğim
Görüntüler mobil değere ait ( masaüstü genelde yüksek olur bilirsiniz )
Eski ve Az Çalışılmış Hali
Şu aşamadaki hali ( geliştirmeye devam ediyorum )
Bu konuda
- google analytics
- google adsense
kodlarının değerlere olan olumsuz etkilerinden kurtulmayıda anlatacağım.
Not yazıyı güncelleyeceğim ve cevap olarak çözümleri ekleyeceğim
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (11)
Nerdeyse benim yaptıklarımın aynısını yapmışsın. Kaynak kodu sıkıştırdığında da çok farkediyor. Resimlere boyut verme ile ilgili çözümün çok iyiymiş, onun dışında kendi yaptıklarımı bende paylaşmak isterdim dediğim gibi neredeyse çözümlerimiz aynı, kullandığın cache sınıfına kadar. Mobilde 97 lerdeyim 100 yapamadım henüz. Yeterli mi evet ama kafaya taktım 100 yapmadan bırakmayacağım yakasını. js ve CSS dosyalarını alt alan adından çağırman Google'ın puanlamq sistemini yanıltabilir. Buradaki cdn mantığı çok farklı çalışıyor biliyorsundur tabiki de, bunun hıza hiç bir faydası yok senin yönteminin.
Pandemiden dolayı yazlığa kaçtım ve seriye yavaş yavaş devam edelim
.htaccess dosyası ile sıkıştırmayı aktif ediyorum bu olay biraz muamma her sunucunun farklı olabiliyor ben ornek olması adına alta kodu yazıyorum
bunun farklı veryasyonlarını deneyebılırsınız.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
CSS VE JS LERİ ÖN TANIMLI YÜKLEME çok çok önemli bir konu
<link rel="preload" as="style" href="css/bulma.css">
<link href="css/bulma.css" rel="stylesheet" type="text/css">
<link rel="preload" href="https://cdn.dogadakiler.com/jquery/genel.js" as="script">
<script src="https://cdn.dogadakiler.com/jquery/genel.js" type="text/javascript"></script>
bugunluk bu kadar devamı gelecek
Sayfa Cache Özelliği
Amerikayı yeniden keşfetmekle uğraşmadım bu kodu kullandım
https://github.com/saltun/sCache
Burada sorgulamayı sıfırladıgım için buda sayfanın açılış hızını epey arttrıdı
Dikkat edilmesi gereken şey üye girişi yapmadıysa cache özelliği aktif olmalı
Google Adsense veya benzeri reklam kodlarıda degerlerı dusurmekte
Bunu şu şekilde basitçe çözdüm
$(document).ready( function() {
setTimeout( function() {
$(".google").load("api/google.php");
$(".google2").load("api/google.php");
$(".google3").load("api/google.php");
}, 3500);
});
reklam kodlarını bir sayfada tutup sayfa açıldıktan 3,5 saniye sonra yükletiyorum hem kodlar çalışıyor hemde sayfa puanim yükseliyor
evet daha yazacagım 10 larca şey var vakıt buldukca yazıcam
aşırı dom muhabbeti şu ve ŞAUN SİTEDE TEK SORUN AŞIRI DOM ONUDA YAKINDA HALLEDECEĞİM
<div class="row is-4 mobile-4 vs vs">
<div class="row resim bilmem ne">
<p>
<a href="sss">
<img src="img">
</a>
</p>
</div>
</div>
bunu şu şekilde kullanabılırsın ve aşırı dom olmaz diyor
<a href="sss" class="row">
<img src="img">
</a>
https://dogadakiler.com/Blog/yamac-parasutu-nasil-yapilir/ test edebılırsın
evet makale işi github dan yapılıyorda cok uzun ıs :) dırek makale yazacak alan olsa guzel olur.
anonım olarak sorarken bır uyarı eklemıs bende ondan bunu yazayım dedım ınsanlar aratıp bulsun.
Soruna gelırse ben wight ve height değerlerini şu şekil hesaplayıp yazıyorum işte bu yazıda her şeyi kısmetse yazıcam
$size=getimagesize('img/B/'.$row_foto['f_yol'].'/'.$row_foto['f_byk'].'');
genıslık zaten standart verıyorum sen istersen onuda hesaplatabılırsın
<img class="is-rounded lazy" data-src="img/B/'.$row_foto['f_yol'].$row_foto['f_byk'].'" width="888" height="'.$size[1].'"
$size[1] bu yukseklıgı hesaplıyor
fonksiyon haline getirebilirmişiz aslında bunu neyse bakarız :)
mobilde 6 sn de açılır diyor öyle bir durumda yok neye göre bunları diyor onuda pek anlamış değilim
diye sormussun google testlerı 3g hızında ve düşük hızda mobil smilatörler ile yapıyor yanı oyle son model telefon ve 5g hızında degıl ondan 6 sanıye suruyor dıyor
sonuçta analizlere göre hareket edıyor mısal kullanım analizlerine bakarsan %85 cep den gırıyor sıtelere mobil cihaz bilgileride cabası
analytics kodunu iyi yapmışsın çok aradım bulamadım :) bunla ilgili pek bişi
eline sağlık.
sana 100 puanlık soru o vakit :)
css de resimlere verdiğimiz w h değerlerini pagespeed bu değerleri etiket olarak istiyor önceden istimiyordu 3 ay önce karşılaştım bunla istemeye başladı
bunu img tagına etiket eklemeden nasıl aşıcaz :)
resimleri webp olarak kullanıyorum. üstüne bu boostrap kullananlar ben dahil kullanılmayan cssleri kaldırın diyor adamların cdn den kullandığımız halde burda bir sorun çıkarıyor.
aynı hatayı jquery.min.js için de geçerli.
aşırı dom boyutu zaten anladığım kadarı ile ana sayfada bişi gösterme diyor :)
kritik istek zinciri e bunlar lazım ki kullanıyoruz herşeyi düz yazı ile yap diyor :)
mobil puan 49 masaüstü 92
mobilde 6 sn de açılır diyor öyle bir durumda yok neye göre bunları diyor onuda pek anlamış değilim
hata olarak bir hata da göstermiyor
sunucu kaynaklı sunucu yanıt süresi azalt ve yukarda yazdığım 2 hata ama mobil puani 49 :)
tekrar elinde sağlık güzel bir makale olmuş keşke @tayfunerbilen makale alanına üyelerin makalaelerini onaylayarak ekleyebilsek orda sabit durması herkesin yararına olabilir.
Sitedeki js css ve benzeri dosyaları subdomain açarak
cdn.siteadi.com tarzında bu alan adında tutup oradan cagırıyorum buda bir çok uyarıdan kurtulmama ve puanın yükselmesine vesile oldu
<script src="https://cdn.siteadi.com/jquery/jquery.js"></script>
Fotoğraflara (resimlere) lazy load eklentisi ekledim buda sayfa açıldıktan sonra yüklenmelerine etki ettiği için puan yükseldi
Google Analytics kodunun PageSpeed puanını düşürmemesi için bu şekilde kullanmalıyız ( Stabil çalışıyor )
<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights') === false): ?>
<script>
function gaSSDSLoad (acct) {
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."),
pageTracker,
s;
s = document.createElement('script');
s.src = gaJsHost + 'google-analytics.com/ga.js';
s.type = 'text/javascript';
s.onloadDone = false;
function init () {
pageTracker = _gat._getTracker(acct);
pageTracker._trackPageview();
}
s.onload = function () {
s.onloadDone = true;
init();
};
s.onreadystatechange = function() {
if (('loaded' === s.readyState || 'complete' === s.readyState) && !s.onloadDone) {
s.onloadDone = true;
init();
}
};
document.getElementsByTagName('head')[0].appendChild(s);
}
gaSSDSLoad("UA-1*****"); //KULLANICI KODUNU BURAYA YAZACAKSINIZ
</script>
<?php endif; ?>