Site Hızı Nasıl Optimize Edilir? Web Sitesi Hızınızı Artırın!

Herkese merhabalar. Bugün sizlere web siteleri için oldukça önemli bir konuda yazacağım. Bu konu ise site hızınızı nasıl artıracağınız hakkındadır. Keyifli okumalar :)

Bu yazıda ilk kez Wordpress içinde tavsiyelerde bulunacağım. Her site hızlandırma önerisinde hem Wordpress hem de özel siteler için tavsiyeler vereceğim.

Bu yazıda yer alan konular:

Site Performansı/Hızı Nedir?

Site Performansı/Hızının Önemi

Site Performansını Ölçmek

Site Hızı Nasıl Optimize Edilir?

1. Doğru Hosting Seçimi

2. Css ve JS Dosyalarını Sıkıştırmak

3. Doğru Tema Seçimi

4. Gzip Sıkıştırma Yapmak

5. Görselleri Optimize Etmek

6. CSS ve JS Dosyalarını Ertelemek

7. Tarayıcı Önbellekleme ve Cache Eklentileri

8. Veritabanını Temizlemek

Site Hızı Nasıl Optimize Edilir? Web Sitesi Hızınızı Artırın!

Site Performansı/Hızı Nedir?

Site hızı; bir web sayfasının tamamen yüklenme hızıdır. Bu hız birçok faktöre bağlıdır. Örneğin sayfa içerisinde bulunan kodlardan görsellere, yazı tipinden tüm metne kadar herşey site hızına etki eder.

Site Hızı Nedir?

Site Performansı/Hızının Önemi

Şimdi düşünün. Siz bir bilgiyi öğrenmek için bir web sitesine giriyorsunuz ama site hızlı açılmıyor. Yavaş yavaş açılıyor ve bu canınızı sıkıyor. Bu nedenle bu sayfanın belki de çok yararlı olmadığını düşünüp siteyi terk ediyorsunuz.

İşte bu tür olaylar hergün yüz binlerce defa yaşanmaktadır. Bir site ne kadar yavaş açılırsa kullanıcılar o kadar hızlı çıkış yapıyor. Bu nedenle de o sitede ortalama oturum süresi çok yüksek olamıyor.

Google verilerine göre bir web sayfasının 1 saniye fazladan geç açılması kullanıcıların %20'sinin siteyi terk etmesine yol açıyor. Aynı şekilde eğer o site daha hızlı açılıyorsa kullanıcılar o sayfada bulunmaya devam ediyor.

Ayrıca bir web sitesinin hızı SEO açısından altın değerinde olduğunu rahatlıkla söyleyebiliriz. Eğer web sitesi hızınız yüksekse göreceksiniz ki sıralamanız bir o kadar yüksekte olacaktır.

Site hızının önemini bir örnek ile açıklayayım. Sizin sitenizde bir bilgi yazılı ve bu oldukça güzel. Ancak web sayfası uzun süre yükleniyor ve kullanıcılar site içerisinde birşey olmadığını düşünerek siteyi terk ediyorlar. Bu oldukça can sıkıcı olmalı.

Bir web sitesinde içerik herşey değildir. Eğer hızı yakalayamazsanız geride kalırsınız.

Site Performansını Ölçmek

Web sitemizi hızlandırmadan önce siteyi yavaşlatan tüm herşeyi iyi analiz etmemiz gerekir. Ayrıca sitenin kaç saniyede açıldığı, nelerin siteyi yavaşlattığını bilmek önemlidir.

Burada karşımıza bir sürü araç çıkmaktadır. Bu araçlar sitenin açılış hızını ve hızlandırma fırsatlarını bize sunar. Bunun sayesinde siteyi hızlandırmak için doğru stratejiyi oluşturabiliriz.

Şimdi size 2 tane performans ölçümü yapan araç göstereceğim ve bunların nasıl çalıştığını anlatacağım.

1. PageSpeed Insights

Google tarafından geliştirilen bu araç, web sitesi performansını 100 üzerinden hesaplayan bir araçtır. Bu aracın amacı size sitenizin açılış hızını göstermek değildir. Asıl amaç web site hızını artırmak için bulunan fırsatları size sunmaktır.

Örneğin web sitenizde css dosyalarını sıkıştırmadıysanız size bir fırsatın var olduğunu ve bunu değerlendirebileceğinizi söyler. Böylece sitenizi doğru bir şekilde optimize edebilirsiniz.

Ayrıca bu araçta verilen verilerin güvenli ve doğru olduğunu söyleyebiliriz. Ne de olsa sektörün devi tarafından oluşturulmuş bir araçtır :)

Ama bu aracı kullananların en büyük şikayeti ise mobil performans puanını düşük göstermesi. Ama bu dediğim gibi sitenin hızını göstermez. Size sunulan fırsatları gösterir. Ve mobil cihazlarda optimizasyon imkanları kısıtlı olduğundan dolayı düşük gözükebilir.

Puanlama sistemi ise şöyle çalışır:

  • Eğer elinizden geldiğince tüm fırsatları değerlendirdiyseniz muhtemelen 90-100 arası bir puan alırsınız.
  • Eğer bazı fırsatları değerlendirdiyseniz ama eksiklikler varsa muhtemelen 50-89 arası bir puan alırsınız.
  • Eğer site hızınız oldukça kötüyse ve fırsatları değerlendirmediyseniz muhtemelen 0-49 arası bir puan alırsınız.

Puanlama sistemi genel olarak böyle çalışmaktadır. Bu puanlama sistemi kesin bilgiler içermez ama kullanabileceğiniz fırsatları içerir.

Bu aracı kullanması hem ücretsiz hem de kolaydır. Tek yapmanız gereken PageSpeed Insights sitesine gelip URL adresini yazmaktır.

Google PageSpeed Insights

2. GTmetrix

İkinci kullanacağımız araç ise GTmetrix aracıdır. Bu araç size hem sayfa hızınızı hem de YSlow skorunuzu 100 üzerinden gösterir. Ayrıca sayfa yüklenme süresini de gösterir.

Bu araç Google PageSpeed'in biraz daha gelişmiş versiyonu gibidir. Bu araçta size site hızını etkileyen faktörleri gösterir. Ve bu faktörler için çalışma yapıp yapmadığınızı, o faktörden ne kadar etkilendiğinizi gösterir.

Örneğin bir satır bile olsa sıkıştırılmamış bir Javascript kodu mu var? Onu göstererek size bunu sıkıştırmanızı tavsiye eder. Yani ince ayrıntısına kadar siteniz için optimize etme çözümleri sunar.

Kullanması ise oldukça basit ve ücretsizdir (Pro paketi hariç). Yapmanız gereken GTmetrix sitesine gitmek ve URL adresinizi yazmaktır.

GTmetrix

Site Hızı Nasıl Optimize Edilir?

Az önce bahsettiğim iki aracı kullanarak siteyi detaylıca analiz ettik. Site hızını artırmak için neleri değiştirmemiz gerektiğini artık biliyoruz. Peki ya bu nasıl olacak?

Şimdi sizlere birkaç madde ile hem wordpress hem de özel yazılım siteler için site hızını artırmayı anlatacağım.

1. Doğru Hosting Seçimi

Sitenizin performansını öncelikle sizin aldığınız Hosting hizmeti belirler. Eğer siz siteniz için yeterli bir Hosting seçtiyseniz bu konuda hiçbir sorun yaşayacağınızı düşünmüyorum.

Ancak eğer kötü, yetersiz bir hosting seçtiyseniz bu sizin sitenizi yavaşlatacaktır. Peki ya doğru Hosting'i nasıl seçeceğiz?

Şu an sadece sitenin performansı için konuşacağım. Öncelikle yeterli bir alanı olması gerek. Aksi takdirde sitede görsel ve kod saklanması zorlaşacaktır. Bu nedenden dolayıda siteniz yavaşlayacaktır.

Alacağınız Hosting paketinde sizin aylık kullanıcı hedefinize göre bir trafik kotası olduğuna emin olun. Çünkü eğer o sınırı aşarsanız site bir sonraki aya kadar sıkıntı yaşayacaktır.

Ayrıca yeterli işlemci ve ram olduğuna dikkat edin. Eğer yetersiz olursa bu sitenizi yavaşlatacaktır.

Doğru Hosting seçimi için yazmış olduğum şu yazıya bakmanızda fayda vardır. Linki aşağıda:

Hosting Nedir? Hosting Alırken Nelere Dikkat Edilmeli?

2. CSS ve JS Kodlarını Sıkıştırmak

Bir web sitesinin görseller ve metinler haricinde kodlardan oluştuğunu biliyoruz. Bu kodlar web sitesinin yüklenmesinde önemli bir rol oynar. Bu kodlar ne kadar hızlı getirilirse sayfa da o hızda açılacaktır. Peki ya bu kodların nasıl hızlıca gelmesini sağlarız?

Tabii ki de bu dosyaların boyutunu küçülterek. Dosyaları küçültürsek bu kodlar daha hızlı gelecektir. CSS ve JS dosyalarında boşluklar o kodların çoğunu oluşturabilmektedir. Hatta öyle ki benim kodlarımın yüzde kırkı boşluklardan oluşuyordu :)

Eğer bir Wordpress kullanıcısı iseniz W3 Total Cache gibi eklentiler kullanabilirsiniz. Eklentiyi kurduktan sonra otomatik olarak CSS ve JS kodları muhtemelen küçültülecektir. Eğer olmazsa bunu ayarlar kısmından halledebilirsiniz.

Eğer manuel şekilde yapmak isterseniz, CSS ve JS kodlarını sıkıştırmak için bir site bulunuyor. Bu site sayesinde kodları sıkıştırıp kullanabiliyoruz. Hemen iki örnek ile göstereyim.

CSS dosyasını sıkıştırmak için csscompressor.com adındaki siteye gidiyoruz. Kullanacağımız CSS kodlarını o kod kısmına yerleştiriyoruz. Ve "Compress" butonuna basıyoruz. Ve kodumuz sıkıştırıldı :)

Css Kodlarını Sıkıştırmak

Gördüğünüz gibi kodlarımı 42.56% oranında sıkıştırdı. Bunun sayede bu CSS kodları yüzde kırk daha hızlı yüklenecek :)

JS kodlarıda aynı şekilde yapılıyor. javascript-compressor.com sitesine giderek aynı işlemleri uyguluyoruz.

3. Doğru Tema Seçimi

Özellikle Wordpress sitelerini en çok yavaşlatan faktörlerden birisi kesinlikle temadır. Yanlış bir tema seçimi bir siteyi çok ama çok yavaş bir hale getirebiliyor.

Doğru bir tema için bazı belli başlı özellikler olmalıdır. Bunları sıralayacak olursak:

  1. Temiz bir kodlaması (siteyi zorlamayacak) olmalıdır.
  2. Sorgu sayısı olabildiğince az olan bir tema olmalı.
  3. CSS ve JS kodlarının sıkıştırılmış olması işe yarayacaktır.
  4. SEO uyumlu olması elbette en önemli olanlardan birisidir.
  5. Önemli eklentiler ile uyumlu bir tema olmalıdır. 

Bunun gibi özellikler bir temada kesinlikle olması gerekir. Böylece siteniz için en uygun, en işlevsel temayı bulmuş olursunuz.

4. Gzip Sıkıştırma Yapmak

Gzip; bir sıkıştırma şeklidir. Gzip sıkıştırma sayesinde siteniz bir şekilde sıkıştırılmaktadır. Bu sayede sitenizin açılış hızı önemli ölçüde artabilmektedir.

Ayrıca fazla trafik tüketen siteler, yani uzun süredir var olan ve belli bir seviyeye ulaşmış siteler için Gzip sıkıştırması yapmak oldukça büyük fayda sağlayacaktır. Bu sayede trafiğinizi kontrol altına almış olursunuz.

Gzip sıkıştırması özellikle Linux altyapısı kullanan siteler için tercih edilmektedir. (Örneğin Wordpress)

Peki ya Gzip sıkıştırması nasıl yapılır? Hadi birlikte bakalım.

Bunun için tercih edilen üç yöntem vardır. Birincisi cPanel aracılığı ile Gzip sıkıştırması yapmaktır. Öncelikle cPanel'e giriş yapıyoruz.

Daha sonra Yazılım kısmından "Web Sitesini Optimize Edin"e (Optimize Website) tıklıyoruz. Karşımıza 3 tane seçenek çıkıyor.

Gzip Sıkıştırması Yapmak cPanel

Bu seçenek hazır olarak "Devre Dışı" olacaktır. "Tüm İçeriği Sıkıştır" kısmını işaretleyip ayarları güncelliyoruz. Ve sitede artık Gzip sıkıştırma mevcut :)

İkinci yöntem ise .htaccess dosyası ile Gzip sıkıştırmayı aktif hale getirmektir. .htaccess dosyamıza giriyoruz. Eğer sunucunuz mod_deflate destekliyorsa aşağıdaki kodları kullanın.

  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/x-font  
  AddOutputFilterByType DEFLATE application/x-font-truetype  
  AddOutputFilterByType DEFLATE application/x-font-ttf  
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/opentype
# For Older Browsers Which Can't Handle Compression
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Eğer sunucunuz mod_deflate desteklemiyorsa şu kodları da kullanabilirsiniz:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</ifModule>

Bu kodları .htaccess dosyasına yerleştirdiğinizde artık Gzip aktif hale gelecektir.

Üçüncü yönteme gelecek gelelim. Özellikle Wordpress kullananlar için bir eklenti mevcut. GZip Ninja Speed Compression gibi eklentileri kurarak Gzip sıkıştırma yapabilirsiniz. Ama unutmayın ki fazla eklenti kullanmak siteyi yavaşlatabilir. Bu nedenle bunu çok önerdiğimi söyleyemem.

Gzip sıkıştırmanın çalışıp çalışmadığını yine GTmetrix ile öğrenebilirsiniz.

Ayrıca WebSitePlanet aracı ile de Gzip kontrolü yapmak mümkündür. Bu aracın Gzip kontrolünde daha iyi olduğunu söyleyebilirim.

5. Görselleri Optimize Etmek

Görseller bir web sitesinin hızını en çok etkileyen faktörlerden birisidir. Görselleri doğru şekilde optimize etmek site hızını büyük oranda artıracaktır. Peki ya görselleri nasıl optimize ederiz?

Bu konuda bir yazım vardı. Oradan bakabilirsiniz:

Görseller Nasıl Sıkıştırılır? Web Sitenizin Hızını Artırın!

Ama kısaca bahsedecek olursak compressor.io tarzı sitelerde resimleri sıkıştırabiliriz. Birçok formatta resim sıkıştırarak görselleri en iyi şekilde optimize etmiş oluruz.

Görselleri optimize ederek hem alandan hemde hızdan kazanmış oluruz. Aşağıda ki örneği inceleyebilirsiniz:

Görselleri Optimize Etmek

Görselleri optimize ederek görsellerden %40'a varan tasarruf bile yapabiliriz.

6. CSS ve JS Dosyalarını Erteleme

CSS ve JS dosyalarını sıkıştırmış olsanız bile önemli ölçüde site hızını etkiliyor olabilir. Bu nedenle burada CSS ve JS dosyalarını erteleme devreye girer.

JS dosyalarını ertelemek için tercih edilen 2 yöntem olduğunu söyleyebiliriz. Birinci seçeneğimiz JS dosyasını body etikenin hemen üstüne koymaktır. Yani site kodlarının en altına yerleştirmektir.

İkinci yöntem ise defer özelliğini kullanmaktır. Bu özellik sayesinde JS dosyası tüm sayfa yüklendikten sonra gelir. Örnek kullanımına örnek verecek olursak:

<script src="script.js" defer></script>

Not: Ertelenmek istenen JS dosyalarının hayati önem taşımadığına emin olun. Aksi halde sayfa açılırken bazı hatalar oluşabilir.

CSS dosyaları içinse async özelliği kullanılabilir. Ama CSS dosyalarını ertelemenizi çok fazla önermem. Çünkü sayfa açıldığında bazı hatalar ve istenilmeyen durumlar yaşanabilir.

Bu özelliğin kullanımına örnek verirsek:

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

Not: Ertelenmek istenen CSS dosyalarının hayati önem taşımadığına emin olun. Aksi halde sayfa açılırken bazı hatalar oluşabilir.

7. Tarayıcı Önbellekleme ve Cache Eklentileri

Bir web sitesini bazı insanlar defalarca kez ziyaret ediyor olabilir. Peki ya bu defalarca ziyaret etmelerinden nasıl faydalanabiliriz? Tabii ki tarayıcı önbelleği ve cache kullanarak.

Tarayıcı önbellekleme sayesinde siteye birden fazla giriş yapanların önbelleğine sitenin görselleri, CSS ve JS kodları gibi birkaç site elemanı yerleştirilir. Bu sayede bu kullanıcı daha sonra siteyi ziyaret ederse site daha hızlı açılır.

Belki bu tarayıcı önbellekleme kısa vadede işe yaramayabilir. Ama uzun vadede işe yarayacağı kesindir.

Tarayıcı önbellekleme yapmayı göstermeden önce uyarmak isterim. Tarayıcı önbelleklemeyi yaptığınız takdirde site tasarımında ve JS kodlarında yaptığınız değişiklikler önbellek süresi dolmadan gözükmez. Bu nedenle tarayıcı önbellekleme site tasarımı ve diğer şeyler açısından tamamlanmış bir sitede yapılmalıdır.

Tarayıcı önbelleklemeyi aktif etmek için .htaccess dosyasını açmanız gerekli. Sonra da aşağıdaki kodları yerleştirmelisiniz:

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 7 days"

## EXPIRES CACHING ##

Bu kodlarda süreleri kendinize göre ayarlayabilirsiniz.

Özellikle Wordpress altyapısı kullanan siteler için cache eklentisi kullanmak kaçınılmaz olmaktadır. Cache eklentileri sayesinde site hızını yükseltmek oldukça kolay ve rahat bir hale geliyor.

Önemli olan size uygun olan eklentileri kullanmaktır. Benim tavsiyem birçok kişinin kullandığı W3 Total Cache veya LiteSpeed Cache eklentileridir. Oldukça kullanışlı olduklarını söyleyebilirim :)

8. Veritabanını Temizlemek

Özellikle Wordpress altyapısı kullanan sitelerde en büyük sorunlardan birisi veritabanı olmaktadır. Veritabanı çok fazla dolu olunca performansı bir hayli etkileyebilmektedir. Bu yüzden de site yavaşlayabilmektedir.

Veritabanını temizlemek oldukça uzun sürebilmektedir. Tek tek elle gereksiz tüm verileri silmek oldukça uğraştırıcıdır. Ancak LiteSpeed Cache gibi eklentiler kullanarak veritabanını temizleyebilirsiniz.

Örneğin LiteSpeed Cache eklentisi ile bakacak olursak, bu eklenti de DB Optimizer adlı bir kısım var. Oradan tüm gereksiz verileri anında silebilirsiniz. Bu kadar basit.

Eğer Wordpress kullanmıyorsanız, özel bir yazılım kullanıyorsanız mutlaka toplu silme işlemleri olması gerekir. Yoksa bu iş çok uğraştırıcı olur :)


Evet, bu yazı da bu kadardı. Elimden geldiğince iyi anlatmaya çalıştım. Yardımcı olabildiysem ne mutlu bana :)

Eğer bu yazıda hata varsa veya eklenmesi gereken maddeler varsa iletişim sayfasından veya aşağıda yorumlar kısmına yazarsanız çok sevinirim. Teşekkürler :)


Yazıyı yazarken yararlandığım kaynaklar:

https://www.hostinger.web.tr/rehberler/gzip-sikistirma

Site Hızı Nasıl Optimize Edilir? Web Sitesi Hızınızı Artırın! | RaBlogin

Raşidin Buğda

Raşidin Buğda

2016-2017 yılından beri web tasarım ve kodlama üzerine çalışıyorum. RaBlogin benim ilk projem ve bu sitede blog yazarak kendimi keşfetmeye ve insanlara yardımcı olmaya çalışıyorum :)

Yorum Yap

Lütfen tüm alanları eksiksiz (Websiteniz yoksa orasını boş bırakın) ve doğru doldurun.

Yorumlar

Bu yazıya yorum yapılmamış. İlk yapan sen olabilirsin.