• Türkiye'nin En Güncel SEO Ajansı
  • info@seosefi.com
  • 0543-5675850

Site Hızlandırma Teknikleri

Site hızlandırma optimizasyonu SEO ve ziyaretçi için önemli bir faktördür. Site hızınızı arttırarak hemen çıkma oranını düşürebilir, ziyaretçilere daha performanslı bir içerik sağlayabilir ve Google üzerinde organik arama sonuçlarında yükselmenizi sağlayabilirsiniz. Site hızını etkileyen birçok faktör vardır ve bu faktörler 2’ye ayrılır.

  1. Sunucu Tabanlı: Kullandığınız hostinge bağlı olarak veri iletim hızı değişir. SSD disk kullanımı ve Litespeed eklentisinin sunucuda kurulu olması site hızını sunucu tabanlı arttıran özelliklerden birkaçıdır. Siz eğer ücretsiz hosting kullanıyorsanız bunlara müdahale edemezsiniz fakat kaliteli firmalardan hosting satın alarak sunucu tabanlı hızınızı garanti altına alabilirsiniz. İnternet üzerinden hosting alacağınız firma hakkındaki müşteri yorumlarını okuyarak fikir elde edebilirsiniz.
  2. İçerik Tabanlı: Kullandığınız script, tema ve eklentilere bağlı olarak hızını etkileyen faktördür. Bunlara kendiniz müdahale edebilirsiniz ve site hızınızı arttırmak için çalışmalar yapabilirsiniz. Bu yazımızda içerik tabanlı site hızı arttırma yöntemlerine değineceğiz.

Site Hız Ölçümü

Google’ın hazırlamış olduğu PageSpeed Tools aracı ile sitemizin masaüstü hızını ve mobil hızını ölçebilir ve bu araçtan alacağımız sonuç ile sitemizi hızlandırma çalışmaları yapabilirizsiniz. Google analizi sonucunda bize sitemizin hızını yavaşlatan sorunları ve çözüm önerilerini sunacaktır.

Hız ölçüm aracı: https://developers.google.com/speed/pagespeed/

google-pagespeed-insights

CSS ve Javascript Optimizasyonu

CSS ve Javascript günümüz siteleri için vazgeçilmez bir birliktelik oluşturan iki yazılım dilidir. Fakat sitemizi görüntü ve işlevsel bakımdan iyileştiren bu diller sitemizin yavaşlamasına neden olmaktadır. Peki biz css ve js dosyalarımızı nasıl optimize ederek sitemizin hızını arttırabiliriz?

CSS Nedir?

CSS’in açılımı Cascading Style Sheets’dir ve Basamaklı Stil Şablonu anlamına gelir. Kullanım olarak web sitelerinde kullanılan html kodlarına görüntü olarak şekil vermek için kullanılır. Bütün web siteleri istisnasız css kullanır ve sitelerinin tasırımını bu şekilde oluşturur.

Javascript Nedir?

Javascript ile html taglarını kontrol edebilirsiniz. Tasarım için sabit bir görüntüsü olmamasına rağmen genellikle hareketli nesnelerde kullanılır. Örneğin bir slayt gösterisi, uyarı penceresi ve anket gibi sistemlerde javascript dili kullanılır.

1- Minify (Sıkıştırma)

Bu yöntem ile css ve js dosyalarında kullanılan gereksiz boşluk ve karakterleri silerek dosyanın boyutunu düşürebiliriz. Bu şekilde sitemizin hızında artış meydana gelecektir. Örnek olarak 150kb olan bir css dosyasını bu şekilde sıkıştırarak 80kb gibi bir boyuta düşürebiliriz. Sıkıştırma sistemini aşağıdaki örnek kod ile özetleyebiliriz.

main-qimg-cdc4af9ffc610948f508081ee1818b0b

Sıkıştırılmamış css kodu:

.logo

{

background-color: #888;

width: 100px;

border: 2px solid #111;

}

.logo hover

{

border: 2px solid #ccc;

background-color: #555;

opacity: 0.9;

}

Sıkıştırılmış css kodu:

.logo{background-color: #888;width: 100px;border: 2px solid #111;}.logo hover{border: 2px solid #ccc;background-color: #555;opacity: 0.9;}

Aynı css örneğinde olduğu gibi js kodlarında da sıkıştırma işlemini mutlaka yapmalısınız. Bunun CSS Minifier ve JS Minifier aracını kullanabilirsiniz. Aracı kullanmadan önce mutlaka Sistem yedeğinizi almanızı tavsiye ederiz.

2- Birleştirme

files-html_-css_-php_-js

Sitelerde sadece bir adet css ve js dosyası bulunmaz. Bazen bu dosyaların sayısı 10’un üzerine bile çıkabilmektedir ve bu gereksiz sorgu ve kod fazlalığı anlamına geliyor. Birden çok css ve js dosyalarını aynı dosya içine ekleyerek tek bir sorgu ile bütün css dosyalarını çağırabiliriz ve bu işlem sitemizin hızını arttıracaktır.

Birleştirmeden önce:

  • style.css
  • slider.css
  • bootstrap.css
  • footer.css
  • header.css
  • site.js
  • jquery.js
  • bootstrap.js
  • slider.js

Burada bulunan style, slider ve diğer css dosyalarını açıyoruz ve eğer bir framework kullanıyorsak başa onu koyacak şekilde sırasıyla kopyalayarak tek bir dosyaya yapıştırıyoruz. JS dosyalarında ise öncelikle jquery, sonrasında framawork ve son olarak diğer js dosyalarını ekliyoruz.

Birleştirdikten sonra:

  • yeni.css
  • yeni.js

Resim Optimizasyonu

Resimleri optimize ederek daha hızlı açılmasını ve daha az yer kaplamasını sağlayabilirsiniz. Bunun için yapılması gereken adımlar;

1- Boyutlandırma

Sitemizde kullanacağımız kısmın boyutuna göre resimlerimizi boyutlandırmalıyız. Bu işlemi yaptığımızda gereğinden fazla büyük bir resim çağrılmayacak ve resmin boyutu küçüldüğünden resimlerin yüklenme hızı artacaktır. Örnek olarak blog sitemizin öne çıkarılan göreli 250×250 piksel ise bizde kullanacağımız resmi Photoshop veya Paint gibi programlarla basit bir şekilde yeniden boyutlandırabilirsiniz.

screenshot_4

2- Resim Optimize Aracı

İnternet üzerinden birçok resim optimizasyon aracı bulabilirsiniz fakat Optimizilla aracını sizlere tavsiye ediyoruz. Bu aracı kullanarak resimlerinizin boyutunu %80’e kadar düşürebilirsiniz.

Görselde de görmüş olduğunuz gibi görüntü kalitesinde hiçbir bozulma olmadan resmin boyutunu 60% oranla 42 kb’den 16 kb’a düşürdük. Buda görselin yüklenmesini süresini çok fazla etkileyecektir.

screenshot_4

Cache Kullanımı

screenshot-3

Cache Nedir?

Cache, bellek anlamına gelmektedir. Cache standart olarak bir web sitesine girdiğinizde o sayfayı tarayıcının belleğinde depolar ve bir sonraki girişinde siteye sorgu göndermek yerine belleğinde tuttuğu veriyi kullanıcıya gösterir. Ayrıca gelişmiş cache yazılımları site içinde bir klasör oluşturarak siteye giren bir kişinin görüntülediği sayfayı veriyi bu klasöre kaydeder. Sonrasında o sayfaya giren başka bir kullanıcıya sitede saklanan veri gösterilerek veritabanına sorgu gönderilmeden hızlı bir şekilde siteyi görüntüleyebilir.

WordPress için Cache

wordpress-plugins

WordPress sistemler için çeşitli cache eklentileri mevcuttur ve bu eklentiler sitenize giren ilk kullanıcının görmüş olduğu html çıktısını FTP içindeki bir dosyaya kaydeder ve sonrasında gelen tüm ziyaretçilere aynı HTML dosyayı gösterir. Bu şekilde PHP ve SQL sorguları olmayacağı için sitemizde 90%’a varan bir hızlanma görebilirsiniz.

Tavsiye ettiğimiz cache eklentileri:

  • WP Fastest Cache (Türk yapımı bir wordpress cache eklentisidir.)
  • W3 Total Cache
  • WP Super Cache
  • ZenCache
  • Hyper Cache
  • WP Rocket

Yukarıda listelediğimiz wordpress eklentileri kendini kanıtlamış köklü eklentilerdir. Kendi isteğinize göre beğendiğiniz veya kullanım kolaylığa göre istediğiniz birini sitenizde kullanabilirsiniz.

Sayfa Hız Optimizasyonu Eğitim Videosu

Sayfa hız optimizasyonu videomuzu izleyerek sizde sitenizin hızını arttırabilirsiniz.

Yukarıda sizlere anlatmış olduğumuz yöntemleri uygularsanız Google Pagespeed puanınızda ve site hızınızda gözle görünen bir değişiklik olacaktır. Bununla bağlantılı olarak sıralamanızda da yükselmeler göreceksiniz. Unutmayın Google daima hızlı siteleri sever.

Hakkında

Seo Şefi

Kurumsal ve Bireysel SEO Danışmanlığı Hizmeti. Organik Seo Uzmanı. Google top contributor

Pingleme servisleri kullanımı
Pingleme servisleri kullanımı ...
Geri
Penguin Güncellemesi Yayınlandı ...
İleri
Penguin Güncellemesi Yayınlandı
YORUM YAZIN