Site hızlandırma ve seo optimizasyonu

Merhaba arkadaşlar bugün sizlere site hızlandırma ve seo optimizasyonu hakkında bir yazı hazırladım. Genel olarak bu iş için hangi araçları kullanacağız, nasıl yapacağız kısmını elimden geldiğince bilgi ve tecrübelerime dayanarak anlatmaya çalışacağım.

Site hızlandırma

Kullanacağımız araç siteler;

  • Web sayfalarımızın tüm cihazlarda hızlı açılması için analiz yapıp önerilerde bulunan google’ın insights teknolojisi.
  • Yine hemen hemen aynı işi yapıp bize önerilerinin yanı sıra, çözümlerini de sunan gtmetrix

 

İlk olarak buradan sitemizin analizini yapalım. Düzeltebileceğimiz sorunların yanısıra düzeltmesekte olur diyebileceğimiz sonuçlarıda göreceğiz.

Ben kendi sitemin gerekli gördüğüm sorunlarını düzelttiğim için, başka bir siteyi ele alacağım. orumcekoyun.com sitesinden yola çıkarak anlatımıma devam ediyorum.

orumcekmobil

İlk gözümüze çarpan sitemizin mobil bölümünde çok düşük puan alması oldu, eğer mobil uyumlu esnek bir tema kullanmıyorsak, bu kısım için yapabileceğimiz tek şey mobil uyumlu tema kullanmaktır. Yine de giderebileceğimiz bir kaç şey var elbette.

Sıkıştırmayı etkinleştirin yazan yerin hemen altında sıkıştırmamız gereken dosyalar listelenmiş.

  • http://orumcekoyun.com/files/asitoyun.png sayfasının kayıpsız sıkıştırılması 1,2 KB tasarruf (%3 azalma) sağlayabilir.
  • http://orumcekoyun.com/images/logo.png sayfasının kayıpsız sıkıştırılması 1,2 KB tasarruf (%6 azalma) sağlayabilir.
  • http://xsltcache.alexa.com/…f/s/a/d3d3Lm9ydW1jZWtveXVuLmNvbQ==/s.gifsayfasının kayıpsız sıkıştırılması 1,2 KB tasarruf (%39 azalma) sağlayabilir.

asitoyun.png dosyasını sıkıştırmak ve 1.2 kb tasarruf sağılıyor, dosyanın sunucumuzda nerde olduğu da belirtilmiş. Bunu yapmadan önce bu işlemlerden keyif almak adına ilk olarak sitemizin açılış süresini ve toplam sayfa boyutunu öğrenelim. Gtmetrix‘e uğrayarak sayfamızı analiz edelim sağ üstte istediğimiz bilgileri göreceğiz.

Benim elde ettiğim sorgulama sonucunda sitemiz; bunu bir yere not edelim ki hem bu işten keyif alalım hemde işlemler sonucunda aradaki farkı görebilelim.

Page load time: 4.88s (Sayfa yüklenme süresi)
Total page size: 273KB (Açılış sayfamızın toplam boyutu)
Total number of requests: 39 (Bizden düzeltilmesi istenen sorun sayısı)

Peki; 1.2 kb, için değer mi? Eğer bu dosyalardan oldukça fazlaysa değer. Google sayfa boyutu düşük olduğu halde zengin ve sade içerik sunan sitelere arama sonuçlarında öncelik tanıyor. Bunu yaparken de kendi puanlama sistemini baz alıyor.  Yani google site hızına da önem veriyor. Google sadece asitoyun.png ve logo.png dosyalarını sıkıştırmamızı istemekle yetinirken, gtmetrix.com sonuçlarında sıkıştırabileceğimiz daha fazla dosya sayısı listeleniyor. Bu verilere ulaşmak için gtmetrix.com‘da analiz yaptıktan sonra Optimize images kısmını tıklıyoruz. Sonuçlar şöyle;

Optimizing the following images could reduce their size by 6.3KiB (5% reduction).

  • Losslessly compressing http://orumcekoyun.com/files/asitoyun.png could save 1.2KiB (3% reduction). Seeoptimized version
  • Losslessly compressing http://orumcekoyun.com/images/logo.png could save 1.2KiB (6% reduction). Seeoptimized version
  • Losslessly compressing http://xsltcache.alexa.com/site_stats/gif/s/a/d3d3Lm9ydW1jZWtveXVuLmNvbQ==/s.gifcould save 1.2KiB (39% reduction). See optimized version
  • Losslessly compressing http://orumcekoyun.com/images/main.png could save 333B (6% reduction). Seeoptimized version
  • Losslessly compressing http://www.w3.org/Icons/valid-xhtml10 could save 327B (18% reduction). Seeoptimized version
  • Losslessly compressing http://orumcekoyun.com/images/download.png could save 311B (5% reduction). Seeoptimized version
  • Losslessly compressing http://orumcekoyun.com/images/templates.png could save 257B (4% reduction). Seeoptimized version
  • Losslessly compressing http://orumcekoyun.com/images/bodybg.png could save 249B (70% reduction). Seeoptimized version
  • Losslessly compressing http://orumcekoyun.com/images/installation.png could save 227B (4% reduction). See optimized version
  • Losslessly compressing http://orumcekoyun.com/images/licence.png could save 191B (3% reduction). Seeoptimized version
  • Losslessly compressing http://orumcekoyun.com/images/features.png could save 186B (3% reduction). Seeoptimized version
  • Losslessly compressing http://orumcekoyun.com/images/contact.png could save 184B (3% reduction). Seeoptimized version
  • Losslessly compressing http://orumcekoyun.com/images/forum.png could save 174B (3% reduction). Seeoptimized version
  • Losslessly compressing http://orumcekoyun.com/images/demo.png could save 173B (3% reduction). Seeoptimized version
  • Losslessly compressing http://orumcekoyun.com/images/dot.png could save 61B (39% reduction). Seeoptimized version
  • Losslessly compressing http://orumcekoyun.com/images/star.png could save 1B (1% reduction). Seeoptimized version

Her resim url’sinin yanında See optimized version yazıyor, yani optimize edilmiş hallerini bu linklerden indirip sunucumuzdakilerle değiştirebiliyoruz. Bu işlemin ardından, toplam sayfa boyutumuz 6.3 kb lık bir tasarruf sağlayacağımız ifade edilmiş.

w3.org ve alexa.com üzerinden sitemizin alexa’da ve w3.org’da ne durumda olduğunu gösteren bir kod var, bu kodda kullanılan gifler söz konusu sitelerde barındığı için buna müdahale etmemiz mümkün değil istersek kaldırabiliriz. Ben kaldırdığımızı varsayıyorum.

273-6.3=266.7 kb’a düştük google hız puanımız az da olsa yükseldi devam edelim.

  • http://orumcekoyun.com/lightbox.css kaynağının küçültülmesi 1,7 KB tasarruf (%42 azalma) sağlayabilir.

Google sitemizde küçültmemiz gereken css dosyalarını listelemiş durumda bizim baz aldığımız örnek sitemizde sıkıştırılması gereken tek bir css dosyası mevcut, bu iyi haber. Bu dosyayı sıkıştırmak için yine gtmetrix.com sitesine başvuruyoruz. Analizimizi yaptıktan sonra, google’ın önemsemediği ancak gtmetrix’te ilaveten style.css ve reset.css dosyalarının sıkıştırılması gerektiğini görüyoruz.

Minify Css’ye tıklayın

Minifying the following CSS resources could reduce their size by 2.2KiB (21% reduction).

  • Minifying http://orumcekoyun.com/lightbox.css could save 1.7KiB (42% reduction). See optimized version
  • Minifying http://orumcekoyun.com/style.css could save 477B (9% reduction). See optimized version
  • Minifying http://orumcekoyun.com/reset.css could save 3B (1% reduction). See optimized version

Her linkin sonunda optimized version adında bir link daha var, bu o dosyanın optimize edilmiş hali.. Optimize edilmiş halleriyle bu dosyaları değiştirerek sunucumuza attığımızda toplam 2.2 kb tasarruf sağlayacağız.

266.7-2.2=264.5 kb’a düştük aynı zamanda css sorunlarımızı da hallettiğimiz için google bize biraz daha puan verdi.

Ukala google js dosyalarını küçültmeyi düşünün diyor. Bize küçültememiz gereken .js dosyalarını listelemiş.

  • http://xslt.alexa.com/…ite_stats/js/s/a?url=www.orumcekoyun.com kaynağının küçültülmesi 978 B tasarruf (%32 azalma) sağlayabilir.

Biz bunu zaten kaldırmıştık, ama yine de gtmetrix.com’a uğrayalım belki onun da söyleyeceği bi kaç şey vardır. Analiz sonrası bu kez Minify JavaScript‘e tıklıyoruz ayrıntıları inceliyoruz. Listelenen şu şekilde;

Minifying the following JavaScript resources could reduce their size by 1.4KiB (2% reduction).

  • Minifying http://xslt.alexa.com/site_stats/js/s/a?url=www.orumcekoyun.com could save 972B (31% reduction). See optimized version
  • Minifying http://mc.yandex.ru/metrika/watch.js could save 197B (1% reduction) after compression. Seeoptimized version
  • Minifying http://orumcekoyun.com/jquery-1.10.2.min.js could save 130B (1% reduction). See optimized version
  • Minifying http://cdn.tynt.com/tc.js could save 78B (3% reduction) after compression. See optimized version
  • Minifying http://say.ac/v2.php?sid=8816 could save 68B (14% reduction). See optimized version
  • Minifying http://srv.sayyac.net/sa.js?_salogin=orumcekana&_sav=4.3 could save 11B (1% reduction). Seeoptimized version
  • Minifying http://srv.sayyac.net/count.js could save 2B (2% reduction). See optimized version
  • Minifying http://widgets.amung.us/tab.js could save 1B (1% reduction) after compression. See optimized version

Optimized versiyonlarıyla değişimi tamamladıktan sonra toplamda 1.4 kb bir tasarruf elde edeceğimizi söylüyor.

264.5-1.4=263.1 kb’a düştük js sorunlarımız sıfıra indiği için google bize yine puan verdi. Yazımın en başında not almıştık

273kb dan 263.1 kb’ düşmek bir başarıdır. Rakiplerinizi hız olarakta geçin, bu yazımda site hızının önemini, bunun seoya etkisini herkesin kolayca yapabileceği düzeltmelerden bahsetmeye çalıştım. Umarım işinize yarar.

Ek olarak gtmetrix hataları çözümleri

Avoid a character set in the meta tag sorunu
Çözüm; .htaccess dosyanıza aşağıdaki ekleyin. Önbellek temizleyin.

Kod:
# pass the default character set
AddDefaultCharset utf-8

Remove query strings from static resources sorunu
Çözüm:Bu hatada wordpress için bir çözüm bulabildim. Sizden url dizininde ki ? işaretlerinin kaldırılmasını istiyor, önbellekleme ? işareti olan kısma kadar yapılıyormuş, soru işaretinden sonra ki kısım önbelleğe alınmadığı için yavaşlamalar meydana geliyor. Bunun için küçük bir eklenti indiriyoruz.
Eklenti: Remove query strings from static resources (Yeni eklenti ekle deyip aratın)

Vary: Accept-Encoding Sorunu
Çözüm: .htaccess dosyanıza şu kodu ekleyin. Kod eklendikten sonra önbelleği temizleyin.

</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

Html optimized

Çözüm: İnternet üzerinde html kodları sıkıştıran online bir çok uygulama mevcut. Ancak hepimizin takıldığı nokta şu, bu online uygulamalardan faydalanabilmek için sitelerimizin sayfalarının tamamen html diliyle kodlanmış olması gerekir ki hata almayalım. Günümüzde html dilini yalın olarak kullanan pek kalmamıştır, sitelerimiz genelde php dili ile kodlanmakta. Sitemizin tam olarak sayfası, ‘header, content, footer, index’ gibi ayrı ayrı kod dosyalarından oluşuyor. Kodlamaların arasında html dili kullanılmış olsa da tamamen html değiller. Benim tavsiyem online html kod sıkıştırıcılarından uzak durun, fazladan boşluk, karakter silerek sitemizi hizlandıracağız derken komple içine etmenin bi anlamı yok. Mutlaka yedek alarak çalışın, maceraya gerek yok Bu sıkıştırmaları notepad ++ gibi programlarla manuel olarak yapın, gereksiz satır atlamalarını, boşluklarını silin.
Kodların yanında, üstünde, altında, bulunan yeşil açıklamaları silebilirsiniz. Buna örnek olarak;
örümcekoyun scriptinden index.php dosyasının bir bir kısmını ele aldım.

Kod:
	@require('ayarlar.php');
	@require('libs/Smarty.class.php');  // smartyi projemize dahil ediyoruz.
	$smarty = new Smarty;  //smarty classını yaratıyoruz.
	$smarty->template_dir = 'temalar/'.tema; 
	$smarty->force_compile = true; // compile işlemini açıyoruz.
	$smarty->allow_php_tag=true;
	$smarty->debugging = false; // debugging işlemini açıyoruz.
	$smarty->trusted_dir = 'temalar/'.tema.'/uyeislem';

	if ($cacheaktif==1) {
		$smarty->caching = true; //caching özelliğini açıyoruz.
	} else {
		$smarty->caching = false; //caching özelliğini kapatıyoruz.
	}
	$smarty->cache_lifetime = $cachesure; // caching yaşam süresini saniye olarak belirliyoruz.

Sadece yeşil açıklama yazılarını temizlediğinizde bile baytlarca küçültme yapmış olacaksınız.

Use a Content Delivery Network (CDN)
Çözüm: CDN açılımı İçerik Dağıtım Ağı. Ben size kısaca bunun ne olduğundan bahsedeceğim çözümü siz kendiniz bulmuş olacaksınız. CDN hizmeti veren ücretli bir çok site var, yani bunun ücretli olduğunu bilin. Siz sitenize dosya yüklediğinizde, cdn sitenizden aldığınız api sayesinde dünya üzerinde, aynı anda bir çok makinaya yüklemiş oluyorsunuz. Sitenize giren ziyaretçi hangi ülke yada bölgeden giriyorsa, yani IP olarak hangi makinaya yakınsa o ziyaretçiye söz konusu külfetli dosya o makinadan sunuluyor, bu ekstra bir hız demek. Ben kendi çapımda ‘ücretsiz cdn’ adı altında yaptığım araştırmalarda, kullanıcıların resim dosyalarını facebook’a yükleyerek sitesindeki linkleri de bunlarla değiştirerek bu sorunu aştığını okudum. Facebook gibi bir sitenin cdn hizmeti sömürülmesi söz konusu, bunu denemiş değilim.