Site İçi SEO - Nesneler

Site İçi SEO - Nesneler

Site İçi SEO - Site İçi Nesneler konusuna bir göz atalım.

JAVASCRİPTLER

JavaScript'ler gelişen web teknolojisi ve geniş kullanım alanlarının oluşması sebebiyle web sitelerinin vazgeçilmezleri arasında yer almaktadır. Bir hareketlilik ile görselliği aynı anda yaşatan JavaScript'ler, sitelerde pek çok farklı amaç ve uygulamalar için kullanılabilmektedir.

Bir web sitesi oluşturulurken görselliği dışında performansa da önem verilmelidir. Sıkça kullanılmaya başlanılan JavaScript'ler, kullanım şekilleri önemsenmediği zaman sitede aşırı yük oluşturarak siteyi fazlasıyla yavaşlatabilmektedir. Bu yazımızda, JavaScript'lerin daha etkin kullanılarak sitelerin nasıl daha hızlı hale getirilebileceğiniz anlatacağız.

Html içi JavaScript

İnline js olarak da anılan HTML içi JavaScipt, harici bir kaynaktan çağırılmayarak HTML kod yapısı içerisinde 

<script type="text/javascript"></script>

şeklinde yerleştirilerek sitede HTML kodu gibi görünen ve gereksiz yer yük olan bu tür kodlamalar için kullanılmaktadır.

Örnek olarak aşağıda HTML için kullanılmış bir JavaScript kodu bulunmaktadır.

<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1887021-5"); } cathc(err) {}
</script>

Bu kod, sitenin HTML dosyasını boyutunu gereksiz yere arttırır.

<script type="text/javascript"> ve </script>

komutları arasındaki JavaScript kodlarını kopyalayarak sayac.js gibi bir javaScript dosyası içerisine yapıştırarak sunucuya yüklüyoruz ve inline JavaScript kodunu aşağıdaki gibi düzenliyoruz.

<script type="text/javascript" src="sayac.js"></script>

Yukarıda yer alan kod ile sunucuya yüklediğimiz kod dışarıdan bir kaynak olarak çağırıyoruz. Sonuç olarak hem HTML boyutunu küçültmüş oluyoruz hem de JavaScript kodunun harici bir kaynaktan çağırılarak site açılırken sitedeki tüm kaynakların bölüm bölüm yüklenerek daha hızlı açılmasını sağlıyoruz.

Örnek olarak belirttiğimiz JavaScript kodu boyut olarak küçük olduğu için sitenin yavaşlığını etkileyecektir. Daha büyük boyutlardaki JavaScript kodlarına bu işlemi uyguladığımızda site hızının etkisi gözle görülür şekilde fazla olucaktır.

Html dosyanızda sadece JavaScript değil, CSS kodlarını da azaltabilirsiniz. İlerleyen zamanlarda İnline CSS makalesi sitemizde bulabilirsiniz.

JavaScript Konumlandırma

JavaScriptler web sitelerinde genellikle, görselliği arttırmaktan ziyade, kullanışlılık ve uygulamarda kullanılmaktadır. Dolayısıyla bir web sitesi yüklenirken bu kullanılabilir olan uygulamalar ilk etapta gerekli olmazlar. Bu amaçla JavaScript kodlarını sitenin alt kısımlarına yerleştirmek, HTML yüklendikten sonra JavaScript'lerin yüklenmesini sağlayacak ve sitenin daha hızlı açılması izlenmi elde edilecektir.

JavaScript Sıkıştırma Optimize Etme

JavaScript'ler yazılılırken okuma ve düzenleme kolaylığı ön planda tutulur. Buna göre kodlar arasında boşluklar, boş satırlar fazlasıyla yer alır. Bu boşluk ve javaScript kod yapısına fayda sağlamayan açıklamaların ortadan kaldırılması JavaScript dosya boyutunu azaltacak ve daha hızlı yüklenmesini sağlayarak siteyi hızlandıracaktır.

JavaScript kodlarını sıkıştırmak için aşağıda yer alan siteyi kullanabilirsiniz.

https://jscompress.com/

STİL DOSYALARI

Site yapımlarında görselliğe yüksek oranda önem verilmesi gerekir. Bu görsellik CSS dosyası ile sağlanabilir. CSS dosyaları siteler için büyük önem taşır ve görsellik ancak CSS dosyaları ile geliştirilebilir. CSS dosyaları konumlandırılması, optimize edilmesi ve yeniden yapılandırılması ile hızlı ve görsel bir web sitesi elde edebilirsiniz. Bu makaleyi okuduktan sonra sitelerinizin CSS dosyalarında büyük oynamalar yapacaksınız.

Inline CSS

Her internet kullanıcısı, sitelere girince hızlı açılması ve hızlı dolaşılmasını ister. Sitede bulunan herhangi bir sayfadaki CSS kodlarını CSS dosyasından küçük bir kod yardımıyla çekerek sitenin hızlanmasını sağlayabilirsiniz. Örneğin,

span style="font-size:9px;"

kodunda style="" de gördüğünüz style kodlarını direk yazmak yerine span class="a" kodunu yazabilirsiniz. Bu kodu ekledikten sonra CSS dosyanıza söyle bir kod ekleyin;

.a { font-size:9px;}

Bu kod ile sitedeki sayfanın boyutunu azaltıp, gerekli kodları CSS dosyanızdan çekebilirisiniz. Hem sayfa hızlanmış olur, hem de SEO açısından daha yararlı olur.

Bu yöntemin dışında bir yöntemimiz daha mevcut. Bazı sistemlerdin hazır temalarında sitenin üzerine direk şu kod eklenir;

<style type="text/css">
.wp-polls .pollbar {
margin: 1px;
border: 1px solid #c8c8c8;
}
</style>

Bu kodlar da diğerleri gibi Html sayfasını gereksiz yere yavaşlatır. Bunun yerine üstteki kodlardan şunları alıp CSS dosyasına ekliyoruz;

.wp-polls .pollbar {
margin: 1px;
border: 1px solid #c8c8c8;
}

Daha sonra

<style type="text/css"></style>

kodlarını silip yerine şu kodu ekliyoruz;

<link rel="stylesheet" type="text/css" href="style.css" />

Son olarak üstteki kod da ekledikten sonra işlemimiz tamamlanıyor.

CSS Conbine

Birden fazla stil dosyası, sitelerde hem gereksiz sorgulama HTML kod boyutunun artması ve SEO açısından da olumsuz bir durum oluşturacaktır. Bu sebeple bir sayfada birden fazla Css stil dosyası çağırmak gereksiz ve hız ve kalite açısından zararlı bir durumdur. Yapılması gereken bu CSS dosyalarının kodları tek bir CSS'de birleştirilerek tek stil dosyası kullanılabilecek sınıflar özel olarak dikkatle belirlenmelidir. Sınıf kodlarının da birden fazla tekrar etmesi önlenmelidir.

CSS Optimize

Stil dosyaları, düzenleme kolaylığı olması sebebiyle okunabilirliği arttırmak için boşluklar bırakılarak ve satırlar atlatılarak yazılırlar. Bu şekilde yazılan stil dosyaları okunurluğu fazla olmasıyla birlikte dosya boyutları da büyümektedir. Siteler açılırken stil dosyalarının hızlıca yüklenerek sitenin görsel düzeninin en kısa sürede oluşturulması için stil dosyaların boyutu kodlama yapısı ile minimuma indirilmelidir.

Stil dosyalarının kodlama boyutlarını azaltmak için, belirli sınıflar tek satırda toplanabilir, boşluklar silinebilir, aynı içeriğe sahip farklı sınıflar bir başlık altında toplanabilir. Tüm bu işlemleri yapmak kodlama bilmeyen kişiler için zor olması sebebiyle, bunların tamamını ve daha fazlasını istedğiniz özelliklere uygun seçenekler ile Clean CSS sitesinden rahatlıkla yapabilirsiniz.

CSS Sıkıştırma

Html kod yapısı ile küçültülen stil dosyaların gzip gibi çeşitli sıkıştırma teknikleriyle daha hüçük boyutundan %70'e kadar tasarruf yaparak, stil dosyalarının daha hızlı yüklenmesiyle siteler hızlandırılabilir.

CSS Gzip

Scripts Gzip eklentileri ile stil dosyanızı sıkıştırabilir veya Wordpress olmayan siteler için aşağıda yöntem kullanabilir.

<link rel="stylesheet" type="text/css" media="screen" href="stil.css"/>

sonuna .php eklenerek düzenlenir.

<link rel="stylesheet" type="text/css" media="screen" href=stil.css.php/>

ve bu PHP stil dosyasının en üstüne ve en altında sırasıyla aşağıdaki kodlar eklenir.

<?php if(extension_loaded('zlib')){ ob_start('ob_gzhand-ler'); } header("Content-type: text/css"); ?>
<?php if(extension_loaded('zlib')){ ob_end_flush(); } ?>

CSS Konumlandırma

Sitelerin hızlı yüklenmesi izlenimi en çok kazandıran öğe stil dosyalarıdır. Çünkü stil doslarının yüklenmesiyle birlikte görsellik gemen oturur ve sitenin hızlı açılması izlenimi oluşur. Stil dosyasını önce veya sonra yüklenmesi toplam hız olarak aynı sürede yüklenmesini sağlarken, görselliğin bir an önce ekrana gelmesi sitenin hızlandığı düşüncesini oluşturucaktır. Bu sebeple stil dosyaları sitelerin üstlerine koymaya özen göstermek gerekir.

Yunus Emre SAK
Eğitmen • Yazar • Girişimci
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git