Labs, SEO Tricks

Site Hızlandırma Taktikleri #pagespeed #gtmetrix

Sitenizin hızı, seo açısından çok önemli bir konudur. Google raporlarında geç açılan sitelere geri dönüşlerin daha az olduğu yazmaktadır. Bu sebeple hızlı, sade siteler daha hızlı google yükselmektedir.

yzr: Hakkı Cengiz
A+ A A- okuma

Site Hızlandırma Taktikleri #pagespeed #gtmetrix

Hakkı Cengiz 14 Nisan 201717 Nisan 2017

Sitenizin hızı, seo açısından çok önemli bir konudur. Google raporlarında geç açılan sitelere geri dönüşlerin daha az olduğu yazmaktadır. Bu sebeple hızlı, sade siteler daha hızlı google yükselmektedir.

Peki sitemizi yavaşlatan unsurlar neler?

  • En başta Eklentiler -Wordpress’te o kadar göz alıcı eklentileer var ki. Bu yüzden birçok site sahibinin yaptığı hata sitelerini eklentilerle donatmak.
  • Sitenin üst tarafında <head>..</head> yer alan js,css dosyaları – Site açılırken ilk okunan yer üst kısım (header) alanıdır ve bu yüzden java, css dosyaları geç açılarak canınızı sıkacaktır.
  • Optimize Edilmemiş Resimler – “Göz at, resim seç, upload” ııı artık bu iş böyle yürümüyor. Resimlerin boyutları çok yüksek olabileceğinden dolayı küçültme işlemi uygulanması gerekmekte. Bunun detaylarını aşağıda vericem.
  • Optimize Edilmemiş CSS ve JavaScript Dosyaları – Yine aynı şekilde bazı temalar,eklentiler bol kepçeden kod yazımı yaptığından ötürü biz ziyaretçileri sitenin yükleme ekranında daha fazla beklememize neden oluyor.
  • Tarayıcı Önbellekleme Özelliğinin Kullanılmaması – Bu nedir kanka dersen, kısaca çerez kullanımı, ziyaretçinin siteye bir sonraki girişin daha hızlı açılması olayı.

Öncelikle sitenizin şuanki hızını görüntülemeniz için kullanacağımız siteleri belirterek yazıya başlamak istiyorum. Olabildiğince basite indirgerek bir yazı yazma planındayım. Kullanabileceğiniz siteler;

  • Google Pagespeed
  • Gtmetrix
  • Tools.Pingdom

Eklentilerden kurtulun!

“Ben yazmadigim hiç bir şeyi bilmem kullanmam” Gökhan Kara

Gökhan abimin dediği gibi eğer wp ve kod bilginize güveniyorsanız eklenti kullanımını olabildiğince azaltın. Elin adamı o kodu yazabiliyorsa sizde yazabilirsiniz. Eklenti yerine kendi yazdığınız kodları sitenize entegre etmeye çalışın.

Yok eğer wp ve kod bilginiz yetmez diyorsanız yine en azami seviyede eklenti kullanımına önem gösterin.

Resimleri Optimize Etmek

Site hızlandırma konusunda en ciddi olay resimleri küçültmektir aslında. Çünkü siz ne kadar kırpsanız
da photoshopda küçültsenizde google size “cuk bu olamamış biraz daha küçült öyle gel buraya” diyebilir.

7 Kural Başarılı Google Pagespeed örnek

Peki nasıl küçülteceğiz bu resimler? Google bu işe de el atıyor ve
“Bu sayfa için, optimize edilmiş resim, Javascript ve CSS kaynaklarını indir” e tıkladığınızda küçültülmüş kaynakları indirip ftp’den site dizinine atabilirsiniz.
Dipnot: Bu küçültülen dosyalar bazı temalarda logonuzu, profil fotonuzu aşırı küçültebilir ve bozulmalara neden olabilir. Bu yüzden yedek almayı unutmayın. O tür bozulan resimlerinizi de Optimizilla sitesini kullanarak optimize etmeniz daha faydalı olacaktır.

Tarayıcı Önbellekleme Özelliğinden Yararlanarak Site Hızlandırma

Tarayıcı önbellekleme özelliğinden yararlanın, Pagespeed sorgu sonuçlarında önemle bütün site sorgularında karşılaştığımız bir uyarı bu. Peki ne demek istiyor Google Pagespeed bize “Tarayıcı önbellekleme özelliğinden yararlanın” şeklinde bir ileti ile ?

Tarayıcı önbellekleme özelliği ; Cache sisteminin aktif olmasından başka bir şey değil aslında. Kullanıcılarınız sitenize her yeni giriş yaptıklarında, sayfanızda bulunan “image, swf, js” gibi dosyalarınızın “reload” tekrar yüklenmemesini sağlayacak ve sayfa açılış zamanınızı arttırmış olacaksınız. Sanırım en basit şekli ile anlatımı bu olur.

Bu özelliği aktif hale getirebilmek için bir .htaccess dosyasına ihtiyacınız var. .htaccess dosyasını sitenizin kurulu olduğu ana dizinde bulabilirsiniz. Filezilla ile veya direk ftp bağlantısı ile masaüstüne indirerek düzenleyebilirsiniz.
.htaccess dosyasına entegre etmeniz gereken kod betiği :

<ifmodule mod_expires.c>
<filesmatch “\.(jpg|gif|png|css|js)$”>
ExpiresActive on
ExpiresDefault “access plus 1 year”
</filesmatch>
</ifmodule>

İlgili bağlantıda  yer alan “js, jpg, png, css, gif, php” gibi dosyalarınızın önbellekleme süresini uzattık. “Return User” yani sitenizin stabil kullanıcıları 2. kez sitenizi açtıklarında bu tarz dosyalarınız “reload” olmayacak ve sayfa açılış zamanınızı minimize etmiş olacaksınız.

Sıkıştırmayı Etkinleştirmek

Web sunucunuz site içeriğini kullanıcıya gönderirken sıkıştırarak hız kazanmanızı sağlayabilir. Bu özelliği aktive etmek için sitenizin kök dizininde bulunan .htaccess dosyasının sonuna aşağıdaki kodu ekleyin.

SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding “gzip,deflate” env=HAVE_Accept-Encoding
# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:

FilterDeclare COMPRESS
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype
FilterChain COMPRESS
FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
# Legacy versions of Apache
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml
AddOutputFilterByType DEFLATE application/atom+xml
AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font-ttf font/opentype

Böylelikle içeriğin sıkıştırılması otomatik olarak sağlanacak.

JavaScript Dosyalarını Footera Taşımak

Düzeltmeyi Düşünün Google Pagespeed

Şimdiye kadar  web siteniz üzerinde herhangi bir optimizasyon işlemi yapmadıysanız sitenizi Google PageSpeed Insights testine soktuğunuzda “Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın” şeklinde bir hatayı muhtemelen alacaksınız.

Şimdi bu hatadaki JS dosyalarından “functions.php” dosyasını kullanarak nasıl kurtulacağınızı göstereceğim. Bilmeyenler için /wp-content/themes/sizin-temaniz içinde yer alır. Yanlışlıkla yapacağınız değişikliklerden az sıkrıkla kurtulmak için yedek almayı unutmayın. Alttaki kodları “functions.php” de en alta ekleyelim. Eğer ?> php bitiş etiketi varsa üzerine ekleyiniz. Şimdi dosyayı açtığımıza göre hemen ekleyeceğimiz kodlara geçelim:

// JS dosyalarını footera taşıma kodu başlangıcı.
function remove_head_scripts() {
remove_action(‘wp_head’, ‘wp_print_scripts’);
remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5); }
add_action( ‘wp_enqueue_scripts’, ‘remove_head_scripts’ );
// JS dosyalarını footera taşıma kodu sonu.

Kodları ‘functions.php’ dosyasına yapıştırdıktan sonra kaydedin. Ardından PageSpeed testini tekrar uygulayın. JS dosyaları hakkında verdiği uyarıyı karşılaştırın. Eğer değişiklik olmuşsa rahatlayın hepsi bu kadar!

Bazı temalar bu kodlarla herhangi bir değişiklik göstermeyebilir. Eğer PageSpeed Insights sonuçlarında gösterilen javascript dosyalarının sonunda .js?ver=1.3.5 gibi bir versiyon kodu bulunuyorsa şimdi yapacağımız adımları deneyin. Bu hatayı aynı zamanda gtmetrix’te şu isimle görebilirsiniz “Remove query strings from static resources”. Bu hatayı gidermek için şu eklentiyi kurarakta çözebilirsiniz ama biz eklentisiz çözelim.

Öncelikle aşağıdaki kodu functions.php dosyasına ekleyin:

// Version parametresini kaldır kodu başlangıcı
function vc_remove_wp_ver_css_js( $src ) {
if ( strpos( $src, ‘ver=’ ) )
$src = remove_query_arg( ‘ver’, $src );
return $src;
}
add_filter( ‘style_loader_src’, ‘vc_remove_wp_ver_css_js’, 9999 );
add_filter( ‘script_loader_src’, ‘vc_remove_wp_ver_css_js’, 9999 );
// Version parametresini kaldır kodu sonu

Yukarıdaki kodu functions.php dosyasının en sonuna ekleyin. Ardından başka hiçbir değişiklik yapmadan testi yenileyin. Versiyon parametreleri kalkmış şekilde görünecektir.

Versiyon parametrelerini kaldırdıktan sonra ilk verdiğim kodu yukardaki versiyon parametreleri kaldırma kodunun hemen altına ekleyin ve testi yeniden deneyin. Yani functions.php dosyasının en altındaki görüntü şu şekilde olacak:

// Version parametresini kaldır kodu başlangıcı
function vc_remove_wp_ver_css_js( $src ) {
if ( strpos( $src, ‘ver=’ ) )
$src = remove_query_arg( ‘ver’, $src );
return $src;
}
add_filter( ‘style_loader_src’, ‘vc_remove_wp_ver_css_js’, 9999 );
add_filter( ‘script_loader_src’, ‘vc_remove_wp_ver_css_js’, 9999 );
// Version parametresini kaldır kodu sonu

// JS dosyalarını footera taşıma kodu başlangıcı.
function remove_head_scripts() {
remove_action(‘wp_head’, ‘wp_print_scripts’);
remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5); }
add_action( ‘wp_enqueue_scripts’, ‘remove_head_scripts’ );
// JS dosyalarını footera taşıma kodu sonu.

eğer bi değişiklik olmazsa pagespeed’de altta vereceğim kodlarla değiştirin eklediğiniz kodları:

// Version parametresini kaldır kodu başlangıcı
function vc_remove_wp_ver_css_js( $src ) {
if ( strpos( $src, ‘ver=’ ) )
$src = remove_query_arg( ‘ver’, $src );
return $src;
}
add_filter( ‘style_loader_src’, ‘vc_remove_wp_ver_css_js’, 9999 );
add_filter( ‘script_loader_src’, ‘vc_remove_wp_ver_css_js’, 9999 );
// Version parametresini kaldır kodu sonu
//Alternatif JS dosyalarını footera taşıma kodu başlangıcı
function footer_enqueue_scripts() {
remove_action(‘wp_head’, ‘wp_print_scripts’);
remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5); }
add_action(‘after_setup_theme’, ‘footer_enqueue_scripts’);
// Kod sonu

kaynaklar:

  • blogkurdu.net/WordPress JavaScript Dosyalarını Footera Taşımak
  • cemturk.net/WordPress Sitenizi Hızlandırmak ve Optimizasyon
  • metinsarac.net/Remove Query Strings From Static Resources Çözümü
  • wpmavi.com/wordpress site hizlandirma
  • stackoverflow.com/questions/17098346/wordpress-showing-my-drafts-on-the-front-end
  • wordpress.stackexchange.com/questions/41588/how-to-get-the-clean-permalink-in-a-draft
  • semihkilic.net/javascript-ve-css-kodlarini-ust-kisimdan-kaldirin
4 Yorumları: - Yorum Formunu: -

    Sitemde hız konusunda ciddi sorunlar yasiyordum. Guzel bir yazi olmus denedikten sonra umarım sitem hızlanır:)

    3 sene önce - Ali Hakverdi

    Sonunda gerçekten bilgilendirici bir yazı buldum. Ne zamandır sitemi nasıl hızlandırırım diye çabalıyordum. Bu muhteşem yazı için teşekkür ederim 🙂

    3 sene önce - Bekir

    benim sitemde aşırı boyutlu resimler var bu da açılışı yavaşlatıyor. Bu kadar resmi kolay yoldan nasıl optimize edebilirim. FTP’den çekip program ile toplu şekilde optimize edebilir miyim?

    3 sene önce - kilic

      Resimleri Optimize Etme kısmında bahsettiğim iki yol işine yarar. Daha kısa yol olarak PC için google’a “multiple image resizer” yazarsan o program işine yarayabilir.

      3 sene önce - hkkcngz

Bi yoruma ne dersin ?

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